【Lightning G3 】LP(ランディングページ)の作り方・サンプルデザインを紹介します！

そんな疑問に答えます。

有料版のLightning G3を購入して、ランディングページを試しに作ってみました。

G3用のプラグインLightning G3 Pro Packは単体での販売を停止しています。
利用するためにVektor Passportが必要です。

Lightning G3の基本情報

Lightningの有料版には、「Pro」「G3 Pro Unit」があります。今回紹介するのはLightning G3 Pro Unit、略してG3についてです。

Lightning G3
プロダクト名名	Lightning G3 Pro Pack
読み方	ライトニング・ジースリー・プロ・パック
販売価格	9,900円（税込み価格）
販売事業者	株式会社ベクトル
発売日	2021年5月

Lightning G3は、Lightningシリーズの最新バージョン。有料版のProの上位テーマと考えれば間違いありません。Lightning G3限定の拡張デザインなどが配布されていて、Proよりオシャレ度の高いデザインが簡単に作れるといった特徴があります。

【サンプル】Lightning G3で作ったランディングページ

Lightning G3でサンプルのランディングページを作ってみました。

ランディングページ以外のコーポレート系デザイン

Lightning G3はランディングページ以外にも、コーポレート系サイトの制作に向いています。コーポレート系サイトのサンプルを作ってみたので、合わせて紹介します。

サンプルはクリックするとサイトが表示されます。サンプルサイトは、期間限定で無料ダウンロードできるEvergreenキットを使っています。

EvergreenキットはLightning G3で使える、拡張デザインです。

公式 Evergreenキットをダウンロードする

ランディングページの作りかた

Lightning G3でのランディングページの作り方を解説します。

まずは全体の流れです。

LP制作の流れ

【手順①】大枠のページを作る

ランディングページは固定ページ、投稿、カスタム投稿いずれもで制作できます。今回は固定ページでランディングページを作る手順を紹介します。

どの投稿タイプを使っても同じ仕組みでランディングページを作れます。

パーマリンクを設定する作業です。

パーマリンクはランディングページのURLになります。
日本語URLは文字化けしてしまうので、英単語などの英文字にしましょう。

続いて、ページの上部と下部に表示される余白を消す設定です。

作業後は「公開」をクリックし設定を保存。

【手順②】を共通パーツヘッダー・フッターを非表示にする

一般的にランディングページ上には他のページに移動するグロナビなどは設置しません。訪問者に問い合わせや購入をしてもらうため、余計な導線を配置しないのが基本です。

このステップでは、固定ページ上からヘッダーとフッターを非表示にする方法を解説します。

作業後は「公開」をクリックし設定を保存。

ランディングページ専用のメニューを表示させるカスタマイズ

長文のランディングページ内を作った場合、「ページ内リンクを付けたい」といったケースがあります。Lightning G3には共通のグロナビを表示する機能はありますが、特定のページだけグロナビを変更する機能はありません。

ですが、ランディングページだけ特別なメニューを表示させるフックがあります。

【手順③】をページの中身を入力する

ランディングページの中身を入力するステップです。

Lightning G3にはコンテンツ作成用の便利な機能があります。いくつかおすすめの装飾機能を紹介します。

おすすめ装飾機能！

【おすすめ装飾機能】スライダー

スライダーはスライドショーを作る装飾機能です。
スライドショーというと、メインビジュアルの機能といった印象があるかと思います。

Lightning G3のスライダーはメインビジュアルにも使えますが、コンテンツエリアにも使えます。

ギャラリーのようにたくさんの写真を配置するといった使い方もできますが、サンプルサイトでは「お客様の声」をスライダーで作成しました。

動きがあって、「次を見てみたい」と思うデザインに仕上がってますよね？

【おすすめ装飾機能】FAQ

FAQは、「よくあるお問い合わせ」という意味です。企業サイトなんかだと、よく見るコンテンツですよね？

Lightning G3にはFAQ専用のFAQブロックが用意されています。

プログラムコードを書かなくても、オシャレなFAQを簡単に作成できます。

Lightning G3のFAQブロックの特徴は、アコーディオン形式をサポートしている点です。

アコーディオンの機能を有効化すると質問部分だけを表示して、クリックすると回答部分が開くといったデザインにすることができます。

縦に長くなりがちなコンテンツをスッキリおさめて見やすくなります！

【おすすめ装飾機能】Outer（アウター）

Outerは「外側」を意味する英単語です。

Lightning G3のOuterブロックは、デザイン要素の外側に配置するレイアウト系のブロックです。

他のテーマだとカバーブロック、セクションブロック、フルワイドブロックといった名称で似たような機能のものがあります。

背景に「画像」や「動画」を設置したり、枠線を表示するといった用途に使います。

ランディングページだと、ファーストビューに表示する要素をデザインする時に便利です。

画像や動画を全画面に設定し、背景に動画や画像を配置。その上に、キャッチコピーなんかを表示すると完璧です！

【おすすめ装飾機能】ステップ要素

ステップ要素は、順序・流れを説明するといったケースに使えるブロックです。

商品を受け取るまでのステップを解説したり、申込みからサービスを受けるといった「サービスの流れ」を説明するといった場面に向いています。

【おすすめ装飾機能】グリッドカラム

グリッドカラムは1行に、複数の要素を並べて表示するといったデザイン用のブロックです。

WordPress標準の装飾機能に「カラムブロック」という、グリッドカラムに似た機能のブロックがあります。

カラムブロックも横並びに配置することはできますが、「PCの場合は3個を表示」「スマホの場合は1個だけ」といったデバイスごとの出し分けはできません。

グリッドカラムはPC、タブレット、スマホなど、最大6個の解像度に合わせて表示形式を変えることができる高機能なレイアウト機能です。

ランディングページ用のレンタルサーバー

Lightning G3はWordPressテーマです。

WordPressが利用できるレンタルサーバーが必要です。

ブロックエディターテーマと相性の良いレンタルサーバー

サンプルサイトは、エックスサーバーのスタンダードプランです。

仕事がら国内・海外のレンタルサーバーを利用した経験があります。日本ユーザー向けのサイトを作るなら、定番のエックスサーバーが一番WordPressサイトの運用に向いていると感じます。

ブロックエディターと相性の悪いレンタルサーバーがある

WordPressには対応しているものの、トラブルが発生しやすいレンタルサーバーがあります。

以下は僕が実際に経験したことがるトラブルです。

トラブルの種類

ググってみると、僕以外にも同じような経験をしているユーザーがけっこういました。

「安い」「有名」といっただけの理由でレンタルサーバーを選ぶのは本当に危険です。問題が解決しない場合は、レンタルサーバーを変更するしかありません。WordPressサイトの引っ越しは面倒なので、できるだけ信頼性の高いレンタルサーバーを選びましょう。

ランディングページに関するFAQ

まとめ

Lightning G3で作成したランディングページについての紹介でした。

要約