こんにちは！今回はWebディレクションに必要な基礎的な用語について解説します。
この記事では、ウェブサイトを形作る基本的な要素の中から、特に大事な「ヘッダー」「フッター」「グローバルナビゲーション」「メインビジュアル」「ファーストビュー」「ハンバーガーメニュー」「パンくずリスト」について、それぞれの役割をなぜそれ分かりやすく解説します。
これからWebのディレクションの仕事をしようと思っている方、ぜひご覧になってください。
1. ヘッダー (Header)
ウェブサイトのヘッダーは、ページのいちばん上にある場所です。サイトに訪れた人がまず最初に目にする箇所でもあり
①サイト名・ロゴ
どこのサイトに来たのかをすぐに分かりやすくしてくれます。ロゴをクリックするとトップページに戻れる使用が多いです。
②グローバルナビゲーション
サイトの中にある主要なページへのリンクがまとまっていて、行きたい場所にスムーズに進めるよう手助けしてくれます。
③検索窓
サイトの中で何かを探したい時に、すぐに見つけられるようにする便利な機能です。
④カートアイコン/ログインボタン
ネットショップなどでは、買い物カゴの中身やログインしているかどうかが分かります。
⑤連絡先情報
電話番号やメールアドレスなど、問い合わせに繋がる情報が載っていることもあります。
ヘッダーは、サイト全体の雰囲気やブランドイメージを決めるだけでなく、サイト訪問者の利便性に直接関わってきます。
分かりやすくて使いやすいヘッダーは、初めて来た人に良い印象を与え、サイトの様々なページを見てもらうきっかけになります。
2. フッター (Footer)
フッターは、ウェブページのいちばん下にある場所です。ヘッダーとは反対に、ページを最後までスクロールすると見えてきます。
①著作権表示
サイトの著作権に関する情報が書かれています。
②プライバシーポリシー・利用規約へのリンク
サイトの利用規約のページへのリンクがあり、法律的な要件を満たします。
③サイトマップへのリンク
サイト全体の地図のようなもので、どこにどんな情報があるかを知りたい時に便利です。
④お問い合わせ情報
会社のことや問い合わせ先へのリンクが置かれています。
⑤SNSリンク
Facebook、X（旧Twitter）、Instagramなど、運営しているSNSへのリンクがあり、私たちとの繋がりを増やしてくれます。
⑥企業情報
会社の概要や所在地などの基本的な情報が載っていることもあります。
⑦主要カテゴリの再表示
グローバルナビゲーションの補助として、主要なカテゴリへのリンクがもう一度載っていることもあります。
フッターは、ページの内容を読み終えた後や、探している情報が見つからなかった時に参照されることが多い部分です。補足的な情報を提供したり、法律の要件なども含めたサイト全体の信頼感を高めたりする役割を担っています。
3. グローバルナビゲーション (Global Navigation)
グローバルナビゲーションは、ウェブサイトの中の主要なコンテンツやコーナーへ案内するためのリンクの集まりです。多くの場合、ヘッダー部分にあり、サイトのどのページにいても常に表示されるので、「グローバル（全体的）」と呼ばれます。
①サイトの全体像を示す
サイト全体がどういう構成になっているのか、どんな情報があるのかを教えてくれます。
②行きたいページへの案内
探している情報やサービスに素早くたどり着けるよう、私たちを導いてくれます。
③サイト内を色々と見てもらう
サイトの中の色々なコンテンツに興味を持ってもらい、深く見てもらうきっかけを作ります。
グローバルナビゲーションは、サイトの中で迷子にならないための道しるべのような存在です。分かりやすくて、きちんと整理されたナビゲーションは、サイトの使いやすさ（ユーザーエクスペリエンス：UX）を大きく向上させてくれるんです。
4. メインビジュアル (Main Visual)
メインビジュアルは、ウェブページ、特にトップページで一番目立つところに大きく配置される画像や動画のことです。多くの場合、最初に画面に表示される「ファーストビュー」の真ん中にあります。
①サイトのコンセプト・目的をすぐに伝える
訪問者に「このサイトは何のサイトだろう」「どんなサービスを提供しているんだろう」ということを、一目見ただけで分からせてくれます。
②見た目で引き込む
美しい写真や魅力的な動画で私たちの興味を引きつけ、サイトにもっと長くいてもらおうと促します。
③ブランドイメージを作る
サイトの世界観やブランドの個性を表現し、私たちに強い印象を与えます。
④行動を促す
その下にある大切なコンテンツや、キャンペーンへのリンクを重ねて表示し、次の行動へ進むよう促す役割も持っています。
メインビジュアルは、サイトの第一印象を決める、大事な要素です。デザインが良いだけでなく、サイトの目的や見てほしい人に合わせて、適切なメッセージを視覚的に伝えることが求められます。
5. ファーストビュー (First View)
ファーストビューとは、ウェブページを開いた時に、画面をスクロールしなくても最初に見える範囲のことです。パソコンの画面の大きさやスマホの機種によって見える範囲は違いますが、一般的にはページの一番上を指します。
①訪れた人を引きつける
私たちがサイトにそのまま留まるか、それとも他のサイトに移るかを、たった数秒で判断する、非常に重要な場所です。
②サイトの目的・価値を見せる
このサイトが何を提供しているのか、私たちにとってどんな良いことがあるのかを、はっきりと伝える必要があります。
③次の行動へ促す
私たちが次に何をすればいいのか（例：サービスについて詳しく見る、商品を探す、問い合わせるなど）を分かりやすく示すことが大切です。
ファーストビューは、ウェブサイトの「第一印象」を決める場所なんです。魅力的で分かりやすいファーストビューは、私たちの興味を引きつけ、サイトの他のコンテンツももっと読んでみようと思わせる、強力なフックになります。メインビジュアルやキャッチコピー、そして「ここをクリック！」というようなCTA（Call To Action）ボタンの配置が特に重要になります。
6. ハンバーガーメニュー (Hamburger Menu)
ハンバーガーメニューは、主にスマートフォンやタブレットなど、携帯端末向けのウェブサイトでよく使われるメニューアイコンです。横線が3本並んでいて、まるでハンバーガーのように見えることからこの名前で呼ばれています。このアイコンをタップすると、たいていは画面の端からとグローバルナビゲーションのようなメニューが出てきます。
①画面のスペースを上手に使う
狭いスマホの画面で、たくさんのメニューリンクを効率よく表示させ、コンテンツを見せるスペースを最大限に確保します。
②シンプルなデザイン
ごちゃごちゃした見た目を減らし、スッキリとしたデザインにしてくれます。
注意点
パソコンのサイトでも使われることがありますが、その場合、メニューが隠れてしまうので、ユーザーがメニューがあることに気づきにくかったり、クリックする手間が増えたりするというデメリットも言われています。パソコンのサイトでは、基本的にグローバルナビゲーションを常に表示しておく方が、使う人にとっては便利だとされています。
7. パンくずリスト (Breadcrumbs / Topic Path)
パンくずリストは、今、ウェブサイトのどこにいるのかを教えてくれるナビゲーションリンクです。「トップページ ＞ カテゴリ ＞ サブカテゴリ ＞ 今見ているページ」のように、階層が順に表示されるのが特徴です。とある童話で森で迷子にならないようにパンくずを置いていった、という話が名前の由来です。「トピックパス」とも呼ばれることもあります。
①今いる場所をはっきりさせる
サイトの中で迷子にならないようにしてくれて、今見ているページがサイト全体のどこにあるのかを、パッと見て理解させてくれます。
②上のページへ簡単に戻る
クリックするだけで、今いるページの上位の階層（親カテゴリやトップページなど）に、すぐに戻ることができます。
③サイトの構造を理解しやすくする
サイト全体の階層がどうなっているかを教えてくれ、情報を探しやすくしてくれます。
④SEOにも役立つ
検索エンジンがサイトの階層構造を理解しやすくなり、SEO（検索エンジン最適化）にも良い影響を与えることがあります。
パンくずリストは、特にコンテンツがたくさんあるウェブサイトや、階層が深いサイトでは、使う人の便利さを大きく向上させてくれる、とても大切な要素です。
まとめ
いかがでしたでしょうか？
基礎的な話ではあるので、知ってる方も多い用語だとは思いますがおさらいになったようであれば幸いです。
株式会社援軍では、その道のプロフェッショナルによる広告運用やSEO対策など支援はもちろんですが、今回のようなWebマーケティングの基礎的な内容を学べる動画講座「アドスケ E-learnning」というサービスも展開しています。（月額7,000円から利用可能）
Webマーケティングの基礎から広告運用、SEO、SNS、AI周りなど基礎的な話をまとめた動画講座が700本以上見放題のサービスです。これからWebマーケティングを学んでいきたい方にピッタリかと思います。
今なら2週間見放題の無料アカウントをプレゼントしてますので、こちらのフォームに必要事項を記入いただければ、担当者から無料アカウントのログイン情報を付与させていただきます。2週間使っていただいてもっと活用したいということであればご契約のご案内をさせていただきますが、不要であればご契約なしで問題ございません。（無料から有料に勝手に切り替わる事はないのでご安心ください）
よろしくお願いいたします。
