“カワイイ”は作れる!女性が好むサイトを作る時のポイント。

"カワイイ"は作れる!女性が好むサイトを作る時のポイント。

2013年になって既に半月が経ちましたね。今年も出来る限り沢山の役立つ記事が書けたらと思っていますのでどうぞよろしくお願いします!

実は、最近naverまとめを始めたんですがその中で試しに作った「女性の目を惹く、ガーリーな色遣いのWebデザインまとめ」がすごく好評だったので、今まで手を付けたことがない女性向けの記事を書いてみることにしました。たまにはちょっと違った切り口で書いたほうが、もっと色んな人に読んでもらえるブログになると思ったので。個人的には少し実験的な記事ですが、自分なりの考えをまとめてみましたので読んでもらえると嬉しいです。

女性が好む色について

まず、女性が好みやすい色はどういう色か考えたみたいと思います。まっさきに思いつくのはピンクや赤などの色ですね。ピンクは女性をイメージさせる色だと言われています。女性が赤やピンクを好む理由は諸説あるそうですが、女性は古来から果実を採取したり、子供の顔色を把握するために赤やピンクなどの色に敏感だと言われています。また異性に対するアピールや、赤やピンクは血色が良く見える色なので好まれやすいという説もあります。植物の世界でも、花はピンクや赤、黄色などの暖色の色が多いですよね。色で虫たちにアピールすることで植物も遺伝子を残してきたと考えられます。

例えば、ピンクでも色々あります

同じピンクでも濃淡でイメージが変わります

では、女の人は赤やピンクが好きな人が多い=じゃあとりあえずピンクを使おうイエーイ!!!\(^o^)/じゃ意味がないです。参考までに、ピンクを選んで彩度を少しずつ下げて並べてみました。ざっくり言うと、これ全部「ピンク」です。彩度の高いピンクは元気ではつらつとした、強いイメージがします。逆に彩度の低いピンクはやわらかく、やさしいイメージがします。作るサイトの内容やテーマによって、色を調整し工夫する必要があります。

色を使う面積でもイメージが変わります

色の面積でもイメージが変わります。

じゃあ色に気を付ければ良いわけか、分かりました!!では背景一色この色で!!!\(^o^)/じゃ意味がありません。参考に2つの画像を並べました。どちらも白とピンクを使っただけ、でも文字と背景の色を逆にしてます。逆にするだけでも全然イメージが変わってくるのが分かると思います。同じ配色でも、使う面積によって左側は女性らしさが強く、右側は白が目立つために清潔感・純粋さというイメージに女性らしさが少しプラスされた印象を受けます。例えば結婚式場のサイトはは女性らしいデザインが多いですが、無理にピンクや赤を多用するとイメージと遠くなる可能性もあります。

ゼクシィのサイトを参考例に出してみます。

例としてゼクシィのサイトをあげてみます。結婚式=ウエディングドレスを連想させる白を背景に使っていますね。これがもし背景がピンクだったら、ベージュだったら、と仮定するとどの色がベストなのか勉強になると思います。安易に赤やピンクを多用するのはNGということですね。

組み合わせる色で雰囲気が変わる!

ピンクや赤を使うだけじゃ、工夫しづらい事もあると思います。なので他の色も積極的に使ってみましょう。仮にピンクをメインにして、他の組み合わせることによってこんな違いが出てきます。

色の組み合わせ参考例

上の参考例のように水色やグリーンは、空や春を連想させ爽やかな印象を受けます。また黒や茶色と組み合わせることで、少し落ち着いた大人な雰囲気や画面を引き締める効果があります。他にも違うトーンのピンクと2重に使うことで、女性らしさをよりプラスしたり、紫と組み合わせることで高級感を演出することができます。

パステルカラーを駆使する

女性らしく柔らかな印象を与えつつ、色の参考になるものがあります。それはカップケーキです。カップケーキは女性が好む色でしかもパステルカラーが多く使われています。マカロンで使われる色はもっと明るい派手な色が多いので元気な印象になります。女性が好むものを参考に色選びをするのも分かりやすいですね。

