SWELLでLPの作り方入門編｜失敗しない構成とデザイン12のコツ

「SWELLでLPを作りたいけど、どこから手を付ければいいのか分からない……。」そんなふうに感じている人は、意外と多いはずです。

この記事では、同じように手探りで進めているあなたに向けて、SWELLを使ってランディングページ（LP）を1本作り上げるまでの流れを、できるだけ人の手順に近い形でまとめました。

先に結論だけ言うと、「SWELLの標準機能だけで、デザイナーやエンジニアではない人でも十分使えるLPは作れる」ということです。あとは順番通りに手を動かしていくだけなので、一緒に進めていきましょう。

SWELLでLPを作る前に知っておきたいこと

SWELLのLP機能とは？できることをざっくり整理

SWELLには、ランディングページ向けの「LP」という専用の投稿タイプがあります。管理画面の左メニューに「LP」という項目が増えていて、そこからLPを作成・管理できるようになっています。

主な特徴を表にまとめると、こんなイメージです。

項目	内容
投稿タイプ	通常の投稿・固定ページとは別の「LP」専用投稿として管理できる
ヘッダー・フッター	LPごとに表示・非表示を切り替え可能（他ページと同じヘッダーを使うこともできる）
コンテンツ幅	各LPごとに最大幅や囲み枠の有無を設定できる
デザイン	ブロックエディターとSWELLブロックで、コードなしでレイアウトできる
URL	初期状態では「ドメイン名/lp/スラッグ」の形式で生成される

ざっくり言うと、「LP専用の固定ページをまとめて管理できる機能」だと思ってもらえればOKです。普段の投稿や固定ページと同じブロックエディターで編集しつつ、LPに必要な設定だけ追加されているイメージですね。

記事LPとLP投稿の違いを理解しておこう

SWELLでは、通常の投稿や固定ページを使ってLP風のページを作る、いわゆる「記事LP」もよく使われます。一方で、広告用の1枚完結型LPを作るなら、LP専用の投稿タイプを使っておいた方が管理が楽です。

両者の違いを比較すると、次のような感じです。

種類	メリット	向いているケース
記事LP（通常の投稿）	普段のブログ記事と同じ感覚で作れる。カテゴリやタグで整理しやすい。	検索流入を狙うレビュー記事、体験談をベースにしたLP
固定ページLP	会社情報やサービスページと同じ並びにできる。ナビメニューに入れやすい。	サービス紹介ページ、会社案内ページ、お問い合わせ用LP
LP投稿（SWELLのLP機能）	ヘッダーやフッターを簡単に非表示にできる。LPだけをまとめて管理しやすい。	広告用LP、1つの商品や講座に特化したページ

「検索から読んでほしい記事」に寄せるなら記事LP、「広告やSNSから直接飛ばしたい1枚ページ」に寄せるならLP投稿、というイメージで使い分けると判断しやすいです。この記事ではLP投稿を中心に説明しつつ、必要なところで記事LPの話も挟んでいきます。

swellでLPの作り方の全体像をざっくり把握しよう

なんとなくイメージはつかめてきたと思うので、ここで一度、SWELLでLPを作る流れを俯瞰しておきます。細かい操作に入る前に「ゴールまでの道筋」をざっくり知っておくと、途中で迷子になりにくくなります。

全体の流れは、次の6ステップです。

この順番通りに進めていけば、途中で止まってしまう場面はかなり減ります。次のパートからは、それぞれのステップを具体的に見ていきます。

swellでLPの作り方ステップ【基本編】

ステップ1：LPの目的とターゲットを決める

LPづくりで一番大事なのは、デザインでもツールの使い方でもなく、「このページで何をしてもらいたいのか」を決めることです。ここがふわっとしたままだと、どれだけブロックを並べても、読み終わったあとに行動してもらえません。

まずは、次の3つだけ紙やメモアプリに書き出してみてください。

• このLPを読んだ人に、最終的にどんな行動をしてほしいか（例：無料相談に申し込む、教材を購入する）
• 誰に向けたLPなのか（例：副業に挑戦したい会社員、子育て中のフリーランス）
• その人に対して、どんな未来を約束したいのか（例：毎月〇万円を安定して稼げるようになる）

ここが決まると、あとの構成や文章の方向性が自然と決まってきます。「とりあえず申し込みボタンを置く」ではなく、「この人に、こうなってほしいからこのボタンを置く」という感覚を持っておくと、LP全体の軸がぶれにくくなります。

ステップ2：LP全体の構成ラフを作る

