Gutenbergに便乗？ランディングページをWordPressで簡単に作れる「LIQUID LP」

前回紹介しましたランディングページ（LP）向けWordPressテーマ「LIQUID LP」。

Gutenberg対応！おしゃれなランディングページが作れるWordPressテーマ

このWordPressテーマ「LIQUID LP」では簡単にランディングページ（LP）が作れます。htmlなどの知識がなくてもランディングページ（LP）を簡単に作れるように3つのサンプルページが搭載されています。

※但し、WordPressのエディター「Gutenberg」の使い方はある程度知っておく必要があります。

さて、ではどんなランディングページ（LP）のサンプルページがあるのか。また、どんなときに便利なのかなどご紹介させていただきます。

「LIQUID LP」のサンプルページ

WordPressテーマ「LIQUID LP」のサンプルページでは、

• プロダクト（商品紹介向け）
• リード（ユーザー・顧客獲得向け）
• サービス（サービス紹介向け）

WordPressテーマ内にランディングマニュアルもあります。

それぞれの目的に合わせて構成されたページになりますが、例えばWordPressテーマ「LIQUID LP」のサンプルページ「プロダクト」に問い合わせを追加したい場合でも他ページ同様に追加もできますし、組み合わせはどのページでも可能になっています。

ランディングページ用WordPressテーマ「LIQUID LP」：プロダクト

このサンプルページ「プロダクト」は、商品の紹介に適したレイアウト。最後にお知らせを表示されています。

こちらは広告宣伝に対する消費者の心理プロセスを示したAIDMAで構成されています。

ランディングページ用WordPressテーマ「LIQUID LP」：リード

サンプルページ「リード」は見込み顧客獲得に適したレイアウト。角丸オプションを使用しています。またプラグインを使うことで最後にフォームを表示することもできます。

こちらは商品販売ページやセールスレータのフレームワークPASONAの法則で構成されています。

ランディングページ用WordPressテーマ「LIQUID LP」：サービス

サンプルページ「サービス」は、名の通りでサービス紹介に適したレイアウト。シャドウオプションを使用しています。こちらもリードのと同様、最後にフォームを追加することができます。

WordPressテーマ「LIQUID LP」の配色変えるだけでもイメージが変わる

サンプルページの配色デザインを変えただけでも雰囲気が異なります。試しに女性やかわいい向きに「ピンク」とクールで落ち着いたサイト向きに「ブラック」を作ってみました。そのままのサンプルページと3つを比較したものです。

配色を変えるだけで雰囲気が異なっているのがよくわかります。

テーマのカスタマイズの色を変えるだけで全体の配色を変更してくれるので簡単です。

念の為、サンプルページをインポートし下書きから公開し変更したところは下記の通りです。

• 管理画面の「外観」の「色」で「テーマカラー」「ヘッダー背景カラー」を変更
  ※ここで変更した配色は、固定ページの色の設定も変更されます。
  個別に固定ページの右側のメニュー内にある色の設定などで変更できます。
• 管理画面の「設定」→「表示設定」→「ホームページの表示」→「固定ページ」のホームページ：「リード」を選択

ランディングページ用WPテーマ「LIQUID LP」

ランディングページ用WordPressテーマ「LIQUID LP」サンプルページの使い方

まずは、ランディングページ用WordPressテーマ「LIQUID LP」のZipファイル「liquid-lp.zip」と一緒にサンプルページ用Zipファイル「liquid-lp-sample.zip」をダウンロードをしておきます。

そしてWordPressテーマ「LIQUID LP」を有効化します。

サンプルページ「liquid-lp-sample.xml」は下記の通り、インポートを行います。

1. 管理画面＞ツール＞インポート＞WordPressインポーターの実行から「liquid-lp-sample.xml」を選択して「アップロードしてインポート」
2. インポートする投稿者は、既存のユーザーを選択し、「添付ファイルをダウンロードしてインポートする」にチェックして「実行」

すると、管理画面の固定ページに3種類の下書きがインポートされているのを確認し、編集を行っていきます。

WordPressテーマ「LIQUID LP」を使う前に注意事項

• WordPress5.0以降、もしくは4.9.8+プラグインGutenberg（グーテンベルク）
• プラグイン「Classic Editor」の無効化
  （※サンプルページを修正する場合のみ）

ランディングページ用WPテーマ「LIQUID LP」

WordPress管理画面の「外観」カスタマイズ設定

こちらでは全体的なデザインを作成していきます。ここではカスタマイズのメニューをピックアップして紹介していきたいと思います。

カスタマイズメニュー：レイアウト

