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

STREETISTの購入方法
初心者

Lightning G3って、ランディングページ作れるの?
初心者でも簡単に作れるか心配…
どんなデザインに仕上がるのかなぁ?

そんな疑問に答えます。

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

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

Lightning G3の基本情報

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

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

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

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

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

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

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

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

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

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

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

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

まずは全体の流れです。

LP制作の流れ

  1. 大枠のページを作る
  2. 共通パーツ「ヘッダー・フッター」を非表示にする
  3. ページの中身を入力する
かんた

各手順を解説します。

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

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

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

操作内容

固定ページ」→「新規追加」をクリック。

Lightning G3でLPを作る手順
操作内容

「タイトルを追加」に、適当な名称を入力。

タイトルに適当な名称を入力。

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

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

操作内容

パーマリンクの「URLスラッグ」に、任意の英文字を入力。

パーマリンクの設定

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

操作内容

余白設定オプションで「サイトコンテントの上下余白を無しにする」にチェックを入れる。

余白を消す

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

かんた

以上でこのステップの作業は終了です。

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

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

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

操作内容

ランディングページの編集画面を開きます。

右側の「非表示設定」で、全てのオプションにチェックを入れます。

共通パーツを非表示に設定

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

かんた

以上でこのステップの作業は終了です。

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

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

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

かんた

フックを使い、ランディングページだけメニューを変える方法は次の記事で紹介しています。

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

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

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

おすすめ装飾機能!

  1. スライダー
  2. FAQブロック
  3. Outer(アウター)ブロック
  4. ステップ要素
  5. グリッドカラム
かんた

それぞれを詳しく紹介しますね。

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

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

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には対応しているものの、トラブルが発生しやすいレンタルサーバーがあります。

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

トラブルの種類

  1. カスタマイザーの設定が保存できない
  2. ブロックエディターでページを保存できない

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

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

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

ランディングページに関するFAQ
ランディングページはいくつ作れる?上限はあるの?

ページ数に制限はありません。何ページでも作成できます。

ランディングページのURLはどうなるの?

ランディングページを固定ページで作成した場合だと「ドメイン/任意の文字列」というフォーマットになります。

URLの一例

  1. example.com/landing-page01
  2. example.com/lp-01
  3. example.com/product
Lightning G3は複数サイトで使えるの?

1つLightning G3を購入した場合、追加料金なしで複数のサイトで使いまわしできるライセンス形態です。

仕事でクライアントサイトでも使っていいの?

追加料金なしで使えます。

まとめ

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

要約

  1. Lightning G3はランディングページを作る機能がある
  2. Lightning G3の装飾機能が使える
  3. プログラムのコードを編集するスキルは不要
  4. レンタルサーバーは、WordPress対応のものが必要
  5. 期間限定で無料のデザイン拡張プラグイン(Evergreen)がダウンロードできる
かんた

ぜひLightning G3でのランディングページ制作にチャレンジしてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
目次