
「ホームページ」なのか「Webサイト」なのか、トップページと何が違うのか──。制作会社との打ち合わせや社内共有の場で、用語のあいまいさが原因で伝わらない・齟齬が生まれるケースは少なくありません。本記事では、「Webサイト制作」に関わるホームページの名称や各パーツ名を整理し、コミュニケーションロスを減らしながら、サイト改善やマーケ施策に生かせる“通じる言葉”の基本を解説します。
目次
「ホームページ」と「Webサイト」の呼び方の違いを整理する

ホームページ制作やWebマーケティングの現場では、「ホームページ」と「Webサイト」が同じ意味で使われることもあれば、厳密に区別されることもあります。用語の使い分けを理解しておくと、社内外のコミュニケーションが格段にスムーズになります。
一般的な日本語では、「ホームページ」はインターネット上にあるページ全般を指す言葉として広く浸透しています。一方、Web制作・マーケティングの専門領域では、複数のページをまとめた全体を「Webサイト」、その入り口となる最初のページを「トップページ」や「ホーム」と呼ぶケースが多くなっています。
検索や打ち合わせの場面で「ホームページ」という言葉を使う際には、
- 1枚のページのことを言っているのか
- 企業サイト全体を指しているのか
- ブラウザ起動時に表示される「ホーム」の意味なのか
を意識しておくことが重要です。意味を整理したうえで用語を選ぶことで、依頼内容や改善指示の意図が正確に伝わり、手戻りやトラブルを防ぎやすくなります。
一般的な会話で使われる「ホームページ」とは何を指すか
一般的なビジネスの場面で「ホームページ」と言う場合、多くは会社や店舗の公式サイト全体、もしくは検索して最初に開いたページを漠然と指しています。正確にはトップページだけを指す場合も、サイト全体を含めた意味で使われる場合もあり、文脈によって解釈が変わるあいまいな言葉になっています。
一方で、日常会話では以下のような使われ方がほとんどです。
| 言い方 | 実際に指していることの例 |
|---|---|
| 「会社のホームページを作りたい」 | 会社のコーポレートサイト全体 |
| 「ホームページに載せておいて」 | トップページまたは主要なサービス紹介ページなど |
| 「お店のホームページ見ました」 | 店舗情報が載っているサイト全体 |
このように、一般的な会話では厳密な定義よりも「インターネット上の自社情報が載ったページ一式」というイメージで使われています。そのため、制作会社やマーケ担当者と打ち合わせを行う際には、「ホームページ」と伝えたときに、トップページなのかサイト全体なのかを補足して共有しておくことが重要です。
制作・マーケ現場での「Webサイト」との使い分け
制作やマーケティングの現場では、「ホームページ」よりも「Webサイト」という呼び方が基本と考えられています。理由は、「Webサイト」がより技術的・マーケティング的な概念を正確に表しているからです。
一般的な使い分けのイメージは次の通りです。
| シーン | よく使う呼び方 | ニュアンス・意図 |
|---|---|---|
| 社外向けの雑談・営業トーク | ホームページ | 相手に分かりやすい日常用語として使用 |
| 制作会社との仕様・構成の話 | Webサイト | ページ群全体の構造や設計、機能を含めた話 |
| マーケティング・アクセス解析の場面 | Webサイト | 集客・導線・CVなどビジネス成果を前提とした議論 |
制作会社やマーケターと打ち合わせを行う際は、「自社のWebサイト全体」「コーポレートサイト」「採用サイト」など、サイト単位で表現すると、意図がより正確に伝わります。一方、社内の非専門メンバーや顧客には「ホームページ」と伝えた方が理解されやすいケースもあるため、相手によって言葉を使い分けることが重要です。
トップページとホームページの違いを理解する
トップページとホームページは、同じ意味で使われることが多いものの、厳密には異なる概念です。混同すると指示があいまいになり、制作会社とのやり取りで誤解を招きやすくなります。
| 名称 | 一般的な意味 | 範囲 |
|---|---|---|
| ホームページ | Webサイト全体、ある企業・サービスの公式サイト全体 | サイト一式 |
| トップページ | サイトを開いたときに最初に表示される入口ページ | サイト内の1ページ |
多くのビジネス現場では、「会社のホームページをリニューアルしたい」はサイト全体の刷新を指し、「トップページだけデザインを変えたい」は入口ページのみの変更を指します。設計や見積もりの話では「サイト全体(ホームページ)」なのか「トップページ単体」なのかを、言葉で明確に区別して伝えることが重要です。
名称を正しく理解しておくべき理由とメリット

