トップページへ戻る

化粧品・コスメのWebデザイン・コンテンツを解説!

この記事を書いた人 :

化粧品・コスメのWebデザイン・コンテンツを解説!

新作コスメや新しいブランドサイトの制作をしようと進める中で、悩んだり困ったりしていませんか?
世の中に、このデザインにしたら絶対アクセス数が伸びるとか、売上が上がるというサイトのテンプレートがあればサイト作りも簡単ですが、そんな都合の良いものは残念ながら存在しません。それなら、既にある競合他社のサイトを見て参考にしてみようと考える人もいるでしょうが、サイト制作にはじめて携わる人や馴染みがない人なら「競合サイトのどこをどう活かしたら良いの?」とか「そもそもどこを見たら良いの?」とか、余計に迷ってしまう人もいるでしょう。

…そこで!このページでは、化粧品・コスメのサイト制作における悩みを抱える人に向けて、サイト制作に役立つ様々な情報を紹介します。
例えば、「化粧品業界のメインビジュアル(画像)の傾向」や「業界に多い「サイトカラー」の傾向」、「製品の魅力や正しい情報を伝えるコンテンツ内容」 など。
化粧品・コスメサイトを作る際のヒントを優良サイトと共に紹介しながら解説していきます。さらに、サイトを制作した後のインターネットにおけるプロモーション方法も紹介しますので、ぜひ、参考にしてみてくださいね!

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

サイトを作成する前に目的を決めよう!

サイト制作をしたら「色々できるようになる!」と、考えている人も多いのではないでしょうか。確かに、サイトがあればインターネットを通じて、自社製品を世界中の人に届けられるようになります。ただし、サイト制作は、あくまでも”きっかけ”でしかなく、適切に運用していくことで売上や認知向上などの成果に繋がっていくのです。
そして「サイトの目的(成果)は何か?」を決めることが、サイト制作の前に決めておくべき大切なポイントになります。

サイトを制作して「何をしたいのか」という明確な目的がなければ、何を目指してサイトを作ればいいのかわからないですよね?また、作ってみたものの「何を持って成果と言えるのか」がわからないままなら、ただ闇雲に運用し続けるしかありません。誰も、そんな無駄なことしたくありませんよね?
「このサイトで何をしたいのか(目的)」を明確にすれば、その目的に合わせて、必要となるサイトの要素がイメージしやすくなりますし、明確な目的があることでサイトを作った後に「目標に対してどれくらい達成しているか?」と評価の判断もしやすくなります。だからこそ、サイトの目的を決めるのが先決なのです。

化粧品・コスメサイトの主なデザイン・UIについて

日本で発売されている化粧品・コスメは、様々な商品が販売されています。
そのため、化粧品・コスメサイトのデザインといっても、サイトによってテイストが異なります。ここでは、「デパコス(百貨店コスメ)」、「ドラコス(ドラッグストアコスメ)」、「プチプラ」の各種ブランドサイト、スキンケア系サイト、通販メインのコスメサイトに絞ってデザインとUIについて見ていきます。

化粧品のイメージを決める!メインビジュアル

化粧品・コスメサイトにおいて「イメージ」は何よりも大切なポイントです。ユーザーがサイトに訪れて最初に目にする「メインビジュアル」が良くなかった場合、ユーザーの興味や購買意欲も下がってしまい、商品およびブランドに対してのマイナスイメージに繋がってしまいます。だからこそ、化粧品・コスメのサイトでは、ユーザーがサイトに訪れて目にする場所にある「メインビジュアル」に力を入れているところが多いのです。では、各種ブランドサイトやスキンケアサイトなどで、実際にどんな写真や動画をメインビジュアルに設定しているのか見てみましょう!

デパコス化粧品ブランドのメインビジュアル

デパコスとは「デパートコスメ」の略称で、名前の通りデパートや百貨店などのコスメカウンターで購入できる化粧品・コスメのことを指しています。

  1. THREE
  2. イヴ・サンローラン

