大人女性の心を鷲掴みにするWebデザイン例3選とその特徴を分析してみた

Webデザイン

最近、女性にとって”webデザイナー”という仕事は身近になってきたのではないでしょうか。
SHEのレッスンの中でも、webデザインコースは特に大人気!時間や場所にとらわれず働けることや、女性らしいセンスを活かせることが人気の理由のようです。

さて、実際にwebデザイナーとして仕事を進めることになったら、どんなデザインを作りたいですか?もしかすると、女性だからこそ作れる”女性らしいデザイン”を期待されることや、クライアントや上司から”女性をターゲット”にしたサイトを作るよう頼まれることがあるかもしれません。

今回は、そんなときに押さえておきたい「女性向けwebデザイン」 の特徴や参考にできるデザイン例をご紹介します。

Webデザイナーという職業に関して詳しく知りたい方は、こちらの記事をご覧ください。
▷『結婚・出産後も安心!女性にWebデザイナーがオススメな理由を経験者に聞いてみた』
  https://shares.she-inc.jp/posts/2180

 *SHEのレッスン講座はこちら↓
  


目次

  1. 女性の心を掴むwebデザインを作るポイント5つ
  2. 女性向けwebデザイン例3選
  3. 女性向けのwebデザインを学ぶためには?
  4. まとめ

女性の心を掴むwebデザインを作るポイント5つ

「デザインってセンスが必要だし、私にはやっぱり難しいかも…」そんなことを思う人もいるかもしれません。でも、大切なのはwebデザインの基本や押さえるべきポイントを学ぶことです!クリエイティブな職種といっても、やはり守破離の”守”を学んでいくことが上達への一番の近道になるでしょう。

「”女性向け”のwebデザインを考える前にwebデザインの基本から知りたい」という方は、まずは本を読んで学んでみるのもいいかもしれません。
▷『WEBデザイン初心者必見!デザインの先輩がおすすめする、デザインの本8選』
https://shares.she-inc.jp/posts/940

今回は、SHEのクリエイティブメンバーに、女性の心を掴むwebデザインを作るために心がけていることを5つ聞いてきました。”21世紀を生きる女性のためのサービス”を提供しているSHEは、世界観・デザインに特に力を入れて取り組んでいます。そんな私たちが大切にしているポイントをご紹介します。

(1)原色を使いすぎない

色はそのサイトのイメージ、世界観を生み出します。”情熱的な赤”、”涼しげな水色”、”明るい黄色”というような色に対するイメージは何となく持っているでしょう。つまり、サイトからどんなイメージを伝えたいか、感じ取ってほしいかを深く考えて、使う色を決めることが重要です。

配色を決める上で、まずは配色バランスを考える必要があります。
<配色バランスの基本>
ベースカラー   70%
メインカラー   25%
アクセントカラー 5%

このような割合が基本のバランスと言われています。多様な色を取り入れすぎず、出来るだけ色を絞った方が統一感が出ますね。この基本を踏まえた上で、それぞれ使う色を考えていきましょう。

そこで、女性向けデザインを考える上で欠かせないのは”原色を使いすぎない” ということ。一般的に、淡い色の方が女性は親しみを持ちやすいです。”繊細さ”、”上品さ”、”かわいらしさ”を表現することができるでしょう。

何かイメージとして原色を入れたい!という時には、アクセントカラーとして5%程度入れてみるのはいいかもしれませんね。

(2)太文字を多用しない

色に続いて、フォントも重要な要素の一つです。ついつい、目立たせるために太文字を使いすぎてしまうことがあるかもしれません。ですが、文字の太さ一つで印象が大きく変わってくるので、こちらは要注意です。

一般的に、太文字の方が目立ちやすく力強い印象、 細文字の方が静かで女性的なイメージ になります。

○太文字の例

○細文字の例

デザインや世界観を大事にする上では、細文字を使うことを意識してみるといいでしょう。太文字で目立たせるよりも、細文字でイメージを統一させる方が、より”伝えたいメッセージ”は伝わるかもしれませんね。

(3)写真やイラストの割合は文字よりも多くする

こちらも女性に向けたイメージや世界観があるなら、特に重視したいポイントです。文字よりも写真やイラストの方がセンスに響きやすい でしょう。

すぐにチェックしやすいポイントなので、”女性らしさ”が足りないと思ったらまずは文字を減らすことを心がけてみるといいかもしれません。文字で表すことはポイントに絞ることが大事。つまり、必要な情報や伝えたいことを短くまとめる「書く力」も必要なスキルです。

(4)かわいい!おしゃれ!など、ぱっと見で感覚的な印象を与える

