ちょっとした工夫で”きちんと伝わる”
バナーづくりのコツまとめました！
こんにちは！ omatsuです。
いまでこそ箱庭専任で編集のお仕事をしていますが、
少し前まではWEBデザイナーとして制作のお仕事をしていました。
「社歴」＝「デザイナー歴」のわたしは、今年でデザイナー8年目（早！）
デザインの右も左もわからず制作アシスタントとして入社した1年目は、
とにかく毎日「バナー制作」に悪戦苦闘していた気がします。
限られたスペースに文字と画像を詰めてバランスを整えてつくる
「バナー制作」は、初心者にとってまるでジグソーパズルのよう！
はじめはどうしても時間がかかっちゃうんですよね。
でも、「時間をかけて作ったバナー」＝「クリックされるバナー」とは限りません。
もちろんバナーを作る前の要点を絞る作業やラフ画作成は大前提なのですが、
届けたい人に、「気になる！」、「もっと見たい！」と思ってもらうための、
ちょっとしたデザインの工夫も必要だったりします。
そこで今回は、ユーザーに”きちんと伝わる”
バナーデザイン 10のコツを届けしたいと思います！
文字に強弱をつける
主張したい「数字」や「名前」など、伝えたい要素を大きく見せて強調すると、クリック動機がうまれます。
平たくなりがちなキャッチコピーも、接続詞を小さくしたりしてリズムをつけると読まれやすくなりますよ。
文字に動きをつける
上下左右にふったり、ナナメにしたり、アーチ状にアレンジしたり。文字に動きがあると自然と目に留まりやすいもの。文字を読む方向に合わせて右上に文字要素を配置するのもコツです。
要素を整える
要素の横幅や中央寄せ、天地左右の余白など、整列を使ってすっきり見せると上手にまとまります。
あとは背景色を明るめにするば、お利口なデザインもしっかり個性があらわれますよ。
思いっきりはみ出す
バナーをつくるとき、思わずキャンバス内におさめてしまいがちですが、思い切ってはみ出す勇気も大事！
ダイナミックな演出ができる上、全部が見えてないと好奇心がわいてきたりするのものです。
画像のコントラストを上げる
撮ったままの写真をそのままアイキャッチ画像にしていませんか？写真も立派なバナーです。
商品や人物をパキッと美しく見せるため、画像加工ソフト「明るさ・コントラスト」で色調補正をしましょう！
乗算や透明を使う
写真の質感を生かしたいときは、乗算（色が重なるにつれて暗くなる描画モード）や透明機能がオススメ！
同系色を使って馴染せると、まるでグラフィティアートのようなデザインになりますよ。
※スタンダードコレクションのライン使用。
誘導デザインを入れる
注目を集めたいものには矢印を使うのが効果的！他にも爆弾や罫線などが視覚誘導に有効です。
※スタンダードコレクションの矢印、ライン、吹き出し使用。
分割レイアウトを使う
複数の商品を見せたい時は、収納ボックスのように整理整頓をしちゃいましょう！
分割サイズにトリミングして、画像を並べるだけなので、早く仕上げたい時にオススメです。
装飾を散らす
ハッピーで楽しいデザインに仕上げたい時は、装飾を散りばめて演出するのが一番！
散りばめる装飾に大小メリハリをつけると不思議と立体感が生まれますよ。
テクスチャ素材を使って質感をアップ
デザインに質感をプラスしたい時、テキストにテクスチャ素材を使ってクリッピングマスクをかければアナログ風の演出ができます。レイヤーをうまく活用すれば切り絵のようなデザインに。※水彩コレクション背景テクスチャ使用
手描き素材でさらに伝わるデザインに
箱庭がつくるデザイン素材のお店「haconiwa DESIGN STORE」
自分でイラストを描きたいけれど、なかなか時間が取れない方は、「haconiwa DESIGN STORE」の手描き素材がオススメ！
Webサイトやブログ、ショップカードやDMなどの販促物、PowerPointの資料づくりなど、さまざまなデザイン制作物をたのしく演出する、手描きイラスト素材が買えるオンラインストアです。
すべて商用フリーの素材集なので、いつも時間に追われているデザイナーさんの心強い味方になるはず！
水彩絵の具のにじみやグラデーションがキレイな夏らしい水彩テクスチャ素材も仲間入りしたので、ぜひチェックしてみてね！
あとは良質なバナーをたくさん見て、真似をして作ってみること！
※個人的にPintarestが、一番いいデザインがまとまってるのでオススメ！
そして、作って、作って、とにかく作りまくる！ホントこれに限ります。
きっと作り続けていれば、しっかり身についてきますよ。