彩度をおさえる色を使うことで、赤系の色を使わなくても女性らしさを表現することもできます。実際にはピンクが好きじゃない女性も沢山いると思うので、じゃあ赤系の色を使わず他の色でどうやって表現しようかなと考えるのも良いと思います。

パステルカラーが使われているカップケーキの色を参考に

女性を連想させるアイテムを使う

女性を連想させるもの、雑貨だったり花だったり、宝石やリボン、レースなど。女性向けじゃないと使えない素材って結構あると思いますが、そういった素材をうまく活用した例が沢山あります。

あおい産婦人科

あおい産婦人科 http://oita-aoiclinic.jp/

参考例として産婦人科のサイトを見てみます。ここでは写真の縁どりにレース使いの額縁が使われています。メニューまわりにも曲線を使い、淡いピンクとベーうを使った落ち着いたなおかつ女性らしいイメージに仕上がっています。

AISHA

AISHA http://www.aisha-web.com/

女性を惹きつけるサイト制作を得意としているAISHAのサイトも、アクセントとして青いリボンが使われています。アクセントカラーに使われているピンクもバランスが良い印象を受けました。ポイントでこういった素材がひとつあるだけで雰囲気が変わりますし、慣れない人でもやりやすい方法のひとつだと思います。

ポイントなのは、あくまでデザインの補助としての役割なので使いすぎず、主張しすぎないことです。あまり目立つ位置に素材をレイアウトしたりすると、子供っぽいイメージになったり、雰囲気を壊してしまいます。

素材集でも女性向けのものが色々と販売されているので、一冊持ってるだけでも便利だと思います。なお素材集はそれぞれ規約が微妙に違う場合があるので、きちんと規約を読んで使いましょう:)

井上のきあ レース素材集 装飾活字アンティークフレーム&パーツ素材集―Illustrator EPS & JPEGデータ収録 花と雑貨の素材集 Girly & Antique(DVD付)

曲線をうまく使う

女性らしさといえば、曲線です。縦や横の直線のラインを崩したり、写真を丸くすることでやわらかい印象を与えることができます。

エステサロン クオリア

エステサロン クオリア http://www.qualia-ginza.com/

写真の下部分が曲線になっていて、女性らしい優雅な雰囲気を出しています。この部分を直線にしてしまうと、写真の角ばった感じが目について優雅な雰囲気が出にくいですね。ちょっとした工夫が活きています。

甲南女子大学

甲南女子大学ポータルサイト http://www.konan-wu.jp/

女子大の情報ポータルサイト。配色は女性をターゲットにしているためアクセントでピンクが使われていますが、大学という若々しさのイメージも必要なのでグリーンやブルーを使って爽やかさを出しています。写真を丸にすることで、女性らしいやわらかな印象を受けると思います。

テキスト選びも大事な要素

女性向きのサイトであれば、なるべく細い字体のフォントのほうが使いやすくなじむと思います。もしくは曲線を活かした筆記体などもおすすめです。フォントもデザインの一部なので、ちょっとイメージが違う?と思ったらフォントの種類にも注意してみるのも良いと思います。

強弱や曲線のあるフォントを使う

まとめ

・定番カラーは赤やピンクなどの暖色が多い
・トーンや使う割合を考えて、作りたいイメージに近づける
・女性が好むアイテムから、色のインスピレーションを受ける
・組み合わせる色で、高級感や爽やかさなどをプラスする
・パステルカラーは女性向けに使いやすい
・花や額縁などの素材を使って、アクセントをつける
・曲線を使い、優雅な雰囲気を出す
・フォントは強弱や曲線があり、細字のものがおすすめ

というわけで、色んな女性向けのサイトを見て思うことをまとめてみました。使う色や素材、レイアウトによって様々なイメージを作ることができるので安易なレイアウトや配色はせずに、目的に合わせたデザインが出来るようになると良いと思います。特定のジャンルで色んなサイトを見ていると、共通点や工夫してる点が似てたりするので勉強になりますよ。ひとつでも参考になるものがあれば幸いです。それではー!!

関連記事を読む

"カワイイ"は作れる!女性が好むサイトを作る時のポイント。

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]