はじめに
第12章では、
- サイトの目的
- 誰に見てほしいか
- 必要なページ
を考えました。
ここでは、それらをトップページでどう案内するかを考えます。
トップページは、
サイトのすべてを一枚へ詰め込むページ
ではありません。
役割は、
このサイトは何？
↓
自分に関係ある？
↓
どこを見ればよい？
↓
次に何をすればよい？を分かりやすくすることです。
トップページは「表紙 + 案内板」
本の表紙だけでは中身は分かりません。
目次だけでも魅力は伝わりません。
トップページは、
表紙と案内板を合わせたようなページ
です。
サイトの雰囲気を伝えながら、重要なページへ案内します。
最初に「誰向けのサイトか」を伝える
トップページを開いて最初に、
「自分に関係あるサイトか？」
が分からないと離脱されやすくなります。
たとえば美容室なら、
髪のダメージが気になる方へ縮毛矯正を続けながら、未来の髪も大切にしたい方へのように、対象や価値が分かる言葉を使えます。
格好良さより、
意味が伝わること
を優先します。
ヒーロー セクションとは
ページを開いたとき最初に見える主要エリアを、
ヒーロー セクションやFirst Viewと呼ぶことがあります。
ここには一般に、
- メインビジュアル
- 主なメッセージ
- CTA
などを置きます。
ただし、
大きな写真だけ
では何のサイトか伝わらない場合があります。
メインビジュアルはメッセージを補助する
画像は重要です。
でも、
「きれいな写真だから」
という理由だけで選ばないようにします。
店舗、商品、人物、仕上がりなど、
サイトの価値を補助する画像
を使います。
画像の扱いは第26・27章で詳しく整理します。
キャッチコピーは意味を優先する
短く、格好良い言葉は魅力的です。
ただし、
BE YOURSELFだけでは、初めて来た人に何のサイトか伝わらない場合があります。
ブランドメッセージを使う場合も、必要に応じて補足テキストを入れます。
トップページの基本構成
絶対の順番はありません。
初心者向けの一例として、
ヒーロー
↓
誰向けか
↓
主なサービス
↓
選ばれる理由 / 考え方
↓
ケース / 信頼
↓
ブログ / Knowledge
↓
アクセス
↓
問い合わせ / CTAなどがあります。
ビジネスに合わせて変えます。
1. ヒーロー
最初に、
- 誰向け
- 何を提供
- どんな価値
を伝えます。
すべてを一文で説明する必要はありません。
2. 初めての方への案内
初めての人が、
「この店に合う？」
と判断できる入口を作ります。
詳しい説明は「初めての方へ」ページへリンクします。
3. 大切にしていること
料金やメニューだけでは比較されやすくなります。
- なぜそうしているのか
- 何を大切にしているのか
- どんな考え方でサービスを作っているのか
を短く伝え、詳しいページへ案内します。
4. 主なサービス
トップページへ全メニューを書き切る必要はありません。
主なサービスを分かりやすく見せ、
詳しいメニュー・料金を見るへつなげます。
トップページは概要。
詳細ページは詳しい説明。
と役割を分けます。
5. 信頼につながる情報
ビジネスによって、
- ケース
- お客様の声
- スタッフ
- 考え方
- 実績
- FAQ
- Before / After
などが信頼につながります。
全部をトップページへ置く必要はありません。
利用者の不安を減らすために必要なものを選びます。
6. ブログ・Knowledge
更新コンテンツがある場合、
最新記事や主要記事への入口を置けます。
ただしトップページをブログ一覧にしないようにします。
「今読んでほしいコンテンツ」だけを見せる方法もあります。
7. アクセス
店舗型ビジネスでは、
- 場所
- 最寄駅
- Parking
- 営業時間
などの入口を作ります。
詳しいマップや道順はアクセスページへ。
8. 問い合わせ・CTA
第12章で決めた目的へつなげます。
たとえば、
目的
相談してもらう
CTA
自分の髪でも大丈夫か相談するのように、サイトの目的とCTAをつなげます。
トップページの順番とCTAを考える
CTAを何度置いてもよい？
長いトップページでは、途中と最後の複数箇所に同じCTAがある方が使いやすい場合があります。
ただし、
相談
予約
LINE
電話
Instagram
商品購入を全部同じ強さで並べると、選びにくくなります。
主要 CTAを決めます。
セクション順は「店が言いたい順」だけで決めない
店側は、
「歴史を最初に読んでほしい」
と思うかもしれません。
でも利用者は、
「自分に合う？」 「何をしてくれる？」 「料金は？」
を先に知りたいかもしれません。
トップページは、
利用者の疑問の順番
から考えます。
1セクション 1Message
一つのセクションへ、
- 考え方
- 料金
- スタッフ
- キャンペーン
- アクセス
- 問い合わせ
を全部詰め込むと、何を伝えたいかぼやけます。
一つのセクションでは、
一つの主なメッセージ
を意識します。
長いトップページは悪い？
長いこと自体が問題ではありません。
必要な情報があり、分かりやすく整理されていれば長くても構いません。
逆に短くても、
「何のサイトか分からない」
なら良いトップページとは言えません。
長さより、
読者が迷わない構造
を見ます。
モバイルでは順番がより重要
PCで2カラムになっていても、モバイルでは縦に並ぶ場合があります。
そのため、
- テキストが先？
- 画像が先？
- CTAが遠すぎない？
- セクションが長すぎない？
をモバイルで確認します。
WordPressでトップページを扱う
WordPressでは固定フロントページを設定できる
WordPressは初期状態では、最新の投稿をホームページへ表示する設定になっています。
一般的なビジネスサイトでは、固定ページをトップページとして表示する方法があります。
2026年8月時点では、
設定
↓
表示設定
↓
ホームページの表示
↓
固定ページから、公開済みページをホームページとして選択できます。
ブログ一覧を別ページにする場合は、投稿ページも別に選べます。
ホームページと投稿ページは同じページにはできません。
Block Themeではテンプレートとの関係もある
Block Themeでは、
外観
↓
エディター
↓
テンプレートからフロント ページやホームテンプレートを編集できる場合があります。
Themeがどのテンプレートを持つかによって、表示の仕組みが変わることがあります。
そのため、
「固定ページの内容を直したのに表示が変わらない」
場合は、使用中のテンプレートも確認します。
トップページと投稿ページは分けられる
ビジネスサイトでは、
トップページ
=
サイト全体の案内
ブログ ページ
=
投稿一覧と分けることができます。
WordPressの「ホーム」と「ブログホーム」は内部的にも別の概念です。
初心者は、
トップページとブログ一覧は同じでなくてよい
と覚えれば十分です。
作る前と公開後にも確認する
トップページだけ作り込んでも意味がない
トップページで、
詳しく見るを押しても、リンク先が薄い。
問い合わせへ行ってもフォームが動かない。
アクセスへ行っても住所しかない。
これではトップページだけきれいでも役割を果たせません。
トップページは、
サイト全体へ案内するページ
です。
案内先のページも整えます。
まず紙やMarkdownで順番を作る
いきなりWordPress上でデザインするより、
ヒーロー
初めての方へ
主なサービス
Reason
ケース
アクセス
CTAとテキストで並べてみると整理しやすくなります。
この簡単な設計図がワイヤーフレームの入口です。
公開後に「本当に案内できているか」を測る
制作時には、
「この順番なら分かりやすいはず」
と仮説を立てます。
でも本当に機能するかは、公開後のデータやお客様の声で分かります。
第45章では成果を測り、
第46章ではトップページを含めて改善します。
今回のポイント
- トップページは「表紙 + 案内板」
- 誰向けのサイトか最初に分かるようにする
- ヒーローは画像だけでなくメッセージも大切
- トップページへ全情報を詰め込まない
- 主なサービス・信頼・アクセス・CTAなどを役割で配置する
- 主要 CTAを決める
- セクション順は利用者の疑問から考える
- モバイルで縦に並んだときの順番も確認する
- WordPressでは固定フロントページと投稿ページを分けられる
- 公開後は第45・46章で成果と改善へつなげる
今回の視点
トップページは、
「一番豪華なページ」
ではありません。
サイトに来た人へ、
ここには何があり、次にどこへ進めばよいか
を伝えるページです。
全部を説明するより、
必要な情報へ迷わず案内できることを優先します。
Part 3｜ホームページの見た目と構造を作る
目次：初心者向け WordPressで作るホームページ完全Guide
次へ：第24章「固定ページをトップページに設定しよう」