デパコス化粧品ブランドの10サイトをピックアップし、メインビジュアルを確認してみると、商品・ブランドのイメージモデルの写真を使っている6サイト、化粧品・コスメの写真を使っている4サイトに分かれました。また、メインビジュアルとして設定されている写真は3~4枚で、どのサイトもスライドショーで切り替わるようになっているところがほとんどです。

ドラコス化粧品ブランドのメインビジュアル

ドラコスとは、ドラッグストアのカウンセリング化粧品として並ぶことの多い化粧品・コスメを指します。デパコスとプチプラの間のコスメでもあるため、ドラコス以外にドラコスと言われることもあります。

  1. マキアージュ
  2. コフレドール

ドラコスの化粧品ブランド10サイトのメインビジュアルでは、イメージモデルの写真を使っている8サイトと、化粧品・コスメの写真を使っている2サイトに分かれました。多くのサイトで商品イメージとなっている馴染みのある女優やモデルの写真がメインビジュアルとして使われており、パッと見でわかりやすく親しみやすい印象を与えています。デパコス同様、メインビジュアルはスライドショーで切り替わるようになっています。

プチプラ化粧品ブランドのメインビジュアル

プチプラとは、ドラッグストアやバラエティショップなどで購入できるリーズナブルな化粧品・コスメのことを指します。プチプラはドラコスよりも、さらに安い1,500円以下のアイテムを中心に販売しているブランドです。

  1. キャンメイク
  2. KAIE

プチプラ化粧品ブランド10サイトのメインビジュアルでは、イメージモデルの写真を使っているサイトが9サイトと、化粧品・コスメの写真を使っているサイトが1サイトでした。ドラコスブランドと同じように商品イメージの女優やモデルの写真がメインビジュアルとして使われています。また、デパコスやドラコスブランドのサイトに比べて動画を活用しているサイトも多いです。

スキンケア系サイトのメインビジュアル

肌の手入れや保護をするための化粧水や乳液、クリームなどを中心としたサイトです。

  1. SK-2
  2. NOEVIR

スキンケア系サイト10サイトのメインビジュアルは、商品をメインにした写真を設定しているサイトがほとんどでした。一部、イメージモデルを使っているサイトもありますが、あくまでも商品がメインです。各種ブランドサイトに比べて写真の色味が全体的に明るいトーンになっています。

通販コスメサイトのメインビジュアル

店舗での販売がほとんどなく、ネット通販を中心に販売するコスメブランドのサイトです。

  1. L'ORACLE
  2. Attenir

インターネット・通販をメインにしたコスメサイトでは、商品を前面に打ち出したメインビジュアルを使っているサイト9サイト、動画が1サイトでした。それもそのはず、通販コスメサイトの目的は、サイト内で商品を購入してもらうことにあるため、各種ブランドサイトに比べてよりユーザーに訴求するようなメインビジュアルになっているのです。

今回は、あくまでも特定のサイトから調査した傾向値でしかありません。
良質なWebサイトを作るためのヒントは、競合他社のサイトの中に、もっとたくさんあります。
そのためにも多くのサイトデータを集めて分析することが、自社サイトを成功に導くセオリーのひとつです。
とはいえ、集めなければならないデータ、そして同じ分量だけ分析しなければならないとなると、時間も労力もかかってしまいます。

競合他社サイトの情報収集を魔法のようにワンクリックでできたら良いですよね?
…実は、data maisonなら、あなたのその願いを叶えられます!
data maisonは、気になる競合サイト、新勢力企業のサイト、業界全体のサイトなどのデータをワンクリックで手軽に手に入れられるツールです。あなたがベンチマークしているサイトについて、今回紹介しているような「TOPページの構成」「サイトカラー」や「フォントサイズ」などの情報も手に入りますし、業界全体のファーストビューの傾向、コンテンツの傾向なども確認できます。

本来はWeb担当者やデザイナーなどが、自分でサイトを抽出して苦労しながら調査していたことを、data maisonならたった165円~※という圧倒的な低価格で、最新の業界データを一瞬で手に入れることができます。

