Welcartケーススタディ:MUKU-MOさん

Welcart を使ったサイト事例、今回は「MUKU-MO(http://muku-mo.com)」さんをご紹介します。

MUKU-MOさんは鉄と無垢材を活かした家具をオーダーメイドで製作されています。
サイト全体はWordPressで実装されており、ギャラリー、ブログ、オーダーメイドの受注窓口、そしてオンラインストアの部分がWelcartとなっています。

http://muku-mo.com

moku-mo

サイトをご覧頂くと分かる通りデザインはほぼゼロから起こされていて、専用テーマとして製作されています。デザイン面での完成度は非常に高いレベルでまとまっています。

デザインの部分についてはWelthemesというよりは制作者のセンスや技量によるものですので実際のサイトを見て頂くことにして、ここではECにWelcartを、そしてカスタマイズの土台としてWelthemesを採用頂いた部分についてご紹介したいと思います。

デザインを妥協せず、ECの実用部分だけをWelcartに

このようにサイトデザインから完全オリジナルで製作し、そのままをWordPressテーマとして落としこんでいく仕事はWeb制作では当たり前の部分になると思いますが、そこにWelcartを組み込み、Welcart独特のCSSを融合させていく、という部分が実はかなり作業工数をとられてしまう部分です。

そこをWelthemesのテーマに任せ、カート画面などは実用性の高いシンプルな形でまとめる。この形はWEB制作会社さんやフリーランスデザイナーの方がWelthemesを使って頂くもっとも多いパターンであり、高い評価を頂いている理由でもあります。

カスタマイズベースとしての考え方

既存テーマをうまく使うという方法はWordPressでの一般的なサイト制作でもよく用いられますが、Welcartは特に複雑なテーマ構造を持っているため1からカスタマイズしていく場合と比べ、結果的に何日もの工数を短縮できます。
制作会社等であれば2,3日の短縮だけでも10万、20万のコスト差が出てしまいますので、テーマ購入費用はほぼ無視できるものになってきます。こういった考え方ができる所では、有料テーマを積極的に活用して頂いているようです。

レスポンシブデザイン

マルチデバイスへのレスポンシブ実装として、このサイトではユーザーエージェントによってテーマを切り替える形で実装されています。
PC向けにはPC向け専用にレイアウトデザインを行いテーマを制作。そしてモバイル向けのテーマをもう1つ作成。
この2つの独立したテーマを、ユーザーエージェントで動的にテーマを切り替えるプラグイン「Multi Device Switcher」によって切替えられているようです。

レスポンシブ対応をCSSで実装するのか、UA判定でリソースごと切り替えるのか、この判断はケースによって様々だと思いますが、今回はサイトのコンテンツの種別がEC、ギャラリー、ブログなど多岐に渡り、またそれぞれを細部までデザインしたいという事情からの判断となったのではないかと思います。

元々Welthemesでは標準でCSSのメディアクエリ−によるレスポンシブデザインとなっており、CSSも分けて保管してあるため、その部分のCSSをそのまま流用することでモバイル用テーマの作成も比較的楽に行えるのかもしれません。

「複雑にデザインカスタマイズされたWordPressのマルチデバイス対応」という意味でいえばいたるところで需要のあるノウハウであるため、多くの方に参考になる事例ではないかと思います。

このように、今回のMUKU-MOさんサイトはWelthemesを採用頂いた事例の中ではもちろん、Welcartを使ったサイトの中でも、またWordPressによるECサイトの中でももっとも完成度の高いサイト事例と言えるのではないかと思います。

サイト制作者の方へのご依頼

このサイトの制作は香川の「bridge」さんが手がけられているようです。
以前もケーススタディでご紹介したhopefulさんのサイトも「bridge」さんで、WordPressを活用したECサイト、またWordPressの開発ノウハウ等も数多く発信されています。

ベーステーマminimumについて

topslide_minimum

minimumはWelthemesの中でも最もシンプルなテーマです。白背景に黒の文字、背景に画像などを用いないスタイルは、サイトそのものはとにかくシンプルにしたいという方に最適です。

Welcartケーススタディ:おとなラジコンさん

Welcart を使ったサイト事例、今回は「おとなラジコン」さんをご紹介します。

「おとなラジコン」さんは、Androidでラジコンを作りたいと思ったのがきっかけ始められ、マルチコプターを中心にMultiwii、DJI、APMなど自作派向けの情報提供、そしてマルチコプターによる空撮、技術指導などをされています。
それらの情報発信プラットフォームとしてWordPressブログ、パーツ通販のECシステムとしてWelcartを採用されています。

otonaradikon

今回ご紹介させて頂いた理由としては、サイトのデザイン的な部分ではなく、サイト内のコンテンツが極めてユニークで、専門性が高く面白い情報発信がされているという所に注目しました。
自作ラジコンということで誰もが興味がある分野ではないと思いますが、興味のある人にはとことん有益なサイトとなっています。

サイトデザインとしてはminimumをベースに少々のカスタマイズを加えられているだけですが、発信されている記事の内容の専門性の高さ、またコメントの多さから、自作ラジコンという分野では極めて濃いサイトになっていることが素人目にも感じられます。

コンテンツ自体の独自性と専門性が全てを牽引していく

自分のオンラインショップを作るということだけ言えば、利用登録するだけで数分でできてしまうWEBサービスもあり、オンラインストアを作るということは特別難しいことではなくなっています。
ただ多くの会社や個人がオンラインショップを立ち上げますが、誰もが参入できる分野というのは既にレッドオーシャンになっていて、どうしても価格勝負になり、強豪他店の中で目立たせようと広告を出したりSEOに悩んだり…と、ますますそれ自体が仕事の中心になってきてしまいます。

一方、おとなラジコンさんのように趣味性の高い分野、そしてコンテンツ自体に独自性と専門性があれば、WEBサイトはあくまで道具としてシンプルでよいですし、宣伝やSEOといったことは何もしなくても後からついてきてしまうもの。

そのため、「とにかく土台があれば」という意味でWordPress+Welcartの定番コンビネーション、そしてシンプルなデザインにするためWelthemesを活用して頂いたのかなと感じています。

ラジコンに興味がある方はもちろん、ただ売るだけでなくコンテンツありきで「買うこともできる」といったサイト構成の見本としてぜひ「おとなラジコン」さんのサイトを訪れてみてください。

おとなラジコン公式サイト http://otonaradicon.com/

おとなラジコンFaceBookページ

ベーステーマminimumについて

minimum-Responsive-Screen

最もシンプルなテーマです。白背景に黒の文字、背景に画像などを用いないスタイルは、サイトそのものはとにかくシンプルにしたいという方に最適です。

Welcartテーマ minimum

Welcartケーススタディ:アンティーク家具 MANSIKKA(マンシッカ)

Welcart を使ったデザインの素敵な事例、今回はアンティーク家具・アンティーク雑貨等のセレクトアイテムを取り扱うオンラインショップです。

Screen Shot 2014-11-09 at 3.22.19 PM

サイトは「Calm」をベースにカスタマイズが施されています。
特筆した特徴はないように見えますが、取り扱う商品の独自性、空気感を感じる写真、空間が驚くほどうまく演出されているようです。

流行のデザインであったり、ごちゃごちゃとしたウィジェット機能であったり、高機能なECサイトはいくらでもできます。しかし、ショップの空間をつくり上げるのにそれらはあまり重要ではありません。完璧ではなく、多少の手作り感が感じられた方がよい場合すらあります。
Welcartをシンプルなデザインで稼働させる、というのはそれを実現する最高の方法の1つだと考えていますが、それをうまく実現させている素晴らしい事例だと感じます。

斬新すぎるサイト構成は求めず、商品に目が行くようなシンプル且つコンパクトなデザインが良かったので、「calm」はイメージに近くて制作時間の短縮にも繋がり大変活躍してくれています。- オーナー様より

アンティーク家具などは1点物なので、ある物と人との接点を増やすにはオンラインショップはとても効果的だと思います。一方で、「既に知っているものを買う」のではない1点物だけに、商品の写真や説明が大切になります。
更に、MANSIKKAさんのように写真が素敵だと、今度は「この空間に足を運んでみたい」と思うようになります。こうして、単にウェブサイトの存在がオンラインショップでの売上だけのものでなく、実際のショップをより多くの人に知ってもらうことになる間接的な効果が生まれてきます。

筆者も思わず仕事を忘れ、商品1つ1つの写真を眺めてしまいました。

リフォームやリノベーション、店舗什器などに役立つ大型アイテムから気軽にお部屋に取り入れられる小物まで、
まだまだオンラインショップに出品できていない商品もたくさんあるそうです。

こういったアンティーク家具に興味のある方はぜひ訪れてみてください。

ADD: 東京都青梅市富岡2-538-1
URL: http://mansikka.jp

ベーステーマCalmについて

Calm-Responsive-Screens

Calmはサイトを通して2カラムのシンプルなテーマです。
2カラムレイアウトはトップページからはじめサイト全体を通してサイドバーウィジェットが配置される安心感があ人気の基本パターンです。
タイトルやナビゲーションなどはあえて控えめに、白をベースとして余白を大切にすることで商品写真がぐっと引き立ち、ショップに洗練された印象をもたらします。
特徴的なデザインをあえて排除しているため、ロゴとトップページの写真をお店のものに入れ替えるだけで違和感のないオリジナルショップが出来上がります。

Theme > Calm

Welcartケーススタディ:南魚沼大久保農園 オンラインショップ

Welcart を使ったデザインの素敵な事例、今回は新潟県南魚沼のお米をお取り寄せできる「南魚沼大久保農園」さんのオンラインストアをご紹介します。

welthemes-compressor

http://www.sas-uonuma.com/shop/

第一印象の良さ

まずサイトを訪問して感じるのは「まっすぐさ」でした。ストレートなロゴ、そして印象的な写真と大きなフォントのキャッチコピー。オンラインショップにありがちな細々として情報や本質的に不要な情報を一切排除され、「美味しいお米を作っている農園」ということがまっすぐに伝わってきます。

背景に少しだけ見える山の景色も、見えるのは少しだけなのに、これによって田舎の青空と田んぼの風景が想像できます。

スクロールするとまず運営者の方の自己紹介、農園の紹介、そして地域交流の様子、メディア、実際に手に取れる場所の紹介が続きます。ここまでで、この生産者の積極的な様子が伝わってきます。
それからようやく、商品であるお米の一覧が見えてきます。

いきなり商品一覧を見せて「買ってください」ではなく、まず生産者としての自己紹介や活動を知ってもらう場所としてWEBサイトを機能させ、そこで「オンラインでのオーダーもできます」という設計は、WEBサイトのデザイン云々よりもっと根本的な部分で「伝え方」がよく練られていると感心しました。

商品詳細

商品詳細ページでは、お米そのものの写真だけでなく、そのお米が生産された過程が想像できるようなシーン写真が沢山あります。

パッケージされた物、そしてお米のように外見には違いがわかりにくいものの場合、こういったシーン写真はとてもよいですね。

こういった農産物は、大型ショッピングモールサイトでも激安で売られているのをよく見かけます。オンラインショップの開店はコスト面でも敷居が高い為、初期費用が安く見えるモール系に走ってしまいがちだと思います。
しかしWordPress+Welcartのような仕組みでしっかりと独自サイトとして運営することができれば、購入者と生産者がより直接的・長期的に繋がっていけるという意味で素晴らしいことだと感じます。

こういった場面で、Welthemesを活用して頂けたことは嬉しい限りです!

ベーステーマ:Stockholm

WordPressとWelcartという組合せでECバックエンドを組み立て、そしてWelthemesのStockholmテーマをベースにしてカスタマイズされたサイトです。

ベースとなるテーマはStockholm

stockholm01

利用デモとしては北欧の雰囲気を出していますが、デフォルトの木目調背景を変更するだけで全く違ったデザインに応用できます。

背景の変更はWordPress管理画面の「カスタマイズ」からドラッグ・アンド・ドロップで簡単に変更できます。

また元々のレイアウトが分かりやすく、装飾的なデザインもシンプルにまとめられているため、今回のような「いい写真が揃っている」サイトではそれらの写真が本当に映えて見えますね。

テーマ「Stockholm」の詳細はこちら:Stockholm

Welcartケーススタディ:hopeful

Welcartケーススタディ:hopeful

Welcart を使ったデザインの素敵な事例、今回は香川県高松市のhopefulさんというセレクトショップのオンラインストアをご紹介します。

こちらはWordPressとWelcartという組合せでECバックエンドを組み立て、そしてWelthemesのMuseoテーマをベースにしてフルカスタマイズされたサイトです。

http://house-of-hopeful.jp

Screen-Shot-2014-09-11-at-12.54.29-PM

個性的デザインと使い勝手のバランス

こちら、一見して感じられる通りとても個性的なデザインのサイトになています。
外側からサイトを見るだけなら「変わったサイトだな」くらいにしか思わないかもしれませんが、実際のショップ、取り扱う商品、そしてこういったお店にはしっかりとした固定ファンのお客さんたちがいるはずで、お店とお客さんの間の世界観がしっかりと共有されているのではないかと想像します。

ただ、これだけ個性的なビジュアルを全面に出しながらショップとしての機能(商品一覧の見やすさ、商品詳細画面、カートから購入手続き画面)はシンプルに整理され、とても使い勝手のよいサイトになっていると感じます。

その他にも商品詳細画面からの「関連商品表示」「最後にチェックした商品表示」、パンくずナビ、などサイト内をぐるぐると見て回りやすくなる工夫もしっかりとなされています。

Screen-Shot-2014-09-11-at-12.54.55-PM

Screen-Shot-2014-09-11-at-12.55.13-PM

Museo

Themes – Museo

MuseoはWelthemesnの中では特にシンプルで、そのままでは使い所が限定されるくらいシンプルなテーマです。
今回、あえてそれをベースにしながら盛りだくさんのカスタマイズを加えたという所に、制作者様のセンスや設計力、実装する技術力の高さを感じました。

museo-responsive

カスタマイズベースとしての考え方

Welthemesのテーマはシンプルさと使いやすさを一番に考えています。それをベースに残しながら遊びや独創性を加えていくという方法は、カスタマイズの効率性がよく、ぜひお勧めしたい開発方法です。

こういった方法はWordPressでの一般的なサイト制作でもよく用いられますが、Welcartは特に複雑なテーマ構造を持っているため1からカスタマイズしていく場合と比べ、結果的に何日もの工数を短縮できます。

制作会社等であれば2,3日の短縮だけでも10万、20万のコスト差が出てしまいますので、テーマ購入費用はほぼ無視できるものになってきます。こういった考え方ができる所では、有料テーマを積極的に活用して頂いているようです。Welthemesでも一度に複数テーマを購入して良い部分だけ組み合わせて使いって頂いているケースも多くあるようです。

サイト制作者の方へのご依頼

今回、hopefulさんのサイト上に制作者のクレジットはありませんので紹介は省略させて頂きますが、もしこの記事を見て、四国近辺でこのようなサイト制作をお考えの方がいらっしゃればWelthemesよりご紹介させて頂きたいと思います。お気軽にお問い合わせください。

Next Posts