直感的操作だけでサロン系の美しいサイトが作成できるWordPressテーマ「LOTUS」

2016

10.6

2016年10月04日にTCD39作目となる、エステサロン、ネイル、スパ、ヨガ向けの公式サイトに最適な、至高の美とフェミニンを兼ね備えた女性向けWordPressテーマ「LOTUS」(ロータス)を発売しました。

TCDテーマの大きな特徴は、たくさんのテーマをリリースし続けているにも関わらず、制作工程が機械的になることはなく、どのテーマも仕様書の段階から練り込みしっかりと人の手で作っているということです。今回の「LOTUS」(ロータス)はまさにそれを結集させた開発となりました。よければそのこだわりポイントを押さえましたのでご覧ください。

lotus_980_400

デザインにかける想い

「LOTUS」(ロータス)はスパやエステサロン向けのテーマということで、女性的で優しい色合い、手触りでいうと「ふんわり柔らかい感じ」ということをイメージに開発がされています。それを表現しているのが配色はもちろんですが、スクロールに応じてふわっと浮き上がるように現れるエフェクトホバーエフェクトのイージング感であったり、半透明のメニューバーです。

美し過ぎるエフェクト

こちらはデモサイトのトップページです。LOTUSでは、ラグジュアリーで上質なサロンをイメージして作成されていますが、このホバー時のエフェクトは思わず魅入ってしまうほど、ユーザーを惹き付けます。よければ、まずはサイトをご覧下さい。
lotus

ロールオーバーアクション

続いての注目ポイントはロールオーバーアクションです。デモサイトでは、画像の上にマウスを置くと画像が拡大される仕様になっています。

lotus01

こちらはテーマオプションから変更も可能で、拡大率、アニメーションの変更(フェードやスライド)、透過率や背景色の設定がクリック一つで変更可能となっています。

TCD開発の使命と思っているのはこのテーマオプションの充実です。知識やスキルに関わらずお客様の「ここが変えられたらいいのに」を叶えること、ストレス無く各種設定が行えることをとことん考え、「閲覧者にも運営者にもどちらにも優しい設計」を極めることに力をいれています。このロールオーバーアクションの変更はたったここだけの設定で実装が可能です。

lotus02

スライド設定時
lotus01slid

フェード設定時
lotus01hover

固定ページテンプレート

固定ページには、サイトをスタイリッシュに演出する3種類のページテンプレートを用意しました。「ABOUT」「ACCESS」「MENU」といった、サイトの信頼性をアピールできる重要なページの作成にお役立ていただける3タイプのオリジナルページテンプレートです。通常の固定ページテンプレートとは異なり、CSSの知識を必要とせず画像やテキストを設定するだけで、段組みレイアウトの分かりやすく美しいページが作成可能です。

ABOUTページ
ABOUTページはいわば、「お客様との入り口です」。ここでは、この企業は何をしていて、「このサービス・製品で自分たちは何ができるのか」を伝える事が重要です。LOTUSのABOUTページでは、まずはメッセージから始まり、顧客に何ができるかを訴え、その後、インパクトのある画像でサービスのイメージを与えます。その後にメッセージや商品案内を多すぎず、少なすぎずという絶妙なバランスで伝えきります。

LOTUS ABOUTページ

ACCESSページ
ACCESSページを訪れる方は、エステサロンであれば、これから来客されるお客様です。LOTUSのACCESSページでは、単に地図やテキストだけではなく、来るお客様にワクワク感を持ってもらうため、お店がイメージできる4枚の画像を最初に持って来ています。これから至福の時間が待っているというイメージを持ってもらった後に、わかりやすい地図の表示と、テキストによる詳細案内が表示される仕様です。

LOTUS ACCESSページ

MENUページ
初めてのお店に行く時には、やはりコース内容や価格が気になる物です。MENUページをみるだけで自分が受けるコースにウキウキし、しっかり値段やコース内容がわかれば安心して予約ができます。それをシンプルにかつ美しく表現したのがLOTUSのMENUページです。

LOTUS MENUページ

