WordPressでホームページを作るとき、特に重要になるのがトップページです。
トップページはサイトの入口となるページで、
- どのような会社・サービスなのか
- 誰に向けたホームページなのか
- どのような商品・サービスがあるのか
- どこから問い合わせればいいのか
などをユーザーへ伝える役割があります。
WordPressでは、初期状態ではトップページに最新の投稿が表示される場合がありますが、会社・店舗・サービスなどのホームページでは、固定ページをトップページとして設定する方法がよく利用されます。
ただし、
「固定ページをトップページに設定すれば完成」
というわけではありません。
その前に、トップページに何を掲載し、ユーザーをどのページへ案内するのかを考える必要があります。
この記事では、WordPress初心者向けに、トップページの構成から作り方、設定・編集方法、SEOで確認しておきたいポイントまで解説します。
WordPressのトップページとは？
トップページとは、Webサイトの入口となるページです。
たとえば、https://example.com へアクセスしたときに表示されるページがトップページです。
「ホーム」「ホームページ」「フロントページ」などと呼ばれることもあります。
トップページには、サイト全体の内容を分かりやすくまとめ、ユーザーをサービスや会社概要、お問い合わせなどの各ページへ案内する役割があります。
WordPressのトップページには2つの表示方法がある
WordPressでは、大きく分けて2種類のトップページを設定できます。
1つ目は、最新の投稿を表示する方法です。
ブログ記事を公開すると新しい記事が自動的にトップページへ追加され、ブログやニュースサイトのように、最新記事を中心に見せたいサイトに向いています。
2つ目は、固定ページをトップページとして表示する方法です。
あらかじめ作成した固定ページをトップページとして指定します。会社や店舗などのホームページでは、こちらの方法が利用しやすいでしょう。
たとえば、
- 会社紹介
- サービス
- 特徴
- 実績
- お客様の声
- お問い合わせ
などを自由に配置できます。
この記事では主に、固定ページを使ってトップページを作る方法を解説します。
固定ページとトップページの違い
「固定ページ」と「トップページ」は同じものではありません。
固定ページは、WordPressで常設ページを作るための機能です。
たとえば、
- 会社概要
- サービス紹介
- 料金
- お問い合わせ
などを固定ページで作れます。
その固定ページの中から1つを選び、サイトのトップページとして指定することができます。
つまり、「固定ページの1つをトップページとして使用する」という関係です。
WordPressトップページを作る前に構成を決める
トップページを作るとき、いきなりWordPressを開いてデザインを始めるのはおすすめしません。
まず、誰に、何を伝えて、最終的にどのような行動をしてもらいたいかを考えましょう。
たとえばホームページ制作会社なら、「ホームページを作りたい企業」に、「どのようなホームページ制作サービスを提供しているか」を伝え、「問い合わせてもらう」ことがトップページの目的になります。
目的が決まれば、必要なコンテンツも考えやすくなります。
ファーストビュー
ファーストビューとは、ユーザーがページへアクセスしたとき最初に見える範囲です。
トップページの中でも特に重要な部分です。
ファーストビューでは、
- 何のサイトなのか
- 誰向けなのか
- 何を提供しているのか
- どのような特徴があるのか
が短時間で伝わるようにします。
たとえば、
中小企業向けのホームページ制作
WordPressを使って更新しやすいWebサイトを制作します
というように、サービス内容と対象者が分かる文章を配置します。
必要に応じて、「サービスを見る」「お問い合わせ」「無料相談」などのボタンを配置してもよいでしょう。
サービス・商品紹介
次に、主なサービスや商品を紹介します。
複数のサービスがある場合は、トップページですべてを詳しく説明する必要はありません。
たとえば、
- ホームページ制作
- SEO対策
- Web広告
という3つのサービスがあるなら、それぞれの概要をトップページに掲載し、「詳しく見る」から各サービスの固定ページへ案内します。
トップページはすべての情報を詰め込むページではなく、重要な情報を整理して各詳細ページへ案内するページと考えると分かりやすいでしょう。
選ばれる理由・強み
競合サービスとの違いを伝えます。
たとえば、
- 10年以上の実績
- WordPress専門
- 制作後も自分で更新できる
- 月額費用不要
- 地域密着
- 専門資格を保有
などです。
ただし、「高品質」「安心」「丁寧」だけでは具体性がありません。
可能であれば、数字や実績など根拠のある情報を掲載すると分かりやすくなります。
実績・事例
実績や導入事例がある場合は、トップページにも掲載するとよいでしょう。
たとえば、
- 制作実績
- 導入企業
- ビフォー・アフター
- 成果事例
- 受賞歴
などがあります。
実績数が多い場合は、トップページでは一部だけ掲載し、「実績一覧を見る」から専用ページへ案内します。
お客様の声
実際の利用者から感想をもらっている場合は、お客様の声も掲載できます。
サービス提供者自身の説明だけでなく、第三者の評価を掲載することで、サービスを検討するときの参考情報になります。
ただし、架空の口コミや、実際とは異なる内容を掲載してはいけません。
会社・運営者情報
どのような会社・人物が運営しているのかも分かるようにします。
たとえば、
- 会社名
- 代表者
- 所在地
- 運営者プロフィール
- 事業内容
などです。
すべての会社情報をトップページに掲載する必要はありません。
簡単な紹介と「会社概要を見る」というリンクを設置し、詳細は会社概要ページに掲載すると整理しやすくなります。
お知らせ・ブログ
WordPressで記事を更新している場合は、最新記事をトップページに表示できます。
たとえば、
お知らせ
- 夏季休業のお知らせ
- 新サービス開始のお知らせ
- 営業時間変更のお知らせ
や、
ブログ
- WordPressでホームページを作る方法
- SEO対策とは？
- ホームページ制作の費用
などです。
最新記事を数件だけ表示し、記事一覧ページへリンクするとよいでしょう。
よくある質問
ユーザーが問い合わせる前に疑問に思いやすい内容を、よくある質問として掲載する方法もあります。
たとえば、
- 制作期間はどれくらい？
- 料金はいくら？
- 自分で更新できる？
- スマートフォンにも対応している？
- 公開後のサポートはある？
などです。
すべての質問をトップページへ掲載する必要はありません。
重要なものだけ掲載し、別途FAQページを作る方法もあります。
お問い合わせ・CTA
最終的に問い合わせや申し込みを目的としているホームページなら、ユーザーが行動できる導線を用意します。
たとえば、
- お問い合わせ
- 無料相談
- 資料請求
- 予約
- 購入
- 電話
などです。
このようなユーザーへ行動を促す要素を「CTA」と呼びます。
CTAはページ最下部だけに置く必要はありません。
サイトの内容に応じて、
- ヘッダー
- ファーストビュー
- サービス紹介のあと
- 実績のあと
- ページ最下部
など、ユーザーが行動しやすい位置に設置できます。
WordPressトップページの基本構成例
ここまで紹介した内容を並べると、たとえば次のような構成になります。
ファーストビュー
サービス・商品
選ばれる理由
実績・事例
お客様の声
会社・運営者情報
お知らせ・ブログ
よくある質問
お問い合わせ
この構成はあくまで一例です。
すべてのホームページに同じ構成が必要なわけではありません。
たとえば美容院なら、
店舗紹介
↓
メニュー・料金
↓
スタイリスト
↓
施術事例
↓
アクセス
↓
予約
といった構成が考えられます。
士業なら、
相談できる内容
↓
選ばれる理由
↓
料金
↓
解決事例
↓
プロフィール
↓
相談の流れ
↓
お問い合わせ
といった構成も考えられます。
重要なのは、テンプレートをそのまま使うことではなく、ホームページの目的に合わせて必要な情報を並べることです。
WordPressでトップページを作る方法
構成が決まったら、実際にWordPressでトップページを作ります。
1. トップページ用の固定ページを作る
WordPress管理画面を開き、「固定ページ」→「新規固定ページを追加」へ進みます。
ページタイトルには、HOMEまたは、トップページなどを入力します。
このタイトルは管理しやすい名前で構いません。
固定ページそのものの詳しい操作方法については、別記事の「WordPress固定ページの作り方」で詳しく解説しています。
2. トップページの内容を作る
作成した固定ページへ、先ほど考えた構成を作っていきます。
WordPressのブロックエディターでは、
- 見出し
- 段落
- 画像
- カバー
- ボタン
- カラム
- グループ
- 区切り
- 最新の投稿
など、さまざまなブロックを組み合わせられます。
たとえばファーストビューなら、
カバー画像
↓
キャッチコピー
↓
説明文
↓
お問い合わせボタン
という組み合わせを作れます。
サービス紹介なら、
3カラム
↓
サービスA
サービスB
サービスC
のようなレイアウトも作れます。
使用しているWordPressテーマによっては、独自のブロックやデザイン機能が用意されています。
必要に応じて利用するとよいでしょう。
3. 固定ページを公開する
トップページの内容を作成したら、プレビューで確認します。
問題がなければ公開します。
公開した時点では、まだこの固定ページがサイトのトップページになるとは限りません。
次に、WordPressの表示設定を変更します。
4. 作成した固定ページをトップページに設定する
WordPress管理画面から、「設定」→「表示設定」へ進みます。
「ホームページの表示」にある、「固定ページ」を選択します。
「ホームページ」の項目から、先ほど作成したトップページ用の固定ページを選びます。
最後に、「変更を保存」をクリックします。
これで指定した固定ページがWordPressのトップページとして表示されます。
実際にサイトURL、https://example.com へアクセスして確認してみましょう。
5. ブログを使う場合は投稿ページも設定する
トップページを固定ページに変更しても、WordPressでブログ記事を投稿できます。
その場合は、ブログ一覧として使用する固定ページをもう1つ作成します。
たとえば、ブログという固定ページを作ります。
そして「設定」→「表示設定」の、投稿ページに「ブログ」を指定します。
すると、https://example.com ではトップページ、https://example.com/blog ではブログ記事一覧、
というように分けられます。
会社のホームページ内でブログやコラムも運営したい場合に便利です。
なお、投稿ページとして指定したページの表示は、WordPressテーマのテンプレートに大きく左右されます。
6. トップページを確認する
設定が終わったら、トップページを実際に表示して確認します。
特に確認したいのは、
- PC表示
- スマートフォン表示
- 画像
- ボタン
- リンク
- メニュー
- お問い合わせ
- 文章の誤字脱字
などです。
管理画面で正しく見えていても、実際のサイトではデザインが異なる場合があります。
必ず公開側のページを確認しましょう。
WordPressトップページを編集する方法
トップページを公開したあとも、内容は自由に変更できます。
ただし、WordPressテーマによって編集方法が異なる場合があります。
固定ページから編集する場合
通常の固定ページをトップページとして使用している場合は、「固定ページ」→「固定ページ一覧」からトップページとして設定したページを開きます。
文章や画像などを変更し、「更新」をクリックします。
変更後は実際のトップページを開き、表示を確認しましょう。
ブロックテーマではサイトエディターを使う場合がある
ブロックテーマを使用している場合は、「外観」→「エディター」からサイトエディターを利用できます。
サイトエディターでは、
- ヘッダー
- フッター
- ナビゲーション
- テンプレート
- ページ
など、サイト全体をブロックで編集できます。
また、テーマに「Front Page」テンプレートがある場合は、そのテンプレートがトップページ表示に影響します。
そのため、「固定ページを変更したのにトップページが思ったように変わらない」という場合は、「外観」→「エディター」→「テンプレート」も確認してみましょう。
特にFront Pageテンプレートが設定されている場合は、通常の表示設定より優先されることがあります。
WordPressテーマ独自のトップページ設定がある場合
テーマによってはWordPress標準機能だけでなく、
- テーマ専用設定
- カスタマイザー
- 専用ウィジェット
- 独自ブロック
- トップページ専用テンプレート
などが用意されています。
その場合は、WordPress標準の操作だけではなく、テーマ独自の設定も確認する必要があります。使用しているテーマの公式マニュアルを確認してください。
WordPressトップページのデザインで意識したいこと
トップページでは、単にデザインを豪華にするよりも、ユーザーが内容を理解しやすいことが重要です。
最初に「何のサイトなのか」を伝える
ユーザーがトップページを開いたときに、「これは何のサイト？」という状態にしないようにします。
ファーストビューだけでも、
- 誰向けなのか
- 何を提供しているのか
がある程度分かるようにしましょう。
たとえば、
株式会社○○
だけでは何の会社か分かりません。
それより、
中小企業向けWordPressホームページ制作
など、具体的なサービス内容を伝えた方が理解しやすくなります。
情報を詰め込みすぎない
トップページですべてを説明しようとすると、非常に長いページになります。
トップページでは概要を紹介し、詳しく見るから詳細ページへ案内する方法があります。
たとえば、
トップページ
↓
サービス概要
↓
サービス詳細ページ
という構造です。
情報を適切に分けることで、トップページも読みやすくなります。
詳細ページへの導線を作る
トップページから重要なページへ移動できるようにします。
たとえば、
サービス紹介
→ サービス詳細
料金の概要
→ 料金ページ
会社紹介
→ 会社概要
ブログ記事
→ 記事一覧
などです。
ボタンだけでなく、文章中のリンクも利用できます。
お問い合わせへの導線を分かりやすくする
問い合わせ獲得を目的としているホームページなら、お問い合わせページへ簡単に移動できるようにします。
たとえばヘッダーに、
お問い合わせ
ボタンを設置しておけば、どの位置からでもアクセスしやすくなります。
ただし、ページ中に問い合わせボタンを大量に配置すれば成果が上がるとは限りません。ユーザーが問い合わせを検討しやすいタイミングに合わせて配置しましょう。
スマートフォン表示を確認する
現在のWebサイトでは、スマートフォン表示も重要です。
特に、
- 文字が小さすぎないか
- 画像が画面からはみ出していないか
- 横スクロールが発生していないか
- ボタンをタップしやすいか
- 余白が不自然ではないか
- 表が読みにくくなっていないか
を確認します。
PCでは横並びになっているコンテンツも、スマートフォンでは縦並びになることがあります。
必ず実際のスマートフォンでも確認しましょう。
WordPressトップページのSEOで確認したいこと
ホームページをGoogle検索から見つけてもらいたい場合は、トップページのSEOについても確認します。
SEOタイトルを「ホーム」だけにしない
トップページのSEOタイトルを、ホームだけにするのはおすすめしません。
何のサイトなのか検索ユーザーに伝わらないからです。
たとえば名古屋でホームページ制作を提供している会社なら、株式会社○○｜名古屋のホームページ制作会社などが考えられます。
整体院なら、○○整体院｜春日井市の腰痛・肩こり専門整体のように、
- サイト名
- サービス
- 地域
- 特徴
などから重要な情報を組み合わせます。
ただし、SEOキーワードを不自然に大量に詰め込む必要はありません。
ページの内容を簡潔に伝えるタイトルにしましょう。
H1でサイトの内容を伝える
トップページのH1も、「何のホームページなのか」が分かる内容にします。
たとえば、名古屋のWordPressホームページ制作などです。
ただし、H1の出力方法はWordPressテーマによって異なります。
サイトタイトルやキャッチコピーが自動的にH1になるテーマもあるため、実際のHTML構造を確認したうえで設定してください。
meta descriptionを設定する
meta descriptionには、サイトの概要を簡潔に記載します。
たとえば、
株式会社○○は名古屋を中心にWordPressホームページ制作を行っています。企業サイト、店舗サイト、SEOを考慮したWebサイト制作に対応しています。
といった内容です。
ただし、設定したmeta descriptionが必ずそのままGoogle検索結果に表示されるとは限りません。
Googleが検索内容に応じて別の文章を表示することもあります。
重要なページへ内部リンクする
トップページはサイト内の重要なページへリンクする場所でもあります。
たとえば、
- サービス
- 料金
- 実績
- 会社概要
- お問い合わせ
- 重要な記事
などです。
ユーザーが必要な情報へ移動しやすい構造にしましょう。
内部リンクはSEOだけではなく、ユーザーの利便性にも関係します。
画像を最適化する
トップページでは大きな画像を使用することがあります。
特にファーストビューで高解像度の画像や動画を使用すると、ファイルサイズが大きくなりやすいため注意が必要です。
必要以上に大きな画像を使用せず、表示サイズに合わせて画像を最適化します。必要に応じてWebPなどの画像形式も検討します。
また、意味のある画像には内容が分かるalt属性を設定しましょう。
表示速度を確認する
トップページはデザイン要素が多くなりやすいため、ページが重くなることがあります。
特に、
- 大きな画像
- 動画
- スライダー
- Webフォント
- 外部スクリプト
- アニメーション
などを多用すると、表示速度に影響する可能性があります。
豪華なデザインにすることより、ユーザーがストレスなく閲覧できることを優先しましょう。
WordPressトップページが変更・表示されない場合
トップページを作ったのに、「変更が反映されない」「違うページが表示される」ということがあります。
その場合は、次の項目を確認してみましょう。
固定ページが公開されているか確認する
まず、トップページに使用する固定ページの公開状態を確認します。
下書きや非公開になっていないか確認してください。
「設定 → 表示設定」を確認する
管理画面から、「設定」→「表示設定」へ進みます。
「ホームページの表示」が、固定ページになっているか確認します。
さらに「ホームページ」に正しい固定ページが選択されているか確認してください。
正しい固定ページを編集しているか確認する
似た名前の固定ページが複数ある場合、
編集しているページと実際にトップページとして設定されているページが違うことがあります。
表示設定から現在指定されている固定ページを確認しましょう。
キャッシュを確認する
ページキャッシュやブラウザキャッシュによって、変更前のページが表示されている場合があります。
キャッシュ機能を使用している場合は、キャッシュを削除してから再度確認してください。
ただし、キャッシュ削除方法はレンタルサーバーや利用している仕組みによって異なります。
Front Pageテンプレートを確認する
ブロックテーマの場合は、Front Pageテンプレートが影響している可能性があります。
「外観」→「エディター」→「テンプレート」
を確認してください。
Front Pageテンプレートが存在すると、そのテンプレートがトップページとして使用されます。
WordPressテーマ独自の設定を確認する
使用しているテーマに独自のトップページ設定がある場合もあります。
たとえば、
- トップページ専用ウィジェット
- ヘッダー画像
- メインビジュアル
- おすすめ記事
- スライドショー
などです。
WordPress標準設定だけで解決しない場合は、使用しているテーマの公式マニュアルも確認してください。
WordPressトップページについてよくある質問
WordPressのトップページは固定ページで作るべき？
会社・店舗・サービスなどのホームページなら、固定ページをトップページにする方法が使いやすいでしょう。
一方、ブログやニュースサイトのように最新記事が主役のサイトなら、最新の投稿をトップページに表示する方法もあります。
サイトの目的に合わせて選びます。
トップページとホームページの違いは？
一般的な会話では、「トップページ」と「ホームページ」が同じ意味で使われることがあります。
厳密には「ホームページ」という言葉がWebサイト全体を指す意味で使われることもあります。
WordPressではトップページを「Front Page」と表現することもあります。
初心者の場合は、サイトURLへアクセスしたとき最初に表示されるページ＝トップページと考えて問題ありません。
トップページにブログ記事一覧を表示できる？
できます。
固定ページをトップページに設定していても、「最新の投稿」などのブロックやテーマ機能を利用して記事一覧をトップページ内に表示できます。
たとえば最新記事を3件だけ表示し、記事一覧を見るからブログページへ案内する方法があります。
トップページのURLはどうなる？
固定ページをトップページとして設定すると、基本的にはサイトのルートURLがトップページになります。
たとえば、https://example.com です。
トップページ用固定ページに「home」というスラッグを付けていても、通常ユーザーが見るトップページは、https://example.com になります。
トップページのスラッグは何にすればいい？
管理上分かりやすければ、homeなどで問題ありません。
ただし、トップページとして設定した場合、通常はそのスラッグをURLとして見せるのではなく、サイトのルートURLがトップページになります。
トップページにH1は必要？
一般的には、ページの主題が分かる主要な見出しを用意した方が分かりやすいでしょう。
ただし、WordPressテーマによってサイトタイトルや別の要素をH1として出力している場合があります。「H1を必ず自分で追加する」と考えるのではなく、テーマがどのようなHTMLを出力しているか確認することが重要です。
トップページが編集できないのはなぜ？
ブロックテーマのFront Pageテンプレートや、WordPressテーマ独自のトップページ機能が使われている可能性があります。
通常の固定ページを編集しても表示が変わらない場合は、「外観」→「エディター」→「テンプレート」やテーマ設定を確認してください。
固定ページを設定してもトップページが変わらないのはなぜ？
次のような原因が考えられます。
- 表示設定が保存されていない
- 別の固定ページを指定している
- キャッシュが残っている
- Front Pageテンプレートがある
- WordPressテーマ独自の設定が優先されている
一つずつ確認してみましょう。
まとめ｜WordPressトップページは構成を決めてから作ろう
WordPressでは、固定ページを使って会社やサービス向けのトップページを自由に作成できます。
基本的な流れは、
- トップページの目的を決める
- 掲載するコンテンツを整理する
- トップページ用の固定ページを作る
- ブロックエディターなどでページを作成する
- 「設定」→「表示設定」からトップページに指定する
- PC・スマートフォンで確認する
- 必要に応じてSEO設定を行う
となります。
重要なのは、いきなりWordPressでデザインを始めないことです。まず、誰に何を伝えて、どこへ案内するのかを整理します。
そのうえで、
ファーストビュー
↓
サービス
↓
特徴
↓
実績
↓
会社情報
↓
お問い合わせ
のように必要な情報を並べていけば、トップページの構成を考えやすくなります。
また、トップページですべてを説明する必要はありません。
トップページではサイト全体の重要な情報を分かりやすく紹介し、サービス・料金・会社概要・お問い合わせなどの詳細ページへユーザーを案内することが重要です。
