ナビゲーション
サイトの中を移動するための、メニューやヘッダーの演出です。ハンバーガーから開くメニュー、読み進めると隠れて戻すと出るヘッダー、質問を押すと答えが開くアコーディオンなどを、デモとコードで紹介しています。
ナビゲーションのインタラクション（23件）
-
-
狭い画面でパンくずリストが「…」に畳まれ、押すと中間の階層が開いて伸びる
-
スマートフォンのメニューで階層が右から滑り込んで深くなり、戻ると左へ戻る
-
スクロールでヘッダーが縮み、背景が付いて影が落ちる
-
スマホのタブバーで、押したタブへ丸が滑って移り、アイコンが丸の中へ持ち上がる
-
ナビゲーションの検索アイコンを押すと、左へ伸びて入力欄に変わる
-
ナビゲーションのホバーでメガメニューが幅いっぱいに開き、列と特集カードが順に出る
-
ナビゲーションのホバーでドロップダウンが降り、項目が上から順に落ちてくる
-
ハンバーガーを押すと円が広がって全画面メニューになり、リンクが順に出る
-
ステッパーが進むたびに丸が塗られ、線が次のステップへ伸びる
-
ページ送りの今の点がカプセルになり、次の点まで伸びてから縮んで移る
-
ボタンでサイドバーの幅が縮み、アイコンだけになって本文が広がる
-
ベルが揺れて通知バッジが弾んで付き、数字が繰り上がって増える
-
読み進めると「トップへ戻る」ボタンが弾んで出て、押すと先頭へ戻る
-
Dock のナビゲーションで、カーソルに近いアイコンほど大きくなる
-
ナビゲーションのメニューを移ると、ドロップダウンの背景が大きさを変えながら滑って移る
-
読んでいるセクションに合わせて目次の現在地のマーカーが滑って移る
-
ナビゲーションのリンクをなぞると背景の丸が滑ってついてくる
業務画面に組み込む場合は、WEBアプリケーションのページをご覧ください。
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。