Webサイト制作の用語は、意味を取り違えると大きなロスにつながります。名称を正しく理解しておく最大のメリットは「コミュニケーションコストと手戻りを減らし、施策の精度を高められること」です。
まず、制作会社や社内メンバーと同じ言葉で話せるようになり、打ち合わせや指示が短時間で具体的になります。例えば「トップページ」と「下層ページ」を混同すると、改修範囲の認識がずれ、見積もりやスケジュールに影響します。
また、パーツ名称を理解しておくことで「どこを改善すべきか」を細かく分解して考えられるようになります。ヘッダー、メインビジュアル、CTAボタンなど、要素単位で仮説検証ができるため、Webマーケティング施策の精度が上がります。
さらに、専門用語の意味を把握しておくことは、提案内容の妥当性を判断する基礎にもなります。不要な機能にコストをかけず、本当に成果に影響する部分に投資しやすくなる点も大きな利点です。
制作会社とのコミュニケーションをスムーズにする効果
制作会社との打ち合わせでは、用語の解釈違いが誤発注や手戻りの原因になりやすくなります。「ホームページ=サイト全体」「トップページ=最初に表示されるページ」など、名称を正しく共有しておくことで、どの部分の話をしているのかを一言で特定でき、コミュニケーションの精度が大きく向上します。
例えば「ヘッダーを少し小さく」「メインビジュアルにキャンペーンバナーを追加」など、部位を明確に指定できれば、デザイナーやコーダーが迷わず作業に入れます。逆に名称が曖昧なまま「上の部分」「真ん中あたり」といった指示になると、制作側の解釈に依存してしまい、完成後に「思っていたものと違う」という事態を招きがちです。
あらかじめ基本的なパーツ名称と役割を理解しておけば、見積もりや提案資料の内容も読み解きやすくなり、質問や要望も具体的に伝えられます。結果として、打ち合わせ時間の短縮、修正回数の削減、納期遅延の防止につながり、プロジェクト全体の品質とスピードが向上します。
サイト改善や指示出しの精度が上がる理由
サイト改善やWeb担当者からの指示出しでは、「どの場所を、どう変えるか」を具体的に伝えられるかどうかが成果を左右します。 パーツ名称を正しく理解しておくと、修正対象や改善対象をピンポイントで指定できるため、対応漏れや意図しない修正を防げます。
例えば「トップページのメインビジュアルのCTAボタンの文言を変更」「商品詳細ページのパンくずリストにカテゴリを1階層追加」のように指定できれば、制作側は作業範囲を正確に把握できます。逆に「ここをもっと目立たせてほしい」「上のほうを直したい」といった曖昧な表現だけでは、レイアウト全体の作り直しになったり、不要な修正コストが増えるリスクがあります。
また、アクセス解析のレポートやヒートマップツールでは、ヘッダー・フッター・グローバルナビ・ファーストビューなどの用語が前提になっています。名称を理解しておくことで、分析結果をそのまま改善指示に落とし込めるため、PDCAサイクルのスピードと精度が大きく高まります。
社内での認識ズレやトラブルを減らすポイント
社内で用いる名称があいまいなままだと、「どのページを直すのか」「どのボタンを差し替えるのか」といった認識が部署ごと・担当者ごとにずれ、無駄な往復や手戻りが増えます。トラブルを減らすためのポイントは、あらかじめ「社内ルールとしての名称」を決めておくことです。
具体的には、次のような工夫が有効です。
| ポイント | 内容 |
|---|---|
| 用語リストの作成 | 「トップページ」「下層ページ」「ヘッダー」「CTAボタン」など、よく使う用語を一覧にして定義を書く |
| 画面キャプチャでの指示 | ページのスクリーンショットに「ヘッダー」「グローバルナビ」など名称を書き込み、視覚と用語をセットで共有する |
| 会議の冒頭で用語確認 | 新しいメンバーが参加するときは、必ず基本名称を簡単に確認する |
| 同じ呼び方の徹底 | 「お問い合わせボタン」「資料請求ボタン」など、呼び方を毎回変えないように文書テンプレートで統一する |
このようなルールをあらかじめ決めておくことで、担当が変わっても情報が引き継ぎやすくなり、制作会社とのやり取りも含めて、全体のコミュニケーションコストを大きく下げられます。
サイト全体の構成に関する基本名称を押さえる

サイト全体の構成に関する名称は、ページ単位の議論や改善方針を決める際の前提となる知識です。「どのページが、どの役割で、どの階層にあるのか」を共通認識にできるかどうかで、制作や運用の生産性が大きく変わります。
まず押さえたいのは、サイトを構成する「トップページ」と「下層ページ」という大枠の区分です。さらに、CMS(WordPressなど)を使う場合は「固定ページ」「記事」「カテゴリー(一覧ページ)」といった、システム上の単位も理解しておくと便利です。
加えて、ページ同士のつながりを表す「サイト構造」や、全体像を図示した「サイトマップ」という考え方も重要です。これらの基本名称を押さえておくと、次に解説する「トップページと下層ページの役割の違い」や、ナビゲーション設計・SEO施策の話が理解しやすくなります。
トップページと下層ページの役割と違い
トップページと下層ページは、役割が大きく異なります。トップページは「サイト全体の入口兼、概要案内ページ」、下層ページは「個別ニーズに応える詳細説明ページ」と整理すると分かりやすくなります。
| 種類 | 主な役割 | 想定ユーザー | 重要なポイント |
|---|---|---|---|
| トップページ | サイト全体の第一印象づくり/誰向けサイトかを一目で伝える/主要コンテンツへの案内 | 初めて訪れたユーザー | キャッチコピー、メインビジュアル、代表的な導線(サービス・会社情報・お問い合わせなど)を分かりやすく配置する |
| 下層ページ | 特定のテーマや商品・サービスの詳細説明/SEOの主戦場 | 課題や興味が具体化しているユーザー | キーワード設計、説明文量、導線(問い合わせ・資料請求など)を目的別に最適化する |
トップページだけを重視しすぎると、検索流入の多くを担う下層ページの改善が後回しになりがちです。アクセス解析では「トップページ」と「主要な下層ページ」を分けて評価し、それぞれの役割に合った改善を行うことが、サイト全体の成果向上につながります。
固定ページ・記事・カテゴリーの違い(CMSの場合)
固定ページ・記事・カテゴリーは、主にWordPressなどのCMSで登場する基本要素です。「どの情報を、どの形式で、どこに蓄積するか」を決める役割があり、更新フローやSEOにも関わります。
| 名称 | 主な用途・特徴 | 具体例 |
|---|---|---|
| 固定ページ | あまり更新頻度が高くなく、恒常的に必要な情報を掲載するページ | 会社概要、サービス紹介、料金表、採用情報、問い合わせページ |
| 記事(投稿) | 時系列で蓄積されるコンテンツ。新着順に並び、ブログ・お知らせ向き | お知らせ、コラム、事例紹介、キャンペーン情報 |
| カテゴリー | 記事をテーマ別に整理する「フォルダ」のような概念。カテゴリー別一覧ページも生成される | 「お知らせ」「ブログ」「事例」「セミナー情報」など |
実務では、コーポレート情報やサービス内容は固定ページ、集客やSEOを意識したコンテンツは記事+カテゴリーで構成するケースが多くなります。要件定義やサイトマップ作成の段階で、「どこまでを固定ページにし、どの情報を記事として継続発信するか」を制作会社とすり合わせておくと、運用しやすく、検索にも強い構成になりやすくなります。
サイト構造とサイトマップという考え方
サイト全体を「どのページが、どのページの上位にあるか」という階層構造で整理したものがサイト構造です。トップページを起点として、事業紹介、サービス詳細、問い合わせ、採用情報などがどのようにつながっているかを設計します。ユーザーが迷わず目的の情報に到達できるか、検索エンジンが内容を正しく理解できるかは、このサイト構造に大きく左右されます。
サイトマップは、そのサイト構造を一覧できるように表現したものです。主な種類は次の2つです。
| 種類 | 主な用途 | 形式の例 |
|---|---|---|
| HTMLサイトマップ | ユーザー向け。サイト内の主なページ一覧を表示し、迷子防止に役立てる | 「サイトマップ」ページとして公開 |
| XMLサイトマップ | 検索エンジン向け。全ページのURLや更新頻度を伝える | Search Consoleに登録 |
制作や改善を進める際は、サイト構造(設計図)とサイトマップ(一覧表)をセットで整理しておくことが、抜け漏れ防止やSEO対策の基盤になります。
レイアウト上の基本パーツ名称を理解する

