ホームページは、ヘッダーやサイドバーなど数多くのパーツによって構成されています。名称を正しく知っておくと、制作会社への発注や社内共有だけでなく、自分でホームページを更新する際にも役立ちます。本記事では、基本パーツから動きのあるパーツまで、覚えておきたい名称を一覧で解説します。
パーツ名称を知っておくべき理由とは？
ホームページの制作や修正を依頼する際、パーツの正式名称を知っておくと、イメージを具体的に伝えやすくなります。名称があいまいなまま「ここの部分」「あの画像」といった伝え方をすると、担当者との間で認識のずれが生まれやすくなるためです。
特に、社内で複数人がホームページ管理に関わっている場合や、制作会社とやり取りをしながら運用している場合は、共通の呼び方を持っておくことが後々の手間を減らすことにつながります。
パーツ名称があいまいだと、どんな問題が起きる？
パーツ名称を正確に把握していないと、発注時の説明が伝わりにくくなるだけでなく、修正のたびに認識をすり合わせる工程が発生します。
たとえば「トップの画像を変えたい」と伝えたつもりが、実際にはアイキャッチとヘッダー画像のどちらを指しているのか分からず、意図と異なる箇所が修正されてしまうケースも珍しくありません。
ホームページ更新が本業の片手間になっている場合、担当者が変わるたびに同じ説明を一からやり直す負担も発生しがちです。名称が共有されていれば、引き継ぎの際もスムーズに意図を伝えられます。
パーツ名称の理解不足でよくある失敗
パーツ名称の理解不足は、次のような失敗につながりやすくなります。
- 失敗①：イメージと異なるデザインが納品され、修正依頼を繰り返すことになる
- 失敗②：社内資料やマニュアルで呼び方が統一されず、担当者間で混乱が生じる
- 失敗③：CMSの管理画面に表示される項目名が理解できず、更新作業自体が止まってしまう
これらは、名称を正確に覚えていないことよりも、制作側と共通の地図を持てていないことが原因で起こります。
パーツ名称を正しく使いこなすための考え方
すべてのパーツ名称を完璧に暗記する必要はありません。まずは基本パーツ（静的な要素）と動きのあるパーツ（動的な要素）の2つに分けて整理すると、理解しやすくなります。
基本パーツは、ヘッダーやフッターのようにページの土台となる要素です。一方、動きのあるパーツは、スライダーやアコーディオンのように閲覧者の操作や表示のタイミングに応じて変化する要素を指します。
この分類を意識しておくと、制作会社やCMSの管理画面とのやり取りでも迷いにくくなります。
ホームページの基本パーツ名称
ここでは、ホームページで基本となるパーツの名称と役割を解説します。
トップページ
トップページとは、ホームページの入り口となるページです。多くの閲覧者が最初に訪れる場所であるため、誰に向けたサイトか、何が得られるかを簡潔に伝える構成が求められます。
また、トップページの内容が曖昧だと、せっかく訪れた閲覧者がそのまま離脱してしまう可能性も高くなります。問い合わせや資料請求など、次に取ってほしい行動への導線も忘れずに設置しておくことが大切です。
下層ページ
下層ページとは、トップページから派生する個別のページです。会社概要やサービス紹介、お問い合わせなどが該当し、トップページで触れきれない詳細情報を伝える役割を持ちます。
下層ページは、特定のキーワードで検索されたときに直接訪問される入り口にもなるため、ページごとにテーマを絞った情報を掲載しておくと、検索経由での流入も期待しやすくなります。
メインコンテンツ
メインコンテンツとは、ヘッダーとフッターに挟まれた、ページの主要な情報を表示するエリアです。企業によって表示内容は異なりますが、閲覧者に最も届けたい情報を掲載するため、更新頻度が高くなりやすい部分でもあります。
更新が滞ると、閲覧者に情報が古いという印象を与えてしまい、問い合わせや申し込みの機会を逃す原因にもなりかねません。
ヘッダー
ヘッダーとは、ページ上部にある領域のことです。どのページでも基本的に同じ位置・内容で表示されるのは、閲覧者がサイト内のどこにいても迷わずナビゲーションやロゴにアクセスできるようにするためです。
訪問者が最初に目にする部分であるため、第一印象を左右します。ロゴやサイト名に加えて、電話番号やお問い合わせボタンを設置しておくと、閲覧者が次の行動に移りやすくなります。
参考にしたいヘッダーのデザインについて、詳しくは下記の記事をご覧ください。
グローバルナビ
グローバルナビとは、サイトの主要ページへ案内するメニューです。ヘッダー内に設置されることが多く、閲覧者が目的の下層ページへたどり着きやすくなるため、規模の大きいサイトほど重要性が増します。
メニュー項目が多すぎると、かえって選びにくくなるため、優先度の高いページから順に整理することが求められます。
フッター
フッターとは、ページ下部にある領域です。コピーライトのみを表示するシンプルな構成もあれば、企業情報やSNSリンク、サイトマップなど、メインコンテンツを補う情報をまとめて掲載するケースもあります。
ページ最後まで読み進めた末に目にする部分でもあるため、次のアクションにつながる連絡先やサイトマップを配置しておくと、離脱前の後押しになります。
サイドバー
サイドバーとは、メインコンテンツの横に配置される縦長の領域です。関連情報や広告などを表示できる一方、設置するとメインコンテンツの表示幅が狭くなるため、情報量とのバランスを考えて設置を判断する必要があります。
スマホでの閲覧が多い場合は、サイドバーの表示位置や有無自体を見直す必要があるケースもあります。
パンくずリスト
パンくずリストとは、現在閲覧しているページの位置を簡易的に示すリンク一覧です。閲覧者がサイト内のどこにいるかを視覚的に把握できるだけでなく、検索エンジンがサイト構造を理解する手がかりにもなるため、規模の大きいサイトほど設置の効果を実感しやすくなります。
多くのCMSでは自動生成される機能が備わっているため、手動で一つひとつ設定する手間がかからない点も、導入のハードルを下げる要因になっています。
CTAボタン
CTAボタンとは、サイトの目的達成を後押しするボタンです。予約や購入、お問い合わせなど、サイトの目的に応じて文言を変えることで、閲覧者が次に取るべき行動を明確に示せます。
ボタンの色や配置によってもクリック率は変わるため、周囲の背景とのコントラストを意識して目立たせることもポイントです。
クリックしたくなるようなボタンデザインについて、詳しくは下記の記事をご覧ください。
アイキャッチ
アイキャッチとは、ページや記事で最初に目に入る画像のことです。第一印象を左右する部分であるため、内容と関連性の高い画像を選ぶことが、閲覧者の興味を引きつけるうえで重要になります。
複数ページで並んで表示される場合は、画像のサイズやテイストを揃えておくと、サイト全体の統一感も保ちやすくなります。
ファビコン
ファビコンとは、ブラウザのタブやブックマークに表示される小さな画像です。ブランディングに役立つだけでなく、多数のタブを開いている状態でもサイトを見分けやすくする役割を持ちます。
設定自体は多くのCMSで簡単に行えるため後回しにされがちですが、細部まで作り込まれた印象を与えるためにも早めに用意しておくとよいでしょう。
バナー
バナーとは、他ページへのリンクを画像化したものです。テキストリンクよりも視覚的に注意を引きやすいため、キャンペーンや特集ページへの誘導に活用されます。
人は文字よりも先に画像へ視線が向かいやすいため、伝えたい訴求内容を一目で理解できるデザインにしておくことが効果を高めるポイントです。
バナーデザインの基本について、詳しくは下記の記事をご覧ください。
コピーライト
コピーライトとは、ページ下部に表示される著作権表示です。著作権マークや運営者名、開設年などを記載することで、無断転載や無断コピーへの牽制になります。
表示自体は必須ではありませんが、運営者情報を明確に示すことは、サイトの信頼性を伝えるうえでも役立ちます。
コピーライティングの基本について、詳しくは下記の記事をご覧ください。
SNSシェアボタン
SNSシェアボタンとは、ページの内容をSNSに投稿できるボタンです。閲覧者自身のアカウントを通じてコンテンツが拡散されるため、追加の広告費をかけずに認知を広げられる可能性があります。
どのSNSのボタンを設置するかは、想定読者が普段利用しているSNSに合わせて選ぶと、シェアされる機会を増やしやすくなります。
サイト内検索窓
サイト内検索窓とは、サイト内のページやコンテンツを検索できる機能です。コンテンツ量が多いサイトほど、閲覧者が目的の情報にたどり着きやすくなる効果を発揮します。
逆に、ページ数が少ないサイトでは、検索窓よりもナビゲーションを整理する方が優先度は高くなります。
RSS
RSSとは、更新情報を一覧で配信する仕組みです。近年はSNS経由での情報接触が主流になったこともあり、以前ほど閲覧者が直接目にする機会は減っていますが、ブログや外部サービスへの更新通知として裏側で活用されるケースは今も多くあります。
ブログ運用を行う場合は、意識せずとも自動でRSSフィードが生成される仕組みを備えたCMSも多く、特別な設定を行わなくても機能するケースがほとんどです。
ホームページの動きのあるパーツ名称
続いて、閲覧者の操作や表示タイミングに応じて変化する、動きのあるパーツを解説します。
スライダー
スライダーとは、複数の画像を切り替えて表示する機能です。省スペースで複数のビジュアルを紹介できるため、トップページのメインビジュアルなどによく採用されます。
ただし、画像を切り替える速度が速すぎると、閲覧者が内容を読み取る前に次の画像へ切り替わってしまうため、表示時間の設定にも配慮が必要です。
ポップアップウィンドウ
ポップアップウィンドウとは、画面上に自動的に表示されるウィンドウです。キャンペーン告知や離脱防止のメッセージなど、閲覧者に気づいてほしい情報を伝える際に使われます。
表示頻度が高すぎると、閲覧の妨げになり離脱の原因にもなるため、表示のタイミングや回数の調整も欠かせません。
ハンバーガーメニュー
ハンバーガーメニューとは、三本線のアイコンで表示されるナビゲーションです。線が並んだ見た目がハンバーガーに似ていることが名前の由来で、表示スペースの限られるスマホでよく採用されます。
限られた画面幅の中でも、タップひとつでメニュー全体を表示できるため、スマホの操作性を損なわずにナビゲーションを提供できます。
ドロップダウンメニュー
ドロップダウンメニューとは、メニュー項目をクリックまたはタップすると、直下にサブメニューが表示される仕組みです。
階層の深いサイトでも、限られたスペースで多くのページを案内できます。パソコンでの閲覧が中心のサイトで多く採用されており、マウス操作でスムーズにサブメニューを開ける点が特徴です。
ノーコードCMSのBiNDupでは、簡単な設定だけでドロップダウンメニューを作ることができます。詳しくは下記の記事をご覧ください。
アコーディオン
アコーディオンとは、クリックすることでコンテンツが開閉するブロックです。楽器のアコーディオンの動きになぞらえて名付けられており、情報量の多いページをすっきり見せる効果があります。よくある質問ページなど、項目数が多く一覧性よりも見やすさを優先したい場面で特に効果を発揮します。
ノーコードCMSのBiNDupでは、簡単な設定だけでアコーディオンを作ることができます。詳しくは下記の記事をご覧ください。
タブメニュー
タブメニューとは、タブを切り替えることで表示内容が変わる仕組みです。ページ遷移を伴わずに情報を切り替えられるため、比較したい情報を並べて見せたい場合に適しています。料金プランの比較や、サービス内容ごとの説明を並べたい場合など、情報を横並びで見せたいシーンに向いています。
ページネーション
ページネーションとは、コンテンツをページ単位で分割する機能です。商品一覧や記事一覧など、情報量の多いページを分割することで、閲覧者が情報を読み取りやすくなります。近年は次のページへの遷移を挟まず表示件数を追加していく無限スクロールという手法も使われますが、ページネーションには今どのあたりを見ているか把握しやすいという利点があります。
ノーコードCMSのBiNDupでは、簡単な設定だけでページネーションを作ることができます。詳しくは下記の記事をご覧ください。
パララックス
パララックスとは、スクロールに応じて背景と前景の動くスピードに差をつけ、奥行きを感じさせる表現手法です。視覚的な印象を強められる一方、実装や動作確認に手間がかかる場合もあるため、目的を明確にしたうえで採用を検討することをおすすめします。
表示速度が重くなりやすい表現でもあるため、スマホでの閲覧時の動作確認も忘れずに行うようにしましょう。
パーツ名称の理解を、実際のホームページ作成に活かすには
ここまで、ホームページを構成する基本パーツと動きのあるパーツの名称を解説してきました。ただし、名称を理解できても、実際にそのパーツを自分の手で編集・修正できる環境がなければ、日々の運用では活かしきれません。
制作会社に都度依頼する形では、修正のたびに時間とコストがかかってしまいます。
ホームページ作成ツールを選ぶ際は、名称を知ったうえで自分自身が更新できるかどうかも、判断基準のひとつになります。BiNDupは、特許取得のブロック編集によってヘッダーやサイドバー、CTAボタンといったパーツをノーコードで直感的に編集できるサービスです。
まずは30日間無料でBiNDupでのホームページ作成を体験してみてください。
