世界のECサイトの28%はWordPressプラグインであるWooCommerceで作られているということもあり、海外での制作事例をもとに、どのようなサイトがWooCommerceをつかって作成されたのか調査しました。
今回はマスカラや化粧水、ヘアスタイリング剤やシェービングクリーム、石鹸やアロマなどなど、コスメ・美容系のオンラインサイトに絞りました。またモバイル決済が進んでいる現状としては当たり前ですが、全サイトレスポンシブウェブデザインにてスマートフォン対応実施済みです。
ECサイトの場合、日本とは決済・配送方法・税金など商習慣が異なる部分もあり、そのまま真似られるというわけではありませんし、海外テーマの場合は日本国内へのEC対応などカスタマイズが必要ですが、美容やコスメ系のECサイト構築のテーマやプラグイン選定、また見た目のデザインの参考になるかと思い、解説を含めてご紹介します。
目次
- 1 オーガニックスキンケアのMAHALO BALM beauty balm
- 2 シェービングケア製品のFITJAR ISLANDS
- 3 オーストラリアのスキンケアブランドSodashi
- 4 ニューヨークのスキンケア製品Kane NY
- 5 フレグランスとボディミストのItal Veloce
- 6 サロンと理髪店向け製品を扱うWilliamsport Bowman Barber Supply
- 7 ヘアスタイリング、スキンケア、ヘアケア商品を販売するBrilliance New York
- 8 スキンケア商品などを扱うWoW Junkie
- 9 オーガニックの手作り石けんショップのOne Leaf Soap
- 10 終わりにおすすめのテーマ開発方法について
オーガニックスキンケアのMAHALO BALM beauty balm
MAHALO BALM beauty balm to moisturize + regenerate
MAHALOスキンケアは、ハワイのカウアイ等で手作業で作られた贅沢で高性能かつ、環境に配慮し洗練されたオーガニックスキンケアを取り扱うスキンケアを扱うECショップです。
利用テーマはShopkeeperという有料テーマに子テーマを利用して作成。このテーマは2万件近い販売実績と4,000件近いコメント数、またレビューは4.63と高得点です。（執筆時点）
テーマで利用しているバージョンは1のため、現時点でのバージョン2.4.1とはデザインやレイアウトが結構変わっています。新しいバージョンの方がもちろんデザインは洗練されていますが、「参考サイトのデザインにしたい！」という場合はカスタマイズが必要です。
シェービングケア製品のFITJAR ISLANDS
Fitjar Islandsは洗練されたグルーミング体験のためのシェービングケア製品を取り扱うWordPressのECサイトです。
利用テーマはWordPressのスターターテーマとしてGithubに公開されているテーマでした。こちらはWooCommerceに特化しているわけではないため、推測の域となりますが、テーマ開発者が自分のテーマをベースにWooCommerceの公式テーマであるStorefrontをベースにカスタマイズして構築しているような印象を受けました。開発者はWooCoomcerceリーディング開発の一つのようです。ショーケースにも今回の参考サイトが紹介されていました。
オーストラリアのスキンケアブランドSodashi
SkinCare Provider in Australia | Sodashi
Sodashiはオーストラリアのパイオニアであり、すべて天然の純粋な植物成分で作られたスキンケア商品を扱うECサイトです。
同じくオーストラリアのクリエイティブエージェンシー、HUMAANによってオリジナルテーマで作られ、こちらのSodashiもケーススタディとして掲載されています。
商品ページは左側に商品説明を掲載し、右側にナビゲート機能を設けていますが、スマホでは取っ払って縦型のページ構成です。どちらかというとPCメインの作りのような印象を受けました。商品をカートに入れたときに遷移せずモーダル表示するUIは使いやすいと感じました。購入以降のフローはよくあるECサイトの購入フローと同じです。
WordPressプラグインはWooCommerce以外にはSEOプラグインの「Yoast SEO」、製品フィードを生成する「WooCommerce Product Feed」、Google Tag Managerを設置できる「DuracellTomi’s Google Tag Manager for WordPress」を利用しているようですが、他には目立ったプラグインはないため利用プラグイン数は少なめです。
ニューヨークのスキンケア製品Kane NY
Kane NYはニューヨークのDr. Michael KaneによるSERUM SAVANTはスキンケア製品を扱うECサイトです。
オリジナルテーマによる開発です。
プラグインを眺めていると、「Follow up email for woocommerce」という有料プラグインを利用しているのを発見しました。このプラグインはお客様に対して様々なアクションを起こせるプラグインです。
- 顧客がカートに入れた商品を取り消したら10%オフクーポンをメールする
- 誕生日の前にギフトカードをメールする
- 購入後に次回利用できるクーポンをメールする
- 特定の日時にクーポンメールを送る
- 未購入かつ登録した顧客に対してクーポンを送る
- 登録者へニュースレターを送る
ユーザーに登録してもらう、サイト訪問時にログインしてもらう仕組みがなかなか壁が高いですが、実現できればオンラインサイトが強力なツールになりそうです。
フレグランスとボディミストのItal Veloce
Ital Veloce – Fine Fragrances and Body Mists for Women – Fine Fragrance and Body Mists for Women
女性向けのフレグランスとボディミストを扱うWooCommerceサイト。
利用テーマは有料テーマであるFeminine WordPress Themesを利用していますが、この中のどのテーマを利用しているのかまではわかりませんでした。どれもフェミニンな女性的で優しい雰囲気のサイトデザインです。どのテーマも$75の均一のようでテーマ開発することを考えたら破格の費用だと思います。
サロンと理髪店向け製品を扱うWilliamsport Bowman Barber Supply
Williamsport Bowman Barber Supply
サロンとバーバーショップのため製品を提供するECサイトです。
テーマは有料テーマのレスポンシブで様々なサイト向けに使えるAvadaを利用しています。もちろんWooCommerceにも完全対応し、例として以下のような機能・特徴をもっています。
- フルデザイン対応
- 独立したカスタムパネル
- 1-6カラムまで選択可能
- 製品スライダーの実装
- ショップページと製品ページはフル横幅かサイドバー有りか選択可能
- カテゴリーやID、SKUによる製品表示
- WooCommerceに用意されているショートコードへの対応
- 互換性を確保のためにWooCommerceチームとの継続的な協力
この値段でこの機能！ですが、様々な目的に対応するため不要なコードが多いのはしょうがないところですね。このあたりはデモページで確認したり、WordPressの表示速度にケアする必要ありそうです。
こちらのバーバーサイトの商品周りのページを見る限りは特にストレスは感じませんでした。見た目的にもWooCommerceのベースのレイアウトからデザインを多少調整している、という感じでしょうか。
ヘアスタイリング、スキンケア、ヘアケア商品を販売するBrilliance New York
Hair Tools, Skin Care, Hair Care – Brilliance New York
ドライヤーやヘアアイロン、シャンプーやコンディショナー等のスキンケア、その他ヘアケア商品をとりあつかうECサイト。
利用しているテーマは有料テーマのレスポンシブECサイト用テーマBaselです。$59というお手頃の価格ですが、4,000以上の販売実績、4.95という超高評価のレーティング！これは期待できそうです。デモサイトも洗練されていて見やすく、カートに追加した際にカートへ進むよう促すインターフェイスが秀逸だと感じました。
スキンケア商品などを扱うWoW Junkie
WoW Junkie – Addicted to beauty
スキンケア商品をメインに取り扱うECサイト。
テーマはWooCommerce公式が用意しているStoreFrontです。デモページと比較してみると、どの部分をカスタマイズしているのかがわかります。
プラグインにソーシャルログインを実現するYITH WooCommerce Social Loginプラグインを利用しています。評価は普通ですが、登録のハードルを下げてくれるプラグインかと思います。Google, Twitter, Facebookに対応しており、どれを有効にするか選べるようですね。本サイトではFacebookログインのみ有効になっているようです。
オーガニックの手作り石けんショップのOne Leaf Soap
Organic Handmade Soap – Beautiful Handmade Soap Gifts
オーガニックハンドメイド石けんを扱うECサイト。
オリジナルテーマにWooCommerceプラグインを取り入れた開発のようです。プラグインはSEOにYoast SEO、問い合わせフォームにContact Form 7、メール配信サービスのWooCommerce用プラグインのWooCommerce MailChimpといったものを利用しています。
終わりにおすすめのテーマ開発方法について
美容やコスメ系をメインの販売としているECショップをご紹介しました。
テーマは有料のものを利用しているケース、WooCommerce公式のテーマ、またはオリジナルテーマ開発とそれぞれの制作方法が見られ、興味深かったです。
テーマは数年でデザインが変更するトレンドのため、これからWordPressでECサイトを構築する場合は有料でも十分安いため気に入ったテーマをベースに構築し、2-3年したらテーマを入れ替える、というのは手間もかからず現実的なのかもしれないと思いました。
オリジナルテーマでガリガリ開発している場合はなかなか機能改善やWordPressコアのアップデートや機能追加に追いつくだけでも大変ですからね・・・
有料のものだとレスポンシブECサイト用テーマBaselが使いやすそうでオススメできそうです。
おすすめのテーマ構築方法としては、
- 有料テーマを購入し、時間を節約する。必要なところをカスタマイズ
- WooCommerce公式のテーマを利用し、カスタマイズ
- オリジナルテーマで完全独自のオリジナルデザイン
などが挙げられます。おすすめなのは手間が少なく、すでにベースのコーディングが完成している1, 2です。提供元次第ですが、今後のアップデートにも期待できます。
テーマをインストールしてカスタマイズする場合は、元テーマには手を加えず子テーマとしてカスタマイズするようにしましょう。それにより、提供元からテーマのアップデートがあった場合にカスタマイズ部分を上書きされずにアップデートすることが可能です。
プラグインは意外と少ない？
プラグイン数は全体的に少なめの印象でした。日本国内のWordPressで作るコーポレート系のサイトは結構プラグイン詰め込んで作られているものも少なくないので、意外と少ないんだなあという印象でした。
表側に表示されていないというだけで、実際にインストール済みのプラグインは多いのかもしれませんけどね。
