モバイルサイトのローカルナビゲーション

モバイルサイトのローカルナビゲーション

ロフトワーク 濱田真一

• ロフトワークのプロデューサー• 去年までディレクター業務を担当していました• 1974 年うまれの 41 歳• 趣味はテレビドラマを見ること

濱田 真一

UIUSER INTERFACE

WEB サイトの UI と言えば…

グローバルナビゲーション• WEB サイトの主要な項目へのリンクを並べたエリア。• 基本的にサイト内の全ページ共通の位置に配置される。• 主要な動線の一つとなるほか、項目ラベルを見て目次のようにサイト全体を把握する意味もある。

グローバル・ナ美• トレンドにうるさい• みんなから注目されている• リーダー的存在

昔は、グローバルナビと言えば横ですか？ 縦ですか？

グローバルナビの進化

縦、横、ハンバーガーメニューの出し分け

ヘッダーのスクロール追従

メガドロップダウンメニュー

ローカルナビゲーション

ローカル・ナ美• 地味• 整理するのが苦手• いまいち垢抜けない

ローカルナビゲーション• 特定ディレクトリ配下のコンテンツへのリンクを並べたエリア。• グローバルナビと同様、目次としての役割も果たす。• ユーザーの目的達成に対して、より直接的な役割を果たすことが多い。

コンテンツ構造によって、多くなったり、あるいは少なくなったりする。また、運用中の増減も発生しやすい。

サイトのシングルカラム化やモバイル端末からのアクセス増加によりローカルナビの UI 設計が多様化している… が、あまり注意を払われてない？

いろいろな PC サイト / モバイルサイトのローカルナビ事例

モバイルではページの下部に配置する

ローカルナビを横に配置するモバイルでは折りたたむ

※ 両デバイスともローカルナビ部分がスクロール追従します

ローカルナビを横に配置するモバイルでは折りたたむ

PC では縦、モバイルでは折りたたみ

グローバルナビにローカルナビの機能も持たせるモバイルでは折りたたむ

モバイルではページの下部に配置する

グローバルナビにローカルナビの機能も持たせる

モバイル端末ではハンバーガーメニューからローカルナビを表示する

ページ下部に出現するボタンから一覧を表示

横スクロールするローカルナビ

PC では縦、モバイルでは横スクロール

折りたたまれたローカルナビ

ハンバーガーメニューに統合

ローカルナビをグローバルナビのように配置する

モバイルにおけるローカルナビの表示パターンページ下部でリスト表示 独自の要素からエクスパンド ハンバーガーメニュー内で階層表示

まとめ

=

グローバルナビ / ローカルナビ サイト構造

サイト構造とナビゲーションの関係は密接ディレクターと一緒に整理しましょう

何かあれば、私までご相談ください！

Thank You.