デザイナー必見!! 女性向けWEBサイトデザインのポイント(1)配色編

津田祐典 津田祐典


LoadingMY CLIP

  • このエントリーをはてなブックマークに追加

こんにちは、ツダといいます。279-design(ツナグデザイン)という屋号で、フリーのWebデザイナーとして活動しております。このたび、街角クリエイティブで主にWeb制作にまつわるちょっとしたコラムというかハウツーというか、記事を書かせていただくことになりました。普段は自分のブログでこういう記事を書いています。

DTP→Webデザイナー転向時に、これやったら捗ったよリスト13

あの頃みんな若かった。国内有名16サイトの2008年→2014年のデザイン比較

一つ一つはそこそこバズったものの、10エントリーくらいしか書いてない泡沫ブロガーに記事を書かせていただけるなんて、街クリさんは勇気あるな(ありすぎるんじゃないかな)と正直思うわけですが、引き受けたからには頑張っていい記事を書いていきたいと思います。よろしくお願いいたします。

女性向けWebデザインの配色について考えてみる

先日SNSでこんな記事を見かけました。

残念な女性向け商品が作られてしまう「ダサピンク現象」について

女性向けの携帯電話とか軽自動車などのプロダクトデザインが、「女性はピンク好きでしょ」な安易な発想で、等の女性ユーザーからすると的はずれなダサいピンクにされてしまう現象のこと、だそうです。男の自分には今ひとつ実感に乏しいので実例は挙げられませんが、確かにそういうこともあるかもしれませんね。

一方、私が本分とするWebデザインの領域においてもピンクという色は女性向け商品・サービスのサイトではかなりの確率で使用されますが、Webサイトはあくまで情報をターゲットにわかりやすく伝えるためのものなので、女性向けの商品・サービスのサイトで「女性っぽい」配色や装飾を施すのは基本中の基本といえます。

今回は、ピンクをはじめとした女性向けWebサイトデザインのキモである「配色」のパターンをご紹介し、ターゲットの属性、年代に合わせたデザインについて考えてみたいと思います。

淡目のピンクを主体とした”有村架純系かわいい妹女子”

映画『L♡DK』


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/011.jpg

剛力彩芽さん主演、高校生同士の恋愛を描いた映画の公式サイト。少女漫画原作ということで、きっと甘酸っぱい青春ラブストーリーが展開されるのでしょう(知らない)。女子高生の主人公目線ということで、濃淡織り交ぜたピンク尽くしのデザイン。
映画『L♡DK』公式サイト

映画『好きっていいなよ。』


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/021.jpg

こちらも川口春奈さん、福士蒼汰さん主演の、少女漫画原作青春ラブストーリー。少女漫画系のデザインはこういう淡いピンク系が鉄板ですね。
映画『好きっていいなよ。』

大阪樟蔭女子大学 受験生応援サイト


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/031.jpg

主に女子高生向けとなるんでしょうか。背景にボーダー柄の薄いピンクを全面に敷くのはガーリーデザインの王道ですね。
大阪樟蔭女子大学 受験生応援サイト

白ベースに黒とピンクを添えた”水原希子系ファッショナブルな女子”

黒の比率を上げて画面を締めることで、”有村架純系”よりもやや大人っぽく、ソリッドは印象を与えます。ピンクも、やや彩度高めに用いられることが多いです。こちらも、ファッション誌やコスメなどで定番のカラーリングといえます。20〜30代前半くらいのいわゆるF1層周辺向けに用いられることが多い印象です。

モデルプレス


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/041.jpg

ファッション、エンタメ、美容、ダイエットなど女性の関心の高いコンテンツを総合的に扱う国内最大級の女性向けニュースサイト。アクティブターゲット層は13歳~37歳と公式サイトにあります通り、モノトーンでシンプルにまとめつつ差し色でピンクを入れることで落ち着きとさりげない華やかさを表現しています。
モデルプレス

Go Beyond Beauty Magazine


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/051.jpg

メイクアップやスキンケアなどの美容にまつわるコンテンツが中心。外国人女性を起用したグローバルなイメージでブランディングしているロレアルパリが運営しているWEBマガジンなので、あまりカジュアル、ポップにしすぎず、クールなテイストに抑えられています。
Go Beyond Beauty Magazine

ピーチジョン


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/062.jpg

ご存知女性用下着メーカー。まあ商品そのものがピンクなことが多いですのでサイトも自然とそういう配色になりますよね(よく知らないですけど)。
ピーチジョン

FRau


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/073.jpg

女性向けライフスタイルマガジン。Wikipediaによると対象読者は25〜29歳女性だそうです。30代以降が入ってくると、自分ならもう少しピンク落とすかもしれません。
FRaU

濃厚ピンクで強烈アピール! 石原さとみ系小悪魔女子

ピンク尽くし! 濃淡織り交ぜた彩度高めのピンクをベースにすることで、かわいさを残しつつもラブリー/セクシーな雰囲気が演出されます。配色のほかにも、女性らしいフォントやハートの装飾などを施すのがポイント。
失敗するとこうなります。

