Welcartケーススタディ:THE STABLESさん

Welcartを使ったデザインの素敵な事例、今回はTheStableさんというお洒落な生活雑貨ギャラリーのオンラインストアです。

http://thestables.jp/

このサイトは数ヶ月前に見つけ、Welcartの事例として絶対に紹介いしたいと思っていたサイトです。

Welcartはそのデフォルトテーマの複雑な印象、そして実際に複雑なテーマ構造から、デザイナーの人からはまだまだ浸透しておらず敬遠されがちなので、ここまでセンスのよいデザインとフロントエンドの実装とWelcartが融合した事例というのはかなり珍しいのではないかと思います。

screen-2013-06-03-at-10.37.33

ウェブフォントの活用

まずこのサイト全体の柔らかく優しい印象に大きく役立っているのがフォントです。ECサイトは動的出力する文字が多いので、デザインに拘るといっても画像化できる部分はあまり多くありません。

そこで、このサイト全体ではナビゲーションやボタン、価格の数字などに「Lato」という特徴的なフォントを使用しています。これはGoogleWebfontAPIで無償提供されているものの1つです。

こうして結果だけ聞けば「なんだそういうことね」で終わるかもしれませんが、こういった部分に適したフォントを探してきて効果的に使う、というのはかなり開発者個人のセンスに依存する所だと思います。

個性的なサムネイル画像シェイプ

次にこのサイトの決定的なインパクトとなっているのが三角形の商品サムネイルです。これはもちろん画像を1つ1つ加工している訳ではなく、三角形に型抜きしたpng画像を、商品画像の前面に被せ、結果的に画像が三角形に切り抜かれているように見えています。
こちらもWelcartは無関係ですが、お店のロゴをモチーフとした理由ある装飾であり、訪問者は一発で覚えてくれるインパクトがあります。素敵ですね。

Welcartのカスタマイズ

screen-2013-06-03-at-10.37

そしてWelcartの出番、商品詳細はシンプルかつ無難にまとめられています。商品のメタ情報、購入ボタンにも全く違和感がありません。
カート画面以降はWelcartの「wc_template」に進みますが、こちらは「顧客にとって本当に必要だと思われる項目のみ表示」でとても見やすいですね。
カート画面カスタマイズのポイントは、

  • 進捗表示ナビをちゃんとデザインすること
  • 項目間のマージンを十分に開けること
  • inputにもしっかりとスタイルを当ててデザインすること

これだけで十分だと思います。
TheStableさんも、最初に理想とするデザインコンセプトがあり、それに沿ってWelcartはバックエンドの役割だけに抑えているという所が大きなポイントになっているようです。

商品カテゴリーナビゲーション

screen-2013-06-03-at-10.38.07

全体のナビゲーションは「labels」として「タグ」が、「categories」として「商品カテゴリー」が利用されています。このナビゲーションは画像も含みレイアウトもかっちりとデザインされていますので、決め打ちHTMLコードをモジュール化して用意しておき、手動管理されているのかもしれません。もちろんWelcartでの入力値に合わせて動的生成することもさほど難しくないと思いますので、もしかしたらそうなっているかもしれません。

カテゴリー等は日々の更新であれこれ変更するものではありませんので、無理矢理CMS化するよりも静的コードにしておいて万が一変更があればサポート対応する方が効率的かもしれませんね。

スマートフォン対応

そしてウィンドウサイズを伸縮してみると分かるようにレスポンシブデザインになっています。元々無駄な要素を省いたシンプルさがあるので、表示域が狭くなっても違和感なく縮小されています。

WordPress単体であれば、WpTouchのようにテーマを専用で用意して振り分けることができるのですが、Welcartでは難しいです。ショッピングサイト自体、PC版とスマートフォン版それぞれにテンプレートがあるのは管理自体も複雑になるので、1ソースでレスポンシブ対応が良い選択だと思います。
Welthemesにて開発するテーマも全てレスポンシブデザイン対応になっています。

SSLのコストを出来るだけ抑える

また、SSLには利用サーバーで提供される共有SSLが利用さています。おそらく費用的な妥協点としての選択なのではないでしょうか。これだけデザイン的に一貫性があれば違和感はありませんしネガティブな要素ではありません。

Welcartのような素晴らしいプラグインにより開発コストが抑えられるようになるとSSLの費用というのが大きくなってきてしまい、それだけで格安のASPを選んでしまうということは少なくないと思います。
こういう適切な妥協点を見つけ、これだけ素晴らしいオリジナルショップが構築できるとしたら、これが1つのベストプラクティスと言えるのではないかなと思います。

ショップブログ

そして最後、ブログです。ここでは外部ASPのblogspotになっています。
Welcartは1つのWordpressでショップもブログも共存できるというメリットがあるのですが、ここはあえて管理を明確に分けたいという意図なのでしょうか。無理やりまとめて制約があるよりは、完全に分けるというのも1つの考え方ですね。

最後に

CMSカスタマイズに慣れていない人がよく勘違いしている事なのですが、あるサイトのデザインやHTMLコードを見て「WordPressでここまでできるんだ!」という言い方がされることがあります。
今回の場合だと、「Welcartでここまでできるんだ!」というように。

しかし、デザインに優れたサイトの多くは「デザインがあり、それをHTMLにし、動的にする必要がある部分だけをCMSタグでプログラムする」という開発経緯を辿ることがほとんどです。なので「CMSの初期デザイン(デフォルトテーマ)とあまりにかけ離れているからすごい」というのはちょっと的外れなのですね。CMSが何であろうと単にデザインやフロントエンド実装のセンスがいいということになります。

CMSはあくまでバックエンドに徹してくれればよいのですから、そこをしっかりと評価する為にもデフォルトテーマに囚われないというのはとても大事な考え方だと思います。

参考

THE STABLES
http://thestables.jp/

今回の事例とさせて頂いた The STALBE さんは青森県弘前市にある素敵な生活雑貨のお店です。
実店舗もかなりいい雰囲気になっていて、オンラインショップはそのコンセプトがしっかりと反映されているように見えます。
お店が素敵なのにウェブサイトは適当だね…というお店は多いですが、店舗でも家に帰ってもお店のコンセプトがしっかりと伝わってくるのはとても重要だなと感じさられます。もちろん、お店には行ったことがなくウェブサイトから知った場合も、ぜひお店に行ってみたくなりますね。

ケーススタディリサーチについて

Welcartが使用されている、かつデザインも素敵な事例を紹介しています。
見つけたら書く、というスタンスですので、もしおすすめのサイトがあればぜひお知らせ下さい。自薦他薦は問いません!

Twitter: @welthemes

Welthemesのダウンロードテーマは汎用性をもたせるためあえて作り込み過ぎないようにしていますが、完全オリジナルのご要望があれば今回の例のような作り込んだテーマを作ることもできます。テーマラインナップとしてのリクエスト、フルカスタマイズオーダーもおまちしております。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です