モーダル・アコーディオン・タブなど、押して使う部品の動き方を7種類の型に分け、AIへの指示文・押して試せる見本・コードを載せています。見本の下で時間や大きさを変えると、指示文とコードも同じものに変わります。
部品の動きはどの型を選ぶか
部品の動きは、押した・開いた・選んだといった操作に、短い動きで答える演出です。ページを飾るためではなく、何が起きたかを目で追えるようにするために付けます。形の型（どんな部品をどう並べるか）は UIパターン集にあり、ここでは動き方だけを扱います。部品の形を決めてから、下の表で動きを選んでください。
| こんなとき | 向いている動き | 形の型（UIパターン集） |
|---|---|---|
| お知らせや確認を、ページの上に重ねて出したい | モーダルが開いて閉じる | モーダル |
| よくある質問を、押したところだけ開きたい | アコーディオンがなめらかに開く | アコーディオン・FAQ |
| 保存やコピーのあとに、結果を短く知らせたい | 通知がすべり込んで消える | 通知（トースト型） |
| 同じ場所で内容を切り替え、どれを選んだかを見せたい | タブの下線が追いかける | タブ |
| スマホのメニューボタンで、開いているかを形でも伝えたい | 三本線が×に変わる | ヘッダー（サイドドロワー型など） |
| 再生⇄停止など、メニュー以外のアイコンを別の形に変えたい | モーフィング（SVG・図形の動き） | — |
| 一覧やカードの読み込みを、形を見せながら待ってもらいたい | 読み込み中の仮の形が光る | ― |
| 申し込みなどの主なボタンに、押した手ごたえを付けたい | ボタンが押し込まれる | CTA |
並び方の決まっていない読み込みを、回る輪で待ってもらう動きは、ループの動き（ローディングスピナー）にあります。点や棒の待ち・進み具合の表示・AI の返事の待ちなど、ほかの待たせ方は読み込み中の動きにまとめています。
どの型でも守ること
- 部品の動きは速くする。押してから動き終わるまでは 0.1〜0.3秒くらい、長くても 0.4秒までにします。部品は何度も押すので、ページの登場の動きより短くしないと、操作のたびに待たされます。
- 状態は属性で持ち、見た目はそれに合わせる。開いているかは
aria-expanded、選んだタブはaria-selectedで持ち、CSS もその属性を見て動かします。見た目と読み上げで状態が食い違わなくなります。 - 閉じる・消えるときも動きを通す。開くときだけ動いて、閉じるときにぱっと消えると、ちぐはぐに見えます。消したあとはフォーカスを元の場所へ戻します。
- 動きを控える設定の人には、切り替わった姿だけを見せる。
@media (prefers-reduced-motion: reduce)で動きを外し、開く・閉じる・選ぶという結果はそのまま返します。見本の「動きを控える設定で見る」で確かめられます。 - 動かすのは transform と opacity。高さが変わるアコーディオンだけは
grid-template-rowsを使い、height・top・widthは動かしません。
よくある質問 (FAQ)
UIパターン集は部品の形、ここは部品の動き方を扱います。確認ダイアログ型・ボトムシート型のような形はUIパターン集で選び、その部品にどんな動きを付けるかをここで選びます。AIに頼むときは、形の指示文と動きの指示文を続けて渡すと、両方を合わせて作ってくれます。
中身の高さを測らずに、0から中身の高さまでなめらかに動かせるからです。height: auto は動かせないので、以前は max-height に大きめの数を入れる方法がよく使われていましたが、中身が短いと閉じるまでに間が空きます。grid-template-rows の 0fr から 1fr なら、中身がどの長さでも同じ時間で開きます。
短い1文なら4〜5秒、少し長い文なら6秒以上が目安です。あわせて、マウスを重ねている間とフォーカスが中にある間は消えないようにし、閉じるボタンも付けます。読み逃すと困る内容（入力の誤りなど）は、消える通知ではなく、その場の文言で知らせます。
何を押したら動くかと、閉じるときの動きです。「モーダルをふわっと出して」だけだと、開くときしか動かない作りや、閉じたあとにフォーカスが迷子になる作りになりがちです。ここの指示文は、きっかけ・時間・閉じ方・属性（aria-expanded など）を書き、Modal Open/Close のような英語の一般名も添えています。