【初心者向け】ホームページを構成するパーツの名称と役割

スポンサーリンク
この記事は約6分で読めます。

初心者向けにホームページを構成するパーツの名称と役割をまとめています。

※各パーツの呼び方は会社や人によって異なることがあります。

【初心者向け】ホームページを構成するパーツの名称と役割

スポンサーリンク

トップページ(ホーム)

Webサイトの階層で最上位のページのことです。

  • sample.com/

名刺、メール署名、外部サイトに掲載するときにリンクを貼るなど重要なページです。

企業サイトでは最もアクセス数の多くなるページです。

スポンサーリンク

下層ページ(サブページ)

トップページより下の階層にあるページのことです。

企業サイトでいう、以下のページはすべて下層ページです。

  • sample.com/about/ ※会社概要
  • sample.com/service/ ※サービス紹介
  • sample.com/access/ ※アクセス
  • sample.com/recruit/ ※採用
  • sample.com/blog/ ※ブログ
  • sample.com/contact/ ※お問合せ

英語(ローマ字)でシンプルに分かりやすいURL名にすることでユーザーの使いやすいサイトになります。

  • × 日本語URL
  • × 長いURL
  • × 英数字の文字列
スポンサーリンク

ファビコン

ブラウザのタブや、ブックマークバーに表示される小さいアイコンのことです。

ファビコンの例
出典:転職ブログ

サイトのブランディングや、ブックマークしたときに目立たせる(認知してもらう)ために重要です。

ファビコンはサイトイメージに合う、目をひくアイコンを設定しましょう。

スポンサーリンク

ヘッダー

ページ最上部のサイト全体の共通パーツのことです。

ヘッダーの例_日本マイクロソフト
出典:日本マイクロソフト

ヘッダーにはロゴ、サイト名、グローバルナビ、問合せボタン、電話番号などを設置します。

サイト構成が分かるメニュー、すぐに問合せができるようにすることが重要です。

スポンサーリンク

グローバルナビ(グロナビ)

サイト全体の共通ナビゲーションメニューのことです。

グローバルナビの例_Apple
出典:Apple(日本)

サイトの主要なメニューを設置します。

メニューは細かく分類しすぎると分かりにくいため、重要な項目に絞って設置するのがポイント。
アクセス解析ができれば、よく見られているページ順に左から並べるなど改善の余地ありです。

細かい個別のリンクや、プライバシーポリシーなど重要度が低いと思われるリンクはフッター内に配置するといいです。

スポンサーリンク

ハンバーガーメニュー

主にスマートフォンやタブレットのデザインで使われるグローバルナビをコンパクトにまとめたメニューのこと。

ハンバーガーメニューの例_Google
出典:Google

「三本線」の見た目が「ハンバーガー」に見えることからハンバーガーメニューと呼ばれています。

スッキリとコンパクトにまとめられる半面、認知されにくいのが欠点。
重要なメニューは本文中にも表示するなどの工夫が必要です。

スポンサーリンク

アイキャッチ

遷移先のページイメージを表すイメージ画像のこと。

アイキャッチの例_バズ部
出典:バズ部

「ユーザーの目を引くための画像」という意味です。

遷移先のイメージ画像になるため、興味をひくもの、小さくてもはっきり分かるものが良いです。

スポンサーリンク

サムネイル

サイドバーの新着記事、人気記事などで使われる小さいイメージ画像のことです。

サムネイルの例_ferret
出典:ferret

「親指大の大きさ」くらい小さい画像という意味です。

アイキャッチよりも縮小表示されて表示されます。

スポンサーリンク

メインビジュアル(MV・キービジュアル)

Webサイトのトップページの上部にある一番大きい画像のことです。

メインビジュアルの例_日本マイクロソフト
出典:日本マイクロソフト

Webサイトを訪れたユーザーが最初に目にする部分です。

イメージ画像、サイトの特徴を訴求するテキストなど「このサイトを読みたい」と興味を持ってもらえるように作るのが大事。

メインビジュアルでユーザーの心を掴まないと直帰してしまうので要検討です。

全画面でイメージを伝える、逆に、メインビジュアルの高さを低くしてメインコンテンツを見せるなど目的に応じて作るのが重要です。

スポンサーリンク

スライダー

トップページのメインビジュアルなどで、複数枚の画像が横に切り替わるデザインのことです。

