この記事では、SWELLでLPをトップページ風に見せるための考え方と具体的な手順をまとめました。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLでLPをトップページ風にしたいときの結論
最初に、SWELLのLP機能とトップページ設定の関係をざっくり整理しておきます。ここを知っておかないと、「メニューはいじれたのに、LPだけはトップページに出せない…」というモヤモヤがずっと残ってしまいます。
SWELLのLP機能とトップページ設定の関係
SWELLには「LP」という専用の投稿タイプがありますが、WordPress標準の設定画面からは、このLP投稿タイプをトップページとして直接指定することができません。
実際にやりたいことと、現実的なやり方を整理すると次のようなイメージになります。
| やりたいこと | 現実的なやり方 | 難易度 |
|---|---|---|
| LPっぽいトップページにしたい | 固定ページをトップページにして、LP風に作り込む | 低 |
| LPと同じ内容をホームに出したい | LPの中身を固定ページにコピーして使う | 低 |
| LP投稿タイプそのものをホームにしたい | カスタム投稿をフロントページにできるプラグインや、子テーマでカスタマイズ | 中〜高 |
この記事では、いちばん安全で再現性の高い「固定ページトップ＋LP風デザイン」の方法を中心に解説していきます。
SWELLで「できること」と「できないこと」を先に整理
ここまでを、もう少し噛み砕いてまとめると次のようになります。
- できること
- 固定ページをトップページに指定する
- 固定ページでLPっぽいレイアウトを作る
- ブロックや再利用ブロックを使って、LPと近いデザインに寄せる
- 基本的にできないこと
- 管理画面の標準設定だけで、LP投稿タイプ自体をトップページにする
この前提を知っておくだけで、「設定＞表示設定を開いてみたけど、LPが出てこない」という行き止まりからは抜け出せます。
SWELLで固定ページをトップページに設定する手順
ここからは、固定ページをトップページにしてLP風のホームを作る具体的な流れを見ていきます。WordPressやSWELLに慣れていない方でも迷わないように、「ページの準備 → 設定画面での切り替え」の順番で進めます。
準備する固定ページは2つだけ
最初に、次の2つの固定ページを用意します。
| ページ名（例） | 役割 | 本文の中身 |
|---|---|---|
| HOME / トップ | サイトのトップページとして使う | LP風のコンテンツを書く |
| 記事一覧 / BLOG | 投稿記事の一覧ページとして使う | 基本的に本文は空でOK |
記事一覧用ページは、「投稿ページ」として指定するための受け皿です。
ページタイトルやパーマリンクの名前は、あとから変えても大きな問題はありません。
設定画面から固定ページをトップページにする
2つの固定ページが作れたら、WordPressの設定画面でトップページを切り替えます。
- ダッシュボード左メニューから「設定」→「表示設定」を開く
- 「ホームページの表示」で「固定ページ」を選ぶ
- 「ホームページ」に先ほど作った「HOME」ページを指定する
- 「投稿ページ」に「記事一覧」ページを指定する
- 「変更を保存」をクリックする
SWELL特有の設定はなく、ここはWordPress標準の機能を使うだけなので、難しく考えなくて大丈夫です。
カスタマイザーからサイト型トップに切り替える方法
同じことを、カスタマイザー側から設定することもできます。
- ダッシュボードの「外観」→「カスタマイズ」をクリック
- 「WordPress設定」→「ホームページ設定」を開く
- 「ホームページの表示」を「固定ページ」に変更する
- ホームページ／投稿ページにそれぞれ固定ページを指定して「公開」する
表示設定から行っても、カスタマイザーから行っても結果は同じです。
普段よく使っている方の画面で操作してもらえればOKです。
SWELLのLPトップページのレイアウトとブロック構成
トップページに使う固定ページが決まったら、中身をLPっぽく整えていきます。ここでは、「よくあるLPの流れ」と「SWELLで使いやすいブロックの組み合わせ」をセットで整理します。
LP型トップページの基本構成
まずは、LP風トップページの王道パターンをイメージしてみましょう。
| セクション | 目的 | よく使うSWELLのブロック |
|---|---|---|
| ヒーロー（1画面目） | どんなサイトか一瞬で伝える | カバーブロック、ボタン、見出し |
| サービス・特徴紹介 | 何をしている人・サイトなのか説明する | カラム、ボックス、リスト |
| 実績・お客様の声 | 信頼感を出す | 吹き出し、キャプション付き画像 |
| ブログ・お役立ち記事 | もっと知りたい人に深い情報を見せる | 投稿リスト、グリッドレイアウト |
| CTA（行動喚起） | お問い合わせや申し込みに誘導する | ボタン、ボックス |
上からこの流れでブロックを積んでいくだけでも、かなりLPらしいトップページになります。
最初から凝ったことをしようとせず、この型をベースに少しずつカスタマイズしていくのがおすすめです。
SWELLでLPっぽさを出すブロックの使い方
【稼げるキーワード教えます】
▼ ▼ ▼
SWELLには、LPと相性のいいブロックがいくつも用意されています。
- ボックスブロック
- 背景色や枠線を付けて、「ここが大事」というパートを目立たせられます。
- カラムブロック
- サービスを3つ並べる、料金プランを横並びにするなど、比較や一覧に便利です。
- 投稿リストブロック
- カテゴリ別に記事一覧を出せるので、「ブログ」「コラム」などの導線をつくりやすくなります。
- フルワイドや幅広のブロック
- 画面幅いっぱいに背景色や画像を敷けるので、セクションの切り替えに使うとLPっぽさがぐっと増します。
「全部を一度に使おう」と考えると大変なので、まずはボックス＋カラム＋投稿リストの3つあたりから試してみると、自然にLP風の雰囲気が出てきます。
SWELLのLPトップページをおしゃれに見せるデザインのコツ
同じ構成でも、画像サイズや余白の取り方で「プロっぽく見えるかどうか」がかなり変わります。ここでは、特に差が出やすいメインビジュアルと画像周りのポイントをまとめます。
スマホで崩れにくい画像サイズと幅の考え方
LP風トップページを作るときに、いちばん気にしたいのはスマホでの見え方です。
PCでは良く見えても、スマホで画像が途中で切れていたり、文字が小さすぎたりするケースはよくあります。
| 要素 | おおよそのサイズ感 | 意識したいポイント |
|---|---|---|
| ヒーロー画像 | 横長〜やや縦長の大きめ（比率16:9前後） | 中央に大きめのキャッチコピー＋ボタンを置く |
| サービス紹介の画像 | 正方形〜やや縦長 | スマホで1カラム表示になっても見やすいサイズを意識 |
| ブログのサムネイル | 正方形に近い比率 | 一覧で並んだときの統一感を重視 |
細かいpx指定より、「スマホで縦にスクロールしたときに気持ちよく読めるか」を基準に調整するのがおすすめです。
プレビューをスマホでこまめに確認しながら、画像の高さや余白を少しずつ整えていきましょう。
タイトル非表示やヘッダー・フッターの扱い
LPらしいトップページにしたいとき、多くの人が悩むのが「ページタイトルを出すかどうか」「ヘッダーやフッターをどうするか」という点です。
- タイトル（ページのH1相当）
- そのまま表示すると、LPの一番上に文字だけがドンと出てしまうことがあります。
- デザイン的に邪魔な場合は、固定ページの設定やCSSでタイトルだけ非表示にする方法もあります。
- ヘッダー・フッター
- 完全にLP専用のページにしたいなら、ヘッダーやフッターを隠して「1枚完結」のレイアウトにする手もあります。
- ただ、ブログや情報発信メインのサイトなら、グローバルメニューがあった方がユーザーは迷いません。
「LP感をどこまで出したいか」と「サイト全体の使いやすさ」のバランスを見ながら、少しずつ調整してみてください。
SWELLでLPをトップページに近づける応用テクニック
ここからは、基本ができたあとに試してみたい応用テクニックを紹介します。全部を一気にやる必要はないので、「これならできそう」と思うところだけ拾ってもらえればOKです。
LPコンテンツを固定ページに再利用していく方法
すでにSWELLのLP投稿タイプでLPを作っている場合は、それを一から作り直す必要はありません。
LPの中身を、少しずつ固定ページに移していくイメージで進めると負担が軽くなります。
| やり方 | 手間 | メリット |
|---|---|---|
| LP本文をそのままコピーする | 比較的少なめ | とりあえずLP風トップページがすぐ作れる |
| セクションごとに再利用ブロック化する | 中程度 | 複数のLPやページで同じパーツを使い回せる |
| 子テーマでHTMLテンプレート化する | 多め | 高度なカスタマイズがしやすく、細かいデザイン調整も可能 |
まずはコピー＆ペーストで形を作り、よく使うセクションだけあとから再利用ブロック化していく、という進め方が現実的です。
プラグインや子テーマでLP投稿タイプをホームにするケース
どうしても「LP投稿タイプそのものをトップページにしたい」という場合は、次のような方法があります。
- カスタム投稿タイプをフロントページに指定できるプラグインを使う
- 子テーマのfunctions.phpなどでトップページの挙動を書き換える
ただ、この方法には次のような注意点もあります。
- プラグインやカスタマイズに依存するため、テーマやWordPressのアップデート時に動作確認が必要
- 他の人にサイトを引き継ぐときに、仕組みが分かりにくくなりがち
- トラブルが起きたとき、自分で原因を追いにくいことがある
個人ブログや小規模なサービスサイトであれば、「固定ページをトップページにしてLP風に作り込む」だけでも十分に戦えるので、まずはそちらから試してみるのがおすすめです。
SWELLとLPトップページに関するよくある質問
最後に、SWELLでLPをトップページ風にしたい人からよく聞かれる質問を、Q&A形式でまとめておきます。
Q1. SWELLのLPをトップページに直接設定できますか？
A. WordPressの標準機能だけでは、SWELLのLP投稿タイプをトップページに直接指定することはできません。
SWELLでLPをトップページに近い見た目にしたい場合は、固定ページをホームにして、その中身をLP風に作る方法がいちばん現実的です。
Q2. ブログ型トップとLP型トップ、どちらがSWELLではおすすめですか？
A. どちらが「正解」というより、サイトの目的によって向き不向きが変わります。
- ブログ主体の場合
- 新着記事が並ぶブログ型トップの方が、更新状況や記事の雰囲気が伝わりやすいです。
- サービス紹介がメインの場合
- LP型トップページで「何を提供しているサイトか」を先に見せた方が、ユーザーには親切です。
SWELLなら、LP風トップの下部に「新着記事」「カテゴリ別の記事一覧」を出すこともできるので、「LP型＋ブログ型」のハイブリッドなトップページも作りやすいです。
Q3. 固定ページトップにしたら、記事一覧はどこに置けばいいですか？
A. 記事一覧用の固定ページを「投稿ページ」に指定しておけば、そのURLがブログ一覧ページになります。
グローバルメニューに「ブログ」「記事一覧」などの名前でリンクを追加しておけば、LP風トップページからでも迷わず記事一覧にアクセスしてもらえます。
SWELLでLP風トップページにするまとめ
この記事の内容を振り返っておきます
- SWELLのLP投稿タイプは、標準機能だけではトップページに直接指定できない
- 現実的な解決策は、「固定ページをトップページにしてLP風に作り込む」こと
- トップ用固定ページと記事一覧用固定ページの2つを用意し、「表示設定」または「カスタマイズ」から紐づける
- 構成は「ヒーロー → サービス紹介 → 実績 → ブログ → CTA」の流れを意識するとLPらしくまとまる
- デザインでは、スマホでの見え方と、タイトル・ヘッダー・フッターの扱いを意識するとクオリティが上がる
今日からできる最初の一歩は、とてもシンプルです。
- 「トップにしたい固定ページ（HOME）」と「記事一覧用固定ページ（BLOGなど）」の2つを作る
- 「設定 ＞ 表示設定」または「外観 ＞ カスタマイズ ＞ ホームページ設定」で、ホームと投稿ページをそれぞれ指定する
そのうえで、すでに作ってあるLPがあれば、その内容を少しずつ固定ページに移していくだけでも、ホームページはしっかり「LP風トップページ」に近づいていきます。
肩の力を抜いて、まずは土台だけでも切り替えてみてください。
記事を読んだらコチラ
▼ ▼ ▼
