初心者SWELLで会社のランディングページを作りたい
SWELLのLP機能ってどんな設定があるの？
デモサイトがあれば見てみたい
作り方も教えて欲しい…
そんな疑問に答えます。
WordPress有料テーマ「SWELL」にはオシャレなランディングページを作成できるLP機能があります！この記事ではSWELLのLP機能の紹介と、LP機能を使ってランディングページを作る方法を解説していきます。
【デモサイト】SWELLのランディングページを見てみよう！
SWELLのLP機能でサンプルサイトを作成しました。
SWELLランディングページのサンプル
サンプルサイトの作成時間は2時間～3時間です。本記事ではこのランディングページの作り方を解説していきます。
【備考】ランディングページ以外にも企業サイトが作成できる
【基礎知識】SWELLのLP機能ってどんな感じなの？
SWELLのLP機能は、WordPress標準のブロックエディターで作成する仕組みです。難しいプログラムの知識はなくても直感的な操作でサクサクページを作れます。
動画の通りWordPressの機能や、SWELL固有の機能で各パーツを埋め込んでいく流れです。HTML＋CSSなどのプログラムコードは一切変更しなくてもオシャレなサイトが作れます！
かんたもちろん自分好みにアレンジするならHTML＋CSSのスキルがあった方が色々できます！
ランディングページの作り方
サンプルサイトのようなランディングページを作る方法をステップごとに解説します。
全体の流れ
- ページの大枠を作る（必須）
- ヘッダーを作る（任意）
- メインビジュアルを作る（任意）
- コンテンツエリアを作る（必須）
- フッターを作る（任意）
かんたそれぞれのステップごとに紹介します！
【LP】ランディングページの大枠の作り方
「LP」→「新規追加」をクリック。
ダッシュボード上に「LP」の管理機能が表示されていない場合は次の設定を見直してください。
ダッシュボードのメニュー一覧から「SWELL設定」→「機能停止」をクリック。
「LPを停止のチェックを外す」にオプションにチェックが入っていると、LPはダッシュボードに表示されません。
タイトルに任意の名前をつけて保存。
右側のLP関連のオプションは初期設定のままでOKです。
ページが作成できたら各パーツを作るステップです。
ランディンページのパーツ
- ヘッダー
- メインビジュアル
- コンテンツエリア
- フッター
【LP】へッダーの作り方
下の図の赤線のエリアのことを「ヘッダー」と呼びます。
サンプルサイトではサイトの名称をテキストとして表示して、その右にグローバルナビゲーションを表示しています。
ヘッダーで表示できるパーツの一例
- ロゴ（テキスト、画像）
- グローバルナビゲーション
- SNSアイコン
- キャッチフレーズ
ランディングページの豆知識
ランディングページの目的はコンバージョンです。商品の購入や問い合わせをしてもらうことがゴールなので、他のページに移動させるメニューなどは設置しなくてもOKです。
ヘッダーはLP機能のデフォルト使用で非表示になっています。何も設定をしなればヘッダーは表示されません。ヘッダーを表示するには次の設定が必要です。
「LP設定」→「SWELLのヘッダーを表示する」にチェックを入れる。
ヘッダー部分はサイト全体で共通です。
フックを使いLP単位でロゴ画像と、メニューを変更する方法があります。フックを使うとロゴ画像、グロナビフッター部分もページ単位で変更可能です。
かんたLPページごとにメニューを変更する方法は次の記事で紹介しています。
かんたLPページだけ、ロゴ画像の変更方法は次の記事で解説しています。
グローバルナビゲーション
グローバルナビゲションの設定方法についてです。
「外観」→「メニュー」をクリック。
LPページのグローバルナビゲーションの設定画面はいわゆる一般のテーマと変わりません。操作が不明な人は次の解説を参考にグローバルナビゲーションを作成してください。
「新しいメニューを作成しましょう」をクリック。
「メニュー名」に適当な名前を入力。
「グローバルナビ」と「スマホ開閉メニュー内」をチェック。
「メニューを作成」をクリック。
「位置を管理」をクリック。
先程作成したメニューを「グローバルナビ」と「スマホ開閉メニュー内」に指定。
「変更を保存」をクリック。
かんた以上の設定でランディングページのヘッダーにグローバルナビゲーションが表示されます。
ロゴマーク
ヘッダーにロゴマークを設定する手順です。
「外観」→「カスタマイズ」をクリック。
「ヘッダー」→「ロゴの設定」からロゴ画像をアップロード。
ヘッダーロゴとメニューの位置も自由に変更できます。設定画面はロゴ画像を設置したページです。
「外観」→「カスタマイズ」→「ヘッダー」の順にクリック。
カスタマイザーで表示形式を確認しながら自分の好みのデザインでアレジンできます。
かんた以上でヘッダーの設定は完了です。
SWELLのランディンページのヘッダーの調整はカスタマイザーの中の「ヘッダー」。これを覚えましょう！
【LP】メインビジュアルの作り方
メインビジュアルはランディングページの印象を決める大事な要素です。
「LP」→作成したLPページをクリック。
ランディングページのメインビジュアルに動画を設置し、その上にキャッチコピーを表示していきます。
「＋のアイコン」→「カバー」をクリック。
メインビジュアルとして表示する動画をアップロードます。
デモサイトでは動画をメインビジュアルに指定していますが静止画を設定することも可能です。
カバーブロックを選択し「メディアを追加」をクリック。
任意の動画を選択しアップロード。
画像ファイルにも対応
メインビジュアルの上に表示するキャッチコピー部分は、テキスト以外にも画像を設置することもできます。
動画の「横幅」を画面いっぱいに広げます。
「配置変更」→「全幅」をクリック。
動画の「高さ」を調整します。
カバーブロックオプションの「サイズ」で任意の値を設定。
メインビジュアル動画エリアの高さは、数値＋「PX、VH、VH」のいずれかを選択できます。
メインビジュアル動画にオーバーレイ（フィルター）を付ける作業です。
キャッチコピーが目立つよう動画を少し暗めにするといった設定が管理画面上から行えます。
カバーブロックを選択し「オーバーレイ」の値を調整。
オーバーレイの「色」「透明度」「単色・グラデーション」を自由にアレンジできます。
メインビジュアル動画の上にキャッチコピーを入力します。
カバーブロック上の「タイトルを入力」を選択しキャッチコピーを入力。
キャッチコピーのフォントサイズ調整などを自由に行いましょう。
キャッチコピーに独自のCSSを適用させる方法を紹介します。
「高度な設定」→「追加CSSクラス」にCSSクラスを記載します。
CSSクラス名の「.」は不要です。
CSSのコードはLPページ編集画面の下に表示されるカスタムCSSの「CSS」に記載すると他のページには読み込まれません（自分の管理しやすい場所でOKです）。
【LP】コンテンツエリアの作り方
メインビジュアルの下からフッターまでの間にあるコンテンツエリアの作り方を解説します。
ランディングページのコンテンツエリアはメインビジュアルと同様にエディターで作成します。
かんた先程の手順で作成したメインビジュアルの下にコンテンツを入力していきます。
コンテンツエリアをオシャレに作るテクニック
- 各セクションをフルワイドブロックで作る
- フルワイドブロックに画像・色を入れてメリハリを付ける（単調にしない）
デザインをワンランクアップさせるテクニック
ランディングページをオシャレに仕上げたい人は「フルワイドブロック」の使い方をマスターしましょう！
まずはフルワイドブロックを使っている様子です↓
フルワイドブロックは名前の通り横幅いっぱいにレイアウトを広げるレイアウト系のブロックです。背景に色や画像を設置し、その上に文章や画像などのコンテンツを設置するのが主な使い方です。
フルワイドブロックの機能・役割
- レイアウトエリアの幅を画面いっぱいに拡張できる。
- 背景に色を指定できる
- 背景に画像を設置できる
- 背景に設置した画像に透明度を設定できる
- フルワイドブロック上下の境界線をオシャレにアレンジできる
サンプルサイトではこのフルワイドブロックを各セクション単位で設定し背景を工夫しています。
かんたサイトの背景が白だとします。ランディングページは縦長でちょっと単調なデザインになりがち。フルワイドブロックを使い背景に色を加えるだけで印象はガラリと変わります。
①フルワイドブロックの例
フルワイドブロックに画像を設置しテキストを載せた利用例です。サンプルサイトで使っているテクニックです。
②フルワイドブロックの例
フルワイドブロックにテクスチャ画像を設定し、カラムブロックを載せたセクションです。写真のような強画像をあえて使わず、主張の弱いテクスチャ系画像でコンテンツが引き立つよう工夫しています。こちらもサンプルサイトで使っているテクニックです。
フルワイドブロックの使い方を解説します。
「＋アイコン」→「フルワイド」をクリック。
フルワイドブロックをクリックすると、右側にフルワイドブロックのオプションが表示されます。
背景の色や画像の設置はここから行えます。
フルワイドの背景に「色」を指定する方法を紹介します。
フルワイドブロックオプションの「背景色」のカラーパレットから好みの色を設定。
フルワイドブロックの背景に画像を設置する方法です。
フルワイドブロックオプションの「背景画像の設定」→「メディアから選択」をクリック。
画像をアップロード後は、画像の上に表示するテキストが読みやすいよう画像の「透明度」を調整するのがポイントです。
横並びに配置する方法
サンプルサイトの次のエリアのように横並びに配置する方法です。レイアウトにはWordPress標準機能の「リッチカラムブロック」を使っています。
リッチカラムブロックレイアウト例①
リッチカラムブロックでカラムを4つ並べて配置しているレイアウトです。
リッチカラムブロックレイアウト例②
リッチカラムブロックでカラムを2つ使っているレイアウトです。
リッチカラムブロックレイアウト例③
リッチカラムブロックでカラムを2つ使っているレイアウトです。
リッチヵラムブロックはかなり便利なブロック。ノーコードで横並びにデザインできます。
かんたどんな感じでカラムブロックを使っているか動画をご覧ください↓
カラムブロックの基本的な操作方法を解説します。
まずはカラムブロックをエディター上に表示する作業です。
「＋アイコン」→「カラム」をクリック。
カラムの設置数オプションが表示されます。カラム数は後で変更できます。
「どれか1つ」を選択をクリック。
カラムブロックの数やスタイルを調整します。
カラムブロックを選択すると、画面右側にカラムブロックのオプションが表示されます。
「カラムの数」「スタイル」を選択し、自由にアレンジしましょう。
適当なカラムの「＋アイコン」をクリック。
ページ下の「カラム」をクリック。
カラムブロックオプションでカラムの数とスタイルを設定したら、各カラムの中身を入力します。
編集したいカラムの「＋アイコン」をクリック。
カラム内に表示したいブロックを追加しカラムを完成させます。
カラムの中には複数のブロックを追加できます。テキスト（段落ブロック）・画像（メディアブロック）など自由に組み合わせてください。
サンプルサイトではカラムの中に「画像」＋「キャッチコピー」＋「説明文」を入力しています。
カラムの操作している様子です↓
背景に動画を表示するカスマイズ
サンプルサイトの次のパーツのようにコンテンツエリアの背景に動画を設置するカスタマイズ方法です。
このカスマイズ方法はメインビジュアル同様に「カバーブロック」を使っています。
「＋アイコン」→「カバー」をクリック。
表示したいメディアを指定後、テキストなどを載せてアレンジしましょう。
カバーブロックを使っている様子です↓
【LP】フッターの作り方
ランディングページの一番下に表示されるのがフッターです。
フッターエリアは3種類の選択肢があります。
フッターの選択肢
- 何も表示しない
- サイト共通のフッターを表示する
- ランディングページ専用のフッターを表示する
かんた順番に解説します。
①何も表示しない
SWELLのランディングページのデフォルトの設定は「何も表示しない」です。フッターエリアに表示するものがない場合やその必要性がなければ何もしなくてOKです。
意図しない内容がフッターエリアに表示されている場合はランディングページの編集画面で次の操作を行ってください。
「LP設定」→「SWELLのフッターを使用する」のチェックを外す。
②サイト共通のフッターを表示する
ランディングページ以外で表示している共通のフッターパーツを表示する場合の手順です。ランディングページ編集画面で次の設定を行ってください。
「LP設定」→「SWELLのフッターを使用する」にチェックを入れる。
③ランディングページ専用のフッターを表示する
ランディングページ専用のフッターを作る場合は、コンテンツエリアの下にブロックを追加してテキストや画像を自由に設置しましょう。
「任意のブロックを追加」→「表示したい内容を記載」
フルワイドブロックを追加して、サイト名等のテキストをセンタリングするといった表示がランディングページの定番です。
ランディングページ向けプラグイン
今回のランディングページ制作に使ったプラグイン3つと、おまけでもう1つ便利なプラグインを紹介します。
ランディングページ向けプラグイン
- 問い合わせフォームプラグイン
- アニメーション系プラグイン
- OGP設定プラグイン
問い合わせフォームプラグイン
デモサイトの末尾のフォームは、問い合わせフォーム定番プラグイン「WPForms Lite」で作成しています。デモサイトではプラグインの基本機能だけで簡単なフォームを設置しています。
WPForms LiteはWordPress公式ディレクトリーに登録されている無料プラグインです。プラグインを有効化するとサンプルのフォームが1つ出来上がっています。そのまま貼り付けるだけでSWELLのランディングページ上で動作します。
フォームの入力オプションは管理画面上からマウスをポチポチ操作するだけで増やせます。SWELL同様にノーコードで設置できるので初心者向けのプラグインといえます。
WPForms Liteフォームの入力オプションの一例
- テキスト
- ドロップダウン
- チェックボックス
- メール
- CAPTCHA
- スライダー
ランディングページでフォームを導入する際のポイントを紹介します。
「ランディングページの最終目的はコンバージョン」。そのためにコンバージョンに結びつきやすい基本テクニックがあります。
ポイント
- 入力オプションの数を最小限にする
- 入力例を提示する
入力項目の数をできるだけ少なくする
「お名前」「電話番号」など、フォームの入力オプションはできるだけ少なくするのポイントです。
自分が問い合わせする側の立場になって考えてみましょう。入力項目が30個以上あるフォームに入力したいと思いますか？では10個ではどうですか？30個と比べると楽な印象がありますよね？
フォームを見ただけでやる気がなくなるぐらいの入力オプション数はコンバージョン率が下がります。
かんたランディングページの入力フォームのオプション数は最小限にしましょう。
入力例を提示する
入力オプションにはプレースホルダーなどを使い入力例がひと目でわかるようにしましょう。
初心者ここ何を書けばいいだろ？
面倒だから入力するのやめよ
こいった離脱を避ける目的です。
WPForms Liteプラグインにはプレースホルダーを設定できるオプションがあるので活用しましょう。入力オプションに何を入力すべきか分かると離脱率がグッと下がります。
アニメーション系プラグイン
デモサイト上でテキストや画像をフンワリ動かしているのはBlocks Animation: CSS Animations for Gutenberg Blocksプラグインです。
Blocks Animationプラグインを有効化するとブロック単位でアニメーションを設定できるオプションが表示されます。このプラグインの凄いところは、とにかくアニメーションのエフェクトのバリーエーションが豊富な点と、設定したアニメーションを編集画面で確認できる点です。
かんた専門知識はいりません。自分のセンスで選ぶだけ！
OGP設定プラグイン
SEO SIMPLE PACKはheaderに出力されるメタ情報を調整するプラグインです。
TwitterなんかのSNSでランディングページをリンク付き紹介されたときにアイキャッチ付きで表示されたら目立ちますよね？SEO SIMPLE PACKはSNSで共有される時のアイキャッチ画像をコントロールしてくれます！
ランディングページのコンバージョン数をあげるには、分母となるサイト訪問者数はとても重要です。
かんたSNS経由の流入数を増加させるためにOGPで画像を設置できるようにしましょう。
【おまけ】背景にYoutube動画を埋め込むプラグイン
Advanced WordPress Backgroundsプラグインを使うとAWBブロックが追加されます。
AWBブロックはレイアウト系のブロックでフルワイドブロックに似ていますが最大の特徴はYouTube動画を背景に設定できる点です。
カバーブロックは動画ファイルを背景に設定できますが、動画はサーバーにアップロードしたファイルのみサポートしています。動画はファイルサイズ大きいと読み込みに時間がかかるというデメリットがあり気軽に使えません。
動画のファイルサイズが大きい場合は「AWBブロック＋YouTube動画」がおすすめの構成です。
ブロックの背景
| ブロック | 静止画 | 動画ファイル | YouTube動画 |
|---|---|---|---|
| フルワイドブロック | |||
| カバーブロック | |||
| AWBブロック |
プラグインの導入はほどほどに
プラグインを紹介しましたがプラグインをアレコレ導入するのはおすすめしません。プラグインを入れれば色んな機能をランディングページに実装できますが、機能が多いからといってコンバージョンに直結するわけではありません。
プラグインを導入する場合はトラブルでプラグインが使えなくなっても「プラグインの代替え」「プラグインの停止」でサイト運営が継続的できるかを考慮するのが大事です。
| プラグイン名 | トラブル時の対処 |
|---|---|
| WPForms Lite | Contact Form7など別の問い合わせフォームに切り替える |
| Blocks Animation | 停止してもサイト運営に影響なし |
| SEO SIMPLE PACK | All in One SEOなど別のプラグインに切り替える |
| Advanced WordPress Backgrounds | カバーブロックで代用する |
【備考】SWELLとの相性
今回紹介したプラグインは本記事作成時に利用できるSWELL最新バージョンで動作することを確認しています。SWELLのバージョンアップ、プラグインのバージョンアップで所定の動作をしない場合があるのでご注意ください。
【備考】自作したJSコードをランディングページに埋め込む方法
ランディングページに自作したJavaScript、jQueryコードを設置する場合の方法を解説します。
ちょっとレベルが上がりますがデモサイトでは自作したJSコードは使っていません。難しそうだなと感じる人はスルーでOKです。
かんた独自カスタマイズに興味がある人のみ参考にしてください。
カスタムJSコードフィールドに貼るだけ
ランディングページ編集画面の下にスクロールすると、カスタムCSS＆JSというカスタムフィールドがあります。自作したJSコードはここに貼り付けるだけでOKです。
このカスタムフィールドに入力したカスタムJSは、編集しているランディングページでの読み込まれます。他のページ、他のランディングページでは読み込まれません。
SWELLのカスタムJSは他の投稿でも同じ仕様です。「特定の固定ページ」「特定の投稿記事」のみにJSを埋め込む場合はカスタムJSを活用しましょう。
コードのサンプルと出力場所
カスタムJSフィールドに入力するjQueryのサンプルコードです。
jQuery(function(){
jQuery('body').addClass('test');
});サンプルコードをカスタムJSフィールドに入力した場合、LPページのHTMLソースの＜/body＞直前に次の通りが出力されます。
<script id="swell_custom_js">jQuery(function(){
jQuery('body').addClass('test');
});
</script>外部ファイル化で読み込んでもOK
自作したJSコードを外部ファイル化してランディングページだけで読み込んでもOKです。
SWELLのLP機能はカスタム投稿（lp）です。ランディングページだけで外部ファイルを読み込みたい場合はheader.phpやfooter.phpあたりのテンプレートファイル上で条件分岐してください。
if( is_singular( 'lp' ) ) {
}FAQ：WordPressテーマSWELLとLP機能について
FAQ形式でSWELLとLP機能について解説します。
SWELLでLPを作りたい。SWELLはどこで販売しているの？
「SWELL」は公式サイトでのみ販売しています。
SWELLのセール、セルフバックの情報はコチラをご覧ください。
SWELLって無料テーマ？
いいえ。有料です。
価格は17,600円です。
SWELLを購入前に少し試してみたい。お試し版はあるの？
ありません。
テーマを購入したら、複数サイトで追加料金なしで使える？
テーマの開発者は日本人？ダッシュボードは日本語？
SWELLの開発者は日本人です。WordPressダッシュボード内も日本語です。
ランディングページのURLはどうなるの？
パーマリンク設定で「投稿名」を指定している場合は「ドメイン名/lp/任意の文字列」という形式です。
ランディングページのURL例
https://example.com/lp/product
https://example.com/lp/sales-page
https://example.com/lp/new-product
かんたURLから「lp」を削除するカスタマイズは次の記事で解説しています。
かんたURLの「lp」を別の文字列に変更する方法は次の記事で解説しています↓
ランディングページはいくつ作れる？
作成できる数に制限はありません。
利用しているサーバーのディスク領域内であればいくらでも作成できます。
ランディングページはクラシックエディターでも編集できる？
できます。
クラシックエディターで編集するにはClassic Editorプラグインが必要です。
ランディングページはスマホやタブレットでも見れる？
見れます。
LP機能でリビジョンが表示されません
SWELLのLP機能で作成したページではリビジョンは保存されません。
ランディングページのリビジョンを保存するカスタマイズは次の記事をご覧ください。
カバーブロックの動画のループは停止できる？
独自カスタマイズが必要です。カバーブロックの動画を一度きりにするカスタマイズは次の記事で解説しています。
新規に作成したLPが表示されない…
WordPressではLPなどのカスタム投稿を作成しただけでは表示されないことがよくあります。
その場合は次の設定をしましょう↓
ダッシュボード左手のメニューから「設定」→「パーマリンク」と進み、設定を何も変更せずに「変更を保存」をクリック。
SWELLでLPを作りたい。おすすめのレンタルサーバーは？
エックスサーバーのスタンダードプランをおすすめします。
価格は１か月あたり、ざっくり千円です。
レンタルサーバーによってはWAFが正常な設定作業を誤検知と判断し、その都度WAFを解除しないといけないものがあります。格安のレンタルサーバーもありますが、サーバーに依存するトラブルは解決にやたら時間がかかります。
かんたレンタルサーバーだけはしっかりしたものを選びましょう。
LPで、コメント欄を表示させることはできる？
SWELLの標準機能ではサポートしていませんが、独自カスタマイズによりLPページでコメント欄を表示させることは可能です。
かんた次の記事でLPにコメント欄を表示させる方法を解説しています。
ランディングページをトップページに設定するカスタマイズ
初心者SWELLのLP機能で作ったページをトップページに表示したい。
会社のHPをSWELLの機能でペライチで表示したい。
そんな人向けのテクニックを紹介します。
LP機能のページはトップページには表示できません
SWELLの標準機能ではLP機能で作成したページをトップページに指定することはできません。
ですが、次の方法だとペライチのHPが作成できます。
かんたページの作り方も今回紹介したLP機能とまったく同じです。
トップページ用のページを固定ページで作成します。
LP機能で作成したページがある場合はコードをそのままコピーして中身を貼り付ければOKです。
固定ページのSWELL設定で次の設定を行います。
- サイドバー→非表示
- 「コンテンツ下の余白をなくす」にチェックを入れる
固定ページの上下に表示される不要な余白を消すステップです。カスタマイザーで次の設定をを行います。
- トップページ→その他→余白なし
- メインビジュアル→表示しない
- 記事スライダー→設置しない
作成したトップページをサイトのトップページに表示するステップです。
「設定」→「表示設定」の順にクリック。
「ホームページの表示」で固定ページにチェックを入れ、ホームページに作成した固定ページを指定して変更を保存。
デフォルトで表示されるヘッダーをフッターを削除するステップです。
HTMLが苦手な初心者向けの方法です。次のサンプルコードをカスタマイザーの追加CSSに貼り付けてください。
header{
display:none;
}
footer{
display:none;
}このコードはヘッダーとフッターを表示しない（隠す）CSSコードです。
実際にHTML上にヘッダーとフッターのソースコードは表示されますが、CSSで画面に表示しないようにするカスタマイズです。
※注意
上記のサンプル個コードをカスタマイザーに設置すると全ページでヘッダーとフッターが非表示になります投稿や固定ページで他のページを作る場合は、非表示にするページを限定しましょう。
PHPファイルのカスタマイズが楽ちんだ！という上級者の方はテーマファイル上からヘッダーとフッターのコードを削除してください。
かんた以上で作業は完了です！
SWELLでペライチ化する方法を紹介しました。ぜひSWELLでペライチの会社HP作りにチャレンジしてみてください！
まとめ
人気WordPressテーマ「SWELL」でランディングページを作る方法を紹介しました。
SWELLはテーマ標準機能でLP機能というランディンページをカスタム投稿として作成・管理できる機能があります。
SWELLはブロックエディターが非常に使いやすく、難しいHTML＋CSSコードを使わずオシャレなランディングページを作ることができるテーマです。
ぜひSWELLでランディングぺージ作りにチャレンジしてみてください！
かんたSWELLのLP機能の詳細について公式ページをご覧ください。