初心者LightningやLightning G3で作成したサイトを見てみたい
デモサイトってどこで見れるの？
コーポレートのデモサイトってあるかな？
その疑問に答えます。
最近WordPress有料テーマLighting G3を使いたくて、Vektor Passportを利用しました。 Lighting G3を利用する前にに「どんな感じのデザインに仕上がるかデモサイトを見てみたい」と思っていたのですが、調べても公式デモサイトは1つだけ。企業サイトのサンプルってないのかな？って少し不安がありました。
同じような不安を持っている人向けに、Lightning G3で作成した企業サイトのデモを紹介します（Lightning G3 Pro Packのレビュー記事はこちら）。
【デモサイト】Lightning G3で作ったコーポレートサイトのデザイン事例
Lightning G3初心者の僕がお試しで企業サイトを作ってみました。Lighting G3に慣れていない僕が1サイトあたり3時間で作成したデモサイトです。
【デモサイトを作った感想】Lightning G3が向いているジャンル
コーポレートサイト、不動産会社、学習塾、美容系サロン観光、和風など、基本どんなジャンルのサイトでも制作可能だと感じました。
WordPress有料テーマは得意なジャンルのようなものがあります。例えばTCDのHAKUなら神社、旅館といった「和風サイト」。Lightning G3は強いていえば「ザ・企業サイト」といったデザイン。信頼感のあるサイトといったイメージを出したいサイト作りに向いているなと思いました。
かんたある程度WordPressに慣れている人ならコーポレート以外のサイトも作成できます。
コーポレートサイト用にデモデータが無料で配布されている
予めテンプレートが用意されていて、ポチっとクリックするとページがデモの写真とテキストが挿入される機能があります。
入力したサンプルのデータを元の画像やテキストを置き換えるように作業すると、プロが作成したデザインをそのまま使える仕組みになっています。
「自作してみたいけどできるかな?」という不安のある人向けです。
次の当てはまる人でも大丈夫
- デザイン力に自信がない
- とにかくスピード
- WordPressの知識がない
Lightning G3は初心者でもHPを自作できる？
Lightning G3は初心者向けにこれでもかと優しく作り込んでいるテーマです。
WordPress初心者向けでも簡単に自社HPを自作しやすいように以下3つの仕組みが用意されています。
初心者向けの機能
- 読み込みだけでOKのデモデータ
- 「選ぶだけ」でページが作成できるデザインパターン
- 設定画面が「視覚的」で分かりやすい
かんたそれぞれを詳しく解説していきます。
①読み込むだけでOKのデモデータ
Lightning G3は無料で利用できるデモデータが公開されています。
デモデータを自分のサイトに読み込むと、公式のデモサイトと同じデザインに一瞬で切り替えることができます。
「マニュアルの専門用語を理解するのが難しい」。
かんたそんな人でもプロがデザインしたデモサイトと同じデザインに出来るんです！
デモデータの読み込み方法はYouTube動画で解説しています↓
②「選ぶだけ」でページが作成できるデザインパターン
初心者会社案内のページって、どんなふうなデザインにしたらオシャレに見えるかな？
Lightning G3は「パターン」と呼ばれる機能があり、会社案内や採用情報といった企業サイトによく使うパーツが事前に用意されています。
ページを作成するエディター画面で「選ぶだけ」でプロがデザインした会社概要のデザインテンプレートが適用されます。文章や画像はサンプルが入力された状態で反映される部分を差し替える流れでページを作成できます。
「会社概要の表」「グーグル・マップ」「沿革」「お問い合わせページへのボタン」などが会社概要のデザインパターンに登録されています。デザインに自信がない人でもそのまま使えばOK。
③設定画面が「視覚的」で分かりやすい
WordPressテーマはページ全体のレイアウトを調整するのに「カスタマイザー」という編集機能が用意されています。カスタマイザーはテーマごとに使い勝手がかなり違います。
初心者ページ全体のレイアウトって何？
かんたサイト上部のロゴやメニュー、サイトの下のフッターと呼ばれるエリアなんかのこと
Lighting G3のカスタマイザーはメチャクチャ使いやすい仕組みになっているなと感心します。
具体的には、カスタマイザー上にボタンが表示されていて、クリックするとその場所を編集するメニューが表示される仕組み。
他の有料テーマのカスタマイザーと比較すると違いがハッキリ分かります。
下の画像はWordPress有料テーマThe Thorのカスタマイザー画面。Lightinig G3のようなボタンはプレビュー画面に表示されません。左側のメニュー一覧から設定のページを探す必要があります。
数多くのWordPressテーマを販売しているTCDのカスタマイザーとも比較します。
絞り込み検索機能がついている人気テーマのGENGEN。カスタマイザーにはボタンが表示されていません。
同じくTCDテーマの「HAKU」。
HAKUのカスタマイザーもGENSEN同様に編集できる箇所を示すボタンは表示されません。
TCDテーマはカスタマイザー以外にも「TCDテーマオプション」という管理画面が用意されています。
こちらもプレビュー画面上にボタンが表示される仕組みではありません。
Lightning G3のカスタマイザーを他の有料テーマと比較するとLightning G3のカスタマイザーが視覚的で使いやすいことがわかります。
有料テーマは機能が豊富になるほどメニューが増えます。「設定したいけど、どこから設定するの？」って感じでかなり時間がかかります。
コーポレートサイトを自作する流れ
次のような人向けに、Lightning G3で会社のHPを自作するざっくりとした流れを紹介します。
対象者
- 自分の会社にはHPがない
- 予算はないから自作してみたい
- レンタルサーバーが必要って耳にしたけど、詳しいことはわからない
自社サイトを作るのにかかる費用
初心者費用はいくらぐらいかかるの？
制作会社に依頼せずにホームページを自作する場合、必要なのはVektor Passportだけです。
料金プラン
| 期間 | 料金 | 割引 |
|---|---|---|
| 1年間 | 9,900円（税込み） | 0円 |
| 3年間 | 26,400円（税込み） | 3,300円 |
| 5年間 | 39,600円（税込み） | 9,900円 |
Vektor Passportの料金プランはサブスクタイプです。契約期間内であればアップデートとサポートが付いてきます。ちなみに1つ購入すると復数サイトで利用できます。
かんたVector Passportの料金システムは次の記事で紹介しています。
自社サイトを公開する流れ
Web制作会社に依頼せず、自社のHPを自作してインターネットに公開する方法についてです。
まずは全体の流れです。
全体の流れ
- レンタルサーバーに申し込む
- Lightning G3 Pro Packをダウンロード
- デモデータを読み込む
- ページを整える
インターネットにホームページを公開するためにはレンタルサーバーが必須です。
レンタルサーバーによっては、WordPressが使えないものがあります。中にはWordPressが使えるけど、動作が遅かったり、最新バージョンをサポートしていない会社があります。
レンタルサーバーを申し込む場合はしっかりした会社のサービスに申し込みましょう。
初心者どこから申し込めばいいの？
かんた僕はエックスサーバーがおすすめ。
プランは一番安いのスタンダードプランでOK。
Vektor Passportを申し込みます。
支払いが済むと即、利用できます。
かんた申し込み方法は次の記事で詳しく解説しています。
無料で配布されているLightning G3のデモデータをサイトに読み込みましょう。
ゼロからサイトを作ると大変ですが、デモデータを読み込むと一瞬で公式サイトと同じデザインに早変わりします。
デモデータを読み込みんだ後にデザインの微調整が可能です。あくまでベースとなる枠組みとしてデモデータを活用すると効率よくサイトを作成できます。
デモデータ読み込んだ場合はサンプルのデータが各ページに入力されます。問い合わせの電話番号、メールアドレス、会社情報などを自社の情報に差し替えましょう。
企業サイト向けのデザイン機能
Lightning G3には企業サイトをデザインする用途にピッタリの機能が搭載されています。
企業サイトをオシャレに仕上げる、装飾機能を紹介します。
インパクトのあるトップページに仕上げる「ヘッダー透過」
トップページのファーストビューはサイトの顔です。インパクのあるデザインに仕上げて、「お！なんか凄い！」って思わせたいですよね？
Lightning G3はヘッダー部分を透明にするヘッダー透過をサポートしています。通常、ロゴ画像や電話番号などのヘッダーとメインビジュルは重なりません。
ヘッダー透過を有効化すると、ヘッダーの背景色が透明になります。背景にフルワイドの画像や動画設置してインパクトのあるファーストビューを作成できます。
背景に指定できる要素
- 画像
- 動画
- スライドショー
横並びに配置するなら「グリッドカラム」
横並びにデザイン要素を並べるさいに便利なのが、「グリッドカラム」。
グリッドカラムは使い所が多く、かなり実用的な装飾機能です。
グリッドカラムを使うコンテンツ場面
- サービ一覧
- サービスの特徴
- スタッフ紹介
グリッドカラムはレイアウトの「枠」として使い、カラム内には好きなブロックを設置して使います。例えばカラムの中に画像や動画、文章を入れるといった構成も可能です。
WordPressには「カラムブロック」と呼ばれる機能があります。グリッドカラムと同じ用に、横並びに配置できる機能ですがグリッドカラムの方が機能が上です。
Lightningのグリッドカラムは、アクセスしたきた端末ごとに表示を調整できるオプションが用意されています。
例えば「スマホなら1行に1個のカラムだけ」、「タブレットなら2個」、「パソコンなら3個」といった具合に1行に表示するカラム数の調整ができます。WordPress標準のカラムブロックにはないオプションです。
違い
| カラムブロック | グリッドカラム |
|---|---|
| WordPress標準ブロック | Lightning オリジナルブロック |
| 横並びにカラムを配置 | 横並びにカラムを配置 |
| なし | PC、タブレット、スマホで切り替え可能 |
静止画以外もサポートしている高機能な「スライダーブロック」
スライダーブロックはいわゆる「スライドショー」を設置するブロックです。
WordPressの一般的なテーマだと、トップページのメインビジュアル部分にスライドショーを配置する機能があります。Lightningのスライダーはページの好きな場所にスライドショーを配置することができるブロックです。
スライダーは静止画以外もサポートしています。スライダー内に好きなブロックを組み合わせることができのが特徴で、カバーブロックの背景に動画を入れてその上にテキストを載せるといった構成にすることもできます。
豊富なオプション機能
スライダーのオプションはめちゃくちゃ豊富です。スライダーのオプションをいくつか紹介します。
デバイスごとの高さ
PC、タブレット、モバイルごとにスライダーの高さを指定可能です。高さの単位はpx、em、rem、vwから選択する形式。ｖ「vhがない？」ってのが、個人的に気になるポイントです。
エフェクト
スライダー要素が移動するさいのエフェクトは、「スライド」、「フェード」の2種類。
サンプルサイトで実装しているのは「スライド」です。スライドは画像が横にずれるので、切り替わりがハッキリ伝わります。
フェードは、スライドのように横にずれるエフェクトありません。スライド要素がフワッと消えて現れるようなエフェクトです。どちらかといえばフェードのほうが自然で高級感があるという印象を受けました。
表示時間と切り替え時間
そのままの意味ですがスライドが表示されている時間です。
設定を、「1秒」にした場合、1秒間スライドが表示されます。選択したエフェクト効果で次のスライドが表示され、1秒間停止する仕様です。
切り替え時間は、切り替えが開始したタイミングから、完全に終了までにかかる時間です。
設定を10秒にした場合、スライドが次の画像に切り替わるまでにかかる時間が10秒かかります。切り替え時間が短いほど、「ビュン」と画像が切り替わります。
動画をサポートしている「カバーブロック」
カバーブロックは、背景を設定するレイアウトブロックです。サンプルサイトではカバーブロックに動画を配置し、その上に文章を載せています。
カバーブロックは動画以外にも静止画像や、単色をサポートしています。単色は、「白」や「黒」といった色を指定するオプションです。
カバーブロックで指定出来る背景要素
- 色
- 静止画像
- 動画
【おすすめプラグイン】Lightning G3で企業サイトを作るならコレ
Lightning G3で企業サイトを作る際におすすめなプラグインを紹介します。
おすすめプラグイン
- VK All in One Expansion Unit
- VK Block Patterns
- VK Blocks Pro
- VK Filter Search Pro
全て先頭が「VK」。
これらのプラグインは全てLightning G3を販売しているベクトル社開発のプラグインです。
プラグインとテーマには相性のようなものが存在します。組み合わせて使うとエラーが出てうまく動作しないものがあります。Lightning G3とVKプラグインは同じ事業者が開発しているため相性に問題はありません。仮に不具合があれば特別な事情でもない限り対応してもらえます。
かんたプラグインを紹介していきます！
おすすめプラグイン①：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 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はLightinig以外の有料テーマでも動きます。
VK Filter Search Proを使ったデモサイト
このプラグインは無料版と有料版があります。興味があればまずは無料版を試してみるのが良いでしょう。
かんた以下、VK Filter Search Proプラグインのレビュー記事と使い方の解説記事です。
【おまけ】おすすめプラグイン⑤WPロケット
WPロケットはサイトの読み込みスピードを改善する高速化プラグインです。
遅いサイトって、なかなか表示されずイライラしますよね？企業サイトって魅力的なデザインにするために、どうしてもキレイな画質の素材を使うことが多いと思います。iPhone、iPadなどのレティーナディスプレイ対応などのために、じっさいに表示させるサイズよりも大きめのサイズで素材を作ることってよくありますよね？
サイズが大きいファイルはどうしても読み込みに時間がかかる傾向があります。そんな時に便利なのが高速化プラグインです。
かんたWPロケットプラグインの効果については以下の記事で詳しく解説しています。
まとめ
Lightning G3 Pro Packで制作した企業系デモサイトを紹介しました。
Lightningは無料バージョンもありますが、やっぱり有料版は機能が豊富で簡単にオシャレな企業サイトが作れるなと感じました。
個人的には無料で配布しているEverGreenを使うと、さらにオシャレ度がアップするので気に入りました！ぜひ Lightning G3 でのサイト制作にチャレンジしてみてください！