目的とターゲットが固まったら、次はLP全体の流れをざっくり決めます。いきなり本文を書き始めるのではなく、「どの順番で話していくか」のラフを作るイメージです。

よく使われる基本構成を表にすると、こんな形になります。

順番	セクション	役割
1	ファーストビュー	一瞬で「自分のことだ」と感じてもらう
2	共感・問題提起	読者の悩みを代弁して、「この先も読んでみよう」と思ってもらう
3	解決策の提示	あなたのサービスや商品がどんな解決策なのかを示す
4	ベネフィット・具体的なメリット	使ったあとのイメージを具体的に持ってもらう
5	お客様の声・実績	「本当に大丈夫？」という不安をやわらげる
6	詳細説明・価格・比較	申し込み前に知っておきたい情報を整理して伝える
7	よくある質問	最後まで残った小さな不安をつぶす
8	クロージング・CTA	背中をそっと押しながら、具体的な行動を促す

もちろん、サービスの内容によって前後してもかまいません。ただ、最初のうちはこの流れをベースにしておくと、「どこに何を書けばいいか分からない」という状態を避けやすくなります。

ステップ3：SWELLでLP投稿を新規作成する

構成ラフができたら、いよいよWordPress側の作業に入ります。ここでは、SWELLのLP投稿を新規作成し、最低限の設定を整えるところまでを一気にやってしまいましょう。

基本的な流れは次のとおりです。

• 管理画面のメニューから「LP」を選び、「新規追加」をクリック
• タイトル（仮でOK）を入力し、下書き保存しておく
• パーマリンク（URLスラッグ）を仮決めする
• 右側の「LP」タブから、コンテンツ幅や囲み枠の有無を設定する
• ヘッダー・フッターを表示するかどうかを選ぶ

設定の目安は次のようなイメージです。

• ヘッダーの表示：広告からだけ流入させたいLPなら非表示、既存のブログ読者にも見せたいなら表示もあり
• フッターの表示：サイト全体のコピーライトを出したいなら表示でOK
• コンテンツ幅：最初は標準か、やや広めくらいから試す
• アイキャッチ画像：SNSでシェアする可能性があるなら設定しておく

この段階では、あまり細かく悩まなくて大丈夫です。一度ざっくり決めたあとで、LPが形になってきてから調整し直した方が、全体のバランスを見ながら決めやすくなります。

ステップ4：ファーストビューとメインコピーを作る

LPの中でも、特に重要なのが最初に目に入るファーストビューです。ここで「自分に関係がありそうだ」と感じてもらえなかったら、その先の文章を読んでもらうのはかなり厳しくなります。

SWELLでよく使うファーストビューの組み方は、こんな感じです。

例えば、ライティング講座のLPなら、メインコピーはこんなイメージになります。

「平日1日1時間の学習で、副業ライターとして月数万円を目指せるオンライン講座」
「文章が苦手な会社員でも、テンプレート通りに書くだけでOK」

このように、「どんな人が」「どうなれるのか」が一瞬で伝わる言葉を意識して、メインコピーを考えてみてください。最初からうまく出てこなくても、書きながら何度も微調整していけば大丈夫です。

ステップ5：各セクションをSWELLブロックで作り込む

ファーストビューができたら、構成ラフで決めたそれぞれのセクションを、実際のブロックに落とし込んでいきます。ここは地道な作業ですが、SWELLのブロックに慣れてくるとかなり楽になっていきます。

よく使う組み合わせをまとめると、こんな感じです。

セクション	よく使うSWELLブロック
共感・問題提起	リード文ブロック、ボックスブロック
ベネフィット・メリット	キャプション付きボックス、アイコンボックス
お客様の声	吹き出しブロック、ボックスブロック
サービス詳細・価格	カラムブロック、リストブロック、テーブル
FAQ	アコーディオンブロック、見出し＋段落

「このセクションはこのブロックで作ってみよう」とざっくり対応表を決めておくと、毎回ブロック選びで悩まなくて済みます。最初は少し時間がかかっても、そのうち自分なりの定番パターンができてきます。

ステップ6：CTAボタンとフォームを設置して動線を整える

最後に、LPのゴールとなるCTA（行動してもらうためのボタンやフォーム）をしっかり配置していきます。

よくあるもったいないパターンが、「ページの一番下にだけボタンが1つある」という状態です。読み手は途中で「ここで申し込みたいな」と思うこともあるので、要所ごとに行動できる場所を用意してあげた方が親切です。

おすすめの配置場所は、次の3つです。

• ファーストビュー直下
• ベネフィットや実績セクションの直後
• LPのいちばん下のクロージング部分

