初心者WordPressテーマLightning G3が気になる。
美容系のサロンって作れるの？
どんなデザインのサイトがあるか、見てみたい…
そんな疑問に答えます。
Lightning G3を購入して、美容系サイトのサンプルを作ってみました。出来上がったサイトデザインと、Lightning G3の機能を紹介します。
【 Lightning G3 】美容系デモサイト
Lightning G3を使って、美容系のサンプルサイトを作ってみました。
【基礎知識】Lightning G3 Pro Unitとは？
Lightningは無料版、有料版の「Pro」、「G3」があります。
まずは、今回利用したLightning G3の基礎知識です。
最新版「Lightning G3」とは？
Lightning G3はざっくり言って、Lightningシリーズの最新バージョン。無料版やProよりレベルが上の上位バージョン的な存在です。
Lightning G3は独立したテーマではありません。無料版のLightningを有効化したサイトで、Lightning G3 Pro Unit プラグインを有効化するとG3になる仕組みです。
| Lightning G3の基本情報 | |
|---|---|
| プロダクト名 | Lightning G3 Pro Unit |
| 価格 | 9,900円（税込み価格） |
| 開発会社 | 株式会社ベクトル |
| ライセンス | GPL（複数サイトで利用可能） |
| サポートあり | あり |
| 公式サイト | Lightning G3をダウンロード |
かんたVektor Passportの料金システムは次の記事で解説しています。
【機能】Lightning G3はこんなことができる！
美容系サイトをLightning G3で作ってみましたが、「この機能はなかなか便利」と感じたものを紹介します。
おすすめ機能
- 高機能なメインビジュアル
- 高機能なスライダー
- 豊富なアイコン
- ヘッダーに電話番号が表示できる
- 余白の調整オプション
かんたそれぞれの機能を紹介します。
動画・スライドショーをサポートしているメインビジュアル
まずはサイトの顔となるメインビジュアル部分についてです。メインビジュアルはトップページの上部に表示されるパーツです。Lightning G3のメインビジュアルのオプションは、有料だけあってかなり充実しています。
メインビジュアルの設定オプションについて
以下がLightning G3のベースとなるオプションです。
オプション
- 表示しない
- 静止画像
- 動画
ちなみにこれは、あくまでベース。それ以外にも下記サンプルサイトのように、動画と静止画像を組み合わせたスライダーを設置できます。
サンプル
1枚のスライダー部分に、複数の要素を盛り組むといった作り込みもサポートしていて、サンプルサイトのように「画像とテキスト」を配置した組み合わせを1枚のスライドにしています。
かんたスライド内の組み合わせは自由自在。
ヘッダー部分の透過をサポート
「透過」＝「透明」って意味です。
ヘッダーのロゴ、メニューの背景を透明に設定して、メインビジュアル上にのせることができます。
オシャレポイント高いですよね？
美容系のサイトは印象がとっても大事。
高機能な「スライダー」
Lightning G3にはスライダー機能があります。
じつはこのスライダー、メインビジュアル以外にもコンテンツエリアで利用できる優れものです。美容サロンなんかだと、「ギャラリー」「お客様の声」といったコンテンツに使うとオシャレ度アップです。
サンプルサイトのお客様の声は、このスライダー機能で作成しました。
お客様の声スライダー内の中身
- お客様の顔写真
- タイトル
- コメント
- お名前
- レビューの星印
スライドは、表示スピードや切り替わりのエフェクト設定が可能。
かんたイメージにあったチューニングがしやすい仕様です。
無料で豊富なアイコンが使える
Lightning G3は無料アイコン「Font Awesome」が簡単に使えます。
Font Awesomeは誰でも無料で使えるアイコンを提供しているサービスなんですが、Lightning G3ではこのFont Awesomeが簡単に利用できます。
一般的なテーマでFont Awesomeを使う場合、事前の設定作業が必要で、Font Awesome専用のコードを貼り付けるといった手順になるので、ちょっと面倒だったりします。
Lightning G3の場合、事前の設定作業はありません。管理画面上からアイコンを選べるようになっています。しかも、サイズや色を管理画面から調整できるオプション付きです。
かんたコードの編集なしでアイコンの色・サイズを自在に調整できるでかなり楽ちんです。
ヘッダーに電話番号を表示できる
Lightning G3はヘッダーに電話番号、営業時間を表示できる機能がついています。
意外かもしれませんが、有料テーマだとけっこう珍しい機能。コーポレートサイト定番のデザインパーツだと思うんですが、なかなかないですよね？
ヘッダーに電話番号を設定するオプションがないテーマだと、テンプレートファイルのプログラムコードを編集しないといけません。
かんたテンプレートファイルの編集作業は、けっこう面倒。
ヘッダーに表示できる要素
- キャッチフレーズ
- 電話番号
- 電話のアイコン
- 営業時間
余白の調整オプションが豊富
美容系のサイト作りで高級感を演出する場合、「余白」の使い方が重要です。
Lightning G3は余白の調整オプションが、僕が使ったことのある有料テーマの中で一番実用的だと思いました。
例えば、「レスポンシブスペーサー」。
WordPressには、余白を調整するスペーサーという機能があります。「ここの余白は100px」といった感じで設置すると、指定した数値分だけ余白ができる機能です。
Lightning G3で使えるレスポンシブスペーサーは、標準スペーサーの上位互換的な存在です。レスポンシブスペーサーはPCの場合120px、タブレットの場合は、80px、スマホは40pxとデバイスごと余白を調整できるオプション付きです。
スペーサーの違い
| スペーサー | レスポンシブスペーサー | |
|---|---|---|
| PC | 全部共通の余白 | PC用に設定可能 |
| タブレット | 全部共通の余白 | タブレット用に設定可能 |
| スマホ | 全部共通の余白 | スマホ用に設定可能 |
PCで見た時にちょうど良い余白サイズは、解像度の小さいスマホだとムダに大きな余白になりがちです。
かんたレスポンシブスペーサーでデバイスごとの余白を指定する機能はかなり実用的。
ここはちょっと気になったLightning G3の「デメリット」
Lightning G3で美容系サイトを作っていて、1点だけ気になったデメリットを紹介します。
【スライダー】表示枚数をデバイスごとに設定できない？
Lightning G3のスライダーはデバイスごとに表示枚数を変更するオプションがありません。これがかなり気になります。
やりたいけどできない….
- PCでは画面に3枚の画像を表示させる。
- スマホでは画面に1つの画像のみ表示させる
PCは表示するエリアが広いので、3～5枚程度の画像を一度に表示させるのはわりとよくあるデザインです。
スマホの場合は表示するエリアが小さいので、5枚同時となると画像がどうしても小さくなってしまうので1～2枚程度にするといった構成ができません。
かんたデバイスごとの出し分けができない？
一応解決方法は紹介されている
デバイスごとに表示する画像サイズを変更する方法が公式サイトに掲載されていました。
スライダーを2つ作って、1つをPCサイト用、もう1つをスマホ用に作る方法です。少しまわりくどいやり方だとは思いましたが、この方法で簡単に解決しました。
かんた公式サイトの情報によれば、そのうち改善する予定とのことです。
まとめ
WordPressテーマ「Lightning G3」で作った美容サイトを紹介しました。
Lightning G3を使ってみた感想ですが、有料だけあってかなり高機能なテーマだと感じました。特に、メインビジュアル部分の機能が豊富でオシャレなサイトが作りやすいと実感。
ほとんどコードを編集しなくも、思い通りになるはやっぱり有料テーマの特徴ですね。
かんたぜひLightning G3でのサイト制作にチャレンジしてみてください！