Webページのレイアウトは、大きく「ヘッダー」「メインコンテンツ」「サイドバー」「フッター」といったブロックで構成されます。これらの名称と役割を共通認識にしておくと、レイアウトの相談や改善指示が格段にスムーズになります。
一般的なページ構成は次のようになります。
| 位置 | 名称 | 主な役割例 |
|---|---|---|
| 最上部 | ヘッダー | ロゴ、グローバルナビ、問い合わせ導線など |
| 中央左側 | メインコンテンツ | ページの主情報(文章・画像・フォームなど) |
| 中央右側等 | サイドバー | メニュー、人気記事、バナー、関連情報 |
| 最下部 | フッター | 会社情報、サイトマップ、コピーライト、各種リンク |
レイアウトを検討する際は、「どの情報をメインコンテンツに置き、どの情報をサイドバーやフッターに回すか」という観点で優先順位をつけると、ユーザーにとって分かりやすい構成になりやすくなります。制作会社との打ち合わせでも、この4つを前提に話すと意思疎通のズレを減らせます。
ヘッダーとロゴ周りの名称と役割
ヘッダーは、全ページに共通して最上部に表示されるエリアで、ロゴやグローバルナビゲーション、問い合わせボタンなど、サイト全体の「顔」となる要素が集まります。ユーザーはヘッダーを見て、どの企業のサイトなのか、どんな情報があるのかを瞬時に判断するため、ブランディングと使いやすさの両方を意識することが重要です。
ロゴは、企業名やサービス名を示す画像・文字要素で、多くの場合ヘッダー左上に配置され、クリックするとトップページに戻るリンクとしても機能します。運用側は、制作会社との打ち合わせで「ロゴ画像」「ロゴエリア」「ヘッダー」といった名称を区別して伝えることで、配置やサイズ、リンク先の指定などの指示がスムーズになります。また、ヘッダーには電話番号や問い合わせボタンを常設しておくことで、どのページからでもすぐに行動してもらいやすくなります。
グローバルナビとハンバーガーメニューの違い
グローバルナビとハンバーガーメニューは、どちらもWebサイト内を移動するための「メニュー」ですが、表示のされ方と役割が異なります。
| 名称 | 主な表示場所・形 | 特徴 | 向いているケース |
|---|---|---|---|
| グローバルナビ | ヘッダー上部に横一列などで常時表示 | サイト共通で表示されるメインメニュー。主要ページへすぐ移動でき、構造が伝わりやすい | PCサイト、主要ページが6〜8個以内のコーポレートサイトなど |
| ハンバーガーメニュー | 三本線アイコンをタップするとメニューが開く | 画面を広く使える反面、メニューが隠れるため気づかれにくい | スマホ表示、メニュー項目が多いサイト、アプリ風のUI |
基本的には、PCではグローバルナビを常時表示し、スマホではハンバーガーメニューでまとめる構成が一般的です。 ただし、スマホでも重要な導線(お問い合わせ、予約、資料請求など)は、ハンバーガー内だけに入れず、ヘッダーや固定ボタンとして常時表示すると、コンバージョン損失を防ぎやすくなります。
メインコンテンツとサイドバーの構成
メインコンテンツとサイドバーは、ページの目的とユーザーの行動を整理する上で重要なパーツです。メインコンテンツは「そのページで最も伝えたい情報」や「検索流入の着地点」として設計し、サイドバーは補足情報や回遊を促す要素を配置するエリアと考えると整理しやすくなります。
メインコンテンツに置くべき代表的な要素
| 種類 | 目的の例 |
|---|---|
| 商品・サービス説明 | 購入・問い合わせにつなげる |
| 事例・実績 | 信頼獲得、検討材料の提供 |
| 記事本文(コラム・ブログ) | 検索ニーズへの回答、専門性の訴求 |
| お問い合わせフォーム | コンバージョン獲得 |
メインコンテンツは「1ページ1テーマ」を基本として、見出し構造(h1〜h3)を整理しながらストーリー立てて配置します。ページの主要なキーワードやCV(お問い合わせ・資料請求など)はメインコンテンツ内でしっかり完結させることが、SEOと成果の両面で重要です。
サイドバーの役割と代表的な要素
サイドバーは、メインコンテンツを読んでいるユーザーに「次の一手」を提示する役割があります。
| 要素 | 役割 |
|---|---|
| お問い合わせ・資料請求バナー | いつでもCVできる状態を作る |
| 人気記事・関連記事 | サイト内回遊の促進、滞在時間の延長 |
| カテゴリー一覧・タグ | 関心の近い情報への誘導 |
| ダウンロード資料・ホワイトペーパー | リード獲得・メールアドレス取得 |
| メールマガジン登録 | 継続接点の獲得 |
ビジネスサイトでは、サイドバーを「ミニ営業マン」として、常に問い合わせや資料請求につながる導線を用意する設計が成果につながりやすくなります。
PCとスマホでの構成の違いに注意
PCではメインコンテンツとサイドバーが横並びになるレイアウトが一般的ですが、スマホではサイドバーの内容が「メインコンテンツの下部」に縦に並ぶケースが多くなります。そのため、
- スマホでサイドバー要素が下に回り過ぎて重要な導線が見られない
- PC前提でサイドバーに入れたコンテンツが、スマホだと気づかれにくい
といった問題が起こりがちです。重要なコンバージョン導線は、サイドバー任せにせずメインコンテンツ内にも必ず配置し、スマホの表示順まで含めて設計することが実務上のポイントになります。
フッターに配置される情報とコピーライト表記
フッターは、ページ最下部に共通して表示されるエリアで、「サイト全体の補足情報」と「信頼性を高める情報」をまとめて配置する場所です。メインコンテンツやサイドバーを読み終えたユーザーが、次に取る行動を後押しする役割も担います。
代表的なフッター内の要素と役割は、次の通りです。
| 要素 | 主な内容例 | 役割・目的 |
|---|---|---|
| 会社情報・運営者情報 | 会社名、所在地、電話番号、代表者名など | 信頼性の向上、問い合わせ前の確認 |
| サイトマップや主要リンク | 主要ページへのテキストリンク一覧 | 回遊性向上、迷子になったユーザーの受け皿 |
| お問い合わせ・資料請求 | フォーム、メールアドレス、電話番号 | コンバージョン導線の補完 |
| 利用規約・プライバシー | 規約、個人情報保護方針、特商法表記など | 法令対応、安心感の担保 |
| SNSリンク・バナー | 各種SNSアイコン、別サービスへのバナー | 別チャネルへの誘導、ブランド接点の拡大 |
コピーライト表記は、フッターにほぼ必ず配置される要素です。一般的な書き方は、
© 2024 会社名 All Rights Reserved.
のように、©マーク(または(C))、西暦、権利者名をセットで記載します。コピーライト表記自体に法的な登録効力はありませんが、「誰に著作権があるか」を明示し、無断利用を抑止する抑止力として有効です。自社名表記にブレがあると信頼性に影響するため、会社名やブランド名はサイト全体で統一しておくと、制作会社とのやり取りや改修時のミス防止にも役立ちます。
ビジュアル要素に関する名称と使い分け