ボタンの文言は、「クリックしたあとに何が起こるのか」が具体的にイメージできるように書きます。

• 無料相談の申し込み：
  「無料で相談してみる」「オンラインで相談する」
• 資料請求：
  「詳しい資料をメールで受け取る」
• 有料商品の購入：
  「今すぐ購入手続きに進む」

ここまでできたら、一度下書き保存をして、パソコンとスマホの両方で表示を確認してみてください。誤字よりも先に、「読みにくいところがないか」「ボタンが押しづらくないか」をチェックすると、実際のユーザー目線に近づけます。

SWELLだからできるLPデザインのコツ

フルワイドブロックと背景でメリハリをつける

SWELLでLPを作るときによく使うのが、フルワイドブロックです。画面の横いっぱいに色や画像を敷けるので、セクションごとの区切りが直感的に分かるようになります。

よくある使い方をざっと挙げると、こんな感じです。

色はつい増やしたくなりますが、基本は「サイトのメインカラー」「アクセントカラー」「グレー系」の3つ前後に絞るのがおすすめです。色数よりも、余白の取り方の方が見た目に影響することが多いので、「詰め込みすぎていないか」を意識してみてください。

スマホ表示を前提に文字サイズと余白を調整する

LPはスマホで読まれることが多いので、最初からスマホ前提でデザインをチェックしていくと失敗しにくくなります。パソコンで見たときにちょうど良くても、スマホだと窮屈に見えることはよくあります。

チェックしたいポイントは次のとおりです。

• 1行あたりの文字数が多すぎて、横に詰まりすぎていないか
• 見出しと本文の間に、しっかり余白が入っているか
• ボタン同士が近すぎず、指でタップしやすい大きさになっているか
• 画像が左右にはみ出したり、小さすぎて見えづらくなっていないか

SWELLの「デバイスごとの表示切り替え」を使えば、「スマホではこのブロックを非表示にする」といった調整も可能です。たとえば、パソコンでは横に長い画像を表示し、スマホでは縦向きの画像だけを見せる、という使い分けもできます。

売れるLPにするライティングと構成パターン

目的別に使えるLP構成パターン

LPは、目的によって合う構成の型が少しずつ違います。自分のLPがどのタイプに近いのかを最初に決めておくと、その後の作り込みがぐっと楽になります。

目的	構成のポイント	向いている例
サービス申し込み	ベネフィット→実績→詳細→FAQ→CTAの順で、不安を少しずつ減らしていく。	コンサル、制作サービス、オンライン講座
商品販売	ストーリーとベネフィットを厚めにし、「なぜ今なのか」を添える。	教材、デジタルコンテンツ、単発の商品
資料請求・リスト獲得	ハードルを下げる言葉と、複数回のCTAをまんべんなく配置する。	資料請求、メルマガ登録、チェックリスト配布

「自分はサービス申し込み型のLPだな」と分かったら、その型に沿って見出しやセクションを並べていくイメージです。いきなりゼロから構成を考えるより、だいぶ負担が軽くなります。

読まれる見出しとボタン文言の作り方

LPの中で特に目に入りやすいのが、セクションの見出しとボタンの文言です。ここがぼんやりしていると、それだけで離脱率が上がってしまいます。

すぐに使える型をいくつか紹介します。

パーツ	型の例	具体例
セクション見出し	「〜なあなたへ」「〜な人のための」	「副業を始めたい会社員のあなたへ」
セクション見出し	「〜な3つの理由」「〜な5つのポイント」	「私の講座が未経験者に選ばれる3つの理由」
ボタン文言	「今すぐ〜する」「無料で〜する」	「今すぐ無料で相談してみる」「無料で資料を受け取る」
ボタン文言	「〜だけでOK」「〜は不要です」	「パソコン1台だけでOK」「専門知識は不要です」

全部を凝ったコピーにしようとすると疲れてしまうので、「誰向けの見出しなのか」「ボタンを押すとどうなるのか」が分かるかどうかを基準に、シンプルに整えていくと続けやすいです。

不安を減らすための「お客様の声」とFAQの書き方

LPを読んでいる人は、どこかで「自分にもできるかな」「失敗しないかな」といった不安を抱えています。その不安をやわらげてくれるのが、お客様の声とFAQ（よくある質問）のコーナーです。

お客様の声をお願いするときは、次のような点を書いてもらえると、LPで使いやすくなります。

FAQの内容は、実際に聞かれたことだけでなく、「もし自分が申し込む側だったら気になりそうな点」を想像して書いていけばOKです。後半の「よくある質問」のところで、swellでLPを作るときによくある疑問もいくつか取り上げています。

