【サンプルあり】Lightning G3とWooCommerceでのECサイトの作り方|Evergreenキットでオシャレ度をアップしよう!

【比較】独自フックの違い
初心者

Lightning G3でECサイトって作れるの?
どんなデザインになるかサンプルを見たい…
作り方を教えて欲しい…

そんな悩みを解決します。

Lightningの有料バージョンLightning G3とEvergreenキットを使ったサンプルサイトを作ってみました。EC系の機能は、無料プラグインのWooCommerceです。

今回利用するのは「Lightning Pro」ではなく、「Lightning G3 Pro Pack」です。

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

Lightning G3で作ったECサイトのサンプルを紹介します

Lightning G3で作ったECサイトのサンプルを紹介します

僕がLightning G3を使って作成さいたECサイトを紹介します!

サンプルサイトはコーヒー豆を販売している事業者をイメージしました。コーヒー豆、コーヒーミルなどの関連器具、紅茶、スイーツなどを販売しているサイトです。

サンプルサイト

Lightning G3 evergreenのECサイト

サンプルサイトは決済機能を無効にしています。うっかりクレジットカードなどで決済されてしまうと、返金処理が大変だからです。

かんた

サンプルで作成したECサイトは、コーヒー豆を販売する架空のサイトです。

サンプルサイトの構成

サンプルサイト制作に使ったテーマ、プラグインについてです。

構成

項目価格公式サイト
Lightning G3 Pro Unit9,900円 ダウンロード
WooCommerce無料 ダウンロード
Evergreenキット無料 ダウンロード

上記以外にもデザインを調整するプラグインを使っていますが、ECに関連する機能だとこんなもんです。

サンプルサイトでは有効化しているテーマやプラグインファイルは一切編集していません。Lightning G3でこんなサイトが作れると思ってください(色味などをCSSで多少アレンジしています)。

WooCommerceは次の機能を標準搭載しています。

機能の一例

  • ショッピングカート
  • クーポン割引システム
  • カテゴリーごとの商品一覧表示
  • デジタルデータのダウンロード販売
  • レビュー機能
  • 会員機能
  • 売上レポート機能
かんた

無料で使えるのが信じられないぐらいです。

Lightning G3 Pro Unit

項目価格公式サイト
Lightning G39,900円 ダウンロード
Lightning G3について

サンプルサイトで有効化しているテーマはLightning G3 Pro Unitです。WordPressでコーポレートサイト制作するさいの定番「Lightning」の有料バージョンです。

僕は無料と有料バージョンの両方使った経験がありますが、機能には大きな差を感じます。例えば、設定できるオプション自体の数が全然違います。当然ながら有料バージョンのほうが選択オプションが多くなっています。

無料と有料バージョンの違い

  • レイアウト周りの調整機能
  • ページをオシャレに仕上げる装飾ブロック
  • サポート
かんた

有料と無料の差は大きいと感じました。

WooCommerce

項目価格公式サイト
WooCommerce無料 ダウンロード
WooCommerceについて

WooCommerceは、WordPress専用ECサイト制作用プラグインです。

EC系のプラグインはけっこう色んな種類がありますが、 WooCommerceのダウンロード数は500万を超えています。世界的に人気のプラグインです。

海外製の無料プラグインは日本語に対応していないものが多いんですが、 WooCommerceは日本語にしっかり対応しています

日本の会社が開発している有料テーマとの相性が微妙だったりしますが、Lightning G3では利用できました。ちなみにLightning G3を販売している株式会社ベクトルのネットショップもWooCommerceで作成されています。

かんた

テーマ開発会社が自分の会社に導入しているって安心感がありますよね?

Evergreenキット

項目価格公式サイト
Evergreenキット無料 ダウンロード
Evergreenについて

EvergreenキットはLightning G3用のデザイン拡張プラグインです。有効化すると、メインビジュアル部分にフルワイドの動画を設定する機能や、オシャレ度の高いブロークングリッドが使えるようになります。

ECサイト制作に必須ではありませんが、デザインの選択肢が増えます。

Evergreenキットは通常9,900円で販売している商品ですが、Lightning G3ユーザーであれば期間限定で無料でダウンロードできます。

かんた

使わなくてもダウンロードしておくのがおすすめです。

Lightning G3とEvergreenキットでECサイトを作ってみた感想

Lightning G3でECサイトを作ってみた感想

