Welcartでカート内の商品数・合計金額を表示する

Welthemesのテーマでは、ヘッダーにあるカートアイコンの部分に「現在のカート内商品数」がアイコンと同化して表示されるようなデザインになっています。

この商品数合計は、<?php usces_totalquantity_in_cart(); > というタグで出力できます。

Novel というテーマでは「合計額」を表示しています。

novel01
Novelのライブデモ

商品金額合計は、<?php usces_totalprice_in_cart(); > というタグで出力されますので、お好みの場所にタグを挿入してCSSでスタイリングするだけで簡単に実装が可能です。

このようにショッピングサイトで必要になりがちなタグがちゃんと個別に用意されている所が、Welcartの良いところですね。

ここでよりスタイリッシュなショッピングサイトのためのアドバイスです。

古風なサイトでは、よく「只今カートに2点入っています」とか「現在の合計金額は00000円です。」とか、文章で表示されたりします。またサイドバーにカート画面が常に表示されていて、「現在はどれどどれがカートにありいくら」ということが表示されていたりします。

親切といえば親切なのかもしれませんが、それって買い物中にどうしても必要な情報でしょうか?カートにいれながら買い物を継続しているということは、やはり商品をちゃんと見せることが重要であり、「たった今どれだけカートに入れたか」なんてことは普通の人であれば覚えていますし、カート画面に行けばすぐに分かることです。

1度の購入点数が1点、2点といったショップであれば、余計なお世話な表示かもしれません。

逆に、卸販売サイトや細々とした資材屋さんのような「1度に沢山の物を購入することが多い」というショップであれば、サイドバーに大きく買い物カゴの中身を表示するのは便利かもしれませんね。

テーマデザイン全てに共通することですが、本当に必要と断言できないような要素は思い切って削ってしまうこと。それを徹底することで、本当に重要な情報がしっかりと浮き出てきます。

「ECサイトっぽいかどうか、ECシステムに機能が備わっているかどうか」ではなく、「自分のお店の利用者にとって必要かどうか?」を常に考えて最適化しましょう。

テーマリクエストの受付を開始しました

「こんなデザインのテーマが欲しい」 「あのサイトのようなデザインのショップにしたい」

こんな場合はカスタムオーダーで制作するのが一番ではありますが、

「カスタムオーダーの費用をかけずに、希望に限りなく近い低価格テーマさえあればあとは自分でなんとかできる!」

という場合、デザインイメージのリクエストをお送り下さい。


テーマリクエストフォーム

新テーマは常に開発していますので、リクエストは積極的に反映させていきたいと思います。リクエストまったくそのままになるとは限りませんが、リクエストを元にしたテーマをリリースした際にはお知らせ致します。(もちろん購入する義務はありませんので、思いつくままに沢山送って頂いても構いません。)

Welcartデザインテーマ:Novelリリース

1カラムのしぷるなテーマ「Novel」リリースしました!

海外のギャラリー系オンラインストアで良く見かけるこのスタイルは、「マルチカラム、細々とした写真」といった古風なデザインとは一線を画すデザインとして近年のトレンドとなっています。

「あれも見せたい、これも見せたい」というお店側の都合でコンテンツを押し付けるのではなく、ふと立ち寄った人の「見てみたい」を第1に考えていく。そんなオンラインショップに最適です。

Novel-Responsive-Screen

Tips: トップページをスライドギャラリーにする

Welthemesのテーマでは、いずれもトップページにショップのヴィジュアルイメージとなる写真が掲載できるようになっています。

minimum01

画像の変更方法

トップの画像は管理画面の

「外観」>「ヘッダー」>「カスタムヘッダー」

からアップロードして管理できます。アップロードと同時に適正サイズに切り抜きするクロップ機能が付いていますので、デジカメで撮ったままの写真でもそのままアップロードしてすぐにトップページに貼り付けることが可能です。

  1. もし何もアップロードされていなければテーマ内にある「default_header.jpg」を表示
  2. もし管理画面から何かアップロードされればそちらを表示

という仕組みになっていますので、お好みの方法で管理してみてください。

複数写真のスライドギャラリーにする

全てのテーマには、トップページの写真を静止画ではなく「複数写真のスライドギャラリー」にするためのソースコードも準備しています。
付属のマニュアルにあるように home.php のコードを修正した後、管理画面の「カスタムヘッダー」にてお好みの写真をアップロードしてみてください。

デモサイト( minimum LiveDemo )では静止画にしてありますが、ここがフェードイン・フェードアウトのスライドギャラリーになるだけで、ずっとお洒落で素敵な印象のショップになります。

ショップのイメージ付け、また一時的なセール用バナーなどにご活用ください。

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

Previous Posts