ぜひ、今までの煩わしい調査から解放される魔法のような調査体験を経験してみてください。
もっと化粧品・コスメのサイト傾向を知ろう!

化粧品・コスメサイトのカラー

化粧品・コスメサイトでは、デパコス・ドラコス・プチプラブランドによってサイトのテイストがやや異なります。そのため、よく使っているカラーも異なり、一概には言えません。しかし、ブランドによって使っているカラーの傾向がありましたので紹介します。

デパコスブランドのサイトカラー

デパコスブランドの10サイトを確認してみると、グローバルナビゲーションで使われている色は、ホワイトが7サイト、ブラックが2サイト、グレーが1サイトでした。10サイト全てがモノクロ調で統一されており、サイトの色味がとてもシンプルです。では、サイト全体が地味なのかというと、そうではありません。色鮮やかなコスメの写真が、メインビジュアルやアイキャッチとして豊富に使われているため、そうした商品がサイト内で際立つようにあえて色味を抑えているのです。

ドラコスブランドのカラー

ドラコスのブランドサイトでも、ホワイトまたはブラックがグローバルナビゲーションで良く使われている色です。デパコスブランドに比べて使われる色味が増えて、鮮やかなゴールドやピンクなどがポイントカラーとして使用されています。デパコスブランドのシンプルなサイトデザインを活かしながらも、ブランド・ターゲットイメージに合う色を追加してアレンジをしてみるのも良いでしょう。

プチプラコスメのカラー

プチプラブランドサイトでは、グローバルナビゲーションにホワイトやピンクが良く使われています。デパコスや中間サイトに比べて、かなり色とりどりです。
ポイントカラーとして使われている色味としても、ピンクやゴールドが多くグラデーションなども多様しています。プチプラのメインターゲット層は女子高生・女子大生などのティーンが中心となるため、モノクロで統一されたデパコスブランドと比較して、カラフルで可愛らしく、親しみやすい印象の色味になっています。

スキンケア系サイトのカラー

スキンケア系サイトでは、グローバルナビゲーションにホワイトやグレーが良く使われています。サイト全体が透明感のある色合いになっているため、ポイントカラーも清潔感がありナチュラルな印象を与えるグリーンやブルー系を使うサイトが7割ほど。残り3割は、ロゴやブランドのイメージカラーをポイントカラーにしていました。

通販コスメサイトのカラー

通販コスメサイトでは、ホワイトやブラックがグローバルナビゲーションのカラーに設定されています。
ポイントカラーには、レッドが多く使われていていますが、その他にもオレンジやピンクなどの女性らしいカラーも使われている傾向です。通販コスメサイトの場合、TOPページ内に様々な情報を詰め込んでいるため、最も伝えたい部分をわかりやすくするためにも注目される明るい色をポイントカラーに持ってきているのがわかります。

もし、ポイントカラーを何色にしようか悩むなら、ロゴカラーをそのまま使ってみましょう。ポイントカラーにロゴカラーを使うことで「この色のブランドといえば○○」というような印象付けに役立てられますよ。(ただし化粧品ブランドは無数に存在するため、多くのカラーが既にロゴに使われていますので選定する際はよく検討してから決めましょう)

化粧品・コスメサイトのフォントサイズ・フォントファミリーについて

化粧品・コスメサイトのフォントサイズ、フォントファミリーを調べました。(※50サイト)
化粧品・コスメサイトで使われていたTOPページ内の平均フォントのサイズは12~14pxでした。調べたサイトの中で最小サイズは10px、最大は16pxです。ちなみに、プチプラコスメサイトだけで絞って見てみると、学生がメインターゲットでもあることからか、やや小さ目の10~12pxのフォントサイズで可愛らしいサイズ感になっていました。

また、フォントファミリーを調べてみたところ「ヒラギノ角ゴ」を使用しているサイトが多く、30サイト中19サイトで採用されています。ヒラギノ角ゴは様々なジャンルのサイトでも使われており、どんなデバイスでも「読みやすく、美しい」と好評のため設定しているサイトが多いと考えられます。その他、「Noto Sans JP」「メイリオ」「sans-serif」なども設定されていました。特に「Noto Sans JP」は「ヒラギノ角ゴ」に次いで多いフォントです。これは、GoogleとAdobeが共同開発したオープンソースのWebフォントなので、さらに癖がない綺麗なフォントとなっていることから良く使われています。

