液体が垂れているような図形「流体シェイプ」の作り方

デザインでよく見かけるあしらいに「流体シェイプ(Fluid Shape)」があります。
液体が垂れているような曲線で出来ている円形のことで、配色によって様々な表現に使えます。
今回はそんな流体シェイプを作る方法についてまとめておきます。
ちなみに、流体シェイプは英語で「Fluid Shape(流動的な形)」や「Blob(インクのしみ)」と言います。
Blobmaker

Blobmakerは流体シェイプを簡単に生成できるサイトです。
使い方は画面下のツールバーで設定して、生成されたシェイプをSVG形式でダウンロードしたり、コードとしてコピーして使用します。
ちなみにIllustratorなどで使用するときは「Copy SVG to clipboard」でクリップボードにSVGをコピーしてペーストすれば貼り付けられます。

わざわざダウンロードする必要がなくなるので便利です。
Figmaプラグイン:Blobs

Figmaの場合はプラグインの「Blobs」を使うと簡単に生成できます。
インストールしたら[Plugins]→[Blobs]を選択して「Blobs」パネルを開きます。

あとはバーを左右に動かして設定を調整し、「Insert」でアートボード上に追加します。
- Complexity:頂点の数
- Uniqueness:曲線の変化率


記事内の画像にマウスホバーした時に画像が半透明になる意味はあるのか?
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
Figma × Keyboard Maestroでどこまで効率化できる?
Illustratorで画像内の複数箇所を切り抜いて書き出す方法
Figmaのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Figmaでサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」
Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定
Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
BetterTouchToolでHTMLを使った表示を作成できる「Floating WebView」機能
Visual Studio Codeの基本|概要やインストールから日本語化など最低限の設定方法
Keyboard MaestroのTime of Dayトリガーは「Wireless Network Condition」での条件分岐とセットで使う!
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
MacのGoogle日本語入力のキー設定で単語登録のショートカットキーを追加する方法
Path Finderを使ってキーボードだけでファイル操作する方法(応用編)
npm install時に「cb() never called!」とエラーが表示されたときの解決法
Homebrew Caskで自分がMacにインストールしているアプリの管理を行う