【デモサイト有り】Lightning G3で作ったコーポレートサイト|企業サイト制作事例を一覧で紹介!

【比較】TCDとSWELLライセンスの違い
初心者

LightningやLighthing G3で作成したサイトを見てみたい
デモサイトってどこで見れるの?
コーポレートのデモサイトってあるかな?

その疑問に答えます。

最近WordPress有料テーマLighting G3を購入しました。 Lighting G3を購入前に「どんな感じのデザインに仕上がるかデモサイトを見てみたい」と思っていたのですが、調べても公式デモサイトは1つだけ。企業サイトのサンプルってないのかな?って少し不安がありました。

同じような不安を持っている人向けに、Lightning G3で作成した企業サイトのデモを紹介します(Lightning G3 Pro Packのレビュー記事はこちら)。

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

【デモサイト】Lightning G3で作ったコーポレートサイトのデザイン事例

Lightningで作成した企業系のデモサイト

Lightning G3初心者の僕がお試しで企業サイトを作ってみました。Lighting G3に慣れていない僕が1サイトあたり3時間で作成したデモサイトです。

公式 WordPress有料テーマLightning G3 Pro Pack

【デモサイトを作った感想】Lightning G3が向いているジャンル

コーポレートサイト、不動産会社、学習塾、美容系サロン観光、和風など、基本どんなジャンルのサイトでも制作可能だと感じました。

WordPress有料テーマは得意なジャンルのようなものがあります。例えばTCDのHAKUなら神社、旅館といった「和風サイト」。Lightning G3は強いていえば「ザ・企業サイト」といったデザイン。信頼感のあるサイトといったイメージを出したいサイト作りに向いているなと思いました。

かんた

ある程度WordPressに慣れている人ならコーポレート以外のサイトも作成できます。

コーポレートサイト用にデモデータが無料で配布されている

コーポレートサイト用にデモデータが無料で配布されている

予めテンプレートが用意されていて、ポチっとクリックするとページがデモの写真とテキストが挿入される機能があります。

入力したサンプルのデータを元の画像やテキストを置き換えるように作業すると、プロが作成したデザインをそのまま使える仕組みになっています。

自作してみたいけどできるかな?」という不安のある人向けです。

次の当てはまる人でも大丈夫

  • デザイン力に自信がない
  • とにかくスピード
  • WordPressの知識がない

Lightning G3は初心者でもHPを自作できる?

Lightning G3は初心者でもHPを自作できる?

Lightning G3は初心者向けにこれでもかと優しく作り込んでいるテーマです。

WordPress初心者向けでも簡単に自社HPを自作しやすいように以下3つの仕組みが用意されています。

初心者向けの機能

  1. 読み込みだけでOKのデモデータ
  2. 「選ぶだけ」でページが作成できるデザインパターン
  3. 設定画面が「視覚的」で分かりやすい
かんた

それぞれを詳しく解説していきます。

①読み込むだけでOKのデモデータ

Lightning G3は無料で利用できるデモデータが公開されています。

デモデータを自分のサイトに読み込むと、公式のデモサイトと同じデザインに一瞬で切り替えることができます。

マニュアルの専門用語を理解するのが難しい」。

かんた

そんな人でもプロがデザインしたデモサイトと同じデザインに出来るんです!

デモデータの読み込み方法はYouTube動画で解説しています↓

デモデータを読み込む様子

②「選ぶだけ」でページが作成できるデザインパターン

初心者

会社案内のページって、どんなふうなデザインにしたらオシャレに見えるかな?

Lightning G3は「パターン」と呼ばれる機能があり、会社案内や採用情報といった企業サイトによく使うパーツが事前に用意されています。

ページを作成するエディター画面で「選ぶだけ」でプロがデザインした会社概要のデザインテンプレートが適用されます。文章や画像はサンプルが入力された状態で反映される部分を差し替える流れでページを作成できます。

「会社概要の表」「グーグル・マップ」「沿革」「お問い合わせページへのボタン」などが会社概要のデザインパターンに登録されています。デザインに自信がない人でもそのまま使えばOK。

③設定画面が「視覚的」で分かりやすい

WordPressテーマはページ全体のレイアウトを調整するのに「カスタマイザー」という編集機能が用意されています。カスタマイザーはテーマごとに使い勝手がかなり違います。

初心者

ページ全体のレイアウトって何?

かんた

サイト上部のロゴやメニュー、サイトの下のフッターと呼ばれるエリアなんかのこと

