【非デザイナー必見】ピンクを使った女性向けWebデザインの配色

こんにちは!ベーシックデザイン部の小林です!

htmlやCSS得意!Webサイトの開発技術を生かして、デザインも含めてトータルでWeb制作の仕事をして行きたい!そんな方へ、ちょっとの意識で仕上がりがぐっと変わるデザイン制作のポイントをお伝えします。

今回は女性向けサイトに多い「ピンク色を使ったWebデザイン」のお話。

ECサイト成功の鍵を握るのは女性の感覚!

Webデザイナーになったら、女性向けのECサイトやECアプリをデザインする機会も多いかもしれません。関連する広告バナーや女性向けコンテンツメディアの仕事も考えられます。なぜなら今後もますます伸びそうな分野だからです。

経済産業相によると日本国内のB to C(消費者向け)ECサイトの市場規模は、13.8兆円(前年比7.6%増)まで拡大しているとか。

参考:電子商取引に関する市場調査の結果を取りまとめました(経済産業省)

そしてECサイトの利用率を男女で見ると女性の方が高く、その中でもファッション系での利用率の伸びが顕著。さらにスマホサイト・スマホアプリの利用率増加が女性のECサイトの利用に拍車をかけています。

参考:楽天におけるスマートフォンユーザの動向・売上シェア(ECアプリコ)

女性の心を掴むデザインを作れることは1つの大きな武器になるでしょう。

女性の微妙な感覚をつかむ色は?

男性のデザイナーだったり、女性だけど「カワイイ系」はあまり好きじゃないというデザイナーにとって、女性向けサイトのデザインというオーダーは意外と難しいもの。

女性が好きな色といえば「ピンク!」という事はなんとなく想定できますよね?実際に女性が好きな色のアンケートで、13才以上のどの年代でもピンクが1位というデータもあります。

出典:色カラー 好きな色・嫌いな色を調べよう!色の統計

ただ、ピンクなら何でも良いのかと言うと、そうではありません。印象を左右する要素は3つあります。

 -1. 彩度(鮮やかさ)

 -2. 色味(青み/黄色み)

 -3. 組み合わせる色

それぞれの例について具体的なWebサイトの例を見て行きましょう。

ポイント1:彩度(鮮やかさ)

まずは彩度について。色には色相・明度・彩度の3つ属性があるのですが、彩度は色の鮮やかさ/鈍さのことを言います。

色相:いわゆる赤とか青とかピンクとかいった色の違い。

明度:色の明るさ(濃い/薄い)

彩度:色の鮮やかさ(鮮やか/鈍い)

▼色の属性

出典:新美ニュース

彩度の高い色はシャープ印象を与え、彩度の低い色は柔らかい印象や優しい印象を与えます。同じピンクでも彩度によってギャルぽくもなれば、大人っぽくもなるんですね。

 

・彩度の高いピンクの例

出典:ヒロインメイク

トレンド的に最近はあまり見かけなくなりましたが、ギャルっぽい印象を与えます。ティーン向けのコスメサイトなどに適しています。

 

・彩度の低いピンクの例

出典:WILL SELECTION

彩度の高いサイトと比べると、上品な印象や、やさしい印象を与えます。ここ数年はこんなフンワリとした印象のピンクのトレンドが続いています

ポイント2:色味(青み/黄色み)

また、微妙な色相の調整でも印象が違って来ます。

・青みのピンクの例

出典:POP TEEN

青みのあるパープル寄りのピンクは、エッジの効いた印象や、モード感を与えます。ターゲットが自立した女性、自由な女性、最先端トレンドを追いかける女性、個性を重視している女性などの場合に適しています。

 

・黄色味のピンクの例

KUMUSH

黄色みのあるサーモンピンクやベージュに近いピンクは、かわいらしい、フェミニンな印象を与えますね。ダーゲットの趣向性がガーリー、フェミニンだったり、コンサバーティヴな女性の場合などに適しています。

ポイント3:組み合わせる色

組み合わせる色によっても大きく印象が変わります。

・ ピンク× モノトーンの例

CHICCA

モノトーンと組み合わせると、シック・モードな印象になります。ピンクも彩度が高く、青みのピンクを使うと、よりクールな印象になりますね。

 

・ ピンク× ベージュの例

出典:あけぼのショップ

ベージュと組み合わせると、やさしい・かわいらしい印象になります。彩度が低く、黄色みのピンクとベージュとの組み合わせたは、落ち着きがありつつも、可愛らしさもある、女性に好感を持たれる「愛され系」配色の1つです。「美味しそう」な配色なので、飲食系のサイトにも合いますね。

 

・ ピンク× ブルーの例

出典:サンリオ

ブルーと組み合わせると、子供っぽいファンシーな印象に。ティーンやキッズ向けのWebサイトに向いています。

 

・ ピンク ×  ベージュ + ブルー の例

出典:資生堂

さらにこちらはブルーとベージュの併せ技で、ガーリーなマインドを持った大人女子向けのデザインを実現しています。

 

まとめ

「なんとなく女性向けと判断できる」レベルではなく、ユーザーが夢中になるくらい心を掴めるWebデザインとなると、繊細なトーンレベルまでターゲットユーザーの好みに合わせる必要があります。

逆に言えば、そこを押さえるだけでユーザーに使ってもらえる確率が高まる、つまりサイトパフォーマンスの向上にデザインとして貢献できるという事ですね!

配色はWebデザインが与える印象の中で最も大きな要素の1つです。

微妙なニュアンスの違いを理解して、ユーザーに支持されるデザインを提供しましょう。

小林ひかる

小林ひかる

女子美術大学卒業。ベーシック勤務12年。 LPやサービスサイトを中心に、企画・コピーを含めたトータルで「ユーザーに伝える」を担います。 「デザイナーではありません。ビジネスマンの心強いパートナーです。」をモットーに、誰のためのデザインかを考えて制作しています。 洋楽ROCKとイチローが好き。

Recommend Articles

1

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

2

簡単にオシャレで見やすくなるスライドの作り方

この記事では、デザイナーではない方や新人のデザイナーさんがプレゼンテーション(パワーポイントなど)のスライド作成で困ったときに、簡単にオシャレで見やすいスライドを作る方法をご紹介します! 法則に則って作成すれば、簡単にキレイなスライドを作ることが出来ますよ!

3

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

4

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

5

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?