Design

新人Webデザイナー必見!脱初心者できる5つのバナーづくりのコツ

こんにちわ。久しぶりの更新となりました。「女性に響くデザインをつくる」Webデザイナー ほりうちです。

会社にはいってはじめて任せられたのがバナー制作でした。最初の頃は、「限られた空間に文字と画像を詰めて、読みやすいようにバランス考えて…etc」ともうどーしよう!ってめちゃくちゃ時間がかかっていました。

新人の頃は誰しもが通る道だと思ってます!

でも、「時間をかけたバナー」が必ずしも「クリック率の良いバナー」とは限りません。
なら、サクッと効率よく作れた方がよくないですか?

デザインにこうすれば正解というものはありませんが、こうしたほうがよく見えるという工夫はあります。
今回は、新人デザイナーが知っておきたい、脱初心者できる5つのバナーづくりのコツをお届けしたいと思います。

文字の可読性を上げる

まずは、文字を読みやすく見やすくするコツ!
限られたスペースでユーザーの目にとまってクリックしたい!と思ってもらうには、いろんな工夫ができます。

上の文字を読みやすくアレンジしていきます。

ウェイトを変える


シンプルにフォントウェイトを変えるだけでも、視認性があがります。

大きさを変える


特に目立たせたい、読ませたいところだけ大きさを変えると、目にとまりやすくなります。

フォントを変える


明朝体


ポップ


手書き風①


手書き風②

フォントを変えるだけでグッと印象が変わりますよね!
でも、要注意!!かわいいフォントを使うと目立つしいいんだけど、使いすぎるとごちゃごちゃしてかえって読みにくくなるので多くても3種類にしておく方が無難です!

フチ取る


わかりやすいように、背景をグレーにしました。
背景画像で文字が目立ちにくいときにフチをつけるとくっきりと読みやすくなります!

アクセントをつける

組み方を変える

最初の頃は、文字は一定方向じゃないといけないって勝手に思い込んでいたんですけど、もちろんそんなことはありません(笑)
いろんな組み方をしてバランスのよい組み方を試してみてください。

ざっくり切り抜く


画像をキレイに切り抜くのって慣れるまでは難しいですよね。でも、いいんです!あえてざっくり切りぬくとポップなイメージになります。複数あわせるとコラージュ風になってオシャレになりますよ♪

画像をダイナミックつかう


バナーをつくるとき、思わずキャンバス内におさめてしまいがちですが、思い切ってはみ出す勇気も大事!
ダイナミックな演出ができる上、全部が見えてないと好奇心がわいてきたりするのものですよ♪

分割レイアウトをつかう


複数のものを見せたいときには分割レイアウトをつかうと、キレイにスッキリと見えます。
画像もトリミングするだけでいいので時間がない時に重宝しますよ〜

テクスチャーを使う


これが1番かんたんで雰囲気のでるデザインができます。作り方は、クリッピングマスクで背景テクスチャーと同じテクスチャーをつかうだけです。
デザインが寂しいと感じるときにテクスチャーを使ってみるといいですよ♪

まとめ

今回ご紹介したコツをぜひ試してデザインの引き出しを増やしてください。
あとは、良いっとおもったバナーを真似して作ってみるのもいいですよ!
Pinterestを使うと効率よく良いデザインを見つけることができるのでオススメです♪
バナーはとにかく作りまくるのがいちばんだと思うので、作って、作って、作りまくってください(笑)

ABOUT ME
まめ
広島でガーリー専門Webデザイナーしてます。 元アパレル販売員から未経験でWebデザイナーに転職。 大阪出身。現在は広島在住。 将来的にはデザインで地域活性化をして日本各地をワクワクさせたい!