これだけのページを作ろうと思うと、とてつもなく大変なコーディングが必要になってきますが、TCDでは手順に沿って画像と文字を入力していくだけで同レイアウトのページが作成可能です。こんな簡単でいいの?と少し拍子抜けしてしまうかもしれませんね。

投稿ページ

WordPressでサイトを構築する理由の一つに記事投稿や管理のしやすさがありますが、ここでもTCDは手を抜きません。TCDオリジナル機能のクイックタグの実装により、

  • Youtube動画のレスポンシブ表示
  • 関連記事のカードリンク表示
  • 記事のカラムレイアウト表示
  • 見出しスタイルの設定
  • 囲み枠のスタイルの設定
  • ボタンのスタイルのカスタマイズ
  • テーブルのレスポンシブ表示の設定
  • フォームのスタイルの設定

と記事を書く時にやりたいことがこの設定で全部できちゃいます!!!まさに痒い所に手が届く最高の機能です。これ以上追加する機能ないですと思っていました。しかし、今回は更にサイドのカラムもクリック一つで変更できる機能が追加されました。

lotus06

たったチェック1つだけで、
lotusright

右カラムを左カラムに変更できます。
lotusleft

このような機能が出来たのも、ユーザーからのお問い合わせでカラムを変更したいという要望やこんな機能が簡単にできたらという要望が届くからです。それを、テーマ開発チームがどうやったら組み込めるか、どんなUIなら使いやすいかの試行錯誤を重ね、生み出された機能です。ここにTCDの愛情が宿っているなと感じます。

制作者視点に立つテーマオプション

ここまででも、テーマオプションへのこだわりが伝わっているかと思いますが、更に制作者視点に立って、こだわった3つのテーマオプションポイントについて伝えさせて下さい。

ヘッダースライダー

まずは、ヘッダースライダーです。ここはサイトの顔であり、最も重要な位置です。お店によっては、キャンペーンを載せたい、商品を載せたい、ページ内の記事を設定したいなど制作者にとって一番こだわるポイントでもあります。ここもテーマオプションのみで、画像や見出し、ボタンまで設定できるようにしてあります。つまり、トップページの画像バナーが作れない方でも、簡単に印象に残るスライダーを作成できます。

lotus07

lotus08

例えば、ブライダル系のページを作りたければ、ウエディング系の画像を1枚の画像を用意し、キャッチフレーズやボタンを追加するだけでこんなトップページが数分で作成できるわけです。
lotusdemo02

また、ヨガ教室の生徒募集であればこんなイメージでしょうか。
lotusdemo03

お知らせカスタム投稿

お知らせページも新たにパワーアップされたテーマオプションの一つです。
lotus11

設定画面
lotus12

トップページにキャッチフレーズや、アーカイブページボタンを設置できるのはもちろんのこと、バナーを簡単に設定出来るようになっています。特にキャンペーン情報や新商品情報等はお知らせ内容と相性が良く、既存のユーザー様にも注目していただけるような作りにしています。

フォントタイプの選択

最後にフォントタイプの選択がテーマオプションから変更できます。サイトのイメージによってフォントを変えたいということがありますが、こちらもテーマオプションから1クリックで変更可能です。
lotus15

メイリオ
win_meiryo

游ゴシック
win_yugothic

游明朝
mincho

まとめ

LOTUSの開発現場では、TCDの原点回帰とも言える「ウェブサイトを直感的操作だけでつくる」に重点を置き、開発が進められていました。テンプレートをインストールすれば、ユーザーが迷うことなく管理画面から直感で操作していくだけで、美しいサイトが完成する。そういった点が実現できているかどうか、テストにテストを重ね、改良が進んでいったわけです。例えば、テーマオプションの機能のタイトルを見直したり、機能ごとに注釈(解説文)を入れたり、UIを見直すことで、さらに楽しく簡単にサイト作りができる仕様になっています。

ぜひWordPressテーマ「LOTUS」を使って、素晴らしいサイトを作って、売上アップに役立ててください。

TCDテーマ「LOTUS(TCD039)」

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