名古屋のWebマーケティング企業「アライブ株式会社」のマーケティングブログ

052-684-5558

Marketing Blog マーケティングブログ

男性向けのデザインをするコツ〜実践編〜

2020/07/08 | UXデザイン

岡田 悠里

Writer岡田 悠里

UX Designer / Project Manager

前回、こちらの記事で男性向けのデザインについてお話ししましたが、今回はもう少し具体的に、一体何をすれば、男性向けらしいデザインになるかを紹介していきたいと思います。

 

女性向けのデザインは、色々な方法で表現ができます。

よく使われる方法としては、装飾を加えることで、雰囲気を作り出し、ポップさ・可愛らしさ・エレガントさなどの印象を与えることができます。

 

それに比べ、男性向けのデザインは、装飾を足すのではなく、シンプルにすることが多いので、慣れていない場合、女性向けのデザインよりも、まとめるのが難しいイメージがあります。

 

では、実際にどういったことをすればいいかを例を交えてご紹介します。
※今から紹介する例は、すべて私が考えた架空のものです。実際には存在しません。

 

 

【お題1】スポーツジム

スポーツジムMONTA がOPENする、というイメージを作ります。
たくましい体の男性が走っている画像を使用します。
この写真だけでも、男性らしさが出ていますね。

 

 

【1】スタイリッシュな躍動感

オレンジ色を差し色に、文字を斜めに配置することで、スタイリッシュさを出してみました。

オレンジは性別の印象問わず使える色ですが、黒と組み合わせることで、活発さとクールさを出すことができると感じます。

 

斜めにするのは躍動感を出すことに使えるので、男性向けのデザインでは、使いやすい効果だと思います。

 

<POINT>

  • 斜めにする
  • 黒とオレンジの組み合わせでコントラストを
  • 読ませなくても良い英語を大胆に配置してメリハリをつける

 

 

【2】炎で熱血に

背景に炎を入れることで、己の肉体を鍛え上げる熱血な男のイメージをつけました。
また、人物の上に筆文字で大胆に文字を配置することで、大きなインパクトを与えています。

背景のコントラストを高くしていることで、上の白い文字が目立ちますね。

 

<POINT>

  • 炎を入れて熱血に
  • 炎に人物が負けないように調整
  • 勢いのある筆文字を大きく使う

 

 

【お題2】アウトドア 雑誌の特集見出し風

川でお父さんがお子さんを持ち上げてる写真ですね。
背景の木や川など自然を感じさせる、素敵な写真だと思います。
水しぶきが躍動感を感じさせますね。

 

 

【1】安定感のある配置

写真の躍動感と文字の安定感でバランスを取りました。
大きな文字と太めの下線をキャッチコピーで使用することで、インパクトの大きいデザインにすることができます。

写真の周りに余白をつけるのも、ゆとりや安定感を出すことができるので、おすすめです。
文字の可読性を上げるために、写真の色味を少し暗めに加工したり、文字にシャドウをかけています。

 

<POINT>

  • 太いゴシック体
  • 太線で安定感を
  • 文字を大きく使うことでインパクト
  • 文字を読みやすいように写真の明度を調整
  • 写真の周りに余白をつけて落ち着きを

 

 

【2】アウトドア感を増したイメージ

文字を縦書きにして明朝体を使用しました。
文字の背景に白を引くことで可読性をあげています。
明朝体と縦書きは相性がいいですね。

 

アウトドア感を出すために、写真の色を黄色めにし、黒を少し明るくしています。先ほどよりも粒状フィルタを強めにかけてグランジ感を増しています。

この写真の色味と明朝体を組み合わせることで、先ほどよりも柔らかく温かみのある印象を与えることができます。

 

ただ、女性らしさを出しすぎないように、使用する英語フォントもスラブ系や手書きを使用しバランスを取っています。

 

手書き系のフォントの色をピンクにすることで、背景の緑と比較した時に目立たせることができます。これが別の色だとまた印象が変わってきます。

高彩度のピンクは、使いどころによっては男性向けのデザインでも相性良く使うことができます。

 

<POINT>

  • 黄色を強めにグランジ風に写真加工
  • 明朝体で柔らかい印象に
  • 使う飾りは線の太さに気をつけて
  • 差し色に高彩度のピンクで目を引くワンポイントに

 

 

【お題3】ビジネスコラムのメインイメージ