Lightning G3+Evergreenキット、WooCommerceでECサイトを作ってみた感想をシェアします。

ざっくりした感想は次の通りです。

感想

  1. プログラムコードの知識は不要
  2. 商品を好きな場所に配置できる
かんた

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

プログラムの知識は不要

ECサイトの作りやすさ 4.5 / 5
レビュー:ECサイトの作りやすさ

WooCommereceにカートや商品管理機能が付いているので、商品の登録作業にプログラムのスキルはいりません。

PHPなどテンプレートファイルのプログラムコードを編集するような作業はありません。

どのWordPressテーマでも同じことですが、アイコンなどの色合いを変更する場合、場所によっては管理画面から調整できません。

かんた

そういったカスタマイズをするにはネットで参考記事を探してCSSをコピペできるスキルが必要です。

こんなに簡単にECサイトが作れるの?

サンプルサイトではテーマファイルのプロラムコードを編集していません。それでも、かなり満足度の高いデザインに仕上がりました。

色やフォントサイズの大きさを調整するために、CSSを追加した程度です。商品ページ、カート、決済機能はWooCommerceの標準機能だけで実装しています。

かんた

プラグインのファイルにも一切手を加えていません。

商品を好きな位置に配置できる

デザインの自由度 4.5 / 5
レビュー:デザインの自由度

商品はページの好きな位置に表示できる!

かんた

当たり前のようですが、けっこう感動したポイントです。

WooCommerceプラグイン以外でECサイトを作った経験があるんですが、その時使ったプラグインはデザインの自由度が低く、商品の表示場所をアレンジするにはプログラムコードをを編集するスキルが必須でした。

Lightning G3とWooCommerceプラグインの組み合わせの場合、ブロックエディターでページを編集できます。ページの好きな場所に、好きな商品を表示できるのでデザインにこだわったECサイトを作れました↓

商品を好きな場所に設置できる
エディターで商品を配置する様子

サンプルサイトのトップページは固定ページで作成しています。商品の配置だけでなくスライドショーや動画を入れたりするのもブロックエディター上での作業です。

かんた

ノーコードで自分好みのデザインを実現できました。

Lightning G3+WooCommerceでのECサイトの作り方

Lightning G3でのECサイトの作り方

Lightning G3とWooCommerceプラグインを使ったECサイト制作のざっくりした流れを紹介します。

サンプルサイトで使った以下のテーマ、プラグインを使います。

項目価格公式サイト
Lightning G3 Pro Unit9,900円 ダウンロード
WooCommerce無料 ダウンロード
Evergreenキット無料 ダウンロード

レンタルサーバーを用意しよう

Lightning G3でECサイトを作るにはWordPress対応のレンタルサーバーが必要です。

WordPressを利用できるレンタルサーバー事業者は国内だけでも、けっこうな数あります。一般的なレンタルサーバーの月額料金は、どの会社もだいたい500円~1,000円程度です。

代表的なレンタルサーバー会社

あまりにも安すぎるレンタルサーバーを選ぶさいは注意が必要です。スペック的に動作が遅くなるものがあります。契約後にレンタルサーバーを変更するのは、ものすごく面倒です。

かんた

ネームサーバーの切り替えやデータの引っ越しなど、スキルと専門知識が必要になります。

ある程度信頼のあるレンタルサーバー会社を選びましょう。

ちなみにサンプルサイトはエックスサーバーの「スタンダードプラン」を使っています。料金は月額ザックリ1,000円。仕事がら色んなレンタルサーバー会社を利用しましたが、個人的に一番良いサービスという印象を持っています。

エックスサーバーはレンタルサーバーの申し込みと同時にWordPressのインストール作業も無料で代行してくれます。初心者の方でWordPressを初めて扱う人はどうしてもインストールにつまずくので、こういった代行サービスを利用するのが無難です。

公式 エックスサーバー「スタンダードプラン」の申し込みページ

テーマとプラグインのインストール作業

WordPressの管理画面上から、Lightning G3、Evergreen、WooCommerceをインストールするステップです。

テーマのインストール作業

操作内容

外観」→「テーマ」へ移動し「新規追加」をクリック。

テーマをインストール

Lightning」と入力。

候補の中からLightningを選択し、「インストール」をクリック。

有効化」をクリック。

テーマを有効化

Lightning G3 Pro Unitを購入するとLightning Proが含まれていますが、インストールする必要はありません。

かんた

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

G3 Pro Unit+Evergreenのインストール

