SWELLでランディングページを作る手順｜LP事例3選も紹介！

WordPressテーマ「SWELL」は、ブログだけでなく高品質なランディングページ（LP）制作にも最適な機能を備えています。

コードを書かずに直感的な操作でレイアウトを組めるブロックエディタや、デザイン性の高いブロックが揃っているのが最大の特徴です。

本記事では、SWELLでランディングページを制作するメリット・作り方などについて詳しく解説します。

SWELLを使おうか迷っている方は、ぜひ以下の記事もご覧ください。

SWELLでランディングページを作るメリット

SWELLでランディングページを作るメリットは、下記のとおりです。

それぞれ具体的に説明します。

LPの制作費用を大幅に抑えられる

SWELLでランディングページを自作する最大のメリットは、圧倒的なコストパフォーマンスです。

通常、制作会社にランディングページを依頼すれば安くても10万円、プロ仕様なら30万円以上の費用がかかるのが一般的です。一方でSWELLならテーマ購入代の17,600円（税込）のみで、デザイン性の優れたランディングページが完成します。

また運用面での費用的なメリットもあります。

外部に依頼すると、公開後の下記のような作業でさえ費用が発生します。

• サイト内の文章の微修正
• サイト内の画像の差し替え

ですがランディングページを自作すれば、これらの修正作業はすべて無料で行うことができます。

初心者でも使えるブロックエディタで作れる

SWELLのブロックエディタは、マウス操作だけで高品質なデザインを実現します。

例えば、SWELLには下記のようなブロックが準備されています。

ブロック名	どのような役割があるのか
フルワイドブロック	画面横幅いっぱいに文章・色・画像などをレイアウトすることができる
ステップブロック	商品の購入ステップ・サービス利用の流れを分かりやすく解説できる
アコーディオンブロック	多くの情報をスッキリと収納でき、ユーザーが必要な時だけ開く読みやすい構成にできる
SWELLボタン	ボタンのクリック率を高めて、サービス成約率を向上させる

本来なら高度なコーディングが必要な動きも、SWELLだと設定画面から選ぶだけです。専門スキルがない初心者の方でも、デザインの妥協をせずに理想のページを作り上げることができます。

表示速度が比較的速い

LPにおいて、ページの読み込み速度は売上に直結するもっとも大事な指標です。

読み込みがわずか1秒遅れるだけで、多くのユーザーはストレスを感じて離脱してしまいます。

モバイルページの読み込み時間が長くなるほど、ユーザーがページを離脱する確率（直帰率）は劇的に上昇します。1秒から3秒に増えるだけで離脱率は32%上昇、1秒から5秒に増えると離脱率は90%上昇、1秒から10秒かかってしまうと離脱率は123%も上昇します。

その点、SWELLはテーマ自体が徹底的に軽量化されており、特別なプラグインに頼らなくても圧倒的な高速表示を実現しています。

特にLPは画像を多用するため重くなりがちですが、SWELLの高速化機能があれば、高画質な素材を使いながらもサクサクと快適にページを表示させることが可能です。

SWELLの「LP」と「固定ページ」の違いとは

SWELLを導入すると、投稿・固定ページ・LPの3種類があるはずです。

投稿はお知らせの更新・お役立ちコラムなど使っている方が多いですが、固定ページやLPを使うことはあまりないはずです。そこでざっくりとした使い分けについて解説します。

	固定ページ	LP
主な用途	会社概要・お問い合わせ・サービス紹介など	広告用ページ、ある商品に特化した販売ページ
ヘッダー・フッター	表示・非表示を選べる	標準で非表示
サイドバー	表示・非表示を選べる	存在しない
コンテンツ幅	サイト共通	ページごとに自由に設定できる
カスタマイズ	（しにくい）	（しやすい）

一番異なってくるのは「離脱率」だといえます。固定ページは他ページへのリンクなどが周りに表示されており、LPはリンクが一切表示されていません。

そのため、LPは離脱率を下げて、お客様をクロージングする時に向いています。

SWELLでランディングページを作る手順

SWELLでランディングページを作る手順は、下記の通りです。

それぞれ具体的に説明します。

①：大枠の構成を決める

ランディングページを作る時によくあるのが、途中で構成が変わってしまうパターンです。

そのため、ざっくりでもいいのでランディングページの骨組みを決めるのがおすすめです。Figmaなどのデザインツールを使っていない方は、紙に骨組みを洗い出しておくようにしましょう。

骨組みの段階では「ざっくりとレイアウトをこんな感じにしようかな〜」くらいのレベル感で作ってしまってOKです。

②：ブロックエディタで実装する

SWELLでランディングページを作る時に、使うブロックは大体決まっています。

特に、「フルワイド」と「カラム」は頻繁に使います。SWELLの各ブロックの使い方に関しては、ぜひ以下の記事をご覧ください。

◼︎フルワイドブロック

◼︎カラムブロック

実際にランディングページを作っていく場合は、YouTube動画を参考にしながら実装していくのもおすすめです。

③：ヘッダー・フッターを表示設定する

SWELLのデフォルトの設定では、ヘッダー・フッターは非表示となっています。

もしデフォルトのヘッダー・フッターで問題なければ、右メニューの赤枠部分にチェックを入れましょう。

SWELLで作ったランディングページ事例3選

次に、SWELLで作られたランディングページについて紹介します。

SWELLで作られたコーポレートサイトも見てみたい方は、ぜひ以下の記事をご覧ください。

事例①：おそうじ研究室

おそうじ研究室は、外部リンクがまったく設置されてないランディングページです。

外部リンクが設置されてないことによって、情報に迷うことなく成約率（CVR）の向上をダイレクトに狙えるのが強みです。

「ビフォーアフターの画像」や「お客様の声」などリアルな画像が載っていることで、サービスの信頼性の証明にもなっています。

事例②：Sprout Design 工房

ヘッダー・フッターが表示されているサイト型LPが採用されています。

またフルワイドブロックを効果的に使用し、セクションごとに背景色を切り替えることで、長いページでも情報の区切りを明確にし、流し読みでも内容が伝わる工夫がされています。

フォントも明朝体が採用されていて、高級感のある印象を与えています。

事例③：PARTY & SPACE ENCHANTE

メインビジュアルのスライドショーで会場の活気ある雰囲気を瞬時に伝え、読者の興味を惹きつけます。

またサイトの設計面では、ヘッダー以外の外部リンクを排除し、離脱を最小限に抑える構成になっています。関連リンクは設置されているので、「サイト型LP」の構成です。

ゴール設定をフォームもしくは電話のお問い合わせに絞り込むことで、迷わずアクションへ誘導する非常に戦略的なランディングページに仕上がっています。

ホームページ制作は「Terace」にお任せ！