Lighting G3のカスタマイザーはメチャクチャ使いやすい仕組みになっているなと感心します。

具体的には、カスタマイザー上にボタンが表示されていて、クリックするとその場所を編集するメニューが表示される仕組み。

G3のカスタマイザー
Lightning G3のカスタマイザー

他の有料テーマのカスタマイザーと比較すると違いがハッキリ分かります。

下の画像はWordPress有料テーマThe Thorのカスタマイザー画面。Lightinig G3のようなボタンはプレビュー画面に表示されません。左側のメニュー一覧から設定のページを探す必要があります。

The Thorのカスタマイザー画面

数多くのWordPressテーマを販売しているTCDのカスタマイザーとも比較します。

絞り込み検索機能がついている人気テーマのGENGEN。カスタマイザーにはボタンが表示されていません。

TCDテーマ「GENSEN」のカスタマイザー

同じくTCDテーマの「HAKU」。

HAKUのカスタマイザーもGENSEN同様に編集できる箇所を示すボタンは表示されません。

TCDテーマ「HAKU」のカスタマイザー
TCDテーマ「HAKU」のカスタマイザー

TCDテーマはカスタマイザー以外にも「TCDテーマオプション」という管理画面が用意されています。

こちらもプレビュー画面上にボタンが表示される仕組みではありません。

TCDテーマオプション

Lightning G3のカスタマイザーを他の有料テーマと比較するとLightning G3のカスタマイザーが視覚的で使いやすいことがわかります。

有料テーマは機能が豊富になるほどメニューが増えます。「設定したいけど、どこから設定するの?」って感じでかなり時間がかかります。

コーポレートサイトを自作する流れ

コーポレートサイトを自作する流れ

次のような人向けに、Lightning G3で会社のHPを自作するざっくりとした流れを紹介します。

対象者

  • 自分の会社にはHPがない
  • 予算はないから自作してみたい
  • レンタルサーバーが必要って耳にしたけど、詳しいことはわからない

自社サイトを作るのにかかる費用

初心者

費用はいくらぐらいかかるの?

制作会社に依頼せずにホームページを自作する場合、必要なのはLightning G3の購入費用だけです。

料金プラン

期間料金割引
1年間9,900円(税込み)0円
3年間 26,400円(税込み) 3,300円
5年間 39,600円(税込み) 9,900円
Lightning G3の料金システム

Lightning G3の料金プランはライセンス制でサブスクタイプです。契約期間内であればアップデートとサポートが付いてきます。ちなみに1つ購入すると復数サイトで利用できます。

Lightning G3のライセンスについては次の記事で詳しく解説しています。

自社サイトを公開する流れ

Web制作会社に依頼せず、自社のHPを自作してインターネットに公開する方法についてです。

まずは全体の流れです。

全体の流れ

  1. レンタルサーバーに申し込む
  2. Lightning G3 Pro Packをダウンロード
  3. デモデータを読み込む
  4. ページを整える
STEP
レンタルサーバーに申し込む

インターネットにホームページを公開するためにはレンタルサーバーが必須です。

レンタルサーバーによっては、WordPressが使えないものがあります。中にはWordPressが使えるけど、動作が遅かったり、最新バージョンをサポートしていない会社があります。

レンタルサーバーを申し込む場合はしっかりした会社のサービスに申し込みましょう。

初心者

どこから申し込めばいいの?

かんた

僕はエックスサーバーがおすすめ。
プランは一番低料金のX10プランでOK。

STEP
Lightning G3 Pro Packをダウンロード

Lighting G3 Pro Packを購入します。

決済はクレジットカードでオンラインです。支払いが済むと即ダウンロードできます。

STEP
デモデータを読み込む

スキルのある人は、デモデータを使わずゼロからサイトを作ってもOKです!

無料で配布されているLightning G3のデモデータをサイトに読み込みましょう。

ゼロからサイトを作ると大変ですが、デモデータを読み込むと一瞬で公式サイトと同じデザインに早変わりします。

デモデータを読み込みんだ後にデザインの微調整が可能です。あくまでベースとなる枠組みとしてデモデータを活用すると効率よくサイトを作成できます。

STEP
ページを整える

デモデータ読み込んだ場合はサンプルのデータが各ページに入力されます。問い合わせの電話番号、メールアドレス、会社情報などを自社の情報に差し替えましょう。

企業サイト向けのデザイン機能

企業サイト向けのデザイン機能

Lightning G3には企業サイトをデザインする用途にピッタリの機能が搭載されています。

