STABLESさんWelcartを使ったデザインの素敵な事例、今回はTheStableさんというお洒落な生活雑貨ギャラリーのオンラインストアです。http://thestables.jp/このサイトは数ヶ月前に見つけ、Welcartの事例として絶対に紹介いしたいと思っていたサイトです。Welcartはそのデフォルトテーマの複雑な印象、そして実際に複雑なテーマ構造から、デザイナーの人からはまだまだ浸透しておらず敬遠されがちなので、ここまでセンスのよいデザインとフロントエンドの実装とWelcartが融合した事例というのはかなり珍しいのではないかと思います。ウェブフォントの活用まずこのサイト全体の柔らかく優しい印象に大きく役立っているのがフォントです。ECサイトは動的出力する文字が多いので、デザインに拘るといっても画像化できる部分はあまり多くありません。そこで、このサイト全体ではナビゲーションやボタン、価格の数字などに「Lato」という特徴的なフォントを使用しています。これはGoogleWebfontAPIで無償提供されているものの1つです。して結果だけ聞けば「なんだそういうことね」で終わるかもしれませんが、こういった部分に適したフォントを探してきて効果的に使う、というのはかなり開発者個人のセンスに依存する所だと思います。個性的なサムネイル画像シェイプ次にこのサイトの決定的なインパクトとなっているのが三角形の商品サムネイルです。これはもちろん画像を1つ1つ加工している訳ではなく、三角形に型抜きしたpng画像を、商品画像の前面に被せ、結果的に画像が三角形に切り抜かれているように見えています。こちらもWelcartは無関係ですが、お店のロゴをモチーフとした理由ある装飾であり、訪問者は一発で覚えてくれるインパクトがあります。WelcartのカスタマイズそしてWelcartの出番、商品詳細はシンプルかつ無難にまとめられています。商品のメタ情報、購入ボタンにも全く違和感がありません。カート画面以降はWelcartの「wc_template」に進みますが、こちらは「顧客にとって本当に必要だと思われる項目のみ表示」でとても見やすいですね。進捗表示ナビをちゃんとデザインすること項目間のマージンを十分に開けることinputにもしっかりとスタイルを当ててデザインすることこれだけで十分だと思います。TheStableさんも、最初に理想とするデザインコンセプトがあり、それに沿ってWelcartはバックエンドの役割だけに抑えているという所が大きなポイントになっているようです。商品カテゴリーナビゲーション全体のナビゲーションは「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はあくまでバックエンドに徹してくれればよいのですから、そこをしっかりと評価する為にもデフォルトテーマに囚われないというのはとても大事な考え方だと思います。さんは青森県弘前市にある素敵な生活雑貨のお店です。実店舗もかなりいい雰囲気になっていて、オンラインショップはそのコンセプトがしっかりと反映されているように見えます。お店が素敵なのにウェブサイトは適当だね...というお店は多いですが、店舗でも家に帰ってもお店のコンセプトがしっかりと伝わってくるのはとても重要だなと感じさられます。お店には行ったことがなくウェブサイトから知った場合も、ぜひお店に行ってみたくなりますね。ケーススタディリサーチについてWelcartが使用されている、かつデザインも素敵な事例を紹介しています。見つけたら書く、というスタンスですので、もしおすすめのサイトがあればぜひお知らせ下さい。@welthemesWelthemesのダウンロードテーマは汎用性をもたせるためあえて作り込み過ぎないようにしていますが、完全オリジナルのご要望があれば今回の例のような作り込んだテーマを作ることもできます。テーマラインナップとしてのリクエスト、フルカスタマイズオーダーもおまちしております。コメントをキャンセルメールアドレスが公開されることはありません。Welcartが正常に動作している環境を準備し、ご利用規約をご確認の上ご購入ください。スピーディで安全なオンライン決済サービスGumroadよりクレジットカードがご利用可能です。決済後すぐにダウンロードURLがメールアドレス宛に届きます。利用規約|特定商取引法に基づく表示|お問い合わせ。