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 珈琲豆ましろ
- 10 テニトラス
- 11 BabyBjorn
- 12 フクフクプラス
- 13 .comm
- 14 トリニティ
- 15 ラヴサーフ
- 16 PHENOM
- 17 G-SQUARE
- 18 サンクワシカカンパニー
- 19 DOVE SURFING WETSUITS
- 20 株式会社 耕
- 21 tokyobike
- 22 暮らしとワインのマルシェ
- 23 終わりに
三浦技研公式オンラインショップ
三浦技研公式オンラインショップ｜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のよくあるカート画面からカスタマイズされています。
サンクワシカカンパニー
2021/01/05追加
THANK WASIKA COMPANY サンクワシカカンパニー
ハイファイブクリエイト制作で恐縮です。ジビエ料理である鹿肉を扱うサンクワシカカンパニーは、厚生省のガイドラインより厳格に運用して安心・安全して食べられるように加工施設と連携し都内スーパーやオンラインサイトよりご家庭にお届けしています。
会社コーポレートサイトをWordPress、通販サイト部分をWooCommerceで作成し、同じドメイン上に作成することで遷移をスムースにし、サイト全体のブランディングを維持しています。
利用テーマはページビルダーで有名なElementorが用意するデフォルトテーマをを元に子テーマを作成。同ページビルダーを利用して作成しているため開発効率が上がり、その上完全レスポンシブでスマートフォン、タブレット、デスクトップに対応しています。
以下の制作実績にも紹介していますので、ご興味あればご覧ください。
DOVE SURFING WETSUITS
2022/02/09 追加
国産高級ウェットスーツのDOVE | DOVE SURFING WETSUITS
サーフィンのウェットスーツを販売するECサイトをWooCommerceを使って作られており、特筆すべきはシミューレーターページで生地やカラー等をカスタマイズした内容をそのままオーダーできること。
このようなセミオーダータイプのECにおいても改修次第でWooCommerceにて対応することが可能です。
株式会社 耕
2022/02/09 追加
WooCommerceで作られた日本酒をオンラインで販売するECサイトです。スマホに最適化した作りを採用されており、利用プラグインは必要最低限といった印象です。ランキング、最近チェックした商品などはWooCommerceの基本機能に含まれていますが、お気に入りに追加し、あとから確認するという機能はないため、プラグインがコード追加によるカスタマイズが必要です。見たところプラグインは利用していないようでしたので、独自に実装していると予想しますが、お気に入りボタンを押しても動作していないようでした。
tokyobike
2023/03/03追加
WooCommerce を使って作られたオンライン自転車販売サイトです。商品ページでは、自転車のサイズやカラーを選択できるようになっています。ソースコードを解析したところ、これは WooCommerce の提供する基本機能である「バリエーションのある商品」機能を使って構築されています。
参考: WooCommerce のバリエーションのある商品を追加して売上向上を図る
商品説明や使い方は画像と説明テキストが豊富で丁寧に作られており、スペック内にも純正パーツの紹介がしっかりとされており、商品ページはしっかりと作り込んであります。テーマは見たところ独自テーマのようでした。
暮らしとワインのマルシェ
2023/04/05 追加
山梨県勝沼にあるワイナリーで、実店舗も構えながら WooCommerce で構築されたオンラインストアで全国に向けて販売をされています。
特筆すべきはギフト・熨斗対応です。ギフト対応は「有料ギフト商品」をカートにいれ、どの商品をギフト対応とするかを備考欄に記述します。熨斗はギフトボックスを注文すると無料で対応しており、こちらも備考欄に熨斗の種類や名入れについて記述します。
そして、ギフトの特性として一度のオーダーで複数の宛先へ配送するケースもあります。それに対応するため、WooCommerce が公式に販売している年間$49の有料プラグインである「Shipping Multiple Addresses」を導入しています。これにより、一度の買い物で複数のお届け先に発送が可能となります。お中元やお歳暮でワインを送るという場合に対応でき、有料にはなりますがギフト商品の販売であれば有力な選択肢になります。
テーマはストアフロントをベースに構築されているようです。（子テーマ対応は無し）
終わりに
WooCommerceを利用して日本語で作成されたECサイトをご紹介しました。無料有料にかぎらずテーマを利用し、それをベースに子テーマを作りカスタマイズして構築して行く方法が手間も少なく、WooCommerceが生成するコンポーネントへの対応もできており、さらにレスポンシブ対応もされているので、これは使わない手はありません。
テーマは一から作るとカート周りの画面まで想定する必要もあり、中々現実的ではありません。テーマはすでに有るものを利用する前提で、その上で必要なデザインの変更だったり、機能を盛り込む箇所をカスタムしていくことをお勧めします。
カスタマイズする場合は、テーマのアップデートに備えて子テーマを作成してカスタマイズを行うようにしましょう。
カスタマイズの幅として、WooCommerceで構築すると基本機能にはないカスタマイズも可能です。ご興味あれば一例をかんたんに紹介している記事をご参考ください。
WooCommerceサイト制作・保守はお任せください
WooCommerceを利用した新規ECサイト制作や、既存サイトとECサイトを融合したサイトリニューアルはもちろん、カスタマイズされたECサイト制作も是非ご相談ください。公開後の運用・保守も含めてサポートいたします。
コメントを残す