WooCommerce（ウーコマース）は、WordPressをECサイト化するためのプラグインです。プラグインをインストールするとWordPressサイトがECサイトとして利用できるよう機能が増え、オンラインでモノが売れる環境がすぐに手に入ります。WooCommerceはもともとはプラグインとして提供されていましたが、WordPressを運営するAutomattic社がWooCommerceを2015年に買収しており、WordPressをECサイトとして利用するニーズに答えるべく積極的に開発が進められています。
Built Withによると、全世界での100万サイトを対象に約20%がWooCommerceで構築されています。
日本国内ではMakeShopやカラーミーといったECサイトASPでの利用が多いと考えられ、オープンソースCMSとなるとEC-CUBEの利用が多くなります。Built Withでは、記事執筆時点で38%がMakeShop、19%がEC-CUBEというデータがでています。
世界的に利用されているWooCommerceを採用してECサイトを構築しようとなると、
「WordPressを利用したECサイトはどんなサイトがあるのだろう？」「WooCommerceで構築したサイトの事例や実績が知りたい」
このような疑問が湧いてきます。そこで、ECサイト制作の参考のためWooCommerceを使った日本語で作られた国内向けのサイト実例を調べました。中には海外のテーマを利用しつつも、日本向けにカスタマイズしているものも多くあり非常に参考になりましたので、どのようなテーマを利用しているか、WooCommerceの独自の使い方やカスタマイズ構築方法など、調査してわかった結果をご紹介します。
目次
三浦技研公式オンラインショップ
三浦技研公式オンラインショップ｜miura golf Online Shop
ゴルフクラブやゴルフ関連商品を販売しているウェブサイトです。商品ページは複数画像スライダー、マウスオーバーで画像拡大、商品の複数オプション、カスタマーレビューといった機能が一通り揃っており、ページはレスポンシブでスマホ対応されているようです。
利用テーマは海外のWooCommerceに対応したレスポンシブのWordPressテーマを利用しているようです。テーマデモページを見る限り、テーマをベースに利用し、必要なところをカスタマイズして運営されているようです。
京都デニム公式オンラインストア
メンズ、ウィメンズのデニムアイテムを扱っている京都デニムのオンラインショップ。通常の商品購入の他に、オンラインショップからの受注からカスタムオーダーも受け付けており、柔軟な対応をされているようです。
WPテーマは海外のWooCommerce対応のレスポンシブテーマ「FlatSome」を利用し、子テーマでサイドバーや商品個別ページのカスタマイズを行っています。テーマのデモページはこちらです。
Cookie Muncher Cookie Bar
Home – Cookie Muncher Cookie Bar
原宿にあるクッキー専門店のクッキータイムのオンラインショップ。Amazonでも販売しているようですが、prime会員であればAmazonは送料無料のようですね・・・（オンラインは300円）
利用テーマはページビルダー機能のある「Divi」を利用し、WooCommerceを取り入れて構築しています。
ぷるぷろ
ぷるぷろ | 大阪で活動しているグラフィックデザイナーが、いろいろなモノと触れ合う普段の生活の中で感じる「こんなプロダクトがあれば良いな」を実現していきたいと思っています。
雑貨屋さんのオンラインストアです。利用テーマは「Fujiyama」。日本語対応の国産テーマです。商品ページの目立ったカスタマイズは多くなく、ほぼテーマをそのまま利用しボタンの色等多少の変更をされているようでした。
のりくら観光協会 – 乗鞍高原公式サイト
のりくら観光協会 – 乗鞍高原公式サイト 信州乗鞍高原の情報を発信。宿泊施設の検索もこちらからどうぞ | 信州 乗鞍高原 | Norikura Kogen – Japanese Alps
これは少しおもしろい利用方法のサイトです。実はこのサイト、購入機能がありません。商品ページに「購入」ボタンがないのです。なので厳密に言えば「WPで作れたECサイト」には当てはまらないのですが、ECサイトとしてではなくWooCommerceの機能を利用して、観光案内サイトを実現しているいい例としてご紹介しました。
利用テーマは先ほどもあった「Divi」。WooCommerceをフレームワークとして利用している、なかなかないケースですね。
WineStyles
ワインを販売するオンラインストア。利用テーマはUpsolutionが提供する「Zephyr」を子テーマでカスタマイズを行っています。カラーリングなども含め、EC部分はほぼテーマが用意しているテンプレートを利用しているようで、カスタマイズはフッターやアイコンなど一部と見受けられます。
テーマデモはこちらから。
有田焼Webカタログ | 有田焼販売の松華堂
WooCommerceを利用しながら、購入は自社のオンラインショップであるショップサーブに加え、AmazonやYahoo、楽天といった自社のオンラインショップへ遷移させています。そのため、商品により対応したショップへのリンクがあり、EC機能はサイト内にありません。ページ名が「Webカタログ」な理由がわかります。
利用テーマは不明です。ちなみに利用プラグインも明記されておらず、セキュリティ対策に配慮されている印象をもちました。
極上ターコイズとインディアンジュエリー
インディアンジュエリーを販売するECサイトです。利用テーマは海外無料テーマの「OnePress」を利用し、子テーマで管理しています。商品ページは特に大きなカスタマイズは見られず、テーマに用意されたレイアウト・デザインを利用しているようです。
このテーマは無料な上にWooCommerce対応までしており、WordPress公式ディレクトリにも登録されているため安心して利用することができます。OnePress — 無料の WordPress テーマ
珈琲豆ましろ（2018/05/07追加）
珈琲豆ましろ｜広島県尾道市/向島/スペシャルティコーヒー豆の焙煎・販売店｜coffee beans mashiro
瀬戸内海に浮かぶ向島にて、コーヒー豆を販売しているお店。
テーマはWordPressデフォルトのテーマである「TwentySeventeen」を利用しており、オンラインショップページにWooCommerceを利用してEC機能を追加しています。各グラムの選択や、豆の挽き方のオーダーをバリエーションとして登録し、ユーザー側が選ぶように設定しています。
テニトラス（2018/05/30追加）
ポップやのぼり、サインや椅子カバーなど、1,500を超える販促ツールを取扱い、データ入稿にも対応しているECサイトです。商品によってはバリエーションを設定し、必須項目としてユーザーが選択できるようになっています。
利用テーマは特定できませんが、デフォルトのWooCommerceテーマベースにカスタマイズされているような印象でした。カートページは日本向けにわかりやすくカスタマイズされていて、動線、入力フォーム周り、カートページ内から見積書の印刷機能など、非常に考えられており、使いやすく感じました。
BabyBjorn（2018/05/30追加）
【公式】BabyBjorn – ベビービョルン オフィシャルウェブサイト
スウェーデン発のベビー用品ブランド、ベビービョルンの公式ECサイトです。テーマはWordPressテーマ販売を行う会社、ThemeFusion社のAvadaを親テーマとして利用し、カスタマイズを子テーマで構築されています。
カラーや別素材の同商品はバリエーションとして登録しているようで、選択結果によって金額が変わります。バリエーション商品として登録することにより、一つの登録内で別カラーやサイズ、素材といった異なる同アイテムを登録することが可能です。運用にもよりますが、アイテム数が多い場合はこのようなバリエーション商品での登録が運営しやすいです。
フクフクプラス（2019/10/06追加）
ハイファイブクリエイト制作のご紹介となり恐縮ですが、障がい者アートを使った商品やレンタルアートなどを展開しているフクフクプラスの公式サイトです。商品を購入することで、障がい者の方の社会参加の支援につながります。
商品はメッセージを追加したり、お歳暮や内祝いといったギフト商品は水引きを選択するなど商品によりカスタマイズしています。また、商品を購入するとお福分けというナンバーが自動発行され、厳選された福祉施設の商品を毎月抽選する仕組みも導入されています。
制作事例にも記載していますのでご参考ください。
.comm （2020/05/09追加）
広島からソーセージで世界を熱狂させるドットコミュ。「マツコの知らない世界」に紹介されたこともあるというソーセージは鹿や猪といったジビエを使っています。中には鯨をつかったものも。
なかなかパンクで尖ったアティテュードの掲げているお店です。このマニアックさゆえに、見たら食べてみたいと思う人も多いのではないでしょうか。
利用テーマはWooCommerceのオフィシャルテーマであるStorefrontをベースにカスタマイズされているようです。WooCommerceはバリエーション商品の見せ方がプルダウンから選択するだけと結構微妙なインターフェイスなんですが、ドットコミュはWPC Variations Radio Buttons for WooCommerceプラグインを利用することにより、画像入のラジオボタンで選択させるようにUIを使いやすくしていました。
終わりに
WooCommerceを利用して日本語で作成されたECサイトをご紹介しました。無料有料にかぎらずテーマを利用し、それをベースに子テーマを作りカスタマイズして構築して行く方法が手間も少なく、WooCommerceが生成するコンポーネントへの対応もできており、さらにレスポンシブ対応もされているので、これは使わない手はありません。
テーマは一から作るとカート周りの画面まで想定する必要もあり、中々現実的ではありません。テーマはすでに有るものを利用する前提で、その上で必要なデザインの変更だったり、機能を盛り込む箇所をカスタムしていくことをお勧めします。
また、カスタマイズする場合は、テーマのアップデートに備えて子テーマを作成してカスタマイズを行うようにしましょう。
※「WooCommerceで作成しているサイトがあったぞ！」「このサイトも紹介してくれない？」等ありましたら、お気軽にコメント欄か問い合わせフォーム、またはTwitter等でご連絡ください。
コメントを残す