トップページの作り方ガイド
最終更新: 2026-03-15
トップページの作り方ガイド
> このページのURL: https://lite-word.com/manual/use-case-top-page/
LiteWordのカスタムブロックを使って、効果的なトップページを作る実践ガイド。業種別のおすすめ構成も紹介する。
トップページの推奨ブロック構成
トップページは訪問者が最初に見るページ。以下の順序でブロックを配置すると、情報が伝わりやすい構成になる。
| 順番 | セクション | おすすめブロック | 役割 |
|---|---|---|---|
| 1 | ファーストビュー | fv-1 または fv-4 |
キャッチコピー + CTAで第一印象を決める |
| 2 | サービス紹介 | lw-content-1 / lw-content-2 |
事業内容・サービスの概要を伝える |
| 3 | ご利用の流れ | lw-step-1 / lw-step-2 |
申込〜利用までの流れを視覚的に説明 |
| 4 | 最新記事 | lw-post-list-1 / lw-news-list-1 |
ブログ更新やお知らせで活動感を出す |
| 5 | お客様の声 | lw-voice-1 |
実績・信頼性をアピール |
| 6 | 会社概要 | lw-company-1 / lw-company-2 |
会社情報で安心感を与える |
| 7 | CTA | cta-1 / cta-2 |
お問い合わせ・申込へ誘導する |
| 8 | お問い合わせ | メールフォーム or CTA（リンク） | コンバージョンの受け皿 |
ポイント: すべてのセクションを入れる必要はない。業種やサイトの目的に合わせて取捨選択する。
作成手順
ステップ1: 固定ページを作成する
- WordPress管理画面 → 固定ページ → 新規追加
- タイトルに「トップページ」（または「ホーム」）と入力
- パーマリンクは自動設定されるのでそのままでOK
ステップ2: フロントページに設定する
- 外観 → カスタマイズ → 「ホームページ設定」 を開く
- 「固定ページ」 を選択
- 「ホームページ」 にステップ1で作成した固定ページを指定
- 「公開」 で保存
→ 詳細: はじめにガイド
ステップ3: ファーストビュー（FV）を配置する
- 固定ページの編集画面を開く
- 「+」ボタン → 「LiteWord」カテゴリ → FVブロックを選択
- おすすめは FV-1（フル背景 + タイトル + CTA）または FV-4（トップ用レイアウト）
- サイドバーで以下を設定:
- 背景画像（PC / SP）: サイトのイメージに合う写真を設定
- メインタイトル: キャッチコピーを入力（例: 「あなたのビジネスを加速する」）
- サブタイトル: 補足説明（例: 「Web制作から運用まで一貫サポート」）
- ボタンテキスト: CTA文言（例: 「無料相談はこちら」）
- ボタンURL: お問い合わせページのURLを指定
- フィルター透過度: 0.3〜0.5が読みやすい（画像の上にテキストを重ねる場合）
→ 詳細: FVブロック マニュアル
ステップ4: サービス紹介セクションを追加する
- FVブロックの下に 見出しタイトル（
custom-title-1等）を追加 - その下に Content ブロック（
lw-content-1またはlw-content-2）を追加 - サービス内容のテキスト・画像を入力
- 複数サービスがある場合は Content ブロックを複数並べる
ポイント:
lw-content-1は画像 + テキストの横並びレイアウト。サービス説明に最適lw-content-2も画像 + テキストだがレイアウトが異なる。好みで選択- 背景色を交互に変えると読みやすくなる（白 → 薄グレー → 白）
ステップ5: ご利用の流れを追加する
- 見出しタイトルを追加（例: 「ご利用の流れ」）
- Step ブロック（
lw-step-1またはlw-step-2）を追加 - 各ステップのタイトル・説明文・アイコンや画像を設定
ポイント:
lw-step-1は縦並びステップ。3〜5ステップが見やすいlw-step-2は横並びステップ。簡潔なフローに向いている
ステップ6: 最新記事セクションを追加する
- 見出しタイトルを追加（例: 「最新のお知らせ」「ブログ」）
- 投稿一覧ブロック（
lw-post-list-1等）を追加 - サイドバーで表示件数・カテゴリを設定
ポイント:
lw-post-list-1: カード型一覧。ブログ向きlw-post-list-2: リスト型一覧。ニュース向きlw-news-list-1: お知らせ専用のシンプルリスト
ステップ7: お客様の声を追加する
- 見出しタイトルを追加（例: 「お客様の声」）
- Voice ブロック（
lw-voice-1）を追加 - お客様の名前・写真・コメントを入力
ポイント:
- 写真があると信頼性が大幅にアップ
- 3〜5件程度が読みやすい
ステップ8: 会社概要を追加する
- 見出しタイトルを追加（例: 「会社概要」「About」）
- Company ブロック（
lw-company-1またはlw-company-2）を追加 - 会社名・住所・電話番号・設立年等を入力
ステップ9: CTAを配置する
- ページ下部に CTA ブロック（
cta-1またはcta-2）を追加 - ボタンテキストとリンク先を設定
- 背景色をアクセントカラーにすると目立つ
ポイント:
- ページの一番下に必ずCTAを置く。スクロールし終わった人が次のアクションを取れるようにする
- CTAはFVのボタンと同じリンク先にするのが基本
ステップ10: プレビュー確認と公開
- 「プレビュー」 でPC・タブレット・スマホの表示を確認
- 各デバイスで画像の見切れ、テキストの改行位置をチェック
- 問題なければ 「更新」 で公開
業種別おすすめ構成
企業サイト（コーポレートサイト）
信頼感と情報整理を重視した構成。
| 順番 | ブロック | 内容 |
|---|---|---|
| 1 | fv-1 |
企業イメージ写真 + キャッチコピー + CTAボタン |
| 2 | lw-content-1 |
事業内容を2〜3個紹介（画像 + テキスト） |
| 3 | lw-news-list-1 |
お知らせ・IR情報の最新リスト |
| 4 | lw-company-1 |
会社概要テーブル |
| 5 | cta-1 |
お問い合わせへ誘導 |
設定のコツ:
- FV-1のフィルター色は紺や黒系で落ち着いた印象に
- カラー設定のメインカラーもネイビーやダークブルーがおすすめ
クリニック・病院
安心感と来院のしやすさを重視した構成。
| 順番 | ブロック | 内容 |
|---|---|---|
| 1 | fv-1 |
院内写真 + 「まずはお電話ください」+ 電話CTAボタン |
| 2 | lw-step-1 |
来院〜治療の流れ（予約 → 来院 → 問診 → 治療 → 会計） |
| 3 | lw-voice-1 |
患者さんの声 |
| 4 | lw-company-1 |
医院情報（住所・診療時間・休診日） |
| 5 | cta-1 |
電話番号 + Web予約ボタン |
設定のコツ:
- FV-1のボタンに電話番号リンク（
tel:0312345678）を設定 - ヘッダーの電話CTA（カスタマイザー）もONにする
- カラーは白・水色・緑系で清潔感を演出
- 追従CTA（カスタマイザー → 追従CTA）をONにして、スクロール中も電話ボタンを表示
→ 詳細: 追従CTA設定
美容サロン
ビジュアル重視で世界観を伝える構成。
| 順番 | ブロック | 内容 |
|---|---|---|
| 1 | fv-4 |
サロン内装・施術写真でビジュアル重視のFV |
| 2 | lw-content-2 |
メニュー紹介（画像 + 説明） |
| 3 | lw-gallery-01 / lw-gallery-02 |
施術事例・店内写真のギャラリー |
| 4 | lw-voice-1 |
お客様の声 |
| 5 | cta-2 |
予約ボタン（LINE予約やホットペッパーへリンク） |
設定のコツ:
- FV-4は画像を大きく見せるレイアウト。サロンの雰囲気を伝えやすい
- ギャラリーブロックでビフォーアフター写真を掲載
- カラーはサロンのブランドカラーに合わせる（ピンク、ベージュ、ゴールド系が多い）
ランディングページ（LP）
コンバージョン特化型の構成。
| 順番 | ブロック | 内容 |
|---|---|---|
| 1 | fv-7（動画背景） |
インパクトのあるヒーロー + 強いヘッドライン |
| 2 | lw-content-1 |
課題提起 → 解決策の提示 |
| 3 | lw-step-1 |
利用の流れ |
| 4 | lw-voice-1 |
お客様の声・実績 |
| 5 | cta-1 |
申し込みCTA |
| 6 | メールフォーム | 直接申込フォーム |
設定のコツ:
- ヘッダー・フッターを非表示にして余計なナビゲーションを排除
- 追従CTAをONにしてスクロール中も常にCTAを表示
- 詳しい設定方法は LP作成ガイド を参照
よくある質問
Q. FVブロックはどれを選べばいい？
- トップページ:
fv-1（万能型）、fv-4（ビジュアル型）、fv-7（動画背景） - 下層ページ:
fv-2（シンプル背景）、fv-5、fv-6 - 画像のみ:
fv-3（テキストなし）
Q. ブロックの間隔が広すぎる／狭すぎる
各ブロックのサイドバー → 「マージン」 で上下の余白を調整できる。
Q. 背景色を交互に変えたい
ブロックごとにサイドバー → 「背景色」 を設定する。白（#ffffff）と薄グレー（#f5f5f5 や #f8f9fa）の交互が定番。
Q. スマホで見ると画像が見切れる
FVブロックのサイドバーで 「背景画像（SP）」 にスマホ用の画像を別途設定する。縦長の画像を用意するのがベスト。
関連リンク
- はじめにガイド — セットアップの全体像
- ブロックの基本操作 — 挿入・編集・移動の基本
- 全ブロック リファレンス — 全147ブロックの一覧
- FVブロック マニュアル — FVの詳細設定
- カラー・フォント設定 — サイト全体のデザイン設定
- LP作成ガイド — ランディングページの作り方
最終更新: 2026-03-15 11:00