2016年2月17日「loftwork Webmaster Camp」

1. モバイルサイトのローカルナビゲーション
ロフトワーク 濱田真一

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

3. USER INTERFACE

4. WEBサイトのUIと言えば…

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

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

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

9. グローバルナビの進化

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

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

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

14. ローカルナビゲーション

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

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

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

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

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

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

21. ローカルナビを横に配置する
モバイルでは折りたたむ
※両デバイスともローカルナビ部分がスクロール追従します

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

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

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

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

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

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

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

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

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

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

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

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

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

35. まとめ

36. =
グローバルナビ/ローカルナビ サイト構造
サイト構造とナビゲーションの関係は密接
ディレクターと一緒に整理しましょう

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

38. Thank You.