WordPressやWebデザインなどに役立つ情報をご紹介

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

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

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

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

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

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

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

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

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

  • プロダクト(商品紹介向け)
  • リード(ユーザー・顧客獲得向け)
  • サービス(サービス紹介向け)
の3種類になります。

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

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

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

ランディングページはサンプルページで書き換えるだけで作れるWordPressテーマ:プロダクト

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

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

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

ランディングページはサンプルページで書き換えるだけで作れるWordPressテーマ:リード

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

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

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

ランディングページはサンプルページで書き換えるだけで作れるWordPressテーマ:サービス

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

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

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

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

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

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

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

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

ランディングページ用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」は下記の通り、インポートを行います。

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

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

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

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

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

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

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

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

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

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

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

レイアウト

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

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

ヘッダーボタン

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

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

ヘッダーメニュー自動表示

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

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

ヘッダータイトルのリンク先

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

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

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

アイキャッチ画像

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

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

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

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

固定表示するページのタイトル

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

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

固定表示するページのタグ

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

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

新着記事表示

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

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

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

ホームページ設定

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

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

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

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

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

固定ページの属性

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

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

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

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

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

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

色設定

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

高度な設定(HTMLアンカー・オプション)設定

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

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


サンプルページではあらかじめ設定されています。

ブロック CSS クラス オプション 効果
カバー lp-cover lp-skew 画像の下部が斜めになります。
lp-loop カバー内の太字テキストをカンマで区切ると、テキストが順に切り替わります。
lp-big 大きく表示されます。
lp-anime 画像の透明度がアニメーションします。
lp-head-static ヘッダー固定表示が解除されます。
ボタン lp-button 立体的なボタンになります。
カラム lp-buttons ボタンを横に並べる際に使用します。
lp-item LPに最適なデザインになります。
lp-plan 料金表のデザインになります。
lp-banner バナーを横に並べる際に使用します。
lp-step フローを示すデザインになります。
lp-faq よくある質問のデザインになります。
メディアと文章 lp-media LPに最適なデザインになります。
リスト lp-list LPに最適なデザインになります。
テーブル lp-table LPに最適なデザインになります。
段落 lp-circle-item 丸いアイテムになります。
icon-* アイコンフォントを表示します。
共通 huwa スクロールでふわっと表示します。
shadow 影を付けます。
border ボーダーを付けます。
rounded 角丸にします。

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

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

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

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

  • Gutenbergの使い方が完璧に理解できていない。
  • WordPressテーマ「LIQUID LP」のカスタマイズが理解できていない。
ということで、いろいろ試しなからの紹介でした。

ただ、今までと違って、

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

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

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

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

WordPressテーマ関連記事