化粧品・コスメサイトの主なコンテンツ

デパコス、ドラコス、プチプラの各種ブランドサイト、スキンケアサイトなどに共通して必要なコンテンツ内容についてみていきましょう。

化粧品・コスメに欠かせない商品説明

化粧品・コスメサイトで欠かせないコンテンツのひとつが「商品説明」です。商品説明に含まれる重要な要素「画像・動画」「特徴・成分」「使用方法」について、どんな内容が必要なのかを確認するためにそれぞれの項目で見ていきましょう。

商品のイメージを伝える「画像・動画」

化粧品・スキンケア関連のブランドサイトにとって、商品のイメージを決めるビジュアルはとても重要です。商品画像を気に入れば、意欲が沸いて購入したいと思うユーザーもいるでしょう。

テレビCMをしているようなブランドであれば、広告モデルとなる有名人を使った写真を使うパターンもありますし、商品だけをシンプルに並べた写真を使うパターンがあるなど、ブランドによってそれぞれ。ターゲットユーザーに届けたいイメージを考えて決めましょう。また、化粧品に関しては、製品そのものの価値を求めるだけではなく、パッケージデザインも購入時の参考にするユーザーも少なくありません。商品ページでは、画像や動画を多く使いましょう。特にパッケージにもこだわっている場合、そのデザインの良さを伝えるのもサイトの役目です。様々なパターンで撮られた写真を用意してユーザーにアピールしてください。

商品の魅力や特徴を伝える「成分説明」

気になっている化粧品があれば、どんな特徴があるのか知りたいものです。

例えば、口紅なら「落ちにくい」「発色が良い」「うるおう」などのキーワードがひとつの特徴になります。また、シャンプーであれば「潤いを落とさない」「泡立ちが良い」「頭皮に優しい」なども特徴と言えます。どういう特徴があるのか明記していない場合、ユーザーにとってそれは「よくわからないもの」という認識になります。

よくわからないものに対して、人はなかなか購入しようとは思わないので、しっかりこの商品の特徴はこうです!と紹介することで、ユーザーは自分が求めている商品かどうかを判断しやすくなり、購入候補のひとつに繋がります。

また、化粧品やスキンケア商品は、直接自分の肌に付けるものです。ユーザーによって、肌質、アレルギー反応など様々で、成分の説明を欲している人も少なくありません。近年は、オーガニック化粧品や化学成分を使わないケア用品なども多く登場しているほど、成分に敏感な人が増えています。どんな成分が使われているのかがわかれば、ユーザーも安心して購入して使えるので、商品紹介の際には成分についても明記しましょう。

ユーザーへのお役立ち情報になる「使用方法」

商品の使用方法を紹介することで、ユーザーは自分が使うシーンをイメージしやすくなります。ユーザーもどういう方法でメイクを施せばモデルのようになるのかが気になるので化粧品・コスメサイトでは、各商品ページに商品の使用方法が紹介されているのです。

例)アイシャドウの場合

マキアージュ

アイシャドウの色と筆とチップにそれぞれ番号をふり、瞼にどの色を重ねれば良いのか順番に教えてくれます。またモデルの瞼の位置に白点線が引かれており「①の場合は、この位置にこの色で…②の場合は、この位置に重ねる」という方法が、ビジュアルでわかりやすく紹介されています。画像だけでは補いきれない部分は、テキストでも補足されているので細かいところまで気が利く使用方法になっています。このほかにも、最近は動画を活用して使用方法を紹介するサイトも増えていますので、コンテンツのひとつとして導入してみましょう。

クチコミサイトに欠かせない「ランキング」

コスメ・美容のクチコミサイトに必ずあるコンテンツが「ランキング」です。それぞれのサイトによってランキングの切り口や集計方法が、多種多様となっており、そこが差別化のポイントでもあります。