操作内容

プラグイン」→「新規追加」をクリック。

プラグインのインストール

パソコン上にあるlightning-g3-pro-unit.zipを指定して、「今すぐインストール」をクリック。

lightning-g3-pro-unitをインストール

プラグインを有効化しましょう。

同様の手順でEvergreenをインストールし有効化しましょう。

サンプルサイトでも使っていますが、以下のプラグインも合わせてインストールするのがおすすめです。

おすすめプラグイン

  1. VK All in One Expansion Unit
  2. VK Block Patterns
  3. VK Blocks Pro
  4. VK Grid Column Card Block
かんた

おすすめプラグインは全てLightning開発会社のものです。

WooCommerceの設定

「支払い方法」「通貨」「税率」「配送」といったECの基本設定をするステップです。

操作内容

WooCommerce」をクリック。

WooCommerceの初期設定

設定ウィザートが表示されます。

案内に従い選択していく流れです。

設定画面

設定した内容は後から修正できます。

商品の登録作業

ECサイトで販売する商品の登録作業です。

操作内容

商品」→「新規追加」をクリック。

商品の登録画面は入力フォームになっています。各項目を入力しましょう。

WooCommerce商品登録画面

商品登録時に入力する情報

  1. 商品名
  2. 価格
  3. 商品のイメージ画像
  4. 商品カテゴリー
  5. 商品タグ
  6. 商品の大きさ
  7. 在庫数

固定ページをトップページに指定

トップページは「固定ページ機能」で作ります。

操作内容

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

固定ページでトップページを作成

適当なタイトルを入力し、「公開」をクリック↓

作成した固定ページを、サイトのトップページに指定します。

操作内容

設定」→「表示設定」をクリック。

ホームページの表示で「固定ページ」にチェックを入れて、ホームページに先程作成した「トップページ」を指定。

変更を保存」をクリックし設定を反映。

かんた

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

トップページの作成

Lightning G3の固定ページ機能は、WordPress標準のブロックエディターです。プログラムコードなしで直感的にページを作り込むことができます。

【トップページ】商品を表示させる方法

よくあるEC系のプラグインだと、決まったフォーマットに商品が表示される仕様のものが多いんですが、 WooCommerceは商品を好きな位置に配置できます。

トップページのエディター上で、「キリマンジャロ」カテゴリーに登録されている商品を表示させる方法を解説します。

操作内容

ブロックから「カテゴリー別商品」を選択。

キリマンジャロ」を選択し、「完了」をクリック。

以上の操作で、キリマンジャロカテゴリーの商品が表示されます。

右側のブロックオプションから表示させる内容と形式を選択できます。

詳細オプション

表示オプション

  • 商品名
  • 商品価格
  • レビュー評価
  • 買い物カゴに入れるボタン

【トップページ】背景に動画を表示させる方法

サンプルサイトのように、トップページに動画を埋め込む方法を解説します。

操作内容

カバーブロック」を挿入。

WooCommerceカバーブロックを挿入。

メディアライブラリ」をクリックし、動画を選択。

メディアライブラリから動画を選択。

以上の操作で動画ファイルの埋め込み完了です。

カバーブロックを選択し、右側に表示されるブロックオプションからフィルター効果などを選択できます。

カバーブロックのオプション

オプションの一例

  • オーバーレイの色
  • オーバーレイの透明度
  • カバーブロックの高さ
  • カバーブロック内の余白
  • クラス名の指定

動画を埋め込む時の注意点についてです。

埋め込む動画のファイルサイズに気を付けましょう。

動画のファイルサイズが大きすぎると、表示までの読み込みに時間がかかることがあります。あまりに読み込みに時間がかかるサイトだと、ユーザーはサイトから離脱する可能性が高くなります。

撮影したデータファイルが大きい場合は、解像度を落とすか、圧縮するなどしてファイルサイズを小さくしてから使いましょう。

アップロード前のひと手間

  • 解像度を落とす
  • フレームレートを落とす
  • 圧縮する
かんた

どんなに大きなファイルでも10MB以下にはしましょう。

下層ページの作成

下層ページは、商品以外のページのことです。例えば、ECサイト運営者の情報、個人情報の取り扱いといったページのことです。

下層ページの一例

  1. 運営者情報
  2. 個人情報の取り扱い
  3. お問い合わせ
  4. キャンセル・返品について
  5. 実店舗の紹介

下層ページは「固定ページ機能」で作ります。

