ホームページは、ヘッダーやナビゲーションなど、さまざまな機能に分かれた「パーツ」が組み合わさって構成されています。見やすく使いやすいUIデザインを実現するには、それぞれのパーツが役割に適した場所へ配置されていることが重要です。
Webサイトビルダーなどで作成する場合に限らず、制作を業務委託する場合でも、これらのパーツの名称や特徴といった知識は大いに役立ちます。Webサイトの作り方をある程度理解しておけば、必要な要素を検討したり制作会社やWebデザイナーへ指示したりする際に、スムーズに進むようになるでしょう。
本記事では、ホームページを構成する主なパーツの名称と、それぞれの役割についてわかりやすく解説します。
ホームページ構成パーツの名称
メインビジュアル
メインビジュアルは、ホームページの上部に大きく表示される画像や動画です。ヒーローイメージと呼ばれることもあり、ユーザーの目を引き、ブランドや商品、サービスの特徴とイメージを視覚的に伝える役割があります。
シューズブランドのCONVERSEでは、トップページのメインビジュアルにインパクトのある写真を大きく使用し、ブランドや商品の魅力を視覚的に伝えています。
ヘッダー
ヘッダーは、ホームページの最上部にある領域のことです。多くの場合、主要なページへのリンクをまとめたグローバルナビゲーションやブランドロゴが配置されています。各ページ共通で表示されているため、ネットショップでは商品カテゴリーを表示したり、会社概要や問合せのページへのリンクを設置したりすることで、ユーザーが目的の情報へスムーズに移動できるようになります。
家具・インテリアショップのKaNAdeMONOでは、ホームページの最上部に「カテゴリー」「スタイル」「読み物」などのメニューを配置し、目的に応じて商品やコンテンツを探せるようにしています。
アナウンスバー
アナウンスバー（お知らせバー）は、ヘッダーの上下いずれかで画面の横いっぱいに表示される帯状の領域です。お知らせやセール情報など、ユーザーに伝えたい情報を目立たせるために使われます。固定のテキストだけでなく、注意を引くため横方向に流れたり内容が切り替わったりといった動きをつけることもあります。
家具・インテリア専門店のRASIKでは、アナウンスバーでクーポン情報と全品送料無料の案内を切り替えて表示し、ユーザーにお得な情報を伝えています。
ロゴ
ロゴは、ブランドや企業を象徴する重要なビジュアル要素です。ホームページの構成パーツとしては、一般的にヘッダーの左上や中央に配置され、クリックするとトップページに戻れる機能も与えられています。
ロゴデザインを行う場合には、Shopify（ショッピファイ）のロゴメーカーで作成することもできます。ブランド名を入力するとAIがロゴのデザインを自動で提案し、必要に応じて色やフォントなどの調整も可能です。作成したロゴは、ホームページやSNS、名刺など、さまざまな用途に活用できます。
アパレルブランドのユニクロでは、ロゴが画面左上に固定されており、ページをスクロールしても同じ位置に表示されます。別のページに移動してもロゴの位置は変わらず、クリックするとトップページに戻れるようになっています。
ナビゲーションメニュー
ナビゲーションメニューとは、Webサイト内のページへ移動するためのリンクなどがまとまったものです。ユーザーが目的の情報を見つけやすいよう、ページや情報を分かりやすく整理して表示します。
ナビゲーションメニューの主な種類は次のとおりです。
- ハンバーガーメニュー：三本線のアイコンをタップするとメニューが展開されるパーツです。カテゴリーや会社概要、サービスなど、各ページへのリンクなどが表示されます。メニューを格納してスペースを有効活用できるため、スマートフォンやタブレットなどの画面サイズが限られた端末向けのWebデザインに適しています。
- ドロップダウンメニュー：メニューをクリックしたり、マウスポインター（小さな矢印）を合わせたりすると、直下にサブメニューが展開される仕組みです。たとえばECサイトでは、「カテゴリー」にマウスポインターを合わせた際に、「バッグ」「財布」「小物」などの項目を表示させることができます。関連する項目を階層化して整理できるため、限られたスペースに多くのメニューを整理して表示できます。
- メガメニュー：通常のドロップダウンメニューよりも広い、画面いっぱいの表示領域を使うメニューパーツです。多数のカテゴリーやリンクを、複数列に整理して一覧表示するのに適しています。
- パンくずリスト：表示しているページの階層をリスト化したナビゲーションパーツです。「トップページ＞商品カテゴリー＞商品ページ」といった階層型表示で、ユーザーが現在どのページを閲覧しているのかを把握しやすくします。また、検索エンジンのWebクローラーにホームページの階層構造を伝えることで、SEO対策にも効果を発揮します。
スポーツファッションブランドのNEW ERAでは、カテゴリーのリンクやブランド紹介がメガメニューで実装されています。「ヘッドウェア」の下に「キャップ」「ハット」「ニット」などのサブカテゴリーを並べ、さらに商品やコレクションへのリンクを設けており、ユーザーが目的の商品を見つけやすいように整理されています。
メインコンテンツ
メインコンテンツは、ページの中心となる情報を掲載する領域です。商品説明やサービスの紹介、記事本文などがメインコンテンツにあたり、各ページの目的に応じてテキストや画像、さまざまなホームページの構成パーツを組み合わせて作られます。
ハイキングに特化したアウトドアブランドの山と道では、トップページのメインコンテンツを、商品紹介やブランド紹介、最新のお知らせなどのページへのリンクで構成しています。大きなアイキャッチ画像や動画により、それぞれのページへ迷わずアクセスできるようになっています。
サイドバー
サイドバーは、ホームページのメインコンテンツの左右に配置される縦長のメニューパーツです。たとえば、以下のような要素が配置されます。
- 関連ページへのリンク：Webサイト内の関連するページへ誘導するリンク
- 商品カテゴリー：商品を種類やカテゴリーごとに整理したメニュー
- サブメニュー：メインメニューから展開される追加のメニュー
- CTA：ユーザーに「購入する」「申し込む」「予約する」「SNSでシェアする」など、特定の行動を促すボタン
- SNSフィード：SNSに投稿されたコンテンツを表示する機能
- 最新のブログ記事：最近公開されたブログ記事へのリンク
- フォーム：メールマガジンへの登録や問合せなど、ユーザーから情報を入力してもらうためのフォーム
- 会社概要：企業の基本情報や事業内容などを紹介するページへのリンク
- 商品情報：商品の画像や価格、説明などの情報
- カスタマーボイス：表示している商品やサービスの口コミなど
日用品や食品などを幅広く扱うLOHACOでは、サイドバーに多彩な商品カテゴリーへのリンクがサムネイル画像で分かりやすく配置されています。また、その下部には企業情報や配送料についてのリンクもあり、ユーザーが目的のページへ進むためのナビゲーションがまとまっています。
フッター
フッターは、ホームページの最下部にあり、ヘッダーと同様に各ページ共通で表示される領域です。会社概要や問合せ先、利用規約、配送ポリシー、返品ポリシーなど、利用者が必要に応じて確認する情報へのリンクを配置します。ヘッダーに配置すると情報が多くなりすぎる項目をまとめる場所としても活用され、主要ページへのリンクとホームページの全体像をまとめたサイトマップを設置するのにも適しています。
ポータブル電源を販売しているJackeryは、ECサイトの最下部に企業情報や製品情報、サポート、問合せなどのリンクをまとめ、ユーザーが情報を必要としたときにすぐ見つけやすい構成にしています。
ランディングページ
ランディングページ（LP）は、Web広告やメール、SNSなどを通じてユーザーが最初にたどり着くページです。商品の購入や申し込み、メールマガジンの登録、キャンペーンの紹介など、流入経路ごとに特定の目的や行動に特化したシンプルな構成にするのが一般的です。
転職サービスのJAC Recruitmentは、ハイクラス転職に特化したサービスの特徴や利用者の声、キャリアアップ事例などをまとめ、「無料会員登録」などのCTAも複数配置したランディングページを活用しています。
フォーム
フォームは、問合せやアンケート、資料請求などで、ユーザーからの情報入力を促すためのパーツです。必要な項目に絞って設計するとともに、入力した情報がどのように利用されるのかを明記するなど、ユーザーが安心して入力できるよう配慮することも大切です。
アパレルブランドのSOEJUでは、会員登録フォームの入力項目を氏名やメールアドレス、パスワードなどシンプルに抑えることで、ユーザーの負担を軽減しています。
ブログ
ブログは、商品やサービスに関する情報、またそれらに関連するテーマやノウハウ、最新情報など、ユーザーに役立つ情報を発信するコンテンツです。ブログはマーケティングに効果的なコンテンツで、ブランドロイヤルティや顧客満足度を高める情報提供のほか、SEO対策やコンテンツマーケティングなどの施策にもつながります。
ライフスタイルショップの北欧、暮らしの道具店では、暮らしやファッション、インタビューなど、顧客の悩みを解決する記事や実際に商品を利用したレビューなど、商品に関連するさまざまなコンテンツを発信しています。
カスタマーボイス
商品やサービスの購入者から寄せられた評価や感想は、検討中のユーザーに具体的な情報を提供し、ブランドへの信頼感を高めることにつながります。文章によるレビューや動画のほか、SNSの投稿（UGC）などを紹介したりする方法もあります。
ランドセルブランドのgriroseは、顧客の声としてInstagram（インスタグラム）の投稿をシェアし、リアルな声を届けています。
チェックアウト
チェックアウト機能は、ECサイトなどで注文を完了するまでの一連のプロセスを処理するものです。スムーズな購入体験を提供するには、購入手続きの入力や操作を減らしユーザーの負担を抑えることが重要です。
Shopifyに組み込まれたShopify Checkout（チェックアウト）は、多様な決済に対応したShop Pay（ショップペイ）に対応しているほか、代表的な決済手段をワンタップで選択できるなど、スムーズなチェックアウト手続きでコンバージョン率を高める工夫がされています。
小嶋陽菜さんプロデュースのアパレルブランドHer lip toでは、ワンタッチでカード情報やお届け先を入力できるShop Payがユーザーから好評を得ており、利用率は59％に達しています。さらに、Shop Payユーザーの平均注文単価は、他の決済方法を利用する顧客より23％高く、ブランドロイヤルティが高い顧客層のリピート購入を促進し、LTV（顧客生涯価値）の向上にも貢献しています。
まとめ
ホームページは、コンテンツやナビゲーション、メニューなどさまざまなパーツで構成されています。優れたWebデザインとは、グラフィックやビジュアルにこだわるだけではなく、それぞれのパーツの役割を理解して適切に配置し、UX（ユーザー体験）を高めたデザインのことを指します。
本記事で紹介したホームページを構成するパーツの名称や基本知識を頭の片隅に入れておけば、Webデザイナーや制作会社にイメージや要望を伝えやすくなるでしょう。また、ホームページの制作や運用をさらに業務効率化したい場合には、多彩なパーツや構成、レイアウトのカスタマイズも簡単に行えるShopifyを、ぜひご活用ください。
ホームページの構成パーツの名称に関するよくある質問
ホームページレイアウトの基本的な構成パーツとは？
ホームページレイアウトの基本的な構成パーツは、ヘッダー、メインコンテンツ、フッターの3つです。さらに、ユーザーの利便性を考慮しながらサイドバーやグローバルナビゲーション、フォームなどのパーツを追加します。
グローバルナビゲーション、ドロップダウンメニュー、メガメニューの違いは？
グローバルナビゲーションは、ホームページの主要なページへのリンクをヘッダーにまとめた案内メニューです。ドロップダウンメニューは、メニューをクリックしたりマウスポインターを合わせたりすると、サブメニューが展開される仕組みを指します。メガメニューは、ドロップダウンよりも広い表示範囲のメニューを展開できるため、複数のカテゴリーやリンクを一覧で表示する場合に適した仕組みです。
ホームページのパーツ構成を設計するときに重要なことは？
ホームページのパーツ構成を設計するときに重要なのは、ユーザーが必要な情報を見つけやすく、目的の行動を取りやすい構成にすることです。各パーツの役割を理解したうえで、優先度や配置を考えましょう。
