![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/svg_logo.svg){kind=logo}
流体シェイプは、単調になりがちなデザインに動きや親しみやすさを加えられるため、近年のWebデザインで広く活用されています。
本記事では、流体シェイプの特徴や活用シーン、無料で利用できる定番ジェネレーター「Blobmaker」と「Haikei」を使った作成方法を紹介します。
流体シェイプ（Blob）とは
流体シェイプ（Fluid Shape / Blob）とは、液体やインクが広がったような、柔らかく有機的な曲線を持つ抽象図形のことです。
「Blob（ブロブ）」とも呼ばれ、Webサイトやバナー、プレゼン資料などのデザイン素材として広く利用されています。
規則的な円や四角形とは異なり、不規則な形状によってデザインに動きや親しみやすさを与えられるのが特徴です。
また、SVG形式で作成できるため、拡大・縮小しても画質が劣化せず、レスポンシブデザインとの相性も良好です。
流体シェイプの主な活用シーン
流体シェイプは装飾要素としてさまざまな場面で活用されています。
背景やアイキャッチとして使う
シンプルなレイアウトの背景に配置することで、デザインにアクセントを加えられます。
企業サイトやLPのファーストビューでもよく利用されています。
画像の切り抜き（マスク）として使う
人物写真や商品画像を流体シェイプで切り抜くことで、柔らかく印象的なビジュアルを作成できます。
文字周りの装飾として使う
見出しやキャッチコピーの背後に配置することで視線を誘導し、重要な情報を目立たせる効果が期待できます。
流体シェイプを作れる無料ジェネレーター
Blobmaker
Blobmakerは、ブラウザ上で簡単に流体シェイプを生成できる無料ツールです。
スライダーを操作するだけで形状を調整でき、SVG形式でダウンロードできます。
Blobmakerの使い方
- 色
カラーパレットまたはカラーコードを入力してシェイプの色を設定します。 - 頂点の数
頂点数を増やすほど複雑な形状になり、減らすほどシンプルな形状になります。 - 歪み
図形のうねり具合や丸みを調整できます。値を大きくするとより有機的な形になります。 - ダウンロード
作成したシェイプをSVG形式で保存できます。 - コード
SVGコードを直接コピーできます。
HTMLへインラインSVGとして埋め込みたい場合に便利です。 - シャッフル（サイコロ）アイコン
ランダムに新しい形状を生成します。イメージに近い形が出るまで何度でも試せます。
Haikei
Haikeiは背景素材生成ツールとして人気のサービスです。
流体シェイプだけでなく、波形やグラデーションなども作成できます。
Haikeiの使い方
- ジェネレーターの選択
左側メニューから「Blob」または「Blob Scene」を選択します。 - CANVAS
用途に合わせてカンバスサイズやアスペクト比を設定します。 - シャッフル（サイコロ）アイコン
クリックするたびに新しい形状が自動生成されます。 - Style
Solidは塗りつぶし、Outlineは輪郭線のみで表示します。 - Position
シェイプを配置する位置を調整できます。 - COLOR
Backgroundで背景色、Fillでシェイプの色を設定します。 - SHAPE
Complexity：シェイプの複雑さ（凹凸の多さ）を調整
Contrast：うねりや丸みの強さを調整
Size：シェイプの大きさを調整 - DOWNLOAD
SVGまたはPNG形式でダウンロードできます。
SVGで書き出してWebサイトで活用する
BlobmakerやHaikeiで作成した流体シェイプは、SVG形式で書き出すのがおすすめです。
SVGはベクター形式のため拡大・縮小しても劣化せず、ファイルサイズも比較的軽量です。また、CSSやJavaScriptで色やアニメーションを付けやすいというメリットもあります。
背景装飾として配置したり、CSSでアニメーションを付けたりすることで、より印象的なデザインを作成できます。
まとめ
流体シェイプ（Blob）は、Webデザインに柔らかさや動きを与えられる便利な装飾素材です。
無料ツールのBlobmakerやHaikeiを利用すれば、デザインソフトを使わなくてもブラウザ上で簡単に作成できます。
まずはBlobmakerやHaikeiのランダム生成機能を活用しながら好みの形を作り、SVG形式で書き出してWebサイトやバナー制作に取り入れてみましょう。