Webサイトは、さまざまなパーツ（要素）で構成されています。
それぞれに名称と役割があり、これらの用語を正しく理解することで、Web制作を行う上でのコミュニケーションがしやすくなります。
今回は、Webサイトでよく使われるパーツの名称と役割について詳しく解説します。
ヘッダー（Header）
ヘッダーとは、Webサイトの最上部に配置されるパーツです。ロゴやナビゲーションメニューが含まれ、サイト全体の案内役としての役割を果たします。
主な構成要素
- ロゴ：ブランドやサイト名を示す画像やテキスト
- ナビゲーションメニュー：主要ページへのリンク集
- 検索ボックス：サイト内検索機能
- CTAボタン：問い合わせや購入を促すボタン
フッター（Footer）
フッターは、Webサイトの最下部に配置されるパーツです。主に補足情報や重要リンクが掲載されます。
主な構成要素
- コピーライト表記：著作権情報（例：「© 2025 会社名」）
- サイトマップ：サイト内のページ一覧
- 利用規約・プライバシーポリシー：法的な情報
- SNSリンク：公式SNSアカウントへのリンク
ファーストビュー（First View / FV）
ファーストビュー（FV）は、ユーザーがページにアクセスした際に最初に目にする部分です。サイトの第一印象を決める重要なエリアなため、デザインを作成する際にはここをまず作成することが多いです。
ポイント
- 魅力的なビジュアル：大きな画像や動画を活用
- キャッチコピー：訪問者の関心を引くメッセージ
- CTAボタン：アクションへの誘導（購入、問い合わせなど）
フォーム（Form）
フォームは、ユーザーが情報を入力するためのパーツです。問い合わせ、登録、アンケートなどに使用されます。
主なフォームの種類
- お問い合わせフォーム：質問やリクエストの受付
- ログインフォーム：ユーザー認証のための入力欄
- 申し込みフォーム：イベントやサービスの登録用
- 検索フォーム：キーワード検索用
アンカーリンク（Anchor Link）
アンカーリンクとは、同じページ内の特定の位置に移動できるリンクのことです。
活用例
- 目次のリンク：長文ページの各項目へのジャンプ
- 「トップへ戻る」ボタン：スクロールで上部へ戻るリンク
- FAQの質問リンク：クリックで該当箇所に移動
サイドバー（Sidebar）
サイドバーは、ページの左右に配置される補助情報用のパーツです。ブログやECサイトではカテゴリやおすすめ商品を表示するのが一般的です。
主な用途
- ナビゲーションメニュー：カテゴリ別のページリンク
- 人気記事や最新記事の一覧：ブログでの活用
- 広告バナー：商品やサービスのプロモーション
- プロフィール情報：運営者や著者の紹介
スライダー（Slider）
スライダーは、複数の画像やコンテンツを横にスライドさせて表示するパーツです。
活用例
- トップページのビジュアル：注目の情報を順番に見せる
- 製品紹介ページ：特徴的なポイントをスライド形式で表示
- レビュー表示：ユーザーの声を順番に表示
モーダルウィンドウ（Modal Window）
モーダルウィンドウは、画面の上に表示されるポップアップ形式のウィンドウです。
活用例
- 会員登録・ログイン：一時的な入力フォームとして利用
- クーポン表示：ECサイトでの割引情報の提示
- 画像の拡大表示：ギャラリーなどでの使用
パンくずリスト（Breadcrumbs）
パンくずリストは、現在のページがサイト内のどの階層にあるかを示すナビゲーションです。
活用例
- ECサイト：
ホーム > カテゴリ > 商品名 - ブログ：
ホーム > 記事一覧 > 記事タイトル
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/category">カテゴリ</a></li>
<li>現在のページ</li>
</ol>
</nav>タブ（Tabs）
タブは、異なるコンテンツを切り替えて表示するためのUI要素です。
活用例
- 商品ページ：「説明」「レビュー」「仕様」の切り替え
- FAQ：「購入前」「購入後」「サポート」などの分類
- ダッシュボード：異なるデータの表示を切り替え
アコーディオン（Accordion）
アコーディオンは、クリックするとコンテンツが開閉するパーツです。
活用例
- FAQページ：質問をクリックすると回答が表示
- サイトの詳細情報：長文を折りたたんで見やすくする
- ナビゲーションメニュー：モバイルサイトでの活用
カード（Card）
カードは、画像やテキストをまとめたブロック状のコンテンツです。
活用例
- ブログ記事一覧：記事のサムネイル＋タイトル＋概要
- ECサイトの商品一覧：商品画像＋価格＋ボタン
- ニュースサイト：トピック別の情報整理
プログレスバー（Progress Bar）
プログレスバーは、進行状況を視覚的に示すパーツです。
活用例
- ページの読み込み進捗：ローディングアニメーション
- フォームの入力進行：「ステップ1/3」などの表示
- 動画や音楽プレイヤー：再生進行の可視化
まとめ
Webサイトは、ヘッダーやフッター、FV、フォーム、アンカーリンクだけでなく、サイドバー、スライダー、モーダルウィンドウ、パンくずリスト、タブなど…多くのパーツで構成されています。
制作現場で円滑なコミュニケーションを取るためにも、まずはこの要素の名前を覚えておきましょう！
