四角いボタンが、ゆっくりと形を変えている。角が溶け、輪郭が波打ち、またもとに戻る。一定のリズムで変形し続けるその姿は、どこか生き物のようで、目が離せません。Blobやアメーバ状の有機的な変形は、2024〜2026年のクリエイティブ系ポートフォリオやブランドサイトで定番になっています。CSSの border-radius 8値構文を使えば、JavaScriptなしでこの変形を実現できます。
border-radius には、スラッシュ記法を使って水平方向と垂直方向に異なる値を指定できます。60% 40% 30% 70% / 60% 30% 70% 40% のように8つの値を設定すると、四隅がそれぞれ異なる楕円カーブを持つ非対称な形が生まれます。この記事では、常時ループする呼吸するBlobからホバーで溶けるスライム、ネオングロー付きアメーバまで5パターンを紹介します。全デモJavaScript不要、コピペして動くコードを用意しています。
Breathing Blob（ブリージング・ブロブ）
常時ゆっくりと形が変わり続けるパターンです。4つのキーフレームで border-radius の8値をそれぞれ変えながら、4秒かけてループします。「呼吸している」という名前の通り、拡張と収縮を繰り返すような有機的なリズムが出ます。ease-in-out のイージングが変形をなめらかにつなぎ、どこにも「始まり」を感じさせない流動的な動きになります。
ファーストビューのメインCTAや、ポートフォリオのプロフィールセクションに配置するボタンとして機能します。暗い背景（#0d1117）に紫（#7c3aed）のBlobが浮かぶ組み合わせは、クリエイターやデザイナーのポートフォリオサイトでよく見るトーンです。ページにひとつだけ置くアクセントとして使うのがバランスの良い使い方で、複数並べると目障りになります。
See the Pen Breathing Blob by BaseKENT (@basekent) on CodePen.
調整方法
- 変形の激しさ: 各キーフレームの
border-radius値の差を大きくするほど激しく変形します。値を30%〜70%の範囲で動かすと自然なBlobになります - 速度:
animation: breathingBlob 4sの秒数を変えます。2sでテキパキと変形し、8sでゆったりと呼吸します - 色: ダーク背景に彩度の高い色が映えます。
#7c3aed（紫）・#06b6d4（シアン）・#10b981（グリーン）など単色で使うとBlobの輪郭が際立ちます
Hover Slime（ホバー・スライム）
デフォルトでは角丸の普通のボタンが、ホバーしたときにBlobに溶けるパターンです。border-radius に transition を設定し、ホバー時の値を8値の非対称な楕円に変えています。cubic-bezier(0.68, -0.55, 0.27, 1.55) のバネ感のあるイージングを使うと、溶けながら少し弾む「スライムが伸びる」ような動きになります。
ライト系のサイトにも馴染みやすいパターンです。デフォルト状態では普通のボタンなので、モーフ系の中では最もサイトに組み込みやすい。「ホバーしたときだけ個性が出る」設計なので、コーポレートサイトやポートフォリオのナビゲーションボタンにも使えます。溶ける速度と戻る速度は同じ transition が適用されるため、マウスが外れると同じ動きでスプリングバックします。
See the Pen Hover Slime by BaseKENT (@basekent) on CodePen.
調整方法
- 弾み感:
cubic-bezier(0.68, -0.55, 0.27, 1.55)の第2・第4引数がバネ感を決めます。値を-0.8, 1.8に増やすとより大きく弾み、0, 1に近づけると普通のeaseになります - 変形の強さ:
:hover時のborder-radius値を変えます。40% 60% 55% 45% / 45% 55% 40% 60%程度に抑えると控えめなモーフになります - 速度:
transition: border-radius 0.5sの秒数を変えます。0.3sでパチンと変形し、0.8sでゆっくり溶けます
Electric Amoeba（エレクトリック・アメーバ）
常時変形しながら、グロー発光するネオン色のアメーバパターンです。border-radius の8値アニメーションに加え、box-shadow を二重に重ねてシアンのグロー効果を出しています。box-shadow: 0 0 20px rgba(6,182,212,0.6), 0 0 40px rgba(6,182,212,0.3) の内側と外側でグローの強弱をつけ、発光しているように見えます。
サイバーパンク系・テック系・ゲーム系のサイトに最も合うパターンです。暗い背景（#050816）との組み合わせで、ボタンが光源のように見えます。Breathing Blobより変形の周期を短め（3秒）に設定しているので、エネルギッシュな印象が出ます。アニメーションは33%刻みの3段階で変形するため、Blobがやや「跳ねる」ように動くのが特徴です。
See the Pen Electric Amoeba by BaseKENT (@basekent) on CodePen.
調整方法
- グローの強さ:
box-shadowの第3引数（blur半径）を大きくするほど広く発光します。0 0 40pxを0 0 80pxにすると強い発光感が出ます - グローの色:
rgba(6, 182, 212, ...)の色値を変えます。ピンク（rgba(236, 72, 153, ...)）や緑（rgba(16, 185, 129, ...)）でネオンのカラーを切り替えられます - 変形速度:
animation: electricAmoeba 3sを短くするとより動的なアメーバになります
Polygon Shift（ポリゴン・シフト）
四角→多角形風→Blobの3段階で変形するパターンです。0% では border-radius: 0% の完全な四角から始まり（20% でシャープな多角形風）、60% 前後でBlobに近づいてから四角に戻ります。変形の「旅」を感じられる構成で、Breathing Blobよりも起点と終点がはっきりしています。
5秒の長めの周期で変形するため、「常時ループしているが邪魔にならない」バランスになっています。オレンジ（#f97316）はダーク系の背景（#18181b）でコントラストが高く、暗い画面でも視認性を保ちながら変形を見せられます。プロモーションページやLPのCTAで、「ちょっと変わったボタン」を使いたいときのバランスの良い選択肢です。
See the Pen Polygon Shift by BaseKENT (@basekent) on CodePen.
調整方法
- 変形のステップ数:
@keyframesのパーセント値を増やすと変形の経由点が増えます。50%に中間キーフレームを追加すると、より複雑な変形の旅を作れます - 四角→Blob比率:
0%と100%をborder-radius: 0%にすれば四角に戻りますが、border-radius: 8pxにすれば最初から少し角丸のボタンになります - 周期:
5sを3sに縮めると動きが速くなります
Liquid Seal（リキッド・シール）
デフォルトで完全な円形（border-radius: 50%）のボタンが、ホバーで液体状のBlobに変形するパターンです。円→Blobという変形は、円という完結した形が「崩れる」ことへの意外性があります。padding にも transition を設定して、ホバー時にわずかに横に広がるようにしているため、変形に合わせてボタン自体が少し膨らむ感覚が出ます。
cubic-bezier(0.34, 1.56, 0.64, 1) はバウンスのある弾性イージングで、Hover Slimeより少し強めの弾みになります。アイコン付きの丸ボタン・SNSリンクボタン・フローティングアクションボタン（FAB）を変形させる用途に向いています。ボタン内のテキストが長いと円形にしたとき視認性が下がるため、短い英単語か1〜2文字のボタンテキストに向いています。
See the Pen Liquid Seal by BaseKENT (@basekent) on CodePen.
調整方法
- デフォルトの形:
border-radius: 50%を30%にすると、完全な円ではなく丸みの強い角丸からBlobに変形する動きになります - ホバー時の広がり:
padding: 16px 52pxの横パディングの数値を増減します。元の値（44px）に近づけるほど変形時の膨らみが控えめになります - 弾み感:
cubic-bezier(0.34, 1.56, 0.64, 1)の第2引数（1.56）を大きくするとより弾み、1.0以下にすると弾みがなくなります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
