固定ページ作成
※このページには広告(PR)リンクが含まれます
🎯 このレッスンのゴール:最後の3問に答えられること
- 年に数回しか内容を変えない「料金プラン」ページを新しく作ります。本文に沿うと、どのコンテンツタイプで作るのが適切ですか。
- トップに最新の投稿一覧ではなく、自作のトップページを表示したいです。本文の手順として正しいものはどれですか。
- 全ページ下部に置いた問い合わせCTAの電話番号が変わりました。CTAを再利用ブロックで作っていた場合、本文に沿う対応はどれですか。
本文は約8分で読めます。先に問題を頭に入れてから読むと、答えの箇所が見つけやすくなります。
すぐに問題に挑戦する ↓固定ページ設計——トップ・会社概要・サービス・アクセスを作る
WordPressの「固定ページ(Pages)」は、投稿(ブログ記事)とは異なる、恒久的なコンテンツを掲載するためのページタイプです。トップページ・会社概要・サービス・アクセスなど、ビジネスサイトの核となるページはすべて固定ページで作成します。このレッスンでは、各固定ページの目的と構成、ブロックパターンを活用した効率的な制作方法、固定ページをフロントページとして設定する手順、そしてページ間のリンク設計まで体系的に学びます。
固定ページ構成マップ
固定ページ構成マップ — トップ/会社概要/サービス/アクセス
ビジネスサイトに必要な固定ページはそれぞれ明確な役割を持ちます。訪問者のジャーニー(トップ → サービス → 会社概要 → お問い合わせ)を意識して各ページを設計することが重要です。
固定ページと投稿の違い
WordPressには「投稿(Post)」と「固定ページ(Page)」の2種類のコンテンツタイプがあります。それぞれの特徴を理解して使い分けることが重要です。
| 特徴 | 投稿(Post) | 固定ページ(Page) |
|---|---|---|
| 目的 | ブログ記事・ニュース・お知らせ | サービス・会社情報・プロフィール |
| 更新頻度 | 定期的に追加される | 変更頻度が低い恒久的なコンテンツ |
| カテゴリ・タグ | 使用可能 | 使用しない(階層のみ) |
| RSS/サイトマップ | 自動的に含まれる | 設定次第 |
| URL構造 | /blog/post-title/ | /page-title/ |
| 親子関係 | なし | ページ階層(親ページ・子ページ) |
💡 「固定ページ」という名前の意味: 「固定」とは「トップページとして固定できる」「カテゴリや時系列に縛られない自由な位置に配置できる」という意味合いで付けられた名称です。決して「内容を更新できない」という意味ではありません。
トップページの設計
トップページはサイトの「顔」であり、初訪問者が最初に見るページです。訪問者が3秒以内に「このサイトが何を提供しているか」「自分に関係があるか」「信頼できるか」を判断できる構成を目指します。
トップページの推奨セクション構成
① ヒーローセクション(ファーストビュー) スクロールなしで見えるエリアです。キャッチコピー・サブコピー・メインビジュアル・CTAボタンを配置します。キャッチコピーはサービスの価値を一文で伝えるものにし、CTAボタンは最も重要なアクション(問い合わせ・無料体験・購入)に誘導します。
② 実績・信頼セクション 数字で実績を示すセクションです。「導入実績○○社」「顧客満足度○%」「創業○年」などのデータを簡潔に掲載します。ロゴ一覧や受賞歴も信頼性向上に有効です。
③ サービス概要セクション 提供するサービスを3〜6つのカード形式で紹介します。各カードにはアイコン・タイトル・短い説明文・「詳しく見る」リンクを含めます。
④ お客様の声(テスティモニアル)セクション 実際のお客様の声を掲載することで信頼性が大幅に向上します。氏名・肩書き・写真・コメントの4点セットが理想です。匿名でも「業種・年代」を記載するだけで説得力が増します。
⑤ 最新ブログ・お知らせセクション 「最新の投稿」ブロックで直近3〜5件の記事を自動表示します。サイトが定期更新されている証拠になり、SEOにも好影響があります。
⑥ 最終CTA(問い合わせ誘導)セクション ページ最下部に「お問い合わせはこちら」などの大きなCTAブロックを配置します。ページを最後まで読んだユーザーへの最後のアクション促進です。
トップページをフロントページとして設定する
WordPressのデフォルトではトップページに最新の投稿一覧が表示されます。固定ページをトップページとして表示するには、以下の手順を実施します。
- ◆固定ページ → 新規追加 で「ホーム」「TOP」などのタイトルで固定ページを作成(内容はあとで編集)
- ◆同様に「ブログ」という固定ページを作成(投稿一覧を表示するためのダミーページ)
- ◆設定 → 表示設定 → ホームページの表示を「固定ページ」に切り替え
- ◆ホームページ: 「ホーム」、投稿ページ: 「ブログ」を選択して保存
⚠️ フロントページ設定後のURL: 投稿一覧が表示されるURLが「/blog/」に変わります。既存サイトのリニューアル時は、古いURLからのリダイレクトを設定し忘れないよう注意してください。
会社概要ページの設計
会社概要ページはBtoB・BtoCどちらのサイトでも「信頼性の証明」として重要なページです。初訪問者がサービスを検討する際、必ず確認するページでもあります。
会社概要ページの基本構成
| セクション | 内容 | ブロック |
|---|---|---|
| 会社基本情報 | 会社名・代表者名・設立・資本金・従業員数・所在地 | テーブルブロック |
| 事業内容 | 主力事業の説明(箇条書き) | リストブロック |
| 会社理念・ミッション | ビジョン・バリュー | 引用ブロックまたは見出し+段落 |
| 代表者メッセージ | 写真+テキストの横並び | メディアとテキストブロック |
| 沿革 | 創業から現在までのタイムライン | テーブルまたはリスト |
| アクセス(簡略版) | 地図・住所 | カスタムHTML(Google Maps) |
代表者メッセージの書き方
代表者メッセージはサイトの中で数少ない「人格を感じられるコンテンツ」です。形式的な内容ではなく、創業の背景・ビジネスへの思い・顧客へのコミットメントを具体的に書くことで信頼性が高まります。400〜600文字程度が適切な長さです。
サービスページの設計
サービスページはサイト内で最もコンバージョンに近いページです。訪問者が「これは自分の課題を解決できるか」「いくらかかるか」「なぜここに頼むべきか」を判断できる情報を網羅します。
サービスページの構成要素
サービス一覧セクション 提供するサービスをカード型で並べます。カラムブロック(2〜3カラム)を使い、各カードにはサービス名・アイコン・価格感・特徴3点・CTAリンクを含めます。
料金プラン比較表 複数のプランがある場合、テーブルブロックで比較表を作成します。横軸にプラン名、縦軸に機能・価格を並べ、おすすめプランを色付きで強調します。
よくある質問(FAQ)セクション 「詳細」ブロック(アコーディオン形式)を使い、よくある質問10〜15件を掲載します。FAQ形式はSEO(FAQスキーマ)にも有効で、Googleの検索結果にリッチリザルトが表示される可能性があります。
💡 FAQスキーマの実装: WordPressでFAQスキーマを簡単に実装するには「YOAST SEO」や「Rank Math」のFAQブロックを使う方法が最も手軽です。「詳細」ブロックで作成したFAQに構造化データを追加するには別途コーディングが必要なため、SEOプラグインの活用を推奨します。
アクセスページの設計
アクセスページは「店舗・オフィスへの来訪を促すページ」です。地図の見やすさと交通手段の分かりやすさが最重要で、スマートフォンで確認するユーザーが多いためモバイル表示を必ず確認します。
Google Maps埋め込みの手順
- ◆Google Mapsで目的の場所を検索する
- ◆「共有」→「地図を埋め込む」を選択
- ◆サイズを「カスタムサイズ」で横幅100%・高さ450pxに設定
- ◆HTMLコードをコピーする
- ◆WordPressの「カスタムHTML」ブロックに貼り付ける
アクセスページに含める情報チェックリスト
- ◆Google Maps埋め込み(インタラクティブ地図)
- ◆住所(郵便番号から記載、コピーしやすいテキスト形式)
- ◆電話番号・FAX番号(スマートフォンからタップ発信できるようにtelhrefリンク推奨)
- ◆最寄り駅からの経路(徒歩分数・バス路線)
- ◆自動車でのアクセス(幹線道路からのルート・駐車場の有無と台数)
- ◆営業時間・定休日(テーブル形式で見やすく)
⚠️ 地図の著作権注意: Google Mapsの利用は原則として利用規約の範囲内で無料ですが、商用目的での大量アクセスにはGoogle Maps Platformのビリング設定が必要になる場合があります。Googleの利用規約を事前に確認してください。
ブロックパターンの活用
ブロックパターンとは、複数のブロックを組み合わせたレイアウトのテンプレートです。エディタの「パターン」タブから挿入でき、ヒーローセクション・カード型リスト・CTAセクションなどの複雑なレイアウトをワンクリックで挿入できます。
ブロックパターンの活用メリット
- ◆制作時間の短縮: 複雑なカラムレイアウトを0から作る必要がない
- ◆デザインの統一: サイト内で同じパターンを使うことでデザインの一貫性が保たれる
- ◆再利用が容易: よく使うレイアウトを「再利用ブロック」として保存できる
再利用ブロックの作成手順
繰り返し使うCTAセクションや問い合わせボタンは「再利用ブロック」に登録すると、どのページにも同じブロックを簡単に挿入できます。
- ◆再利用したいブロックまたはブロックグループを選択
- ◆オプションメニュー(三点メニュー) → 「再利用ブロックに追加」
- ◆名前を付けて保存
- ◆別のページで「/」を入力して再利用ブロック名を検索、挿入
💡 再利用ブロックの同期更新: 再利用ブロックは一箇所を更新するとすべてのページに反映されます。フッターのCTAや問い合わせフォームへのリンクボタンなど、サイト全体で統一したいコンポーネントに最適です。
固定ページのSEO設定
固定ページのSEO設定は投稿と同じく、SEOプラグイン(Yoast SEO または Rank Math)で行います。
| 設定項目 | 設定方法 | 注意点 |
|---|---|---|
| タイトルタグ | SEOプラグインのタイトル欄 | ページ名+サイト名の形式が一般的 |
| メタディスクリプション | SEOプラグインの説明欄 | 120〜160文字で価値を伝える |
| パーマリンク(スラッグ) | ページ編集画面のURL欄 | 英数字・ハイフンのみ推奨 |
| noindex設定 | SEOプラグインのindex設定 | プライバシーポリシー等は通常インデックス許可 |
🏋️実践ワーク
以下のワークを実施してください。
- ◆4ページ作成: トップ・会社概要・サービス・アクセスの固定ページをそれぞれ作成し、適切なスラッグ(top/company/service/access)を設定する
- ◆フロントページ設定: トップページ用の固定ページをフロントページとして設定し、投稿一覧は「ブログ」ページに表示されるよう設定する
- ◆ブロックパターン活用: サービスページにカラムブロックを使ったサービス一覧セクションと、テーブルブロックを使った料金比較表を作成する
- ◆再利用ブロック作成: 問い合わせへの誘導CTAブロックを作成し、再利用ブロックに登録したうえでトップページとサービスページに挿入する
📝まとめ
固定ページはビジネスサイトの「骨格」を構成するページです。トップページで信頼と興味を獲得し、サービスページで購入・依頼を後押しし、会社概要ページで安心感を与え、アクセスページで来訪・行動を促す——この流れを意識したページ設計が、コンバージョン率の高いWordPressサイトを作る鍵です。ブロックパターンと再利用ブロックを積極的に活用することで、制作効率を上げながらデザインの一貫性を保つことができます。
理解度チェック
3問全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。何度でも挑戦でき、全問正解すると全問の解説が読めます(不正解のときは正解した問題の数だけ表示され、30秒後に答え直せます)。
Q1.年に数回しか内容を変えない「料金プラン」ページを新しく作ります。本文に沿うと、どのコンテンツタイプで作るのが適切ですか。
Q2.トップに最新の投稿一覧ではなく、自作のトップページを表示したいです。本文の手順として正しいものはどれですか。
Q3.全ページ下部に置いた問い合わせCTAの電話番号が変わりました。CTAを再利用ブロックで作っていた場合、本文に沿う対応はどれですか。
「WordPress HP制作完全講座」全12レッスンを無料で修了しよう
- ✓ 理解度チェックの採点と、合格レッスンの記録
- ✓ 全レッスン合格で修了証を発行(URLでシェア・LinkedInに追加できます)
- ✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード
完全無料・クレジットカード不要
このレッスンで使うツール・次の学び方 PR
Audible(Amazonのオーディオブック) ↗ビジネス書・マーケティングの本を通勤中や家事の合間に聴いて学べる。プレミアムプランは30日間の無料体験あり(2026年11月時点)

