navigation-menus

ナビゲーションとメニューのアニメーション原則

ディズニーの12の原則をナビゲーションに適用し、流れるようで直感的な道案内を実現します。

ナビゲーションへの原則の適用

1. つぶしと伸ばし

クリック時にメニュー項目をわずかに縮めます。モバイルのハンバーガーアイコンは、Xに変形する間に線を縮めます。

2. 予備動作

ドロップダウンが開く前に、トリガー項目を少し持ち上げたり、ハイライトしたりします。サイドバーの切り替えアイコンは、パネルがスライドする前に少し回転させます。

3. 演出

アクティブなナビゲーション項目を明確に区別します。ドロップダウンメニューは、z-indexとシャドウを使ってほかのコンテンツより前面に表示します。フォーカスの階層が重要です。

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

明確な状態を定義します：閉じている、開いている途中、開いている、閉じている途中。各メニュー項目には、デフォルト、ホバー、アクティブ、選択のポーズを設定します。

5. フォロースルーとオーバーラッピング・アクション

ドロップダウン項目は、少しずつずらして表示します（各項目に20〜30msの遅延）。サブメニューの矢印は、テキストが落ち着いてから回転させます。アクティブインジケーターは、わずかなオーバーシュートを伴ってスライドします。

6. スローインとスローアウト

メニューを開くときは ease-out、閉じるときは ease-in を使います。ホバーのトランジションには ease-in-out を使います。Materialスタイルには cubic-bezier(0.4, 0, 0.2, 1) を使います。

7. アーク

モバイルナビゲーションが画面端からスライドインするときは、わずかな弧を描かせます。項目間をスライドするメニューインジケーターも、控えめな曲線の軌道に沿わせます。

8. 副次的アクション

ドロップダウンが展開する間（主動作）にシャドウを大きくし（副次的アクション）、親項目のハイライトを維持します（三次的アクション）。シェブロンを回転させます。

9. タイミング

• ドロップダウンを開く：200〜250ms
• ドロップダウンを閉じる：150〜200ms
• ホバーのハイライト：100〜150ms
• アクティブインジケーターのスライド：200〜300ms
• 項目ごとの遅延：20〜40ms
• ハンバーガーの変形：300ms

10. 誇張

アクティブインジケーターをオーバーシュートさせてから跳ね戻すことができます。重要なナビゲーション項目を短く脈動させて注意を引くこともできます。メガメニューには大胆な登場がふさわしいでしょう。

11. 立体感のある描画

アニメーション中も間隔を一定に保ちます。シャドウの一貫性を保ちます。アイコンは、アニメーションのすべてのフレームでくっきりと表示します。

12. 魅力

滑らかなナビゲーションは、プロフェッショナルな印象を与えます。きびきびとした応答は、安心感につながります。ナビゲーションは常に使われるため、こうしたマイクロインタラクションに力を入れましょう。

CSSの実装

.nav-dropdown {
  transform-origin: top;
  transition: transform 200ms ease-out,
              opacity 200ms ease-out;
}

.nav-dropdown.open {
  transform: scaleY(1);
  opacity: 1;
}

.nav-indicator {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

主なプロパティ

• transform：translateX/Y、scaleY、rotate
• opacity：メニューをフェード表示します
• height/max-height：アコーディオンメニュー
• clip-path：表示エフェクト
• transform-origin：ドロップダウンの方向