Webサイトの第一印象を左右するのがビジュアル要素です。名称と役割を正しく理解しておくと、デザイナーや制作会社への要望が具体的になり、意図した見せ方を実現しやすくなります。
代表的なビジュアル要素と概要は次の通りです。
| 名称 | 主な位置・用途 | 目的・特徴 |
|---|---|---|
| メインビジュアル | トップページ上部 | 企業やサービスの印象を一瞬で伝える大型画像・動画 |
| キービジュアル | サイト全体やキャンペーン共通のビジュアル | ブランドイメージの軸となる「象徴的な画像」 |
| ファーストビュー | 画面を開いて最初に見える範囲 | 画像だけでなく、見出しやボタンも含む“最初の画面” |
| アイキャッチ画像 | 記事一覧や詳細ページの冒頭 | クリックや本文の読み進めを促すサムネイル的画像 |
| バナー | サイドバーや本文中、フッターなど | 別ページへの誘導やキャンペーン告知に特化した画像 |
| ファビコン | ブラウザタブ・お気に入り | サイトを識別させる小さなアイコン |
| SNSアイコン | ヘッダー・フッター・サイドバー | 公式アカウントへの導線やシェアのきっかけ |
名称があいまいなままだと、「トップの大きい画像を変えたい」「この画像を広告っぽく目立たせたい」など、抽象的な指示になりがちです。メインビジュアル・アイキャッチ・バナーなどの単語を使い分けることで、どの場所・どの役割の画像を指しているのかが明確になり、制作の手戻りや認識違いを減らせます。
メインビジュアル・キービジュアル・ファーストビュー
メインビジュアル・キービジュアル・ファーストビューはいずれも「画面の最上部で最初に目に入るビジュアル」を指しますが、厳密には少し意味が異なります。
| 名称 | 主な意味・使われ方 |
|---|---|
| メインビジュアル | ページ全体の主役となる大きな画像・動画。サービスやブランドの印象付けが目的。 |
| キービジュアル | ブランドやキャンペーンを象徴する一貫したビジュアル。複数ページや広告でも共通して使用。 |
| ファーストビュー | ユーザーがスクロールせずに最初に見える範囲全体。テキストやボタンも含んだ「画面領域」のこと。 |
デザインの指示を行う際は、「ファーストビューのメインビジュアルに、ブランドのキービジュアルを使う」など、どの概念を指しているかを言い分けると、制作側との齟齬を減らせます。 また、ファーストビューでは「何のサイトか」「誰向けか」「何をしてほしいか」が、一目で伝わる構成になっているかを意識することが重要です。
アイキャッチ画像とコンテンツ内の画像の違い
アイキャッチ画像は、記事やページ一覧・SNSで「内容を一目で伝え、読むきっかけを作る」ための代表画像です。一方、コンテンツ内の画像は、本文中で情報を補足したり、事例紹介や図解として内容理解を助ける役割があります。
| 種類 | 主な表示場所 | 目的・役割 | デザインの考え方 |
|---|---|---|---|
| アイキャッチ画像 | 記事一覧、ブログトップ、SNSカードなど | 目を引き、内容の雰囲気を直感的に伝える | 題名やキーワードを大きく入れる、ブランドトンマナを統一する |
| コンテンツ内画像 | 記事本文中(段落の途中) | 説明の補足、事例・商品紹介、図解、感情喚起 | テキストとの関係が分かるキャプションを付ける、画質やサイズを最適化する |
アイキャッチは「記事の顔」、コンテンツ内画像は「本文の理解を深める要素」と整理すると、制作会社への指示や素材準備がスムーズになります。
バナーの種類とクリックを促すデザイン要素
バナーは、クリックを促すための画像リンク全般を指す名称です。目的や設置場所ごとに種類が分かれ、それぞれデザインの考え方も変わります。主なバナーの種類と、クリック率を高める要素を整理しておくと、制作会社への指示や改善の検討がしやすくなります。
| 種類 | 主な目的 | 設置場所の例 |
|---|---|---|
| キャンペーンバナー | 期間限定の申し込み・購入を促す | トップページ、サイドバー、記事下部 |
| 常設バナー | 資料請求・お問い合わせなど恒常的CV | 全ページのサイドバー、フッター |
| 記事誘導バナー | 関連コンテンツへ誘導 | 記事本文内、記事末尾 |
| 外部リンクバナー | 採用サイト・別サービスなど外部へ誘導 | トップページ、グローバルナビ直下 |
クリックを増やすためには、
- 一目で「何が得られるか」が伝わる短いコピー(例:「無料で資料ダウンロード」「30日間お試し」)
- はっきりしたボタン形状とコントラストの高い色(周囲の色と被らない色を使う)
- クリック後の遷移先と同じキーワード・デザインテイスト(ユーザーを安心させ離脱を防ぐ)
- 「今だけ」「限定」など適切な限定性の訴求(乱用は信頼低下につながるため注意)
などが重要です。A/Bテストで文言・色・サイズを比較し、データを見ながら継続的に調整することが、成果につながるバナー運用のポイントです。
ファビコンやSNSアイコンなど細かなパーツ名称
ファビコンやSNSアイコンなどの細かなパーツも、ユーザーの印象や行動に大きく影響します。「なんとなく付ける」のではなく、役割と名称を理解したうえで設計することが重要です。
| 名称 | 画面上の場所・例 | 役割・ポイント |
|---|---|---|
| ファビコン | ブラウザのタブ、ブックマーク一覧 | サイトを一覧の中で見つけやすくするブランドの「印」。16px前後でも認識できるシンプルなデザインが有効です。 |
| SNSアイコン | ヘッダー、フッター、サイドバーなど | 自社の公式SNSアカウントへの導線。ブランドトーンを保ちつつ、公式ロゴガイドラインに沿った表示が必要です。 |
| SNSシェアアイコン | 記事の上部・下部・左右 | 記事URLを各SNSで共有させるためのボタン。色や文言を分かりやすくし、不要なSNSは減らすとクリック率が上がりやすくなります。 |
| ページトップボタン | 画面右下など固定表示 | 長いページをスクロールしたユーザーを、ワンクリックで先頭に戻すUI。スマホでは特にユーザビリティ向上につながります。 |
このような細かなパーツは、デザイン段階で「どの位置に、どの名称の要素を置くか」を決めておくと、制作会社との認識合わせがしやすくなり、実装漏れも防げます。
導線設計に関わる名称と意味を理解する