企業サイトをオシャレに仕上げる、装飾機能を紹介します。

インパクトのあるトップページに仕上げる「ヘッダー透過

ヘッダー透過
ヘッダー透過

トップページのファーストビューはサイトの顔です。インパクのあるデザインに仕上げて、「お!なんか凄い!」って思わせたいですよね?

Lightning G3はヘッダー部分を透明にするヘッダー透過をサポートしています。通常、ロゴ画像や電話番号などのヘッダーとメインビジュルは重なりません。

ヘッダー透過を有効化すると、ヘッダーの背景色が透明になります。背景にフルワイドの画像や動画設置してインパクトのあるファーストビューを作成できます。

背景に指定できる要素

  • 画像
  • 動画
  • スライドショー

横並びに配置するなら「グリッドカラム」

グリッドカラム

横並びにデザイン要素を並べるさいに便利なのが、「グリッドカラム」。

グリッドカラムは使い所が多く、かなり実用的な装飾機能です。

グリッドカラムを使うコンテンツ場面

  1. サービ一覧
  2. サービスの特徴
  3. スタッフ紹介

グリッドカラムはレイアウトの「枠」として使い、カラム内には好きなブロックを設置して使います。例えばカラムの中に画像や動画、文章を入れるといった構成も可能です。

WordPressには「カラムブロック」と呼ばれる機能があります。グリッドカラムと同じ用に、横並びに配置できる機能ですがグリッドカラムの方が機能が上です。

Lightningのグリッドカラムは、アクセスしたきた端末ごとに表示を調整できるオプションが用意されています。

例えば「スマホなら1行に1個のカラムだけ」、「タブレットなら2個」、「パソコンなら3個」といった具合に1行に表示するカラム数の調整ができます。WordPress標準のカラムブロックにはないオプションです。

違い

カラムブロックグリッドカラム
WordPress標準ブロック Lightning オリジナルブロック
横並びにカラムを配置 横並びにカラムを配置
なしPC、タブレット、スマホで切り替え可能
カラムブロックとグリッドカラムの比較

静止画以外もサポートしている高機能な「スライダーブロック」

静止画以外もサポートしている高機能な「スライダーブロック」
スライダーブロック

スライダーブロックはいわゆる「スライドショー」を設置するブロックです。

WordPressの一般的なテーマだと、トップページのメインビジュアル部分にスライドショーを配置する機能があります。Lightningのスライダーはページの好きな場所にスライドショーを配置することができるブロックです。

スライダーは静止画以外もサポートしています。スライダー内に好きなブロックを組み合わせることができのが特徴で、カバーブロックの背景に動画を入れてその上にテキストを載せるといった構成にすることもできます。

豊富なオプション機能


スライダーのオプションはめちゃくちゃ豊富です。スライダーのオプションをいくつか紹介します。

デバイスごとの高さ

デバイスの高さ
デバイスの高さ

PC、タブレット、モバイルごとにスライダーの高さを指定可能です。高さの単位はpx、em、rem、vwから選択する形式。v「vhがない?」ってのが、個人的に気になるポイントです。

エフェクト

エフェクト
エフェクト

スライダー要素が移動するさいのエフェクトは、「スライド」、「フェード」の2種類。

サンプルサイトで実装しているのは「スライド」です。スライドは画像が横にずれるので、切り替わりがハッキリ伝わります。

フェードは、スライドのように横にずれるエフェクトありません。スライド要素がフワッと消えて現れるようなエフェクトです。どちらかといえばフェードのほうが自然で高級感があるという印象を受けました。

表示時間と切り替え時間

表示時間と切り替え時間

そのままの意味ですがスライドが表示されている時間です。
設定を、「1秒」にした場合、1秒間スライドが表示されます。選択したエフェクト効果で次のスライドが表示され、1秒間停止する仕様です。

切り替え時間は、切り替えが開始したタイミングから、完全に終了までにかかる時間です。

設定を10秒にした場合、スライドが次の画像に切り替わるまでにかかる時間が10秒かかります。切り替え時間が短いほど、「ビュン」と画像が切り替わります。

動画をサポートしている「カバーブロック」

動画をサポートしている「カバーブロック」
カバーブロック

カバーブロックは、背景を設定するレイアウトブロックです。サンプルサイトではカバーブロックに動画を配置し、その上に文章を載せています。

カバーブロックは動画以外にも静止画像や、単色をサポートしています。単色は、「白」や「黒」といった色を指定するオプションです。

