【Lightning G3】美容系サイト(サロン・スパ・マッサージ)を作ったサンプルサイト

JINからJIN:Rの移行作業について
初心者

WordPressテーマLightning G3が気になる。
美容系のサロンって作れるの?
どんなデザインのサイトがあるか、見てみたい…

そんな疑問に答えます。

Lightning G3を購入して、美容系サイトのサンプルを作ってみました。

出来上がったサイトデザインと、Lightning G3の機能を紹介します。

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

【 Lightning G3 】美容系デモサイト

サンプルサイト

Lightning G3を使って、美容系のサンプルサイトを作ってみました。

【基礎知識】Lightning G3 Pro Unitとは?

【基礎知識】Lightning G3 Pro Unitとは?

Lightningは無料版、有料版の「Pro」、「G3」があります。

まずは、今回利用したLightning G3の基礎知識です。

最新版「Lightning G3」とは?

Lightning G3はざっくり言って、Lightningシリーズの最新バージョン。無料版やProよりレベルが上のテーマです。

Lightning G3の基本情報
プロダクト名Lightning G3 Pro Unit 
価格9,900円(税込み価格)
開発会社株式会社ベクトル
ライセンスGPL(複数サイトで利用可能)
サポートありあり
公式サイト Lightning G3をダウンロード
Lightning G3の基礎知識

【機能】Lightning G3はこんなことができる!

【機能】Lightning G3はこんなことができる!

美容系サイトをLightning G3で作ってみましたが、「この機能はなかなか便利」と感じたものを紹介します。

おすすめ機能

  1. 高機能なメインビジュアル
  2. 高機能なスライダー
  3. 豊富なアイコン
  4. ヘッダーに電話番号が表示できる
  5. 余白の調整オプション
かんた

それぞれの機能を紹介します。

動画・スライドショーをサポートしているメインビジュアル

動画・スライドショーをサポートしているメインビジュアル

まずはサイトの顔となるメインビジュアル部分についてです。メインビジュアルはトップページの上部に表示されるパーツです。Lightning G3のメインビジュアルのオプションは、有料だけあってかなり充実しています。

メインビジュアルの設定オプションについて

以下がLightning G3のベースとなるオプションです。

オプション

  1. 表示しない
  2. 静止画像
  3. 動画

ちなみにこれは、あくまでベース。それ以外にも下記サンプルサイトのように、動画と静止画像を組み合わせたスライダーを設置できます。

サンプル

1枚のスライダー部分に、複数の要素を盛り組むといった作り込みもサポートしていて、サンプルサイトのように「画像とテキスト」を配置した組み合わせを1枚のスライドにしています。

かんた

スライド内の組み合わせは自由自在。

ヘッダー部分の透過をサポート

「透過」=「透明」って意味です。

ヘッダーのロゴ、メニューの背景を透明に設定して、メインビジュアル上にのせることができます。

オシャレポイント高いですよね?

美容系のサイトは印象がとっても大事。

高機能な「スライダー」

お客様の声をスライダーで作成したサンプル
お客様の声をスライダーで作成したサンプル

Lightning G3にはスライダー機能があります。

じつはこのスライダー、メインビジュアル以外にもコンテンツエリアで利用できる優れものです。美容サロンなんかだと、「ギャラリー」「お客様の声」といったコンテンツに使うとオシャレ度アップです。

サンプルサイトのお客様の声は、このスライダー機能で作成しました。

お客様の声スライダー内の中身

  1. お客様の顔写真
  2. タイトル
  3. コメント
  4. お名前
  5. レビューの星印

スライドは、表示スピードや切り替わりのエフェクト設定が可能。

かんた

イメージにあったチューニングがしやすい仕様です。

無料で豊富なアイコンが使える

無料で豊富なアイコンが使える
無料で豊富なアイコンが使える

Lightning G3は無料アイコン「Font Awesome」が簡単に使えます。

Font Awesomeは誰でも無料で使えるアイコンを提供しているサービスなんですが、Lightning G3ではこのFont Awesomeが簡単に利用できます。

一般的なテーマでFont Awesomeを使う場合、事前の設定作業が必要で、Font Awesome専用のコードを貼り付けるといった手順になるので、ちょっと面倒だったりします。

Lightning G3の場合、事前の設定作業はありません。管理画面上からアイコンを選べるようになっています。しかも、サイズや色を管理画面から調整できるオプション付きです。

 Lightning G3でFont Awesomeを選択する画面
Lightning G3でFont Awesomeを選択する画面
かんた

コードの編集なしでアイコンの色・サイズを自在に調整できるでかなり楽ちんです。

ヘッダーに電話番号を表示できる

ヘッダーに電話番号を表示できる
ヘッダーに電話番号を表示できる

Lightning G3はヘッダーに電話番号、営業時間を表示できる機能がついています。

意外かもしれませんが、有料テーマだとけっこう珍しい機能。コーポレートサイト定番のデザインパーツだと思うんですが、なかなかないですよね?

ヘッダーに電話番号を設定するオプションがないテーマだと、テンプレートファイルのプログラムコードを編集しないといけません。

かんた

テンプレートファイルの編集作業は、けっこう面倒。

ヘッダーに表示できる要素

  1. キャッチフレーズ
  2. 電話番号
  3. 電話のアイコン
  4. 営業時間

余白の調整オプションが豊富

美容系のサイト作りで高級感を演出する場合、「余白」の使い方が重要です。

Lightning G3は余白の調整オプションが、僕が使ったことのある有料テーマの中で一番実用的だと思いました。

例えば、「レスポンシブスペーサー」。

WordPressには、余白を調整するスペーサーという機能があります。「ここの余白は100px」といった感じで設置すると、指定した数値分だけ余白ができる機能です。

Lightning G3で使えるレスポンシブスペーサーは、標準スペーサーの上位互換的な存在です。レスポンシブスペーサーはPCの場合120px、タブレットの場合は、80px、スマホは40pxとデバイスごと余白を調整できるオプション付きです。

スペーサーの違い

スペーサーレスポンシブスペーサー
PC全部共通の余白PC用に設定可能
タブレット 全部共通の余白 タブレット用に設定可能
スマホ 全部共通の余白 スマホ用に設定可能
スペーサーとレスポンシブスペーサーの違い

PCで見た時にちょうど良い余白サイズは、解像度の小さいスマホだとムダに大きな余白になりがちです。

かんた

レスポンシブスペーサーでデバイスごとの余白を指定する機能はかなり実用的。

ここはちょっと気になったLightning G3の「デメリット」

ここはちょっと気になった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でのサイト制作にチャレンジしてみてください!

公式 WordPresテーマ「 Lightning G3 Pro Unit」

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