サイト内を巡ったり、隅々まで記事を読んだりしてくれる人は実は結構稀です。せっかく検索からサイトにたどり着いたり、SNSから飛んできたりしてくれた人も、特に魅力的でないデザインだとすぐに見るのを止めてしまうことがあるかもしれません。

だからこそ、見てすぐに感覚的な印象 を受けるかどうかはとても大切!ロジカルにまとまっていることや分かりやすいことよりも、まずは”ぱっと見”で感覚的な印象を与えられているかどうかは常に心がけておきましょう。

(5)難しくない

サイトをみる上で”難しくないこと”もとても重要です。感覚的なイメージを持ってくれたあと、サイト内で知りたいこと・見たいものにたどり着けるように、難しくない構成にしておかなければいけませんね。

そのためには、①レイアウトが見やすい、②要素が多すぎないの2つを心がけるといいでしょう。

①レイアウトが見やすい
レイアウトとは、webサイトに載せるべき要素を並べることです。下記画像のように、サイトの要素は「グローバルナビゲーション」「ヘッダー」「ロゴ」「メインビジュアル」「コンテンツ」などに分けられます。これらがきちんと分かりやすく表示されていて、サイト内で知りたいことを見れるようにすることは基本です。

②要素が多すぎない
(3)の文字を多くしすぎないという点とも通じますが、とにかく詰め込むことよりもいかに分かりやすく”削るか”を考える方がよいです。あまり複雑にならないようなサイトを目標にしましょう。

①②どちらにも共通しますが、特に女性はあまり難しいものは好まない傾向にあるので、サイトを見てくれる人のことを思って、相手に分かりやすい・伝わるものを作ることが大事です。

女性向けwebデザイン例3選

さて、女性の心を掴むデザインのポイントは上の通りですが、実際にどんなサイトがあるのか見てみたいと思います。今回は3つご紹介しますね。

(1)MY LITTLE BOX

大人の女性向けの素敵なデザイン。基本的なレイアウトで分かりやすく、パッと見でおしゃれなブランドらしさが伝わってきます。ところどころに入っている挿絵もポイントです!

毎月のプレゼントのテーマごとにサイトの雰囲気も変わるので、見るたびに楽しめるのではないでしょうか。

(2)MAHINA LABORATORIES

トップページの写真に思わず心が揺れます。ドクターズコスメの商品サイトですが、”Specially for you & your loved ones”というコンセプトがすっと伝わってきますね。全体的に薄い紫色がメインカラーとなっていて、レイアウトもシンプルで分かりやすいです。

(3)SHElikes体験レッスン

最後に手前味噌ではありますが、当社の体験レッスンのサイトもご紹介させてください。ベースカラーはブルーグレーという落ち着いた色。SHEの世界観が伝わるように、トップページに動画を入れています。文字は細く、少なめに入れて、全体的にブランドの魅力が最大限伝わるようなサイトになっています。

女性向けのデザインを学ぶためには?

ここまで読んでくださり、何となく女性向けwebデザインのポイントは掴めたのではないでしょうか。では今後引き続きデザインを学んで、デザインスキルや感度を高めていくにはどうすればよいでしょう。

webデザインの参考書も色々とありますが、一番のオススメは「女性誌を毎月たくさん見て、トレンドのデザインを探すこと」 です。雑誌のデザインは、実はWebサイトにも応用することができます。配色やフォント、レイアウトなど意識して見てみると、新たな気づきがたくさんあるかもしれません。

特に女性誌は長い間女性ユーザーに向き合い続けてデザインを研究されているので、そこから新たなヒントを得られるのではないしょうか。サイトがターゲットとする年代や趣向が似ているものを選ぶと、より参考になりそうですね。

まとめ

今回は、女性向けwebデザインについてご紹介しました。webデザイナーとして、女性に向けたサイトを作っている人、もしくはこれから作ってみたい人の手助けになっていたらとても嬉しいです。

また、”女性向け”とはいってもwebデザインの基本は変わらないということも分かりましたね。もし基礎からwebデザインを学びたいと思った方は、SHElikesのWebデザイン講座に参加してみてください。素敵な講師と仲間たちと、楽しく学べること間違いなしです!

まずは体験レッスンから↓

【執筆】
SHEsharesライター いわた
SHEの広報レッスンに参加したことがきっかけで、何か新しいことにチャレンジしたいと思い、SHEsharesの一員になりました。普段はメーカーのブランディング担当。副業でライティングや編集、広報を学んでいます。
*Twitter(@iwa518

 

 

 

関連記事一覧

ライター育成します

Bitnami