スライダーの例_Amazon
出典:Amazon.co.jp

動きをつけることでユーザーの目を引くことができます。

自動再生させる場合は適度なスピードで、また、ユーザーのペースでスライドを選べるような工夫が必要です。
(自動再生を止められる、スライド画像の下にナビゲーションをつける など)

また、スライダーは見栄えがいいですが、2枚目以降の画像が見られにくい特性があるので、スライド枚数や載せる順番も検討しましょう。

ちなみにスライダー中の「←(左にスライド)」「→(右にスライド)」はアローアイコンと呼ばれます。

スポンサーリンク

メインコンテンツ(本文)

ページの主となるコンテンツが書かれた部分です。

メインコンテンツ_ferret
出典:ferret

メインコンテンツはLPなどの1カラム(列)の場合、メインコンテンツとサイドバーの2カラムの場合などがあります。

スポンサーリンク

サイドバー

サイドバーは補足情報を配置するパーツです。

サイドバーの例_ferret
出典:ferret

ナビメニュー、おすすめ記事、人気記事、新着記事、カテゴリ、検索、プロフィール、バナー、アーカイブなどを配置して使用します。

あれもこれもと情報を載せるとユーザーの使い勝手が悪くなるので、情報量は適度にするのがポイントです。

スポンサーリンク

バナー

Webサイト内の画像全般を指します。

広告、特集ページへのリンク、CVページへの導線など、目立たせたいコンテンツへの誘導に使います。

画像にはaltを設定してSEO対策しましょう。

スポンサーリンク

ソーシャルボタン

Twitterのツイートボタン、FacebookのいいねボタンなどのSNSシェアするためのボタンです。

ソーシャルボタンは必要と思われるSNSに絞って設置しましょう。

あれもこれもと並べるのはユーザー体験上(うざい)、また、デザイン上、良くないです。

スポンサーリンク

フォーム

問合せフォームや注文フォームなど、ユーザーに指定の定型フォーマットに情報を入力してもらうことで連絡を受け取れる仕組みです。

必須の入力項目が多かったり、入力方法が分かりにくいなどで離脱が起こります。

入力項目は必要最小限に、迷わず入力できる項目設定をしましょう。

スポンサーリンク

フッター

ページ最下部のサイト全体の共通パーツのことです。

フッターの例_日本マイクロソフト
出典:日本マイクロソフト

ロゴ、CVボタン、ナビメニュー、サイトマップ、プロフィール、運営会社情報、コピーライトなどを設置するのが一般的です。

スポンサーリンク

CVボタン(コンバージョンボタン)

お問合せ、資料請求、商品・サービスの詳細ページ、予約、購入などのコンバージョンページへのリンクボタンです。

CVボタンの例_Apple
出典:Apple(日本)

目立つ場所、目立つデザインで配置するのがポイント。

スポンサーリンク

カテゴリ

ブログページなどで、記事のジャンルを表す分類機能です。

ユーザーの使いやすさを意識してカテゴリ設定するのが重要。

分かりやすいカテゴリ名、1記事1カテゴリで設定するのがポイントです。

スポンサーリンク

パンくずリスト

ユーザーがサイト内のどのページにいるかを分かりやすくするために、トップページからの階層を表示したリンクのこと。

パンくずリストの例_Apple
出典:Apple(日本)

名前の由来は童話「ヘンゼルとグレーテル」。

SEO上も設置することが重要です。

スポンサーリンク

ページトップボタン

クリックするとページ最上部に移動できるボタンのことです。

縦長のページでよく見られます。

スポンサーリンク

コンテンツ

テキスト、画像、動画などのページの中身のことです。

ユーザーが欲しい情報をまとめるのが大事です。

コンテンツマーケティングではこのコンテンツの品質を重視します。

スポンサーリンク

アンカーリンク

別のページへ遷移するためのリンク設置個所のことです。

テキストリンクは遷移先を表す名称に設置しましょう。

スポンサーリンク

サイトマップ

ホームページ内のすべてのページを載せた、Webサイト内のすべてのページを載せた目次ページです。

ユーザーが分かりやすいように設置します。

検索エンジン向けには別途XMLサイトマップを作ります。

以上です。

Web制作を独学で身につける方法はこちらの記事もどうぞ。
»独学でWeb制作を習得する勉強方法