初心者Lightning G3でECサイトって作れるの？
どんなデザインになるかサンプルを見たい…
作り方を教えて欲しい…
そんな悩みを解決します。
Lightningの有料バージョンLightning G3とEvergreenキットを使ったサンプルサイトを作ってみました。EC系の機能は、無料プラグインのWooCommerceです。
Lightning G3で作ったECサイトのサンプルを紹介します
僕がLightning G3を使って作成さいたECサイトを紹介します！
サンプルサイトはコーヒー豆を販売している事業者をイメージしました。コーヒー豆、コーヒーミルなどの関連器具、紅茶、スイーツなどを販売しているサイトです。
サンプルサイト
サンプルサイトは決済機能を無効にしています。うっかりクレジットカードなどで決済されてしまうと、返金処理が大変だからです。
かんたサンプルで作成したECサイトは、コーヒー豆を販売する架空のサイトです。
サンプルサイトの構成
サンプルサイト制作に使ったテーマ、プラグインについてです。
構成
上記以外にもデザインを調整するプラグインを使っていますが、ECに関連する機能だとこんなもんです。
サンプルサイトでは有効化しているテーマやプラグインファイルは一切編集していません。Lightning G3でこんなサイトが作れると思ってください（色味などをCSSで多少アレンジしています）。
WooCommerceは次の機能を標準搭載しています。
機能の一例
- ショッピングカート
- クーポン割引システム
- カテゴリーごとの商品一覧表示
- デジタルデータのダウンロード販売
- レビュー機能
- 会員機能
- 売上レポート機能
かんた無料で使えるのが信じられないぐらいです。
Vektor Passport
| 項目 | 価格 | 公式サイト |
|---|---|---|
| Vektor Passport | 9,900円 | ダウンロード |
サンプルサイトで有効化しているテーマはLightning G3 Pro Unitです。WordPressでコーポレートサイト制作するさいの定番「Lightning」の拡張プラグインです。
僕は無料と有料バージョンの両方使った経験がありますが、機能には大きな差を感じます。例えば、設定できるオプション自体の数が全然違います。当然ながら有料バージョンのほうが選択オプションが多くなっています。
無料と有料バージョンの違い
- レイアウト周りの調整機能
- ページをオシャレに仕上げる装飾ブロック
- サポート
かんた有料と無料の差は大きいと感じました。
WooCommerce
| 項目 | 価格 | 公式サイト |
|---|---|---|
| WooCommerce | 無料 | ダウンロード |
WooCommerceは、WordPress専用ECサイト制作用プラグインです。
EC系のプラグインはけっこう色んな種類がありますが、 WooCommerceのダウンロード数は500万を超えています。世界的に人気のプラグインです。
海外製の無料プラグインは日本語に対応していないものが多いんですが、 WooCommerceは日本語にしっかり対応しています。
日本の会社が開発している有料テーマとの相性が微妙だったりしますが、Lightning G3では利用できました。ちなみにLightning G3を販売している株式会社ベクトルのネットショップもWooCommerceで作成されています。
かんたテーマ開発会社が自分の会社に導入しているって安心感がありますよね？
Evergreenキット
| 項目 | 価格 | 公式サイト |
|---|---|---|
| Evergreenキット | 無料 | ダウンロード |
EvergreenキットはLightning G3用のデザイン拡張プラグインです。有効化すると、メインビジュアル部分にフルワイドの動画を設定する機能や、オシャレ度の高いブロークングリッドが使えるようになります。
Evergreenキットは通常9,900円で販売している商品ですが、Lightning G3ユーザーであれば期間限定で無料でダウンロードできます。
かんた使わなくてもダウンロードしておくのがおすすめです。
Lightning G3とEvergreenキットでECサイトを作ってみた感想
Lightning G3＋Evergreenキット、WooCommerceでECサイトを作ってみた感想をシェアします。
ざっくりした感想は次の通りです。
感想
- プログラムコードの知識は不要
- 商品を好きな場所に配置できる
かんたそれぞれを詳しく紹介します。
プログラムの知識は不要
| ECサイトの作りやすさ | 4.5 / 5 |
WooCommereceにカートや商品管理機能が付いているので、商品の登録作業にプログラムのスキルはいりません。
PHPなどテンプレートファイルのプログラムコードを編集するような作業はありません。
どのWordPressテーマでも同じことですが、アイコンなどの色合いを変更する場合、場所によっては管理画面から調整できません。
かんたそういったカスタマイズをするにはネットで参考記事を探してCSSをコピペできるスキルが必要です。
こんなに簡単にECサイトが作れるの？
サンプルサイトではテーマファイルのプロラムコードを編集していません。それでも、かなり満足度の高いデザインに仕上がりました。
色やフォントサイズの大きさを調整するために、CSSを追加した程度です。商品ページ、カート、決済機能はWooCommerceの標準機能だけで実装しています。
かんたプラグインのファイルにも一切手を加えていません。
商品を好きな位置に配置できる
| デザインの自由度 | 4.5 / 5 |
商品はページの好きな位置に表示できる！
かんた当たり前のようですが、けっこう感動したポイントです。
WooCommerceプラグイン以外でECサイトを作った経験があるんですが、その時使ったプラグインはデザインの自由度が低く、商品の表示場所をアレンジするにはプログラムコードをを編集するスキルが必須でした。
Lightning G3とWooCommerceプラグインの組み合わせの場合、ブロックエディターでページを編集できます。ページの好きな場所に、好きな商品を表示できるのでデザインにこだわったECサイトを作れました↓
サンプルサイトのトップページは固定ページで作成しています。商品の配置だけでなくスライドショーや動画を入れたりするのもブロックエディター上での作業です。
かんたノーコードで自分好みのデザインを実現できました。
Lightning G3＋WooCommerceでのECサイトの作り方
Lightning G3とWooCommerceプラグインを使ったECサイト制作のざっくりした流れを紹介します。
サンプルサイトで使った以下のテーマ、プラグインを使います。
レンタルサーバーを用意しよう
Lightning G3でECサイトを作るにはWordPress対応のレンタルサーバーが必要です。
WordPressを利用できるレンタルサーバー事業者は国内だけでも、けっこうな数あります。一般的なレンタルサーバーの月額料金は、どの会社もだいたい500円～1,000円程度です。
代表的なレンタルサーバー会社
あまりにも安すぎるレンタルサーバーを選ぶさいは注意が必要です。スペック的に動作が遅くなるものがあります。契約後にレンタルサーバーを変更するのは、ものすごく面倒です。
かんたネームサーバーの切り替えやデータの引っ越しなど、スキルと専門知識が必要になります。
ちなみにサンプルサイトはエックスサーバーの「スタンダードプラン」を使っています。料金は月額ザックリ1,000円。仕事がら色んなレンタルサーバー会社を利用しましたが、個人的に一番良いサービスという印象を持っています。
エックスサーバーはレンタルサーバーの申し込みと同時にWordPressのインストール作業も無料で代行してくれます。初心者の方でWordPressを初めて扱う人はどうしてもインストールにつまずくので、こういった代行サービスを利用するのが無難です。
公式 エックスサーバー「スタンダードプラン」の申し込みページ
テーマとプラグインのインストール作業
WordPressの管理画面上から、Lightning G3、Evergreen、WooCommerceをインストールするステップです。
テーマのインストール作業
「外観」→「テーマ」へ移動し「新規追加」をクリック。
「Lightning」と入力。
候補の中からLightningを選択し、「インストール」をクリック。
「有効化」をクリック。
かんた以上でこのステップの作業は終了です。
G3 Pro Unit＋Evergreenのインストール
「プラグイン」→「新規追加」をクリック。
パソコン上にあるlightning-g3-pro-unit.zipを指定して、「今すぐインストール」をクリック。
プラグインを有効化しましょう。
同様の手順でEvergreenをインストールし有効化しましょう。
サンプルサイトでも使っていますが、以下のプラグインも合わせてインストールするのがおすすめです。
おすすめプラグイン
- VK All in One Expansion Unit
- VK Block Patterns
- VK Blocks Pro
- VK Grid Column Card Block
かんたおすすめプラグインは全てLightning開発会社のものです。
WooCommerceの設定
「支払い方法」「通貨」「税率」「配送」といったECの基本設定をするステップです。
「WooCommerce」をクリック。
設定ウィザートが表示されます。
案内に従い選択していく流れです。
設定した内容は後から修正できます。
商品の登録作業
ECサイトで販売する商品の登録作業です。
「商品」→「新規追加」をクリック。
商品の登録画面は入力フォームになっています。各項目を入力しましょう。
商品登録時に入力する情報
- 商品名
- 価格
- 商品のイメージ画像
- 商品カテゴリー
- 商品タグ
- 商品の大きさ
- 在庫数
固定ページをトップページに指定
トップページは「固定ページ機能」で作ります。
「固定ページ」→「新規追加」をクリック。
適当なタイトルを入力し、「公開」をクリック↓
作成した固定ページを、サイトのトップページに指定します。
「設定」→「表示設定」をクリック。
ホームページの表示で「固定ページ」にチェックを入れて、ホームページに先程作成した「トップページ」を指定。
「変更を保存」をクリックし設定を反映。
かんた以上でこのステップの作業は終了です。
トップページの作成
Lightning G3の固定ページ機能は、WordPress標準のブロックエディターです。プログラムコードなしで直感的にページを作り込むことができます。
【トップページ】商品を表示させる方法
よくあるEC系のプラグインだと、決まったフォーマットに商品が表示される仕様のものが多いんですが、 WooCommerceは商品を好きな位置に配置できます。
トップページのエディター上で、「キリマンジャロ」カテゴリーに登録されている商品を表示させる方法を解説します。
ブロックから「カテゴリー別商品」を選択。
「キリマンジャロ」を選択し、「完了」をクリック。
以上の操作で、キリマンジャロカテゴリーの商品が表示されます。
右側のブロックオプションから表示させる内容と形式を選択できます。
表示オプション
- 商品名
- 商品価格
- レビュー評価
- 買い物カゴに入れるボタン
【トップページ】背景に動画を表示させる方法
サンプルサイトのように、トップページに動画を埋め込む方法を解説します。
「カバーブロック」を挿入。
「メディアライブラリ」をクリックし、動画を選択。
以上の操作で動画ファイルの埋め込み完了です。
カバーブロックを選択し、右側に表示されるブロックオプションからフィルター効果などを選択できます。
オプションの一例
- オーバーレイの色
- オーバーレイの透明度
- カバーブロックの高さ
- カバーブロック内の余白
- クラス名の指定
動画を埋め込む時の注意点についてです。
埋め込む動画のファイルサイズに気を付けましょう。
動画のファイルサイズが大きすぎると、表示までの読み込みに時間がかかることがあります。あまりに読み込みに時間がかかるサイトだと、ユーザーはサイトから離脱する可能性が高くなります。
撮影したデータファイルが大きい場合は、解像度を落とすか、圧縮するなどしてファイルサイズを小さくしてから使いましょう。
アップロード前のひと手間
- 解像度を落とす
- フレームレートを落とす
- 圧縮する
かんたどんなに大きなファイルでも10MB以下にはしましょう。
下層ページの作成
下層ページは、商品以外のページのことです。例えば、ECサイト運営者の情報、個人情報の取り扱いといったページのことです。
下層ページの一例
- 運営者情報
- 個人情報の取り扱い
- お問い合わせ
- キャンセル・返品について
- 実店舗の紹介
下層ページは「固定ページ機能」で作ります。
かんたエディター上から使いたい装飾を選ぶだけなので、操作はかなり簡単です。
全体レイアウトの設定
ヘッダーやメニューなど、サイトのレイアウトに関する設定です。
対象パーツ
- ヘッダーの設定
- フッターの設定
- サイドバーの設定
全体レイアウトは、管理画面上から設定できます。
かんたそれぞれ解説します！
ヘッダーの設定
ヘッダーはサイトの最上部に表示されるパーツです。主に、次のような要素を表示させます。
ヘッダー用のパーツ
- ロゴ
- サブメニュー
- 電話番号
- 問い合わせページへのリンク
- グローバルナビゲーション
ヘッダー要素はLightning G3とEvergreenキット、ベクトルの推奨プラグインを有効化していればカスタマイザーから設定できるようになるので、テーマファイルの編集は必要ありません。
グローバルナビゲーションとサブメニューに表示するメニュー内の要素を除き、カスタマイザー内の「Lightningヘッダー設定」からアレンジできます。
グローバルナビゲーションに表示させるメニューは、管理画面上にある「メニュー」から作成します。
作成したメニューは、位置を指定しましょう。ヘッダーに表示させる場合は、「Header Navigation」を選択。
その他の位置については次の表にまとめました。
メニューの位置
| オプション | 説明 |
|---|---|
| Header Navigation | PCサイトのヘッダー |
| Footer Navigation | フッター |
| Mobile Navigation | スマホの開閉メニュー |
| Header Top Navigation | PCサイトのサブニュー（※設定により位置が変わります） |
ヘッダーの透過設定
サンプルサイトのようにトップページのヘッダー部分を透明にする設定についてです。サンプルサイトは、ロゴや電話番号などのヘッダー部分の背景が透明になり、背景の画像の上に重なっています。
カスタマイザー内の「Lightning ヘッダー設定」で次の設定をしています。
「ヘッダーを透過を有効にする」にチェックを入れる。
「透過時 ヘッダー透過度」と、「透過時 ヘッダー上部透過度」の青いボタンを右端に設定する。
「公開」をクリックし設定を保存。
電話番号と営業時間の設定
カスタマイザーの「Ex Unit設定」から電話番号と営業時間の表記を変更できます。
このオプションはLightning推奨の「VK All in One Expansion Unit」プラグインを有効化している場合のみ利用できます。VK All in One Expansion Unitはベクトルのプラグインなので、Lightning G3との相性も良好です。
かんたVK All in One Expansion Unitプラグインは無料です。
「Ex Unit設定」→「お問い合わせ情報」をクリック。
「メッセージ」「電話番号」「営業時間」を入力する。
電話のアイコンはFont Awesomeです。初期設定されているもの以外を利用したい場合は、Font Awesomeの公式サイトから好きなものを選びコードを入力しましょう。
入力フォーマットは次の通りです。
フォーマット
fas fa-phone-square-altFont Awesomeのコードをコピーすると<i class=""></i>のマークアップが付きますが、この部分のコードは不要です。サンプルのフォーマット通りに入力しましょう。
「公開」をクリックし、設定を保存。
フッターの設定
フッターは全ページ共通のパーツです。ページをスクロールしたさいに、一番最後に表示されるパーツの名称です。
フッターの背景とフォントの色は、カスタマイザーから設定できます。
「Lightningフッター設定」をクリック。
「フッター背景色」「フッター文字色」をそれぞれ指定。
「公開」をクリックし、設定を保存。
サンプルサイトのフッターでは、「このデモサイトです」と表示しています↓
テキスト部分は、カスタマイザー上から設定できます。
「Lightningコピーライト設定」をクリック。
「Lightning コピーライト設定」に、自由にテキストを入力。
入力フォームには改行の<br>コードも使えます。
「公開」をクリックし、設定を保存。
コピーライト設定以外にもウィジェットで作成したパーツを表示させることも可能です。サンプルサイトでは、再利用ブロックで作成したパーツをフッター上部ウィジェットに表示させています。
サイドバーの設定
全体のレイアウトとしてサイドバーを表示させる1カラムのデザインと、サイドバーを表示させない1カラムの指定が可能です。サンプルサイトでは以下のようにページごとにレイアウトを変更しています。
サンプルサイトのレイアウト
| ページ | レイアウト |
|---|---|
| トップページ | 1カラム |
| 固定ページ | 2カラム |
| 商品ページ | 2カラム |
| 商品一覧ページ | 2カラム |
サイドバーに表示する要素はウィジェットからの指定です。
WooCommerceプラグイン有効時は「商品カゴ」「商品のカテゴリー一覧」「直近で閲覧した商品」などをウィジェット経由で表示できます。
ECサイトをオシャレに仕上げるコツ
せっかくECサイトを作るならオシャレに仕上げたいですよね!
サイト制作に慣れていない人向けに、ECサイトをオシャレに見せるポイントを紹介します。
【ポイント】キレイな写真を使う
商品が魅力的に見えるようキレイな写真を使うのは当たり前のようですが、これができていないECサイトをよく見かけます。
ダメな例
- 写真が暗い
- 鮮明に写っていない
- 手ブレで写真がブレている
- 商品に撮影者の影が映り込んでいる
- 背景に余計なものが写り込んでいる
- 高感度で撮影したノイズが目立つ
サイト訪問者は、商品を手にとって実物を確認することができません。サイト上の商品写真でイメージを膨らませて、購入するか決断します。
決断材料の写真のクオリティーが低いと、商品の質とは関係なく購入してもらえません。
高額な商品でもない限り、なかなかプロのカメラマンに商品撮影を外注するのは難しい場合もあります。
【ポイント】写真を整える
サイト全体を通して写真を整えましょう。
ポイント
- 写真の縦、横の比率
- 露出（明るさのことです）
- 色味
- 構図
商品の写真を整えるが基本ですが、固定ページなどで使う画像についてもある程度色味と明るさを一定になるよう調整するとサイトの統一感が増します。
ECサイト向けのWooCommerce独自カスタマイズ
- 商品を複数条件で絞り込む方法
【独自カスタマイズ】商品を複数条件で絞り込む方法
WooCommerceで登録した商品を複数条件で検索する「絞り込み検索機能」についてです。
WooCommerceにはカテゴリーやタグで商品を一覧表示させる機能が付いています。カテゴリーやタグ以外の分類オプションを追加して、絞り込み検索に含めるにはカスタマイズが必要です。
次のサンプルサイトは有料プラグインを販売するポータルサイトをイメージしています。
サンプルサイト
サンプルサイトでは、「種類」や「ライセンス」という分類を追加して、プラグインを絞り込み検索できるようにしました。 種類やライセンスはWooCommerceの分類機能ではありません。
独自に追加し、複数条件で検索できるようカスタマイズしています。
かんた商品の絞り込みは次の記事で解説しています。
【独自カスタマイズ】グロナビにメガメニュー
グロナビにカーソルを合わせたタイミングでサブメニューを展開するメガメニューを実装しました。
画像付きでリンクが広がるのでオシャレですよね！
かんたメガメニューの導入について、別記事を用意する予定です。
まとめ
Lightning G3とEvergeenキットを使ったECサイトのサンプルと作り方を紹介しました。
無料プラグインのWooCommerceを使うと、かなり簡単にECサイトを作ることができます。今回紹介したサンプルサイトは、プログラムコードをガッツリ編集するようなことはしていませんが、かなり満足な出来栄えです。
かんたサンプルサイトのようにLightning G3でECサイトを作るのに必要なのは次の通りです。
必須の構成
Lightning G3のみ有料で、WooCommerceとEvergreenキットは無料で利用できます。
WordPressでサイトを作る場合には、WordPress対応のレンタルサーバー契約が必要になります。一般的なレンタルサーバーは、月額500円～1,000円程度です。
有効化するテーマによっては、相性のよくないレンタルサーバーがあるので選ぶさいは公式サイトをチェックしましょう。
レンタルサーバー会社
