motion-and-storytelling

UI におけるモーションとストーリーテリング

アニメーションとモーションは装飾ではなく、コミュニケーションです。タイポグラフィや色と同じ規律をもって適用すれば、何が起きているのか、どこに注目すればよいのか、製品を使うとどんな感覚なのかをユーザーに伝えます。その基礎となる資料――ディズニーの12の原則、映画の表現言語、コミックの慣習――には、動きや連続した場面を通じて伝える方法について、何世紀にもわたって蓄積された知識があります。

鍵となる言葉はさりげなさです。UI では、モーションは目で追うものではなく、感じるものであるべきです。

---

UI に応用するディズニーの12の原則

1. 潰しと伸ばし

オブジェクトは衝撃を受けると潰れ、加速すると伸びます。UI では、押したときにボタンが少し縮小し、弾むように元に戻ると、物理的な実在感と応答性が伝わります。

button:active { transform: scale(0.96); }
button { transition: transform 80ms ease-out; }

控えめに使いましょう。主要な CTA と、気持ちのよい完了確認に限って使います。

2. 予備動作

主要な動作の前に行う小さな準備動作です。UI では、開く直前にメニュー項目が少し動いたり、トランジションの開始前にローディングインジケーターが表示されたりすると、ユーザーは次に起こることに備えられます。

3. 演出

一度に一つのアイデアを明確に提示します。UI では、出現アニメーションは新しいコンテンツに注意を向けるものであり、既存のコンテンツと競合してはいけません。モーダルを開いたときにページの残りの部分が暗くなるのが、演出です。

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

ポーズ・トゥ・ポーズ――開始状態と終了状態を定義し、システムにその間を補間させる方法――は、CSS/JS でのアプローチです。明確な初期状態と最終状態を定義し、その間の動きは transition またはスプリング物理ライブラリに任せましょう。

5. 後続動作とオーバーラッピング・アクション

すべての要素が同時に止まるわけではありません。UI では、リスト項目が前の項目から40～60ms遅れて順に表示されると、すべての項目が同時に現れるより自然に感じられます。

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }

6. イーズインとイーズアウト

自然界では、瞬時に始まったり止まったりするものはありません。線形のトランジションではなく、イージングカーブを使いましょう。

イージング	用途
ease-out（開始が速く、終わりが遅い）	画面に入ってくる要素――自然に現れるように感じられます
ease-in（開始が遅く、終わりが速い）	画面から出ていく要素――意図的に退出するように感じられます
ease-in-out	画面上で位置を移動する要素
スプリング物理	タッチやドラッグに反応するインタラクティブな要素

UI のモーションには linear を使わないでください。機械的で未完成な印象になります。

7. 弧

自然な動きは直線ではなく、弧を描きます。均一にフェードするのではなく、発生元の位置から拡大するツールチップやポップオーバーは、この原則に沿っています。transform-origin が重要です。

8. 副次動作

主要な動作を補強する動きです。UI では、ボタンを押したときにボタン内のアイコンが少し動くことが挙げられます。フォーム送信後にチェックマークが描かれていくのもその一例です。こうした細部は、注意を強いることなく、気づいた人に喜びを与えます。

9. タイミング

持続時間は意味を持ちます。速い動きは、応答性が高く、活気がある印象になります。遅い動きは、重みがあり、重要な印象になります。

持続時間	用途
80–120ms	マイクロインタラクション（ボタンの押下、ホバー）
150–250ms	コンポーネントのトランジション（ドロップダウンを開く、ツールチップ）
250–400ms	ページ全体のトランジション、モーダルの出現
400–600ms	ヒーローアニメーション、オンボーディングの一連の画面
> 600ms	ほとんどの場合、長すぎます――ユーザーを待たせています

10. 誇張

意図的に少し誇張すると、動作が心地よく感じられます。UI では、成功を示すチェックマークが少し行き過ぎてから戻ったり、通知バッジが最終サイズよりほんの少し大きく弾んだりする動きが挙げられます。誇張は10～15％にとどめ、芝居がかった表現にはしません。

11. 立体感のある描写（堅牢なデザイン）

インターフェースの奥行きやレイヤーを尊重しましょう。要素の動きは、認識されるレイヤーと整合しているべきです。ボトムシートはコンテンツの下にあるため、横からではなく下からスライドして現れます。ツールチップは、画面の反対側ではなく、トリガーの近くに表示されます。

12. 魅力

全体的な動きは、ブランドにふさわしい印象にする必要があります。遊び心のあるコンシューマー向けアプリなら、弾むような、よりバネのある動きを使えます。金融ツールなら、正確で制御されたトランジションが適しています。魅力は装飾ではなく、時間を通じて表現されるブランドの個性です。

