WEBデザインで近年よく見かけるようになった水滴のような、流体シェイプ。
カクカクとしてしまいがちなWEBデザインに、曲線で柔らかな印象が出ます。アイキャッチにも使えますし、背景やフレームにしても映えますね。
ツールを使うとPhotoshopやIllustratorを開かなくてもシェイプをSVG形式で直感的につくれます。さらにHTMLコードもコピペできるので、とても作業時間の時短になります。
この記事では、流体シェイプがつくれるツールの中からオススメツールを2つ、具体的な使い方と合わせてご紹介します。
○blobs
○blobmaker
どちらも会員登録をせず、ブラウザ上ですぐに利用を始められます。
もちろん無料です。
機能はほぼ同じツールですが仕上がる形に少し差があります。好みに合わせて使い分けていただければと思い、2つご紹介します。ウェブデザインの参考にしていただければ幸いです。
１．ジェネレーター「blobs」の使い方
「blobs」は、流体シェイプのパーツをスライダーで好みの形につくっていけるほか、画像を入れた状態でシェイプをつくっていくこともできます。
■流体シェイプジェネレーター「blobs」
https://blobs.app
それでは機能を①〜⑧まで順番に解説します。
①ランダム：形がランダムに変化する
→大きさや曲線が細かく変わっていきます。右に寄せるほど大きなサイズになります。
②形の変化：角の数を変えられる
→角の数は3（三角形）から20まで変化させられます
③色：シェイプの中に背景色が付く
→デフォルトでも色がありますし、好みのカラーコードを入れることもできます。
④グラデーション：背景色がグラデーションになる
→デフォルトのグラデーションもきれいですし、2色のカラーコードで好きなグラデーションに設定することもできます。
⑤パターン：背景にパターンを入れる
→8種類の用意されているパターン画像をシェイプ内に入れられます。
⑥画像挿入：シェイプ内に画像が入る
→画像はリンクで挿入するのでサーバーにアップロードされている必要有り。
⑦保存：ジェネレーター内に保存されます
→SAVEボタンを押すだけで保存完了です。
↓保存された画面
いくつか形をつくって比較したいときにすごく便利です。
ジェネレーター内に保存する機能って会員登録などしなければならないことが多いですが、”SAVE”を押すだけで保存されるのでありがたいですね。
⑧SVGダウンロード：コードのコピペとDLが可能
ダウンロードしたSVGファイルもIllustratorで開いてみるときれいなパスが付いています。
これでシェイプの準備が完了なので、パスを動かしてつくるよりは、かなり作業が軽減されますね。
ではもう一つ、「blobmaker」の使い方を解説します。
２．ジェネレーター「blobmaker」の使い方
流体シェイプをつくる機能としては、ほぼ「blobs」と同じ使い方ですが、作れる形に少々違いがあるので好みに合わせて使い分けるとよいのではないかと思い、ご紹介させていただきます。
■流体シェイプジェネレーター「blobmaker」
https://www.blobmaker.app
それでは機能を①〜⑥まで順番に解説します。
①色
→カラーコードを入れるかデフォルトの色を選択してシェイプの色を変えられます。
②角の変化
→シェイプの角を増やしたり減らしたりできます。
③形の変化
→曲線の形を変えられます。右にスライダーを寄せるほどうねりのある形になります。
④ダウンロード
→SVG形式のファイルをダウンロードできます。
Illustratorで開いた状態↑です。パスもきれいですね。
⑤コード
→HTMLタグのコピペができます。
⑥ランダム
→色や角の数を保持しながら、形をランダムに変化させられます。
形がすごく大きく変わっていくので、イメージが固定されず、自由な発想につながりそうです。背景にいろいろなシェイプを入れたいときは、これでいくつもつくって組み合わせると早く仕上がりそうですね。
まとめ
数年前から多くのWEBサイトで使われるようになってきた流体シェイプ。
ジェネレーターをつかえば、デザインへの導入のハードルが下がりそうですね。
このような時短になるデザインツールは他にもいろいろとありますので、このブログでも紹介していきます。上手に使っていただければと思います。