例えば、アットコスメならランキングの集計方法は「口コミ件数×おすすめ度」をアットコスメ独自の集計方法を元にランキングにしています。また、コスメニストなら「口コミレポートの7段階評価×口コミ数」を元に独自の方法でランキングにしているのです。そのため、同じ「ファンデーションランキング」でも、まったく同じ順位になることはないのです。ランキングは「今このコスメが売れているよ・評価されているよ」というのを伝えるコンテンツで、ユーザーにとっても、新しいコスメを探すときのひとつの基準になるものです。集計方法だけではなく、ランキングの切り口も「シーズン別」「悩み別」「評価別」など、多様に揃えてみるのも良いでしょう。

インターネットにおける化粧品・コスメのプロモーション方法

新しい化粧品を開発しサイトも制作したけれど、他にどんなプロモーション方法があるんだろう?と思う人もいるでしょう。実際、プロモーション方法としては「店舗」「雑誌」「テレビCM」「インターネット」と数多くのプラットフォームあり、それぞれで戦略やターゲットも異なります。ここでは、インターネット上でできるプロモーション方法に絞って紹介します。

コスメ・美容のクチコミサイトに登録する

化粧品・コスメブランドのプロモーション方法として、コスメ・美容のクチコミサイトに商品を登録したり、販路としてポータルサイトで商品展開をしたりすることも有効です。

コスメ・美容のクチコミサイトの利用者数は年々増えており、各サイトのレビューを見て商品購入を検討する人も少なくありません。コスメ・美容のクチコミサイトは多数あり、登録者もダントツに多い「アットコスメ」から、10代~20代向けの若年層をターゲットにした商品を紹介したい場合には「LIPS」というレビューサイトがありますし、顔出しありの口コミを投稿してほしいのであれば「コスメニスト」などが挙げられます。数ある全てのコスメ・美容のクチコミサイトに登録するのも良いですが、ターゲットや目的によって登録するサイトを使い分けても良いでしょう。また、新しい化粧品・コスメブランドであればあるほど、商品の認知を広げたい、ブランドのファンを作りたい、一度でいいから試してほしい!と考えていることが多いと思いますので、無料で登録できるコスメ・美容のクチコミサイトからまずは始めてみましょう。

ちなみに、コスメ・美容のクチコミサイトでは、有料プランを用意しているところもあります。有料プランにすることで、クチコミサイト内でのPRができるようになりますが、費用はサイトやプランによっても異なるため、費用対効果を考えた上で有料プランにするか決めると良いでしょう。

Twitter、InstagramなどのSNSを活用する

気になる商品の情報やレビューを、SNSを活用して情報収集するユーザーが増えています。SNSでは、美容やコスメが好きという人同士でコミュニティを作り、情報交換が盛んに行われています。それに目を付けた化粧品・コスメブランドも自社ブランドのアカウントを作成して新商品やキャンペーン案内の告知を投稿しています。

特に、化粧品・コスメの商品は、TwitterやInstagram上の「ハッシュタグ」を使って検索する人も少なくありません。実際に、10代~40代の女性にアンケートを取った結果、約半数が店名やブランド名などの固有名詞ハッシュタグを使って最新情報を確認したり、写真や口コミを商品購入の参考にしていることがわかっています。化粧品ブランドがターゲットとしている女性ユーザーが多くいるSNSを活用することで、集客を強化したり、テーマに合わせた投稿でブランディングをしたり、ユーザーとのコミュニケーション作りをするなどメリットがあります。SNSから自社商品の売上やサイトへの流入数を増やすためには、ハッシュタグやメンション、URLを上手に組み込んで導線設計をするのが効果的ですので上手に活用しましょう。ちなみに、日本のInstagramユーザーがハッシュタグ検索をする回数は、世界平均の3倍もあるそうで、Instagramを使っている人にとっては「検索プラットフォーム」としての役割も果たしていると言っても過言ではないのです。

