かわいらしいポップなデザインは得意だけど、かっこいいデザインは苦手……
若い男性向けのデザインで意識すべきことがわからない……
初心者Webデザイナーの中には、このような悩みを抱えている方が多いのではないでしょうか。
この記事では、SNS総フォロワー47万人以上を誇るデザインメディア「デザイン研究所」さんによるバナー添削をもとに、かっこいいデザインを作るコツを解説します。
若い男性向けのかっこいいデザインが苦手な方は、ぜひ参考にしてください。
元のデザインとプロによる添削後のバナーを確認！
今回の添削対象となったのは、10代後半から20代前半の男性をターゲットとした、ストリートファッションが人気の架空スポーツブランド「デイバランス」の新作スニーカーの紹介バナーです。
はじめに添削前のバナーデザインと、添削後のバナーデザインを比較してみましょう。
元デザインの特徴として、シンプルにまとまっており、スニーカーと配色が統一されている点は良いものの、ターゲット層を十分に意識したデザインにはなっていませんでした。
たとえば、キャッチコピー「ストリートを支配せよ」という強いメッセージにもかかわらず、デザイン自体が落ち着いた印象であり、ストリート感が薄くなっています。
添削を通じて、「ストリートを支配せよ」というメッセージがデザインの中でより強調されるようになり、よりターゲット層に刺さるビジュアルへと進化しました。
ストリート感のあるデザインになるよう添削したので、若い男性向けのかっこいいデザインが苦手な方はぜひ参考にしてください！
デザイン研究所が教える！かっこいいデザインを作るための工夫4選
今回の添削で、ストリート感のあるかっこいいデザインにするために行った工夫は次の4つです。
- 文字のサイズとレイアウトを工夫する
- ブレンドモードを活用する
- 縁取りではなくベタ塗りにする
- 色のコントラクトを強める
それぞれにおけるコツをご紹介します。
1. 文字のサイズとレイアウトを工夫する
ターゲット層に刺さるデザインにするため、キャッチコピーである「ストリートを支配せよ」のサイズを大きくし、より目立たせています。
文字の間隔を狭めることで、より強いインパクトを与えるようにしました。
また、「支配せよ」の部分を縦に配置することで単調なレイアウトを避け、視覚的なアクセントを強めています。
2. ブレンドモードを活用する
背景にあるざらついたテクスチャを活かし、ブレンドモードを適用することで、デザイン全体がよりストリート感のある雰囲気になりました。
ブレンドモードとは？
重なったレイヤーの色や明るさの混ざり方を変える機能。背景の質感となじませたり、コントラストを強調させたりするなど、さまざまな視覚効果を作り出せる。
今回の添削では、文字に対してオーバーレイや乗算モードを使って、背景と自然に馴染ませ、デザインの統一感を出しています。
ぜひ覚えて、デザインに取り入れてみてください！
3. 縁取りではなくベタ塗りにする
「GET NOW」の部分は、元々縁取りのみのデザインでした。
ただ、小さな文字に対して縁取りを加えることで、可愛らしい印象につながっていました。
そのため、縁取りをなくし、塗りを加えることで、より力強い印象を与えるようにしました。
4. 色のコントラストを強める
| 文字の複製前 | 文字の複製後 |
|---|---|
 |  |
添削後のデザインでは、背景にあるざらついたテクスチャを活かし、ブレンドモードを適用することで、ストリート感を高めています。
ただ、ブレンドモードを適用するだけでは文字色が薄く、メリハリのない印象になっていたため、ブレンドモードの「オーバーレイ」をかけた文字を複製してメインの文字がしっかり際立つように調整しました。
ストリート感を残したまま、視認性を高めています。
まとめ：ターゲット・目的・伝えたい雰囲気に合わせてデザインを工夫しよう
バナー広告のデザインにおいて重要なのは、美しさだけでなく、「誰に向けて、何を伝えるのか」を明確にすることです。
今回の添削では、ターゲット層に合ったデザインに調整することで、より訴求力の高いバナーへと仕上げました。
デザインに正解はありませんが、ターゲットに合った最適な表現を追求することが、売れるバナーを作るためのカギとなります。
バナーに限らずデザインを作るときには、ターゲット・目的・伝えたい雰囲気に合わせてデザインを工夫することを意識してみてください。
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
デザイン研究所さん（@designkenkyujo）
デザイナーからノンデザイナーまでに、役立つデザインポイントをわかりやすく解説するメディア。SNS は総フォロワー数47万人以上を誇り、デザインジャンルでは日本最大級。2023年には初の著書となる「デザインのミカタ」を出版し、発売後に即大重版・Amazon総合1位(2023/8/2)を獲得。