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

Welcartケーススタディ:nostos books

Welcartを使ったデザインセンスのよいECサイト事例をご紹介します。

screen 2013-05-20 at 10.33.39アート、写真、文学、エッセイ等の古本を扱うオンライン古書店「nostos books」さんのサイトです。

http://nostos.jp/

ECシステムの選定

まず、自分がこういった古書店オンライストアを始めるとしたらどのようなシステムを使うでしょうか?
商品自体がとてもユニークで1点物のため、欲しい人は欲しいという商品です。高い手数料を払って楽天のようなモール系を使う必要はありません。また、「同じ商品が他のお店ではもっと安い」ということはほぼありえないこ、そして扱う商品から「イメージ」がとても大切であり、固定客に対してはブランド化していくことが長期的な成功に繋がります。このようなことから、最初からしっかりとした独自システムを持ったほうがよいという判断ができます。

イニシャルコストだけを見れば、カラーミーショップなどの格安ASPでも似たようなショップは構築できると思いますが、このように趣味嗜好が強く足の長い長期的な事業の場合、やはり外部サービスに依存しない形でシステムを持つという判断は非常に正しいものだと感じます。

Welcartのカスタマイズ

ショップ側はWelcartというよりはWordpressカスタマイズの範囲になりますが、シンプルでストレートなデザインで非常に見やすいショップになっています。やはり書物それぞれの個性的な装丁が主役になるため、無駄な表示は一切省き、カテゴリーと検索だけをナビゲーションとして「一覧⇄商品詳細」を簡単に行ったり来たりできます。

カテゴリー一覧では、スクロールが下に到達すると自動的に読み込む仕組みになっています。「infinitescroll」と呼ばれる手法で、どんどん表示されて面白いですね。ただし、どこまで続くのかイメージしにくい、フッターの表示を見たいのに見れない、という面もあります。
この場合はフッターには何も入れないことを前提としていますし、どのカテゴリーも〜200点程度ということで、ストレス無く閲覧することができます。

カート画面はデフォルトをベースにして、幅の広い1カラムで見やすくしてあります。あとはフォントサイズやボタンデザインの調整。ほとんどそれだけのカスタマイズのように見えますが、周りにごちゃごちゃした表示がなくてとても見やすく安心感がありますね。

またカート画面では常に下部に送料やお支払い方法の案内が表示されています。
それぞれのテンプレートに読み込ませるだけの簡単なことですが、「ご利用方法」として別ページで用意するよりもいいかもしれませんね。

今後も、Welcartを使ったデザインセンスのよいサイトを見つけたらご紹介していきます!

Previous Posts