この記事では、WordPressでトップページ（フロントページ）の作り方を紹介します。
トップページにどのような情報を載せるのか、各固定ページへどのように自然に導くか、構成を考えていきましょう。
説明アイコン 前回の「カテゴリー設計と導線の作り方」で決めたパン屋さんの構成をもとに、
今回は空想上のパン屋さんを例に、トップページの中身を実際に作成していきます。
🥖まずは振り返りましょう｜どんなホームページを作るか整理する
トップページの作り込みに入る前に、これまで決めた内容を振り返っておきましょう。
WordPressでは、「固定ページ」＝骨格／「投稿ページ」＝日々の更新 という役割分担でしたね。
前回までに「カテゴリー構成」と「固定ページの枠（空ページ）」が完成しました。
🧭いまの進捗
| 作業項目 | 状況 |
|---|---|
| カテゴリー設計 | ✅ 完了（「今日のパン」「出店情報」「素材日記」など） |
| 導線設計 | ✅ 完了（固定ページとの関連づけ） |
| 固定ページ作成 | ✅ 完了（白紙で公開済み） |
| トップページ設定 | ✅ 完了（固定ページをフロントページに設定） |
| トップページ中身 | ▶ これから作成 |
🪴依頼を受けるときも、ここまでは必ずヒアリングします
たとえば私がホームページ制作の依頼を受けた場合でも、
以下のような情報がないと構成を設計できません。
| ヒアリング項目 | 内容例（パン屋DEMOの場合） |
|---|---|
| 店舗形態 | 自宅兼パン屋（住宅街にある） |
| コンセプト | ハード系が得意・素材にこだわり |
| 発信内容 | 学食・移動販売・イベント出店情報も載せたい |
| 情報更新 | 売切れ・臨時休業などの速報を出す |
| 採用情報 | アルバイト募集中 |
| 顧客導線 | 「メニュー→アクセス→お問い合わせ」の流れ |
🍞パン屋さんの条件再掲（DEMO設定）
| 種類 | 内容 |
|---|---|
| 自宅兼パン屋 | 住宅街にあり、やや場所がわかりにくい |
| 得意なパン | ハード系、総菜パン |
| 出店 | 高校の学食・移動販売（不定期） |
| コンセプト | 小麦・水・自家製イーストにこだわり |
| 情報発信 | 出店予定・イベント・スタンプカード制度 |
| 営業情報 | 在庫・売切・臨時閉店などを即時発信 |
| 採用 | アルバイト募集あり |
ここまでを確認したら、
いよいよ次は「トップページを実際に作る」ステップです。
これからやるのは、
- ヒーローセクションの設定
- 字体と背景の調整
- 固定ページの中身を作る
- 各ページへのリンク設置
というトップページ完成までの作業です。
🏠ヒーローセクションを設定しよう
ホームページを訪れた人が、最初に目にするのが「ヒーローセクション」です。
サイトの第一印象を決める、とても大切な部分になります。
コンセプトによって、さまざまな見せ方が考えられます。
- お店の外観を大きく見せて「雰囲気」を伝える
- 代表的な商品を前面に出して「自慢のパン」を紹介する
- あえて画像を使わず、タイトルやコピーを印象的に配置する
このヒーローセクションに ①画像 または ②動画 を自由に設置できます。
さらに、画像や動画の上に テキスト（キャッチコピー） を重ねたり、
ボタンを配置してリンク導線 として使うことも可能です。
今回はDEMO用のパン屋さんサイトとして、
「お店の外観写真」 をヒーローセクションに設置してみましょう。
訪問者が「どんなパン屋さんなんだろう？」と感じる、“入口の雰囲気”を演出します。
では、次に実際の設定手順をスクリーンショットとともに見ていきましょう。
①画像か動画を選択
②メインビジュアルの高さは、「ウインドウサイズにフィットさせる」を選ぶと、画面いっぱいに写真が表示されます。
③「画像を選択」をクリックして、画像を指定します（PCとSP両方に設定します）
④メインテキスト［１］に表示したい文字を入力
⑤ボタンを設置したい場合はリンク先URL（例えば固定ページのURL）を入力し、ボタンに表示させる文字（例えばMenu）を入力
⑥最後に右上の「公開」をクリックすると反映されます。
ここまで設定できると👇こうなります。
説明アイコン一気に自分のHPみたいになりましたね！
オーバーレイやスクロールボタンの設置など機能がたくさん用意されていますので、色々触ってみてください。「公開」は、いわば“上書き保存”のようなボタンです。変更を反映するたびに押すのを忘れずに。
✏️字体と背景で雰囲気を整える
ヒーローセクションに画像を設置したら、
次はサイト全体の雰囲気（デザインの印象）を整えていきましょう。
SWELLでは、「フォント（文字の形）」と「背景（色や画像）」を変えるだけでも、
ぐっと“お店らしい”世界観を出すことができます。
フォント（字体）を変更する
フォントを変えると、同じ文章でも印象が大きく変わります。
パン屋さんのような温かみのあるお店なら、やわらかく、読みやすい文字を選ぶと相性が良いです。
🔧設定手順
WordPress管理画面 → 外観 → カスタマイズ →サイト全体設定→ 基本デザイン → フォント設定
| 表示名 | 特徴 |
|---|---|
| 游ゴシック | 標準的で柔らかく読みやすい。SWELL初期設定。 |
| ヒラギノゴシック + メイリオ | Windows・Mac両方で安定。やや太めで見やすい。 |
| Noto Sans JP | スマート・すっきりした印象。 |
| 明朝体（Noto Serif JP） | 文字に品があり、和風・落ち着いたサイトに合う。 |
プレビューを見ながら、お店の雰囲気に合うものを選びましょう。
説明アイコン今回のDEMOは游ゴシックを使用することにしました。
🌾背景を設定する
SWELLでは、「背景色」や「背景画像」を設定してサイトの印象を統一できます。
背景は全ページ共通になるため、お店の雰囲気を代表する色味を選びましょう。
🔧設定手順
WordPress管理画面 → 外観 → カスタマイズ → サイト全体→基本デザイン→ページ背景
説明アイコンもちろん、写真も背景画像に使えます。ただ、字が読みにくくなることが多いのと、投稿記事も同じ背景になるので画像はすぐに飽きが来るという感想です。でも、画像背景はインパクトはあります。
🍞サイト全体の配色を調整する
メインカラーの設定
カスタマイズ → サイト全体設定→基本カラー→メインカラー
（今回は、パン屋さんなので「#8b5a2b」で統一していきます。文字色は白にしました。）
ヘッターカラーの設定
カスタマイズ→ヘッター→ヘッターカラー
（今回はメインカラーに合わせて「#8b5a2b」。文字色は白にしました。）
フッターカラーの設定
カスタマイズ→フッター→フッターカラー
（同様に「#8b5a2b」。文字色は白にしました。）
🪴まとめ
- フォントは「読みやすさ＋お店らしさ」のバランスで選ぶ
- 背景は淡い色味や素材感のある画像で“世界観”を出す
- メインカラーも一緒に整えると統一感がアップ
これで、見た目の雰囲気づくりが完成です。
次は、いよいよトップページ本文を作り、固定ページへのリンクを設置していきましょう。
🍞トップページ本文を作ろう｜固定ページへの導線をつくる
🧭トップページの役割を再確認
スマホユーザーの多くは、縦にスクロールしながら「ざっと全体を見る」傾向があります。
そのため、固定ページを読む前に“どんなお店なのか”“どこに何があるのか”が伝わるトップページが重要です。
トップページは「サイト全体の目次＋要約ページ」と考えると良いでしょう。
つまり──
固定ページに書く内容を、トップページで“短く紹介してリンクでつなぐ”構成にする。
🧁トップページに載せる主な内容
- お店のコンセプト（1～2行）
- 人気メニューの写真とリンクボタン
- 素材へのこだわり（簡単な紹介＋リンク）
- アクセス・営業時間（地図へ誘導）
- 最新のお知らせ（カテゴリーから自動表示でもOK）
👉つまり、「固定ページで詳しく読む前に、まず知りたいこと」を1ページで完結させる構成です。
🔗 固定ページへのリンクを設置する
トップページでは、固定ページ（お店紹介・メニュー・アクセスなど）へ
スムーズに誘導するためにリンクの見せ方を工夫しましょう。
SWELLでは次の3パターンが使えます👇
🥖テキストリンクでシンプルに
文章中に自然にリンクを差し込む方法です。
人気メニューや季節限定パンの一覧は 👉 [メニュー紹介ページ] でご覧いただけます。
💡ポイント
- 文章の流れを壊さない
- 説明文の中で誘導できる
- SWELLでは自動で同一タブ（target=”_self”）で開きます
おすすめ：
「文章メイン＋軽い誘導」で使うと自然です。
🍞SWELLボタンブロックで目立たせる
ボタンブロックはクリック誘導に最も効果的です。
設定場所：
ブロック追加 → デザイン → ボタン
例：
👉 [メニューを見る]（/menu/）💡ポイント
- 色・形・余白をカスタマイズ可能
- テキストリンクより目立つ
- CTA（行動喚起）に最適
おすすめ：
トップページ中盤（人気パン紹介やアクセス誘導）に配置。
🪴SWELL「固定ページリスト」ブロックでカード表示
複数の固定ページをカード型にまとめて表示できます。
設定場所：
ブロック追加 → SWELLブロック → 固定ページリスト
例：
- お店について
- メニュー紹介
- アクセス
💡ポイント
- 自動でアイキャッチ画像＋タイトルを表示
- レイアウトがきれいに整う
- 画像があるとクリック率が高い
おすすめ：
トップページの最後に「お店紹介・アクセス・メニュー」などを並べる。
サイト全体の導線が整理されます。
🎨ちょっとした使い分けのコツ
| タイプ | 特徴 | 向いている場所 |
|---|---|---|
| テキストリンク | 自然・説明中心 | 段落内、説明文の末尾 |
| ボタン | 強い誘導・行動喚起 | コンテンツ中盤や下部CTA |
| 固定ページリスト | ビジュアル訴求 | ページ終盤の「まとめ・案内」 |
💡ポイント
- 固定ページを読まれなくても「最低限伝わる」ように構成する
- 写真・見出し・ボタンをリズムよく配置する
- 各リンク先は 必ず同一タブ（target=”_self”）で開くようにして離脱を防ぐ
💬 ちょっと補足
SWELLのボタンやリンクは、同じタブでページを開く設定（target="_self"）になっています。
外部サイトだけ「新しいタブで開く」にチェックを入れればOK。
内部リンクはそのままで問題ありません。
🪴まとめ
- トップページは“お店の玄関”＋“目次”
→ 固定ページを読む前に、どんなお店か伝わるように要約を載せる。 - ヒーローセクションで印象を決める
→ 外観写真や看板代わりの画像を設置し、サイトの世界観を統一。 - フォント・背景・カラーで雰囲気を整える
→ 游ゴシック＋淡いドット背景＋ブラウン系カラーでナチュラル感を演出。 - 本文では“固定ページの要約＋リンク”を配置する
→ 固定ページリスト・ボタン・テキストリンクを使い分けて導線を最適化。 - 読者が最後まで読まなくても理解できる構成にする
→ スマホ閲覧では「流し読み」されることを想定し、要点を上部にまとめる。
💬 DEMO確認
実際に完成したデモサイトはこちら👇
👉 パン屋さんDEMOサイトを開く
🔽次に読むならこちら！
これでトップページ本文まで完成しました。
次は、サイトの印象や回遊性をさらに高めるために、
ウィジェットエリア・メニュー・導線設計を整えていきましょう。
コメント