かんた

エディター上から使いたい装飾を選ぶだけなので、操作はかなり簡単です。

全体レイアウトの設定

ヘッダーやメニューなど、サイトのレイアウトに関する設定です。

対象パーツ

  1. ヘッダーの設定
  2. フッターの設定
  3. サイドバーの設定

全体レイアウトは、管理画面上から設定できます。

かんた

それぞれ解説します!

ヘッダーの設定

Lightning G3のヘッダー要素

ヘッダーはサイトの最上部に表示されるパーツです。主に、次のような要素を表示させます。

ヘッダー用のパーツ

  1. ロゴ
  2. サブメニュー
  3. 電話番号
  4. 問い合わせページへのリンク
  5. グローバルナビゲーション

ヘッダー要素はLightning G3とEvergreenキット、ベクトルの推奨プラグインを有効化していればカスタマイザーから設定できるようになるので、テーマファイルの編集は必要ありません。

グローバルナビゲーションとサブメニューに表示するメニュー内の要素を除き、カスタマイザー内の「Lightningヘッダー設定」からアレンジできます。

Lightning G3のカスタマイザー

グローバルナビゲーションに表示させるメニューは、管理画面上にある「メニュー」から作成します。

作成したメニューは、位置を指定しましょう。ヘッダーに表示させる場合は、「Header Navigation」を選択。

その他の位置については次の表にまとめました。

メニューの位置

オプション説明
Header NavigationPCサイトのヘッダー
Footer Navigationフッター
Mobile Navigationスマホの開閉メニュー
Header Top NavigationPCサイトのサブニュー(※設定により位置が変わります)
Lightning G3のメニューの位置
ヘッダーの透過設定
Lightning G3のヘッダー透過設定

サンプルサイトのようにトップページのヘッダー部分を透明にする設定についてです。サンプルサイトは、ロゴや電話番号などのヘッダー部分の背景が透明になり、背景の画像の上に重なっています。

カスタマイザー内の「Lightning ヘッダー設定」で次の設定をしています。

操作内容

ヘッダーを透過を有効にする」にチェックを入れる。

透過時 ヘッダー透過度」と、「透過時 ヘッダー上部透過度」の青いボタンを右端に設定する。

公開」をクリックし設定を保存。

電話番号と営業時間の設定
ヘッダーの電話番号の設定

カスタマイザーの「Ex Unit設定」から電話番号と営業時間の表記を変更できます。

Lightning ヘッダー設定」ではありません。

このオプションはLightning推奨の「VK All in One Expansion Unit」プラグインを有効化している場合のみ利用できます。VK All in One Expansion Unitはベクトルのプラグインなので、Lightning G3との相性も良好です。

かんた

VK All in One Expansion Unitプラグインは無料です。

操作内容

Ex Unit設定」→「お問い合わせ情報」をクリック。

VK All in One Expansion Unitでヘッダーの設定をする

メッセージ」「電話番号」「営業時間」を入力する。

VK All in One Expansion Unitでヘッダーの電話番号設定をする

電話のアイコンはFont Awesomeです。初期設定されているもの以外を利用したい場合は、Font Awesomeの公式サイトから好きなものを選びコードを入力しましょう。

入力フォーマットは次の通りです。

フォーマット

fas fa-phone-square-alt

Font Awesomeのコードをコピーすると<i class=""></i>のマークアップが付きますが、この部分のコードは不要です。サンプルのフォーマット通りに入力しましょう。

公開」をクリックし、設定を保存。

フッターの設定

フッターは全ページ共通のパーツです。ページをスクロールしたさいに、一番最後に表示されるパーツの名称です。

フッターの背景とフォントの色は、カスタマイザーから設定できます。

操作内容

Lightningフッター設定」をクリック。

フッター背景色」「フッター文字色」をそれぞれ指定。

公開」をクリックし、設定を保存。

サンプルサイトのフッターでは、「このデモサイトです」と表示しています↓

Lightning G3のフッターパーツ

テキスト部分は、カスタマイザー上から設定できます。

操作内容

Lightningコピーライト設定」をクリック。

Lightningコピーライト設定

Lightning コピーライト設定」に、自由にテキストを入力。

入力フォームには改行の<br>コードも使えます。

公開」をクリックし、設定を保存。

コピーライト設定以外にもウィジェットで作成したパーツを表示させることも可能です。サンプルサイトでは、再利用ブロックで作成したパーツをフッター上部ウィジェットに表示させています。

