流体シェイプ画像加工ツール

ブログやSNSのアイキャッチ、ポートフォリオ画像をおしゃれに仕上げたいけれど、PhotoshopやFigmaを開くのは面倒…そんな時に使える便利なブラウザツールを作成しました。

画像をドラッグ＆ドロップするだけで、有機的なシェイプ（ブロブ）でクリッピングされたおしゃれな画像が完成します。SNSで人気の「丸くない、でも自然な形」に切り抜かれた画像を、インストール不要・無料で作れます。

---

このツールでできること

• 画像を流体のような不規則なシェイプで切り抜く
• 背景にカラーのシェイプレイヤーを何枚でも重ねる
• シェイプの複雑さ・ランダム度・スケール・伸びを細かく調整
• PNG / WebP の両形式でダウンロード可能

使い方

1. 画像をアップロードする

左パネルの「1. 画像を選択」エリアをクリックしてファイルを選ぶか、プレビューエリア（右側の大きなキャンバス）に直接ドラッグ＆ドロップしてください。ドラッグ中は青いオーバーレイが表示され、そのまま放すと画像が読み込まれます。

2. メインシェイプを調整する

「2. メインシェイプの調整」では、画像を切り抜くシェイプの形を変えられます。

設定項目	内容
複雑さ	シェイプの頂点数。大きいほど複雑な形になる
ランダム度	各頂点のバラつき具合。0%で正多角形に近づく
スケール	シェイプの大きさ（画像に対する割合）
横の伸び / 縦の伸び	シェイプを横または縦に引き伸ばす

右上の🔄ボタンを押すと、メインシェイプだけをランダムに再生成できます。

3. 背景シェイプを追加する

「3. 背景シェイプ」の「+ 追加」ボタンで、背景にカラーシェイプを重ねられます。色の変更や個別のランダム化も可能です。複数重ねることで、奥行きのあるデザインになります。

4. 出力サイズを設定して保存する

「4. 出力サイズ設定」で出力の上限ピクセル数を指定したら、「PNG保存」または「WebP保存（軽量）」ボタンでダウンロードします。

このツールの最大の特徴

「サーバーに画像をアップロードせず、あなたのブラウザ内だけで処理が完結する」という点です。

メリット

1. 高いセキュリティとプライバシー

一般的なオンライン画像編集サイトとは異なり、このツールは画像をサーバーへ送信しません。
すべての処理はお使いのパソコンやスマホのブラウザ内（JavaScript + Canvas API）で行われます。
プライベートな写真や社外秘の資料画像でも、外部に流出する心配なく安心してご利用いただけます。

2. 動作が軽快でスピーディー

サーバーへのアップロード・ダウンロードの待ち時間がありません。
スライダーを動かした瞬間にプレビューが更新されるため、リアルタイムで仕上がりを確認しながら直感的に調整できます。

3. 完全無料・登録不要

アカウント作成もサブスクリプションも不要です。ページを開けばすぐに使えます。

こんな使い方がおすすめ

• ブログのアイキャッチ：シンプルな写真にシェイプを重ねるだけで、プロっぽい仕上がりに
• SNS投稿画像：Instagramのフィード統一感を出すのにも便利
• ポートフォリオ：作品写真をおしゃれにトリミングして掲載
• プレゼン資料：パワポやKeynoteに貼る画像のアクセントとして

Web制作者におすすめの使い方

ヒーローセクションのビジュアルに

LPやコーポレートサイトのファーストビューに配置するメインビジュアルとして活用できます。
背景シェイプを2〜3枚重ねてブランドカラーで色付けすると、CSSだけでは作りにくい有機的なデザインをPNG一枚で手軽に実現できます。
clip-path や SVG マスクを自前で書く手間が省けます。

チーム紹介・メンバー写真のトリミングに

「About」ページのスタッフ写真をそのまま正方形や円で切り抜くのではなく、ブロブシェイプで統一するとサイト全体のデザインに個性が出ます。
シェイプのパラメータを固定して複数枚に使い回すことで、統一感も保てます。

WebPで書き出してパフォーマンス改善に

「WebP保存（軽量）」ボタンから直接WebP形式でダウンロードできます。
Lighthouseで画像フォーマットの最適化を指摘されている場合、素材段階からWebPで用意しておくことで対応工数を減らせます。

クライアントへのデザイン提案・モックアップに

Figmaやツールを使わずブラウザ上で即座にバリエーションを生成できるため、「こういうビジュアルイメージです」とクライアントに見せる簡易モックアップとして重宝します。
ランダム化ボタンで複数パターンを素早く書き出せます。

注意事項

現在このツールは 1枚ずつ の画像処理に対応しています。新しい画像をドロップすると、前の画像と差し替えられます。

---

ぜひ試してみてください！