実際に、デパコス・ドラコス・プチプラ化粧品ブランドのSNSのアカウント保有数が、どのようになっているのか見てみましょう。

デパコスブランドのSNSアカウント保有数

  • Instagram:10
  • Twitter:9
  • Facebook:9
  • LINE:6
  • Youtube:6
  • Tumbler:1

Instagramのアカウントはどのブランドにもありました。どのブランドも1週間に1回以上は定期的に投稿が行われており、フォロワー数も全体的に多いのです。次いでTwitter、Facebookがあるのもそうですが、LINEやYoutubeのアカウントも保有しているブランドが多く、複数のSNSを運用しているブランドが多いようです。

ドラコスブランドのSNSアカウント保有数

  • Twitter:8
  • Facebook:7
  • Instagram:6
  • mixi:3
  • Youtube:2
  • LINE:1

ドラコスのブランドは、デパコスブランドに比べて運用しているSNSがやや異なります。InstagramよりもTwitterの方が運用していることが多く、中高年向けのコスメブランドの場合はSNSアカウントを保有していないところもありました。投稿頻度もブランドによってかなり差があり、SNSでのプロモーションの力の入れ具合が異なるようです。

プチプラブランドのSNSアカウント保有数

  • Instagram:10
  • Twitter:8
  • Facebook:7
  • Youtube:6
  • LINE:1

プチプラブランドはデパコスブランドと同様に、確認した10サイト全てでアカウントがありました。投稿頻度は、ブランドによって異なりますが、多いところで1日1投稿、少なくて1週間に1投稿の頻度です。商品の使い方についてわかりやすく紹介していたり、動画を積極的に活用して紹介していたりします。

化粧品・コスメのブランドで見ても、Instagram、Twitter、Facebookの3大SNSは今も健在です。そして近年、ユーザー数を増やしているYoutubeでは「メイク動画」が人気です。ブランドサイトでもメイクアップに関する動画を作成して投稿しているところも多いので、自社商品をアピールする場として活躍するのも良いでしょう。
また、SNSは通常通りに投稿するだけではなく、プロモーションとして広告を出稿することも可能です。商品やブランドのターゲットとしているユーザーが多く集まるSNSでPRしてみてはいかがでしょうか。

インフルエンサーを活用しよう

化粧品やファッションなどをインスタやYoutubeで紹介するインフルエンサーも多く、化粧品業界と相性が良いとされています。上記で紹介した自社のアカウント運用と追わせてインフルエンサーを起用して、プロモーションするのも良いでしょう。インフルエンサーを使うプロモーションは従来の広告とは異なり、ユーザーがユーザーに向けて発信するため共感や好感を集める効果が期待できます。プロモーション方法に悩んでいる場合は、検討してみてはいかがでしょうか。

化粧品・コスメサイトの傾向と今後のまとめ

化粧品業界はEC化が遅れている分野です。2020年7月に経済産業省が発表したデータでは、化粧品・衣料品の業界におけるEC化率は6%で、他の産業と比べてもあまり高くありません。EC化が遅れている理由のひとつとして、ドラッグストアやバラエティショップなどで数百円から購入できる商品(プチプラ化粧品)があることや、デパコスのような高い化粧品を購入する際は、店頭で実際に試してから選びたいというニーズが強いことから、ECサイトの利用がなかなか高まりにくい状態でした。しかし、新型コロナの影響によりEC化が進む可能性が高まっています。

実際に、化粧品に関する通販会社は年々ユーザー数を伸ばしており、2019年4月と2020年3月を比較した際には、130~300%もユーザー数を増やしている化粧品ECショップが多くあるのです。反対に、百貨店などの化粧品売り場では、感染リスクの影響から店頭販売の需要が落ち込んでいて、今後も需要減が続くと考えられているため、ブランドサイトとしてだけではなく、オンラインショップとしての整備も進めておくことが重要になるのではないでしょうか。

化粧品・コスメは女性のものから幅広い人に向けて展開していけるチャンスが来ているかもしれません。インターネットや自社ブランドのサイトをより活用して、様々なユーザーに情報を届けていきましょう。

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