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

デザインでよく見かけるあしらいに「流体シェイプ(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のテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
個人ブログにコメント欄は必要なのかどうか
Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」
Figmaのコンポーネント入門|コンポーネントの作成方法から特徴まで
Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで
Figmaで画面遷移図やフローチャートをつくるときに線を自動で引いてくれるプラグイン「Autoflow」
Figma × Keyboard Maestroでどこまで効率化できる?
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Google DriveのmacOSアプリ「バックアップと同期」のインストールと最低限の設定方法
Illustratorをスクリプトで操作する時の基本
Chrome拡張機能の「1Password」と「1Password X」の違いはなに?どちらを使えばいいの?
WordPressのデータを取得できるWP REST APIの使い方
gulp-plumberとgulp-notifyでgulpエラー時にデスクトップで通知がくるようにする
Path Finder 8のサイドバー設定がたまに初期化されてしまう問題
SNSやウェブサービスを並べて、見やすく管理できるアプリ「Stack」
Macでテキスト選択時にポップアップを表示する「PopClip」
Macでデュアルディスプレイ時に、通知を表示するディスプレイを指定する方法
ターミナルでGitを使う時に最低限覚えておきたいコマンド