サイトの成果を高めるためには、ページ同士をどうつなぎ、どの順番で情報を見せるかという「導線設計」が重要です。導線設計に関わる名称を理解しておくと、ユーザーが迷わない流れを意識して配置や改善の指示が出せます。
導線設計でよく登場する要素には、パンくずリスト・CTAボタン(コンバージョンボタン)・SNSシェアボタン/フォローボタン・サイト内検索窓・ページネーションなどがあります。いずれも「どのページからどのページへユーザーを誘導したいか」を形にしたパーツであり、単なる装飾ではありません。
例えば「問い合わせを増やしたい」場合は、CTAボタンを目立つ位置や色にしたり、複数箇所に設置したりする、といった具体的な改善が検討できます。名称と役割を正しく把握することで、感覚ではなく論理的に導線を設計し、アクセス解析の結果もパーツ単位で評価しやすくなります。
パンくずリストが示す階層構造とSEOへの影響
パンくずリストは、ユーザーが「サイト内のどこにいるか」を示すための階層ナビゲーションです。多くの場合、「TOP > サービス > Webサイト制作」のように階層をテキストリンクで並べて表示します。パンくずリストがあれば、ユーザーは迷いにくく、上位階層のページにも1クリックで戻れるため、離脱防止と回遊性向上に役立ちます。
SEOの観点では、パンくずリスト=サイトの階層構造を検索エンジンに明示する役割を持ちます。上位カテゴリーへの内部リンクが整理されて張られることで、クローラーが構造を理解しやすくなり、関連ページ群として評価されやすくなります。さらに、構造化データ(BreadcrumbList)を正しく実装すると、検索結果にパンくずが表示され、クリック率の改善も期待できます。
CTAボタンとコンバージョンボタンの役割
CTAボタンとコンバージョンボタンは、いずれも「ユーザーに行動を起こしてもらうためのボタン」を指す言葉です。一般的には、資料請求や問い合わせ、購入など、ビジネス上の成果につながる行動を促すボタンを指し、ほぼ同じ意味で使われています。
用語としては、以下のように整理すると打ち合わせでの齟齬を防ぎやすくなります。
| 用語 | 英語表記 | 役割・意味 |
|---|---|---|
| CTAボタン | Call To Action button | 行動喚起ボタン全般。スクロール誘導なども含む広い概念 |
| コンバージョンボタン | Conversion button | コンバージョン(成果)に直結するCTAボタン |
実務では、「CTAボタン」と「コンバージョンボタン」を厳密に区別せずに使う制作会社も多く存在します。そのため、打ち合わせや指示書では、「どのページの、どの行動をゴールとするボタンなのか」を具体的に指定することが重要です。
例:
- 「サービス詳細ページの資料請求ボタン(CTAボタン)を目立たせたい」
- 「お問い合わせフォーム直前のコンバージョンボタンの文言をテストしたい」
ボタンの名称を正しく理解し、ページごとに「どのCTAが最も重要か」を決めておくことで、デザイン調整やABテスト、広告との連携など、マーケティング施策の精度を高めやすくなります。
SNSシェアボタンとフォローボタンの違い
SNSまわりのボタンは、「今のページを広めるボタン」か「自社アカウントのファンを増やすボタン」かを区別して理解することが重要です。
| 種類 | 目的 | クリック後の動き | 配置の狙い |
|---|---|---|---|
| SNSシェアボタン | 表示中のページを拡散してもらう | ユーザーのSNS投稿画面が開き、URL付きで投稿される | 記事やサービスページの認知拡大・流入増加 |
| フォローボタン | 自社SNSアカウントのフォロワーを増やす | 自社アカウントのプロフィール画面表示や即フォロー | 中長期的な接点づくり・再訪促進 |
SNSシェアボタンは、記事下やCTAボタンの近くに配置し、コンテンツ自体の拡散を狙います。一方、フォローボタンはヘッダー、フッター、サイドバー、プロフィール付近などに設置し、将来の情報発信を受け取ってもらう導線として活用します。
どちらも色やサイズを強調しすぎるとCTAボタンの邪魔になるため、コンバージョン導線より一段階弱い視覚的優先度に調整すると、サイト全体の成果につながりやすくなります。
サイト内検索窓とページネーションの意味
サイト内検索窓は、ユーザーがキーワードを入力してサイト内のコンテンツだけを検索するための入力フォームです。Google検索とは異なり、自社サイトの情報だけに絞って探せるため、商品点数が多いECサイトや、記事数が多いオウンドメディアでは必須に近いパーツです。設置場所(ヘッダー・サイドバーなど)や、プレースホルダー文言(例:「サイト内を検索」)を工夫することで、利用率を高められます。
ページネーションは、一覧ページ下部に表示される「1|2|3|次へ」といったページ送りのリンク群を指します。大量のコンテンツを1ページに詰め込まず、複数ページに分割して表示するための仕組みで、読み込み速度の改善や、ユーザーが目的の情報に到達しやすくする効果があります。Googleアナリティクスでは、ページネーションごとの離脱率やクリック率を確認し、どのあたりでユーザーが離脱しているかを把握すると改善に役立ちます。
動きのあるパーツ名称とユーザー体験への影響