URL設計と計測・改善まで考えたswellでLPの作り方

/lp/スラッグの扱いとURL設計の考え方

SWELLのLP投稿でページを作ると、デフォルトでは「ドメイン名/lp/スラッグ」というURLになります。この「/lp/」をそのまま使うかどうかは、サイト全体の構造や運用スタイルによって変わります。

パターンごとの特徴をまとめると、次のようになります。

パターン	メリット	注意点
/lp/をそのまま使う	LPだけをひと目で識別できる。管理画面でもURLでも区別しやすい。	同じテーマで記事LPも作る場合は、似たキーワードのページが増えすぎないよう注意。
/lp/を別の単語に変える	ブランド名やカテゴリー名に合わせた階層構造が作れる。	設定を変えるときは、リダイレクトやリンクの張り替えなどを忘れないようにする。
固定ページでLPを作る	会社サイトなどと同じ階層に置けるため、サイトマップを整理しやすい。	SWELLのLP専用投稿で使える一部の設定は、そのまま使えないことがある。

swellでLPに初めて挑戦する場合は、まずは素直に「/lp/スラッグ」の形で作ってしまうのがおすすめです。あとからどうしてもURLを変えたくなったときは、アクセスが集まり始める前のタイミングで、リダイレクト設定などとセットで行うとリスクを抑えやすくなります。

アクセス解析と改善の基本だけ押さえておく

LPを公開したら、「どれくらい見られているか」「どれくらい申し込みにつながっているか」を数字で見られるようにしておきましょう。難しい分析をしなくても、最低限の数字が分かるだけで改善の方向性が見えやすくなります。

特にチェックしておきたいのは次の3つです。

• LPごとのアクセス数（どのLPにどれくらい人が来ているか）
• 申し込みボタンのクリック数やフォーム送信数（コンバージョン数）
• 広告からの流入と、検索やSNSからの流入の違い

これらを定期的に確認しながら、「ファーストビューのコピーを変えてみる」「CTAの位置を増やしてみる」など、小さな変更を試していくと、少しずつLPの反応が良くなっていきます。swellでLPの作り方に慣れてきたら、「どこを変えたら数字が動きそうか」を考えるのも、ちょっとした楽しみになってくるはずです。

よくある質問（FAQ）

Q1：SWELL初心者でも、LP機能で本格的なLPを作れますか？

A：はい、大丈夫です。ブロックエディターの基本操作が分かっていれば、swellでLPを作ること自体はそこまで難しくありません。実際、私のところに相談に来てくださる方も、HTMLやCSSがまったく分からない状態からスタートして、SWELLだけでしっかりしたLPを作れている方が多いです。

この記事のステップ通りに「目的づくり→構成→LP投稿→各セクション作り込み」と進めていけば、初めてでも十分形になります。細かい装飾やアレンジは、2本目・3本目で少しずつ覚えていくくらいでOKです。

Q2：ブログの記事LPと、LP投稿のどちらで作るべきか迷っています。

A：ブログからの検索流入をメインにしたいなら記事LP、広告やSNSから1枚ページに直接飛ばしたいならLP投稿、という考え方が分かりやすいと思います。

ただ、最初の1本を作る段階では、LP投稿でしっかり1枚完結のページを作ってみるのがおすすめです。そのあとで、「似た内容を検索向けに記事LPとして書き直す」という流れにすると、swellでLPの作り方も記事の書き方も一緒に練習できます。

Q3：画像素材や写真が少なくても、SWELLでLPは作れますか？

A：はい、画像が多くなくてもLPは作れます。SWELLには、アイコンボックスや装飾付き見出し、囲み枠など、テキストだけでも読みやすく見せてくれるブロックがたくさんあります。

むしろ画像が少ない場合は、文章と構成でしっかり価値を伝える必要があるので、今回紹介したような構成テンプレやライティングのコツが活きてきます。必要に応じて、フリー素材サイトの画像を少し足すだけでも、十分それらしいLPに仕上がります。

まとめと今日からできる一歩

要点を整理しておきます

今日からできる一歩としては、「LPの目的」「ターゲット」「ざっくりした構成ラフ」の3つだけでも、紙やノートアプリに書き出してみてください。それを片手にSWELLの管理画面を開き、まずはLP投稿を1本作るところまで進めてみるのがおすすめです。

完璧なLPを目指して止まってしまうよりも、とりあえず1本公開して、あとから何度でも手を入れていく方が、結果的には早く上達します。肩の力を抜きながら、SWELLでのLPづくりを楽しんでいきましょう。