---

映画的なテクニック

リビールと登場

ビューポートに入ってくるコンテンツは、ただ存在するよりも、登場することでより強い印象を与えます。スクロールをトリガーとする登場アニメーション、つまりユーザーがスクロールしてセクションに入ると、そのセクションが上方向にフェードインする演出は、映画的なリビールを取り入れたものです。ポイントは、コンテンツが意味のある方向から入ってくることです（ユーザーがスクロールしてきた下側から）。

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

パララックス

背景の要素を前景の要素よりゆっくり動かすと、奥行きが生まれます。Webでは、ヒーローの背景画像をスクロール速度の50％で動かし、コンテンツを100％で動かすと、レイヤー感が生まれます。控えめに使ってください。強すぎるパララックスは乗り物酔いを引き起こします。

カットとディゾルブ

• ハードカット（即時の状態変化）：速く、明快で、効率的です。ページ間のナビゲーションやモーダルを閉じるときに使います。
• ディゾルブ／クロスフェード：段階的で、配慮があり、つながりを感じさせます。タブの切り替えや画像ギャラリーの切り替えなど、2つの状態に関連性がある場合に使います。

シーン設定

セクションの最初のフレームは、詳細が表示される前にシーンを設定します。印象的な画像と大きな文字を使ったヒーローの後に、少し遅れて補足情報を表示する演出は、映画のようなオープニングです。読み始める前に、ユーザーの視線を主題へと導きます。

---

コミックの表現手法

パネルの連続

コミックは、静止したフレームの連続を通じて、その間の動きを想像させながら物語を伝えます。UIでは、ステップインジケーター、オンボーディングのカルーセル、進行フローで同じ考え方が使われます。それぞれの「パネル」は連続する瞬間のひとつであり、ユーザーの視線はパネル間を移動します。

スピード線とエネルギー

強調線、放射状のグラデーション、方向性のあるぼかしは、実際にアニメーションを使わずに動きやエネルギーを感じさせます。控えめな方向性のグラデーションを使ったボタンは、どこかを指し示している印象を与えます。残像のように不透明度が変化するローディングインジケーターは、方向を感じさせます。

トーンとしてのタイポグラフィ

コミックでは、文字のサイズ、太さ、スタイルが感情を伝えます。叫び声は大きく太い大文字で、ささやき声は細く小さな斜体で表現します。UIでは、ヒーローの特大のディスプレイ文字がエネルギーを伝え、小さく控えめなキャプション文字は視線を引きます。これは単なる階層づけではなく、感情を表す微細なタイポグラフィです。

コマ間の余白

コミックでは、コマとコマの間を読者の想像力が補います。UIでは、状態間のトランジションがその余白にあたります。スムーズなトランジションによって、ユーザーの頭の中で一貫したメンタルモデルが構築されます。唐突な切り替わりは、ユーザーに状況を把握し直させます。

---

実践的なルール

1. prefers-reduced-motionを必ず尊重してください。 前庭障害や動きへの過敏さがあるユーザーも、アニメーションなしで製品を使える必要があります。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

2. 動きはユーザーの役に立つものであり、楽しませるためのものではありません。 すべてのアニメーションについて、何が起きたか、何かがどこから来たか、次にどこを見ればよいかをユーザーが理解する助けになるかを確認してください。

3. ほとんどの場合、長さは400ms未満にしてください。 アニメーションがそれより長いと、ユーザーの動作を遅らせます。

4. レイアウトプロパティ（width、height、padding、top、left）は決してアニメーションさせないでください。 リフローが発生します。アニメーションにはtransformとopacityだけを使ってください。GPU上で処理されます。

5. 領域ごとに、同時に動かすのはひとつにしてください。 競合するアニメーションを同時に動かすと、視覚的なノイズが生まれます。順番に表示してください。

レビューチェックリスト

• prefers-reduced-motion によって、すべてのアニメーションが無効化または軽減されていますか？
• すべてのトランジションで、ease-out（表示）、ease-in（非表示）、または ease-in-out（位置変更）が使われていますか？
• 線形イージングを避けていますか？
• コンポーネントレベルのトランジションの継続時間は 400ms 未満ですか？
• アニメーションの対象は transform と opacity のみですか（レイアウトプロパティは対象外）？
• 表示アニメーションは意味のある方向から動きますか（スクロール時の表示では下から、拡大縮小では原点から）？
• モーションはブランドのトーンに合っていますか（遊び心のあるブランドでは弾むように、エンタープライズ向けでは正確に）？
• リスト項目は同時に表示するのではなく、順番に表示するアニメーションを使っていますか？