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の独自の使い方やカスタマイズ構築方法など、調査してわかった結果をご紹介します。
目次
- 1 三浦技研公式オンラインショップ
- 2 京都デニム公式オンラインストア
- 3 Cookie Muncher Cookie Bar
- 4 ぷるぷろ
- 5 のりくら観光協会 – 乗鞍高原公式サイト
- 6 WineStyles
- 7 有田焼Webカタログ | 有田焼販売の松華堂
- 8 極上ターコイズとインディアンジュエリー
- 9 珈琲豆ましろ（2018/05/07追加）
- 10 テニトラス（2018/05/30追加）
- 11 BabyBjorn（2018/05/30追加）
- 12 フクフクプラス（2019/10/06追加）
- 13 .comm （2020/05/09追加）
- 14 トリニティ（2020/06/27追加）
- 15 ラヴサーフ（2020/06/27追加）
- 16 PHENOM（2020/10/24追加）
- 17 G-SQUARE（2020/10/24追加）
- 18 終わりに
三浦技研公式オンラインショップ
三浦技研公式オンラインショップ｜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を使いやすくしていました。
トリニティ（2020/06/27追加）
トリニティ株式会社 | Trinity, Inc. 【Digital Life Products】
スマホやタブレット等デジタルガジェットを中心に、デジタルライフ関連のアクセサリーや雑貨まで広く扱うオンラインストア。
利用テーマはスターターテーマのUnderscoresを使って構築しています。ブランド、タグ、カテゴリーは当たり前に、キーワード検索や条件検索まで網羅しており、製品を探しやすい導線設計でした。WordPressだと比較的重くなりがちな条件検索ですが、快適に動いておりユーザーにストレスを感じさせません。
ブログ記事は連日更新されており、記事内に書かれた商品案内にカートボタンがあり、ワンクリックで購入へ進むことができます。
サイト全体がスマートフォンファーストで作成されていて、明確にターゲッティングされている印象でした。
ラヴサーフ（2020/06/27追加）
ラヴサーフ公式ウェブサイト｜ プロサーファー西井浩治が運営するロスト、プレセボの正規代理店ラヴサーフ
実店舗があるサーフボードショップのコーポレートサイト兼ECサイト。時期は不明ですが、公開情報からみると2019年6月頃にウェブサイトをリニューアルしたようです。リニューアルによって、店舗とウェブでポイントが連携して利用できるとのこと。WooCommerceでこのようなDB連携機能をもっているサイトは初めてみました。
利用テーマは前に出てきたトリニティさん同様Underscoresです。購入前に相談できる場所として、ご購入相談フォーラムページを用意。サーフボードは安くない買い物なので、事前に店舗スタッフさんに相談できるのはありがたいですし、自分と似た悩みで相談している人がいないかどうか検索できます。さらに、コンテンツが増えていくとSEOにも有効なので検索からの流入増も期待できます。
一度見た商品を一旦キープしておきたい、と思ったときに使えるお気に入り機能も便利です。また、マイページから友達紹介URLの生成が可能で、紹介先にも紹介本にもメリットがあるのがいいですね。
全体的に、利用者のことをよく考えられて作られているショップだと感じました。
PHENOM（2020/10/24追加）
実店舗があるアパレル店のコーポレートサイトをWordPressで制作し、オンラインショップ機能はWooCommerceで構築することにより、コーポレートサイトと一体化できます。
導入プラグインとして、WooCommerceを日本仕様にするWoocommerce日本向けプラグインを利用しているようですが、公式のプラグインディレクトリでは2019年7月を最後にクローズされているようです。機能一覧を見る限りでは、現状のWooCommerce（2020/10/24時点でVer 4.6.1）でできることも増えてきており、日本語化プラグインであるJapanized For WooCommerceでカバーできるところも多いかと思います。
テーマはスターターテンプレートであるUNDERSCORESを利用。プラグインは他に特に目立ったプラグインはありませんでした。
商品ページの画像ギャラリーの位置は横並びになっているテーマが多いんですが、カスタマイズして縦並びに変更しているのが見やすいと感じました。特にアパレルは縦画像のほうが見やすい傾向があり、横並びより縦並びのほうが見やすいんだと思います。
G-SQUARE（2020/10/24追加）
ゲーミンググラス(ゲーム用メガネ) 『G-SQUARE』 – ゲーミングアイウェア『G-SQUARE』はゲーマの目を守る鎧
ゲームユーザー向けのメガネ事業用のコーポレートサイト兼オンラインストア。こちらも実店舗とオンラインストアで販売しています。
メガネを販売している以上、度付きのメガネの場合があります。レンズのカラーやフレームカラーを選べるのはもちろんですが、レンズの度付きだった場合、購入画面で数値を入力することができます。
購入時にこれらの情報がわかっている前提になるため、初見で購入完了まで行く確率は低いかもしれませんが、WooCommerceのカスタマイズとしては非常に興味深く参考になります。また、カート画面もデフォルトのWooCommerceのよくあるカート画面からカスタマイズされています。
終わりに
WooCommerceを利用して日本語で作成されたECサイトをご紹介しました。無料有料にかぎらずテーマを利用し、それをベースに子テーマを作りカスタマイズして構築して行く方法が手間も少なく、WooCommerceが生成するコンポーネントへの対応もできており、さらにレスポンシブ対応もされているので、これは使わない手はありません。
テーマは一から作るとカート周りの画面まで想定する必要もあり、中々現実的ではありません。テーマはすでに有るものを利用する前提で、その上で必要なデザインの変更だったり、機能を盛り込む箇所をカスタムしていくことをお勧めします。
また、カスタマイズする場合は、テーマのアップデートに備えて子テーマを作成してカスタマイズを行うようにしましょう。
※「WooCommerceで作成しているサイトがあったぞ！」「このサイトも紹介してくれない？」等ありましたら、お気軽にコメント欄か問い合わせフォーム、またはTwitter等でご連絡ください。
コメントを残す