• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / WooCommerce / [コスメ・美容系]WooCommerceを利用して構築された美容関係ECサイト9事例

[コスメ・美容系]WooCommerceを利用して構築された美容関係ECサイト9事例

池田祐太郎 | 2018年5月30日 更新 | 2018年1月6日 公開

世界の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 終わりにおすすめのテーマ開発方法について
    • 10.1 プラグインは意外と少ない?

オーガニックスキンケアの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

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 | SERUM SAVANT

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が使いやすそうでオススメできそうです。

おすすめのテーマ構築方法としては、

  1. 有料テーマを購入し、時間を節約する。必要なところをカスタマイズ
  2. WooCommerce公式のテーマを利用し、カスタマイズ
  3. オリジナルテーマで完全独自のオリジナルデザイン

などが挙げられます。おすすめなのは手間が少なく、すでにベースのコーディングが完成している1, 2です。提供元次第ですが、今後のアップデートにも期待できます。

テーマをインストールしてカスタマイズする場合は、元テーマには手を加えず子テーマとしてカスタマイズするようにしましょう。それにより、提供元からテーマのアップデートがあった場合にカスタマイズ部分を上書きされずにアップデートすることが可能です。

プラグインは意外と少ない?

プラグイン数は全体的に少なめの印象でした。日本国内のWordPressで作るコーポレート系のサイトは結構プラグイン詰め込んで作られているものも少なくないので、意外と少ないんだなあという印象でした。

表側に表示されていないというだけで、実際にインストール済みのプラグインは多いのかもしれませんけどね。

WordPress保守管理サービス

Filed Under: WooCommerce

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

サブスクECサイトをノーコードでサクッと構築してみた
2021年4月5日
タグ: サブスクリプション
カテゴリー: WooCommerce
WooCommerceで軽減税率を設定する
2019年9月18日
カテゴリー: WooCommerce
【2021年更新】WooCommerceで作られた国内ECサイト一覧まとめ
2017年12月13日
カテゴリー: WooCommerce

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • Shopifyで構築されたサブスクサービス「BASE BREAD」を契約してみた(後編)
  • Shopifyで構築されたサブスクサービス「BASE BREAD」を契約してみた(前編)
  • サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  • かんたんにできるページ表示速度を軽くするためのオンライン画像圧縮ツール
  • フィードバックはテキストでもらうことを明記しておいた方がいい理由

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO shopify SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サブスクリプション サーバー スマホサイト スマートフォン ソーシャル ツール ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.