ピル展開 — 動きの伝え方辞典

pill expand / expanding pill button

ピル展開

小さな円がポンと現れ、そのまま横に伸びてラベル付きのカプセルになるボタン演出。容器が伸びきってから文字を出す「順番」だけで、動きの丁寧さが決まる。

01 — Demo video

Play live →

02 — Prompt template

ホバーで開く pill expand ボタンを実装してください。

- 待機時はピルを非表示にする(opacity: 0 / transform: scale(0) / 幅は高さと同じ40pxの円)
- ホバーで scale(1) にポップさせ、続けて幅を {{width}}px へ {{duration}}s で伸ばす
- transform-origin は {{origin}} 側に置き、そこを起点に出現・伸長させる
- 幅は scaleX ではなく width をアニメーションさせる(scaleXだとラベルと角丸が歪む)
- ピル自体は position: absolute にして、幅の変化がページ側のレイアウトへ波及しないようにする
- ラベルは {{labelDelay}}s 遅らせて opacity で出す(容器が伸びきってから文字が現れる)
- 閉じるときは逆順にする。ラベルを先に消し、幅を縮め、最後に scale(0) へ畳む
- ホバーできない端末のために :focus-visible と tap でも同じ状態にする
- prefers-reduced-motion 時はアニメーションを止め、最初からラベル付きの展開状態で表示する

ホバーで開く pill expand ボタンを実装してください。

- 待機時はピルを非表示にする(opacity: 0 / transform: scale(0) / 幅は高さと同じ40pxの円)
- ホバーで scale(1) にポップさせ、続けて幅を {{width}}px へ {{duration}}s で伸ばす
- transform-origin は {{origin}} 側に置き、そこを起点に出現・伸長させる
- 幅は scaleX ではなく width をアニメーションさせる(scaleXだとラベルと角丸が歪む)
- ピル自体は position: absolute にして、幅の変化がページ側のレイアウトへ波及しないようにする
- ラベルは {{labelDelay}}s 遅らせて opacity で出す(容器が伸びきってから文字が現れる)
- 閉じるときは逆順にする。ラベルを先に消し、幅を縮め、最後に scale(0) へ畳む
- ホバーできない端末のために :focus-visible と tap でも同じ状態にする
- prefers-reduced-motion 時はアニメーションを止め、最初からラベル付きの展開状態で表示する

ホバーで開く pill expand ボタンを実装してください。

- 待機時はピルを非表示にする(opacity: 0 / transform: scale(0) / 幅は高さと同じ40pxの円)
- ホバーで scale(1) にポップさせ、続けて幅を {{width}}px へ {{duration}}s で伸ばす
- transform-origin は {{origin}} 側に置き、そこを起点に出現・伸長させる
- 幅は scaleX ではなく width をアニメーションさせる(scaleXだとラベルと角丸が歪む)
- ピル自体は position: absolute にして、幅の変化がページ側のレイアウトへ波及しないようにする
- ラベルは {{labelDelay}}s 遅らせて opacity で出す(容器が伸びきってから文字が現れる)
- 閉じるときは逆順にする。ラベルを先に消し、幅を縮め、最後に scale(0) へ畳む
- ホバーできない端末のために :focus-visible と tap でも同じ状態にする
- prefers-reduced-motion 時はアニメーションを止め、最初からラベル付きの展開状態で表示する

03 — Params

duration(幅が伸びる時間 s) — 範囲 0.1〜0.6 / 初期 0.24
0.2〜0.3sが軽快。0.4sを超えるとボタンが重く感じる。
labelDelay(ラベルが出るまで s) — 範囲 0〜0.5 / 初期 0.26
durationとほぼ同じ値にすると、伸びきってから文字が出る。0にすると文字が容器からはみ出て見える。
width(展開後の幅 px) — 範囲 90〜220 / 初期 140
ラベルの文字数で決める。畳んだ円の直径(40px)との差が大きいほど伸びが目立つ。
origin(伸びる起点) — 選択: left / center / right（初期: left）
ライムの点が起点。画面端に置くピルは、端から内側へ伸びる向きを選ぶ。

04 — Vocab

pill(カプセル) — border-radius: 999pxで両端が半円になった形。幅が変わっても端の丸みが崩れないのが利点。
width vs scaleX — scaleXは軽いがラベルと角丸まで横に潰す。ピルはwidthを動かし、absoluteでリフローの影響範囲を閉じ込めるのが定石。
遅延の非対称 — 開くときは容器→ラベル、閉じるときはラベル→容器。同じ順番で往復させると閉じ際にもたつく。
transform-origin — scale(0)から出現する起点。画面左端のピルなら left にしないと、外側へはみ出して生まれる。

05 — NG → OK examples

言い方: 「「ホバーでボタンが伸びてテキストが出るやつにして」」

なぜNG: 「伸びる」だけではscaleXで潰れた実装が返ってきて、ラベルと角丸が横に歪む。容器とラベルを同時に出す実装になり、伸びきる前に文字がはみ出す。

言い方: 「「pill expandを実装。待機はscale(0)の円、ホバーでscale(1)→widthを140pxへ0.24sで伸長。transform-origin: left。widthをアニメ(scaleX禁止)、absoluteでリフロー隔離。ラベルは0.26s遅れてfade in、閉じるときは逆順」」

なぜOK: 伸ばす対象(width)・禁じ手(scaleX)・起点・容器とラベルの時間差・閉じる順番まで指定。この4点が揃うと実装者が違っても同じ動きになる。