動きを伴うパーツは、見た目の華やかさだけでなく、ユーザー体験(UX)や成果に大きな影響を与える要素です。代表的なものとして、スライダー(スライドショー)、ポップアップ、ドロップダウンメニュー、アコーディオン、タブメニュー、パララックスなどがあります。
動きが多すぎたり意図が曖昧なアニメーションは、読み込み速度の低下や可読性の悪化、離脱率の上昇につながります。一方で、情報を整理して見せたい順に導く意図が明確な動きは、迷いを減らしコンバージョン率の向上にも貢献します。
Web担当者としては、
- 何のための動きか(目立たせたいのか、情報を整理したいのか)
- 誰にとって便利な動きか(PCユーザーか、スマホユーザーか)
- 表示速度やアクセシビリティへの影響は許容範囲か
という観点で判断することが重要です。デザイン提案を受けた際は、単に「おしゃれだから」ではなく、「どの動きがどの指標(CV、直帰率、回遊など)に効きそうか」という視点で制作会社と議論すると、実務に役立つ実装につながります。
スライダーとスライドショーの基本と注意点
スライダー(スライドバナー)とスライドショーは、いずれも複数の画像やコンテンツを横に切り替えて表示する仕組みです。一般的には、トップページの大きな画像エリアで自動切り替えされるものを「スライダー」や「スライドショー」と呼ぶことが多く、名称の違いよりも「どのエリアで・どんな目的で見せるか」が重要になります。
一方で、使い方を誤るとユーザー体験や成果を損なうリスクがあります。主な注意点は次の通りです。
| 観点 | 注意点 |
|---|---|
| 読みやすさ | 自動で切り替わる速度が速すぎると、テキストが読めない |
| スマホ表示 | 画像が重くなり、表示速度が遅くなることで離脱要因になる |
| 伝えたい内容 | 1枚目以外は見られにくく、重要情報は1枚目か静的なエリアに置くべき |
| アクセシビリティ | 自動再生を止めるボタンや左右の矢印がないと操作しづらい |
CVに直結する訴求は、スライダー任せにせず「固定のメインビジュアル+補助的なスライド」の構成で検討すると、マーケティング上のリスクを抑えやすくなります。
ポップアップ・ドロップダウン・アコーディオンの違い
ポップアップ・ドロップダウン・アコーディオンはいずれも「クリックやタップに反応して表示内容が変わるUIパーツ」ですが、役割や適した使い方が異なります。用途を理解して出し分けることで、ユーザー体験を損なわずに必要な情報を見せられます。
| 名称 | 表示のされ方 | 主な用途 | 注意点 |
|---|---|---|---|
| ポップアップ | 画面の中央や全面に重なって表示 | 重要なお知らせ、会員登録、クーポン表示など | 頻発すると離脱の原因になるため、本当に重要な場面に限定する |
| ドロップダウン | ボタンやメニューを押した周辺にメニューが下方向などへ展開 | グローバルナビの階層メニュー、フォームの選択肢など | 項目が多すぎると探しづらくなるため、カテゴリ設計が重要 |
| アコーディオン | 見出しの上下にスペースが伸縮して内容が開閉 | FAQ、商品詳細、スマホでの長文の折りたたみなど | 開閉状態が分かりにくいと読み残しが起こるため、「+/-」や矢印で状態を明示する |
ポップアップは強制的に目を向けさせる表現、ドロップダウンは選択肢を一時的に展開するメニュー、アコーディオンはページ内の情報量を圧縮するための折りたたみと整理しておくと、制作会社との会話や改善指示が行いやすくなります。
タブメニューやパララックス演出の役割
タブメニューは、1つのエリアに複数の情報を切り替えて表示するためのパーツです。サービスの種類別料金、製品スペック、FAQのカテゴリなど、関連性の高い情報をコンパクトにまとめたい場面で有効です。ユーザーはタブをクリック・タップするだけで欲しい情報に素早くアクセスできるため、離脱防止にもつながります。ただし、タブ内に重要情報を隠しすぎると見逃されるため、重要度が高い内容はタブの外にも要約を置くことが有効です。
パララックス演出は、スクロールに合わせて背景画像や要素の動きに差をつけ、ストーリー性や世界観を演出するための表現手法です。ブランドサイトや採用サイトなど、印象づくりが重要なページで効果を発揮します。一方で、動きが多すぎると読みづらくなったり、表示が重くなったりするリスクがあります。特にスマホではパフォーマンス低下や酔いの原因になりやすいため、ビジネスサイトでは「魅せる箇所を絞り、過度なアニメーションを避ける」という方針で設計することが重要です。
名称があいまいになりやすいポイントと実務上の注意

