男性向けのデザインをするコツ

こんにちは。アライブ株式会社 デザインチームの岡田です。
今回は「男性向け」のデザインについて、デザイナーらしく、それっぽく語りたいと思います。

女性向けのデザインをする時、検索すればいろんな参考ページが出てくると思います。
しかし、男性向けとなると、なかなか見つからないのではないでしょうか?

かくいう私も、昔は「男性向けってどんなデザインだ? 女だからわからない! うわああ」 と苦しんでいました。
そんな、苦しんでいる新米デザイナーの助けに少しでもなればと思います。

 

女性向けと男性向けの違い

すごくざっくりイメージに出すとこんな感じです。

【女性向け】

・かわいい/美しい
・繊細
・カラフル
・暖色(ピンク・紫)
・曲線/丸み
・花
・装飾が多め

【男性向け】

・かっこいい
・力強い
・コントラスト強めの配色
・寒色(青・黒)
・直線
・装飾少なめ。シンプル
・筋肉

これは一般的なイメージで、商品やサービスによって使いどころは大きく変わるので、これをそのまま当てはめればOKというわけではありません。注意してください。

では、男性向けのデザインをする際に、
具体的にどんな風に気をつければいいかを具体例と共に紹介します。

 

男性向けおすすめフォント

フォントは繊細な細いフォントよりも、太く角ばった形がよく合います。
ベースに使うフォントは、シンプルで癖のないものがおすすめです。
角丸系はどうしても可愛くなってしまうため、男性向けには不向きだと感じます。
フリーで使えるオススメフォントを紹介します。

 

おすすめGoogleフォント(英語)

▼ベーシック系　Roboto

https://fonts.google.com/specimen/Roboto

安心のRoboto。いろんなスタイルが展開されていて、どれも使いやすいです。
「Open sans」もよく使う便利なフォント。

 

▼縦長系　Oswald

https://fonts.google.com/specimen/Oswald

使いやすく、見出しにも使えるオススメフォント。

 

▼手書き系　Shadows Into Light

https://fonts.google.com/specimen/Shadows+Into+Light

勢いのある手書き系を使いたい時に。
ビジネス系には合わないけど、ストリート感を出したい時には使えそう。

 

▼スラブ系　Alfa Slab One

https://fonts.google.com/specimen/Alfa+Slab+One

インパクトがあるので、見出しなどに。
太すぎる場合は「Zilla Slab」がスタイル数が多いのでいいかも。

 

男性向け写真加工のコツ

写真はデザインを大きく左右する要素です。
被写体によって男性向け・女性向けが大きく変わりますが、
色の加工でも差別化することができます。

例えば、↓こんな写真があります。

これを女性っぽく加工すると↓こうなります。

そして、男性っぽく加工すると↓こうなります。

同じ写真だけど、結構違いますよね。

・高コントラスト
・低彩度
・シャープ強め
・青強め、黄色弱め
・明瞭度強め
・粒子をさりげなく入れる

このあたりを加工の時に意識すると、かっこいい雰囲気の写真になると思います。
(PhotoshopのCamera Rowフィルターを使うと、レイヤー数が少なめで加工できるので、おすすめです)

 

いろんな媒体を参考にしよう

細かいことを書きましたが、なかなか何もない中から生み出すのは、難しいので、
まずは参考になるのを片っ端から見ることをオススメします。

Pinterestで「男性向け デザイン」と調べるとか、
BRUTUSやPen、WIREDなどの雑誌のデザインを参考にするとか、
↓こんな感じのギャラリーサイトの男性向けカテゴリを見るとかです。
https://sankoudesign.com/category/man/

そして、参考になる部分を探して、取り入れていくと、
自分の中の引き出しも増えていくと思います。

 

気をつけること

繰り返しになりますが、これらを全部取り入れればOKというわけではありません。
たとえ女性向けでも、クールな商品を取り扱ったデザインなら、黒をベースに彩度を落としてかっこよく見せることもありますし、男性向けでも、高彩度なピンクを使ってパンチを効かせることもあります。

漠然と「男性向けだから、とりあえず男らしいデザインにしよう」ではなく、
誰に向けたデザインなのかを考えて、その中で、取り入れていけるといいなと思います。

 

【2020.07.08追記】
「男性向けのデザインをするコツ〜実践編〜」を書きました。
こちらからどうぞ。
https://alive-web.co.jp/blog/design_for_men2/