サイドバーの設定

全体のレイアウトとしてサイドバーを表示させる1カラムのデザインと、サイドバーを表示させない1カラムの指定が可能です。サンプルサイトでは以下のようにページごとにレイアウトを変更しています。

サンプルサイトのレイアウト

ページレイアウト
トップページ1カラム
固定ページ2カラム
商品ページ2カラム
商品一覧ページ2カラム
サイドバーレイアウト

サイドバーに表示する要素はウィジェットからの指定です。

WooCommerceプラグイン有効時は「商品カゴ」「商品のカテゴリー一覧」「直近で閲覧した商品」などをウィジェット経由で表示できます。

ECサイトをオシャレに仕上げるコツ

ECサイトをオシャレに仕上げるコツ

せっかくECサイトを作るならオシャレに仕上げたいですよね!

サイト制作に慣れていない人向けに、ECサイトをオシャレに見せるポイントを紹介します。

【ポイント】キレイな写真を使う

商品が魅力的に見えるようキレイな写真を使うのは当たり前のようですが、これができていないECサイトをよく見かけます。

ダメな例

  • 写真が暗い
  • 鮮明に写っていない
  • 手ブレで写真がブレている
  • 商品に撮影者の影が映り込んでいる
  • 背景に余計なものが写り込んでいる
  • 高感度で撮影したノイズが目立つ

サイト訪問者は、商品を手にとって実物を確認することができません。サイト上の商品写真でイメージを膨らませて、購入するか決断します。

決断材料の写真のクオリティーが低いと、商品の質とは関係なく購入してもらえません。

高額な商品でもない限り、なかなかプロのカメラマンに商品撮影を外注するのは難しい場合もあります。

【ポイント】写真を整える

サイト全体を通して写真を整えましょう。

ポイント

  1. 写真の縦、横の比率
  2. 露出(明るさのことです)
  3. 色味
  4. 構図

商品の写真を整えるが基本ですが、固定ページなどで使う画像についてもある程度色味と明るさを一定になるよう調整するとサイトの統一感が増します。

ECサイト向けのWooCommerce独自カスタマイズ

ECサイト向けの独自カスタマイズ
  1. 商品を複数条件で絞り込む方法

【独自カスタマイズ】商品を複数条件で絞り込む方法

WooCommerceで登録した商品を複数条件で検索する「絞り込み検索機能」についてです。

WooCommerceにはカテゴリーやタグで商品を一覧表示させる機能が付いています。カテゴリーやタグ以外の分類オプションを追加して、絞り込み検索に含めるにはカスタマイズが必要です。

次のサンプルサイトは有料プラグインを販売するポータルサイトをイメージしています。

サンプルサイト

サンプルサイトでは、「種類」や「ライセンス」という分類を追加して、プラグインを絞り込み検索できるようにしました。 種類やライセンスはWooCommerceの分類機能ではありません。

独自に追加し、複数条件で検索できるようカスタマイズしています。

かんた

商品の絞り込みは次の記事で解説しています。

【独自カスタマイズ】グロナビにメガメニュー

グロナビにカーソルを合わせたタイミングでサブメニューを展開するメガメニューを実装しました。

画像付きでリンクが広がるのでオシャレですよね!

かんた

メガメニューの導入について、別記事を用意する予定です。

まとめ

Lightning G3とEvergeenキットを使ったECサイトのサンプルと作り方を紹介しました。

無料プラグインのWooCommerceを使うと、かなり簡単にECサイトを作ることができます。今回紹介したサンプルサイトは、プログラムコードをガッツリ編集するようなことはしていませんが、かなり満足な出来栄えです。

かんた

サンプルサイトのようにLightning G3でECサイトを作るのに必要なのは次の通りです。

必須の構成

項目価格公式サイト
Lightning G39,900円 ダウンロード
WooCommerce無料 ダウンロード
Evergreenキット無料 ダウンロード

Lightning G3のみ有料で、WooCommerceとEvergreenキットは無料で利用できます。

Evergreenキットは期間限定で無料です。

WordPressでサイトを作る場合には、WordPress対応のレンタルサーバー契約が必要になります。一般的なレンタルサーバーは、月額500円~1,000円程度です。

有効化するテーマによっては、相性のよくないレンタルサーバーがあるので選ぶさいは公式サイトをチェックしましょう。

レンタルサーバー会社

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