用語の定義があいまいなまま打ち合わせを進めると、完成物のイメージがずれたり、余計な修正コストが発生しやすくなります。「自社でどういう意味でその言葉を使うか」を最初に決めて共有することが、実務では最も重要です。
特に注意したいのは、一般的な言葉と業界用語の差が大きいケースです。例えば「ホームページ=会社のトップページなのか、サイト全体なのか」「バナー=画像リンク全般なのか、広告枠だけなのか」などは、事業者と制作会社で解釈が分かれがちです。曖昧だと感じる名称については、打ち合わせの早い段階で「このプロジェクトでは○○という意味で使いたい」と具体的に伝えると、後工程でのトラブルを防ぎやすくなります。
同じように聞こえるが意味が違う用語の整理
ホームページやWebサイト制作の会話では、似たような言葉だが意味が違う用語を取り違えると指示ミスにつながります。代表的なものを整理しておきましょう。
| 用語A | 用語B | 主な違い・整理ポイント |
|---|---|---|
| ホームページ | Webサイト | 一般会話ではほぼ同義で使われるが、制作現場では「Webサイト=全体」、「ホーム(トップページ)=入口ページ」と分けるケースが多い |
| トップページ | ランディングページ(LP) | トップページはサイトの入口となる通常の最上位ページ、LPは広告やキャンペーン専用に作る“着地専用ページ” |
| トップページ | ホーム(ホーム画面) | ブラウザの開始ページをホームと呼ぶ場合もあり、打ち合わせ時は「サイトのトップページのことか」「ブラウザのホーム画面か」を明確にする必要がある |
| メインビジュアル | アイキャッチ画像 | メインビジュアルはトップなどページ上部の大きなビジュアル、アイキャッチは記事一覧や記事冒頭につく“そのコンテンツ専用のサムネイル” |
| CTAボタン | 通常リンクボタン | CTAは問い合わせや資料請求など成果に直結させるためのボタン。単なるページ遷移リンクとは目的が異なる |
| SNSシェアボタン | フォローボタン | シェアボタンは「今見ているページをSNSで共有する」ためのボタン、フォローボタンは「自社アカウントをフォローしてもらう」ためのボタン |
| サイトマップ(ページ) | XMLサイトマップ | サイトマップページはユーザー向けの一覧ページ、XMLサイトマップは検索エンジン向けのファイルで人は通常見ない |
打ち合わせや指示書では、あいまいな言葉を避け、何を指しているのかを一度言語化して確認することが重要です。用語があいまいな箇所は、図やワイヤーフレームに番号を振りながら「◯番のボタン」「◯番の画像」とセットで指定すると認識ズレを防げます。
スマホ表示で名称や役割が変わる要素に注意する
スマホ表示では、同じページでもPCとレイアウトや役割が変わる要素が多くあります。誤解が生まれやすい代表的なポイントを押さえておくと、制作会社とのやり取りや指示出しがスムーズになります。
| PC表示での要素 | スマホ表示で起こりがちな変化 | 注意したい点 |
|---|---|---|
| グローバルナビ(横並びメニュー) | ハンバーガーメニュー内に収納される | 「メニューが消えた」のではなく、表示位置が変わっただけなのかを確認する |
| サイドバー | 記事の下部やフッター付近に縦方向へ移動 | 「サイドバーの内容をスマホでは非表示にする/下に移動する」など、挙動を具体的に指定する |
| メインビジュアル(横長画像+テキスト) | 画像のトリミングやテキスト位置が変わる | 重要な文字を画像内に入れすぎない、トリミング位置の指定を行う |
| パンくずリスト | 画面上部から折りたたみ表示や非表示になることがある | SEO・回遊性の観点から「スマホでも表示したいか」を事前に決めておく |
| フッターメニュー | アイコン付きの固定ボトムメニューに分割される場合がある | 「フッター」と「固定ボトムメニュー」を区別して指示する |
スマホ特有のUI(ハンバーガーメニュー、固定ボトムメニュー、スワイプで動くスライダーなど)は、PC側には存在しない名称・役割になる場合があります。 PCとスマホで「どのパーツがどの位置に、どの名称で存在するか」を整理したうえで要件定義や修正依頼を行うことが重要です。
制作会社との打ち合わせで名称を共有するコツ

制作会社と打ち合わせを行う際は、最初に「用語合わせの時間」を数分確保し、主要パーツ名称のイメージをすり合わせることが重要です。トップページ/下層ページ、ヘッダー/フッター、メインビジュアル/バナー、CTAボタンなど、頻出用語だけでも簡単な一覧を制作会社と共有すると、以降の会話が格段にスムーズになります。
また、口頭だけで進めず、打ち合わせメモや資料に必ず図やキャプチャを添付して「この部分」と名称をセットで示すことが有効です。メールや議事録でも同じ名称を使い続けることで、プロジェクトメンバー間の用語が自然と統一されます。さらに、社内でよく使う呼び方と制作会社の専門用語に差がある場合は、「社内用語 ↔ 制作会社用語」の対応表を1枚用意しておくと、担当者が入れ替わっても混乱を防げます。
ワイヤーフレームでパーツ名称を確認する方法
ワイヤーフレームは、レイアウトとパーツ配置を確認するための設計図です。「どこに、どの名称のパーツを置くのか」を可視化しながら、制作会社と共通認識を作ることが重要です。
まず、制作会社から共有されるワイヤーフレーム(PDF・画像・オンラインツールなど)を開き、以下の観点で確認します。
- 各エリアに名称ラベルが付いているか(例:ヘッダー/グローバルナビ/メインビジュアル/パンくずリスト/フッター)
- クリックを促す要素に「CTAボタン」「資料請求ボタン」など、目的が分かる名前が付いているか
- PC版とスマホ版のワイヤーフレームがあり、ナビゲーションやハンバーガーメニューの位置が明示されているか
名称が書かれていないパーツや、意味があいまいに感じるラベルがあれば、必ず質問し、用語の定義をメモに残します。可能であれば、ワイヤーフレームの段階で「パーツ名称入り」の版を作ってもらうと、その後の指示書作成や社内共有が格段に楽になります。
指示書や要件定義に名称を整理して書くポイント
指示書や要件定義では、パーツ名称を最初に一覧で定義し、その後の文章で一貫して使うことが重要です。ドキュメントの冒頭に「用語定義」または「パーツ一覧」の章を作成し、「ヘッダー」「グローバルナビ」「メインビジュアル」「CTAボタン」などの名称と簡単な説明、該当ページ(トップページ/下層ページなど)を表で整理すると誤解を防げます。
本文では、指示ごとに「ページ」「位置」「パーツ名」をセットで書きます。
- 例:
- 「トップページのメインビジュアル直下に、新着情報ブロックを追加」
- 「全ページ共通のフッターに、SNSアイコン(X・Instagram)を追加」
また、ワイヤーフレーム上の番号やラベルと同じ記号を指示書にも記載し、「WF-01_トップページ_パーツ05:CTAボタン」のようにID管理すると、制作側とのすり合わせが格段に楽になります。最後に、略語(CTA、FVなど)は必ず一度は正式名称も併記しておくと、社内メンバーにも理解されやすくなります。
社内で用語集を作り共通言語にする進め方
社内で用語集を作る際は、最初から完璧を目指さず、「よく出てくる言葉から小さく始めて育てる」進め方がおすすめです。
- よく混乱が起きる用語を洗い出す
打ち合わせやチャットのログから、「ホームページ/Webサイト」「トップページ/ランディングページ」など、解釈が分かれやすい用語をピックアップします。 - フォーマットを決める
下記のようなシンプルな表形式にすると共有しやすくなります。
| 用語 | 定義・意味 | 補足(使う場面の例) |
|---|---|---|
| トップページ | サイトの入口となる最初のページ | https://example.com/ のページ |
| ランディングページ | 広告やメールから流入させる専用ページ | 資料請求専用ページなど |
- 保管場所を一元化する
GoogleスプレッドシートやNotionなど、誰でも閲覧・更新できる場所に置き、URLを社内で周知します。 - 更新ルールと担当者を決める
Web担当者やマーケ責任者などを「用語集オーナー」にし、 - 用語の追加提案は誰でもOK
- 最終確定はオーナーが行う
といったルールを明文化しておくと、用語集が形骸化しにくくなります。 - プロジェクトの節目で見直す
リニューアルのキックオフや四半期ごとの振り返りのタイミングで、用語集を一緒に確認し、抜け漏れや古い定義をアップデートします。
名称理解をサイト改善とマーケ施策に活かす