失恋ショコラティエ


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/081.jpg

この”街角のクリエイティブ”を運営している[BASEさん]がロゴやキービジュアルを手がけたことでおなじみ、松本潤さん・石原さとみさん主演の恋愛ドラマ。石原さん演じるヒロイン高橋紗絵子の天然小悪魔っぷりと、物語のキーアイテム「チョコ」を表現するには、もうこれしかない! というほどの濃厚なピンクとブラウンのマリアージュです。
失恋ショコラティエ

INTEGRATE


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/092.jpg

“ラブリーに生きろ!”のコピーでおなじみのコスメブランドINTEGRATE。ここまでドギツイピンクは扱いが難しいですが、写真とデザインで見事にスタイリッシュに仕上げられています。
INTEGRATE

黒×ショッキングピンクで、沢尻エリカ系マウンティング女子

黒をベースに、ポイントで強めのピンクを差すパターン。先ほどまでのキュート、ラブリーな雰囲気が息を潜め、一転してセクシー、バイオレンスな印象に。隣接色を白とするか黒とするかでガラッと印象が変わるのが、ピンクの魅力ですね。

ファーストクラス(ファーストシーズン)


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/102.jpg

悪女同士の激しいカースト争い「マウンティング」を描いた沢尻エリカさん主演のテレビドラマ第一期。女性のダークな一面を描いた過激作をふまえた攻撃的な配色。その続編となるセカンドシーズンでは、同系統のピンクにわずかに紫をグラデーション的に混ぜることで、より複雑・妖艶な雰囲気を醸し出しています。
ファーストクラス

ガールズトーク


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/111.jpg

サイバーエージェント主宰の女性専用匿名掲示板。恋愛、浮気、セックス、パワハラ、姑関係など実名では言及しづらいテーマに対して赤裸々なコメントが連なります。
ガールズトーク

紫の似合う蒼井優系上品女子

ピンクの華やかなイメージから、上品、おしとやか、落ち着いた雰囲気へ。

筑紫女学園大学


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/12.jpg

女子大のサイトですが、紫を使うことで華やかさ・カジュアルさを抑えて、真摯な教育への姿勢が表現されています。
筑紫女学園大学

東京きもの総合学院


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/13.jpg

明朝系書体や装飾でアレンジした和風テイスト。藤の花のような紫をベースに、背景や装飾に和紙のようなテクスチャを入れると一気に和の雰囲気が出てきますね。
東京きもの総合学院

ベージュ〜茶で演出する 麻生久美子系ナチュラル女子

やや年齢層を上げ、より落ち着いた雰囲気を出すならベージュ系が鉄板。結構どんな色も組み合わせられるので、アクセントカラー次第で微妙な調整がしやすい、使いやすい配色です。

by.S


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/14.jpg

大人の女性の生活をアップデートするキュレーションメディア。恋愛、美容、ファッション、ライフスタイルなど幅広いジャンルを取り扱っているので、薄いベージュをベースにしたあっさりしたフラットにまとめられています。エメラルドグリーンでちょっと上品なイメージをプラスオン。
by.S(バイ・エス)

サロンドパルール


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/15.jpg

ウエディングフォトスタジオ。ウエディング系は花やブーケといったナチュラル系のアイテムが多いので、茶系との相性がバッチリです。
サロンドパルール

輝くゴールドが醸し出すワンランク上の上質感
藤原紀香系ゴージャス女子

高級感、上質感を出すならやはりゴールド! 女性向けだと、エステやブライダルなど高価格な商材で用いられることが多いですね。

エステティックミスパリ


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/16.jpg

老舗エステサロン。ゴールド・ピンクを基調とした高級感を出したオーソドックスなデザイン。ゴールド・青を基調とした男性版と比較すると、女性向けの配色やデザインの特徴がより分かりやすいですね。
エステティックミスパリ

たかの友梨ビューティクリニック


http://www.machikado-creative.jp/wordpress/wp-content/uploads/2014/12/17.jpg

こちらも老舗エステ。少し明るめのゴールドなので、親しみやすい感じです。
たかの友梨ビューティクリニック

まとめ

こうしてまとめてみると、やはりおおまかにはピンク〜赤系統の色が多いんですが、その色相、彩度、明るさなどは様々で、またその他のセカンドカラー、アクセントカラーの組み合わせや比率の違いにより、サイト全体のイメージが様々に変化しているのがわかると思います。

もちろん今回ご紹介した以外にも、女性向けに適した配色はたくさんあります。Webサイト以外にも、TVや雑誌、電車の中吊り広告など日頃から意識して見て、特徴をつかんでおくのも勉強になると思います。

次回は、女性向けWebデザイン第二弾として、フォントや装飾などのポイントをまとめてみようと思います。

街角のクリエイティブ ロゴ


  • このエントリーをはてなブックマークに追加


TOP