カバーブロックで指定出来る背景要素

  • 静止画像
  • 動画

【おすすめプラグイン】Lightning G3で企業サイトを作るならコレ

【おすすめプラグイン】Lightning G3で企業サイトを作るならコレ

Lightning G3で企業サイトを作る際におすすめなプラグインを紹介します。

おすすめプラグイン

  1. VK All in One Expansion Unit
  2. VK Block Patterns
  3. VK Blocks Pro
  4. VK Filter Search Pro

全て先頭が「VK」。

これらのプラグインは全てLightning G3を販売しているベクトル社開発のプラグインです。

プラグインとテーマには相性のようなものが存在します。組み合わせて使うとエラーが出てうまく動作しないものがあります。Lightning G3とVKプラグインは同じ事業者が開発しているため相性に問題はありません。仮に不具合があれば特別な事情でもない限り対応してもらえます。

かんた

プラグインを紹介していきます!

おすすめプラグイン①:VK All in One Expansion Unit

項目評価
おすすめ度
初心者向け度
VK All in One Expansion Unitプラグイン

無料プラグインです。

VK ALL in One Expansion Unitプラグインは色んな機能があるんですが、基本的にSEO関連の設定などに使います。

  • Meta Titleの設定
  • Meta Descriptionの設定
  • アナリティクスコードの設置

SEO関連といえば、All in One SEO (旧名:All in One SEO Pack)プラグインが有名です。 All in One SEO はちょっと高機能すぎて初心者だと使いきれない機能があります。

VK ALL in One Expansion Unitはそれほど複雑ではなく、機能的にもLightning G3テーマ単体では設定できない部分をカバーしてくれます。

おすすめプラグイン②: VK Block Patterns

項目評価
おすすめ度
初心者向け度
VK Block Patternsプラグイン

初心者は絶対いれましょう。

このVK Block Patternsプラグインを有効化すると、会社紹介や採用情報といったデザインパターンを利用できるようになります。逆にデザインパーツが不要な人ならなくても大丈夫です!

おすすめプラグイン③: VK Blocks Pro

項目評価
おすすめ度
初心者向け度
VK Blocks Proプラグイン

VK Blocks Proプラグインは必須級です。Lightning G3を使うなら必ずインストールしましょう。

有効化するとエディター上で利用できるVK Blockと呼ばれるオリジナルブロックが使えるようになります。

オリジナルブロック

おすすめプラグイン④: VK Filter Search Pro

項目評価
おすすめ度
初心者向け度
VK Filter Search Pro プラグイン

VK Filter Search Proは復数の条件で情報を検索する「絞り込み検索」を実装する有料プラグインです。

不動産サイトや転職サイトなどでお馴染みですよね?「住みたいエリア」「家賃」「こだわりの条件」など希望のに物件を探す時に使う機能です。

VK Filter Search Proはブロックエディター上で絞り込み検索フォームを作る仕様です。プログラムコードはノータッチです。直感的な操作で複雑な検索システムをサクサク作れるのが利点。VK Filter Search ProはLightinig以外の有料テーマでも動きます。

このプラグインは無料版と有料版があります。興味があればまずは無料版を試してみるのが良いでしょう。

かんた

以下、VK Filter Search Proプラグインのレビュー記事と使い方の解説記事です。

【おまけ】おすすめプラグイン⑤WPロケット

WPロケットはサイトの読み込みスピードを改善する高速化プラグインです。

遅いサイトって、なかなか表示されずイライラしますよね?企業サイトって魅力的なデザインにするために、どうしてもキレイな画質の素材を使うことが多いと思います。iPhone、iPadなどのレティーナディスプレイ対応などのために、じっさいに表示させるサイズよりも大きめのサイズで素材を作ることってよくありますよね?

サイズが大きいファイルはどうしても読み込みに時間がかかる傾向があります。そんな時に便利なのが高速化プラグインです。

かんた

WPロケットプラグインの効果については以下の記事で詳しく解説しています。

まとめ

WordPress有料テーマ「Lightning G3」で制作した企業系デモサイトを紹介しました。

Lightningは無料バージョンもありますが、やっぱり有料版は機能が豊富で簡単にオシャレな企業サイトが作れるなと感じました。

個人的には無料で配布しているEverGreenを使うと、さらにオシャレ度がアップするので気に入りました!ぜひ Lightning G3 でのサイト制作にチャレンジしてみてください!

公式 WordPress有料テーマ「Lightning G3 Pro Pack」

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