名称の理解は、単なる「用語の暗記」ではなく、サイト改善とマーケ施策の精度を上げるための基盤になります。パーツごとの役割がわかると、アクセス解析やヒートマップの数値を「どの部分で、どのような問題が起きているのか」という視点で読み解けるようになります。
例えば、CV率の低下を「サイト全体の問題」とぼかさず、
- ヘッダーのグローバルナビのラベルが分かりにくい
- ファーストビューのメインビジュアルが訴求とズレている
- CTAボタンの位置や文言が弱く、スクロール後に見失われている
といった形で、パーツ単位で原因候補を特定しやすくなります。この粒度で課題を把握できれば、ABテストやランディングページ改善も設計しやすくなり、制作会社や広告代理店にも具体的な改善依頼を出しやすくなります。
パーツ単位で課題を洗い出し改善案を考える手順
パーツ名称を理解できると、「どこをどう直すべきか」をパーツ単位で分解して考えられるようになります。以下の手順で整理すると、改善案を出しやすくなります。
- 重要ページを1〜3ページに絞る
例:トップページ、サービス詳細ページ、問い合わせフォームなど、成果に直結するページを選びます。 - ページをパーツ単位に分解する
ヘッダー、グローバルナビ、メインビジュアル、コンテンツブロック、CTAボタン、フッターなど、見えている要素をすべて書き出します。 - 各パーツごとに「目的」と「現状」をセットで確認する
- 例:CTAボタン → 目的:問い合わせを増やす/現状:スクロールしないと見えない、文言が弱い
- 例:パンくずリスト → 目的:階層把握と上位ページへの移動/現状:設置されていない
- 課題を仮説レベルでメモする
「目立たない」「クリックされていない」「情報が足りない」など、数字がなくても気付いた点をパーツ単位で列挙します。 - インパクト×実施難易度で優先度をつける
「成果への影響が大きい×実装が簡単」なパーツ(例:CTA文言変更、ボタン色変更、ヘッダーメニュー名の見直し)から着手します。 - 改善案をパーツ名を明記して書き出す
例:「トップページのメインビジュアル下のCTAボタンの文言を『資料請求』から『無料で資料を受け取る』に変更」など、パーツ名+位置+変更内容を具体的にまとめると、制作会社にも共有しやすくなります。
アクセス解析とパーツ名称を結びつけて見る方法
アクセス解析とパーツ名称を結びつけると、改善すべき箇所が一気に具体化します。Googleアナリティクスやヒートマップなどの数値を「どのパーツの数字か」で必ず整理することが重要です。
代表的な紐づけ例をまとめると、次のようになります。
| ツール上の指標・レポート | 対応するパーツ名称の例 | 確認したいポイント |
|---|---|---|
| ランディングページレポート | トップページ、特定の下層ページ | どのページ(パーツ構成)が入口になっているか |
| クリックイベント、アウトバウンドリンク | ヘッダーメニュー、CTAボタン、バナー | どの導線パーツが押されているか、押されていないか |
| スクロール率・ヒートマップ | メインビジュアル、ファーストビュー、メインコンテンツ | どこまで読まれているか、重要パーツが見られているか |
| 離脱ページレポート | 下層ページ、フォームページ | どのページ構成・パーツのところで離脱が増えているか |
解析を見る際は、数値を見て終わりではなく、「ヘッダーのグローバルナビ」「記事下のCTAボタン」といったパーツ単位で仮説を立て、デザインや配置をどう変えるかまでセットで考えることが、サイト改善の精度を高めるポイントです。
今後さらに学ぶために押さえたい用語と資料
今後さらにWebサイト制作やマーケティングを学ぶ場合、用語を体系的に押さえておくと理解が早くなります。まずはレイアウト・UI系(ヘッダー/フッター、グリッドレイアウト、ブレイクポイント、レスポンシブデザインなど)、マーケティング系(CV/CVR、LPO、EFO、リード、ファネルなど)、技術系の基本(HTML、CSS、JavaScript、CMS、サーバー、ドメインなど)を最低限の範囲で整理しておくと良いでしょう。
継続的な学習には、以下のような資料・メディアが役立ちます。
| 種類 | 具体例 | 活用ポイント |
|---|---|---|
| 用語集 | Web担当者向け用語集、Google アナリティクス ヘルプ | 不明な用語が出るたびに検索して追記する |
| 書籍 | 『沈黙のWebマーケティング』『現場のプロが教えるWebサイト制作の最新常識』系 | 全体像をつかむ目的で一度通読する |
| オンライン講座 | Udemy、Schoo、YouTubeの公式チャンネル | 画面を見ながら操作イメージを掴む |
業務でよく使う資料(要件定義書・ワイヤーフレーム・解析レポートなど)に、学んだ用語をメモとして書き込んでおくと、社内の共通言語にもなりやすく、知識が定着しやすくなります。
ホームページやWebサイトの名称を正しく理解しておくことは、制作会社とのコミュニケーションを円滑にし、指示の精度を高め、サイト改善の打ち手を具体化するうえで大きな武器になります。本記事で整理した構成要素やパーツ名を共通言語として活用することで、社内外の認識ズレを減らし、アクセス解析やマーケ施策とも結びつけながら、より成果につながるWebサイト運用へとつなげていくことができるでしょう。