関連するブログ記事
関連レッスン(他のコースから)
HTML/CSSコーディング入門
Web制作の全体像
Webサイトを作るとき、何から始めればよいのか迷う人は多いです。
30分無料公開
HTML/CSSコーディング入門
HTMLの基本タグ
HTMLを書く上で最初に覚えるべきタグは数十種類あります。ただし、日常的に使うタグは限られています。
30分本文は無料で閲覧可
HTML/CSSコーディング入門
テキスト・リスト・リンク・画像
HTMLの基本構造を覚えたら、次は実際にコンテンツを作る上で最もよく使う4種類のタグを深く学びます。
30分本文は無料で閲覧可
HTML/CSSコーディング入門
CSSの基本
HTML がページの構造を担うのに対し、CSS(Cascading Style Sheets)は見た目を担います。
30分本文は無料で閲覧可
HTML/CSSコーディング入門
ボックスモデルとレイアウト
HTMLのすべての要素は目に見えない「箱(ボックス)」として扱われます。
30分本文は無料で閲覧可
HTML/CSSコーディング入門
Flexboxレイアウト
CSS Flexbox(フレックスボックス)は、1次元のレイアウト(横または縦方向への要素配置)を直感的かつ強力に実現するレイアウトモジュー
30分本文は無料で閲覧可