レイアウトでは2カラムか1カラム（サイドバーなし）の選択になります。

※LPテンプレートは1カラム（サイドバーなし）となります。

①に「ランディングページ制作にお悩みはありませんか？」の下の「詳しくはこちら」と記載のボタンを表示されるかの有無となります。

※上記「」内の文言は変更可能です。

投稿ページや固定ページ（属性「LP」以外の場合、②のメニューは管理画面＞外観＞メニュー 「Global Menu」が表示されます。）

※固定ページの属性については下記の「固定ページの属性」内に記載しています。

ヘッダータイトルとはLOGOなどを設置する左上のリンクになります。

③をクリックした場合にそのWordPressをインストールしたTOPのページを表示するのか、個別に作った固定ページのLPを表示するのか設定できます。

④は投稿ページや固定ページの属性「LP」以外の場合、ページ内に表示するのか設定できます。

固定ページの属性「LP」の場合はページ内に既に表示されているので、表示はされません。

※固定ページの属性については下記の「固定ページの属性」内に記載しています。

⑤は右の新着記事の一覧表示された場合、タイトル横にアイキャッチ画像を表示するか選択できます。

右側のプレビューが固定されたトップページに指定しない場合の表示になります。

右側のプレビューのタイトルの「サービス一覧」と記載されているタイトルを⑥で変更ができるようになります。

右側のプレビューの3つ表示されているサービス一覧はこちらで指定したタグが表示されます。

設定時には⑦は空欄になっていますので、こちらにタグを記載していないと表示されていません。

⑧で右側のプレビューのように新着記事の表示の有無をこちらで設定できます。

カスタマイズメニュー：ホームページ設定

Topページを設定します。こちらで「最新の投稿」を選択していると上記アイキャッチ画像に記載しているイメージがTopページになります。作成したLPをTopページにする場合、ホームページの表示：固定ページ＞ホームページで選択したページがTopページになります。（※公開されたページのみ選択が可能です。）

WordPressテーマ「LIQUID LP」のサンプルページの変更方法

また、前提としてサンプルページはブロックで作られていますので、ブロックの位置の上下などの移動や削除はGutenbergの機能と同じです。

こちらも基本的なGutenberg（グーテンベルク）の使い方は下記をご覧ください。

WordPressエディタ「Gutenberg」の使い方！誰でも直感的なデザインに！

固定ページの属性

固定ページの編集画面のメニューにある固定ページの属性を指定できます。

固定ページの属性>テンプレートでLPを選択するとサイドバーの内サンプルページの表示になります。

色設定や高度な設定（HTMLアンカー・オプション）

色設定ではテーマのカスタマイズで指定した色がそれぞれの左上に表示され、自動で全体の配色を変更してくれます。もし個別に色を変更する場合には、固定ページのそれぞれのセクションで色を指定すると変更されます。

ボタンや見出しなどを選択すると右側のメニュー内①のように高度の設定＞HTMLアンカーが表示され、文字列を入れるとページ内リンクとして設定可能です。

また高度な設定＞「追加CSSクラス」に下記のCSSクラスを記載するで様々なオプションを設定できます。

※共通のオプションは、ブロックやその内容によって対応できない場合があります。

ランディングページ用WPテーマ「LIQUID LP」

ランディングページ向けWordPressテーマ「LIQUID LP」を使った感想

今回実際使ってみて感じたのは

• Gutenbergの使い方が完璧に理解できていない。
• WordPressテーマ「LIQUID LP」のカスタマイズが理解できていない。

ただ、今までと違って、

• デザインを作るにあたってHTMLのタグの表記やいろいろプラグインなどをインストールする必要がない。
• 一度覚えてしまうと複数枚作っていろんなサービスや商品を売ったり、ABテストしたりするのが簡単にすぐにできる。

Gutenbergの使い方でも記載しましたが、やっぱり慣れですね。

ただGutenbergによって幅広いユーザーが使えてカスタマイズできるようになっているなあと実感しました。

ランディングページ用WPテーマ「LIQUID LP」

WordPressテーマ関連記事

• WordPressの使い方
• Gutenberg対応！おしゃれなランディングページが作れるWordPressテーマ
• WordPressテーマ：オウンドメディア向けテンプレートまとめ6選
• WordPressテーマ：オウンドメディア・マガジン向け！本格的デザイン・機能テンプレートまとめ11選
• WordPressテーマ：企業サイト向け国産テンプレートまとめ
• WordPressテーマ：ビジネスサイト向けテンプレートまとめ
• WordPressテーマ：簡単！きれいなポートフォリオテンプレートまとめ6選