山田太郎さん(仮)がWebで連載しているコラムのメインイメージを想定して作ります。
ビジネス系のイメージで使用する人は腕を組むポーズが多いですね。

 

 

【1】頭脳系でクールなイメージ

青色・明朝体・グラデーション、というビジネスのデザインでは定番なイメージで作りました。

背景はただの色ベタではなく、人のシルエット画像を入れることで、よりビジネス感を出しています。

また男性向けのデザイン全般に言えますが、人の写真は高コントラストすることで、メリハリを出し、かっこよさを増すことができます。

 

<POINT>

  • 文字を明朝体にすることで真面目な印象に
  • さりげないグラデーションでひと工夫
  • 紺色で落ち着いたビジネス感を
  • タイトルに合った写真を選ぶ
  • 人物のコントラストを高くする

 

 

【2】安定感と力強さ

先ほどと構図は全く一緒ですが、与える印象は違いますね。
彩度の高い赤色もビジネス系では使用されやすい色味です。
大手の会社さんでも赤色はよく使われるので、メジャー感を出すのに使える色の1つです。

 

赤色と太めのゴシックを使用することで、先ほどの知能的で少し繊細なイメージに比べ熱血的でどっしりとした印象を与えました。

 

男性向けのデザインの場合、人物や物の彩度をなくすのも効果的です。
(被写体の彩度をなくす場合は、コントラストをかなり高くしないとぼんやりとしてしまい、イマイチになるので注意してください)

 

また、彩度をなくすと、人物の写真に目がいかなくなる可能性があるので、今回はネクタイの色を無理やり赤くしました。彩度のない画像の中にワンポイントで色をつけると目を引いてかっこいいですよね。

 

背景はごちゃごちゃさせると、文字の邪魔になるので、シンプルにしています。

ただ、白だと寂しいので、布の画像を元にしていろいろと合成することで、さりげない背景にしつつ、寂しさを減らすことができます。

 

<POINT>

  • 少ない色味で印象をつける
  • モノクロにする時はコントラストはかけすぎるほどにしっかりと
  • 太めのゴシックでどっしりとしたインパクトを
  • 高彩度な赤色でメジャー感を出す

 

 

まとめ

いかがだったでしょうか?

男性らしいデザインはシンプルな要素でも、メリハリをつけることや、動きを出すことを意識すると、作りやすいと思います

 

慣れてくると、とても楽しみながらデザインができます。

ただ注意して欲しいのが、男性っぽいからこんな要素を使おう、と手段が先に来るのは危険です

こういった印象を与えたいから、こういう方法を使おう、と目的を達成するための手段として、適した方法を常に選べるといいですね。

岡田 悠里

Writer岡田 悠里

UX Designer / Project Manager ブログ プロフィール

専門学校でWebデザイナーになるために勉強をしている中、アライブへ会社見学として訪問。そこで三輪社長の「代理店を通さず、クライアントと直接やりとりし、成果を出すことを目的にデザインを行う」というお話に感銘を受け、半年ほどアルバイトとして働いた後、2013年に入社。工務店や音楽教室、工業系や美容業界など数々のプロジェクトに関わる。見た目はもちろんのこと、ユーザー目線で使いやすいサイト、結果が出やすい工夫が施されたデザインを行うように心がけている。

専門学校でWebデザイナーになるために勉強をしている中、アライブへ会社見学として訪問。そこで三輪社長の「代理店を通さず、クライアントと直接やりとりし、成果を出すことを目的にデザインを行う」というお話に感銘を受け、半年ほどアルバイトとして働いた後、2013年に入社。工務店や音楽教室、工業系や美容業界など数々のプロジェクトに関わる。見た目はもちろんのこと、ユーザー目線で使いやすいサイト、結果が出やすい工夫が施されたデザインを行うように心がけている。

Latest Posts

ABテストをデジタルマーケティングに活かす。実践方法や具体例をわかりやすく解説
2024.04.19

ABテストをデジタルマーケティングに活かす。実践方法や具...

本当に成果が出ているWebサイトの10の特徴
2024.04.15

本当に成果が出ているWebサイトの10の特徴

Latest Posts

ABテストをデジタルマーケティングに活かす。実践方法や具体例をわかりやすく解説
2024.04.19

ABテストをデジタルマーケティングに活かす。実践方法や具...

本当に成果が出ているWebサイトの10の特徴
2024.04.15

本当に成果が出ているWebサイトの10の特徴

© ALIVE Co.,Ltd.