ウェブサイトで、もっとも重要な役割を果たすメニュー(ナビゲーション)を学びます。初めは、非常に理解しづらい実装で、CSSの苦手意識が出てしまう人が多くいますが、何度も練習を重ね、理解し克服しましょう。
ナビゲーションとは
的確に目的のページへ誘導するための機能を果たす(リンク)エリアの部分を指します。ナビ・ナビゲーション(nav)や、「メニュー」(menu)と呼ばれることもあります。ナビゲーションとメニューの違いは、ナビゲーションは、「グローバルナビゲーション」と呼ばれるような広く大きい部分を指し指すことが多く、メニューは、テキスト仕様でやや小規模なリンクの集合体を指していることが一般的です。(グローバルメニューなど、呼称においてはそれぞればらつきがあります。)実装においては、テキストのみを使用して実装するものと画像を用いて実装するものがありまますが、SEOやアクセシビリティの関係性、スマートフォン仕様などを踏まえ、近年は、CSSを駆使したテキストのみで作られることが多くなってきています。
ナビゲーションの種類
三井住友銀行の公式サイトを見てみましょう。
参考：三井住友銀行：http://smbc.co.jp
グローバルナビゲーション
ページ内で最も軸となるコンテンツを指すことが多く、どの画面でも、同じメニュー構成・同じデザイン・同じ場所に配置されています。主要なリンクとなるので、カーソルや指が触れると色や形状の変化を施している場合が多く、最もクリックし易く目立つ位置に配置されています。(参考：NTT DOCOMO公式サイト：http://nttdocomo.co.jp)
ローカルナビゲーション・ページナビゲーション
特定のページにだけ配置されているナビゲーション。グローバルナビゲーションが横配置にレイアウトされている場合、ローカルナビゲーションは、縦型配置になっていることが多いようです。(参考：森永製菓 企業情報)
パンくずナビ・パンくずリスト
階層が深いWebサイトの場合、ユーザーが迷ってしまったり、なかなか目的のページへ辿り着かない状態を避けるため、表示しているページまでの情報経路を表示させておきます。目立たず、やや小さめのテキストで配置されています。【例】すべてのカテゴリ > コンピュータ > パソコン > Mac > ノートブック、ノートパソコン
(参考：ヤフーオークション auctions.yahoo.co.jp)
最近では、下部＝footer要素にも、各ナビゲーション類が充実しています。(参考：ハーバーランド神戸)
メニュー構築のポイント
様々な箇所に位置するメニューエリア。縦に並べたり横に並べたり、さらにはボタン化として実装されるものも存在します。スマートフォンの場合、画面が小さいため、十分な余白を取り、リンクされるエリアを配慮するなど指でタップしやすいUIを心がけ制作しておきましょう。
【補足】通常、ヘッダー左上に配置される「ロゴマーク」をクリックすると、トップページへ戻れる仕様になっています。忘れずにリンクしておきましょう。