バナーデザインをピックアップしてみました
バナーデザインを学び少々息切れ気味のソラです。
全然できない〜！と嘆いていたところ、Twitterでフォロワーさんから「これからワークブックで練習もできるしDLLの講師の方が丁寧に添削してくれるから大丈夫！」と励ましていただきました。
ゼロから学んでいるので当然サラッとできないことも多く、弱きになる場面もあります。
そんな時に、同じように勉強している方からのお言葉って本当に励みになりますね。
オンラインでもこうやって繋がれる時代がありがたいです😊
実際に手を動かしてみてまだまだインプットも足りてないなと思ったので、息抜きも兼ねて今回は既存のバナーデザインを色々見ていく回にしようと思います。
バナーはバナーデザインアーカイブというサイトで探しました！
マクドナルド とんかつマックバーガー
（画像引用元：マクドナルド とんかつマックバーガー）
まず目に飛び込んできたのがこのバナーでした。
すごくシンプル！でも文字の強弱はしっかりついていて優先順位付けがされているのがわかりますね。
写真には陰影がついていて、後ろにコーラを配置するなど奥行きもあります。
写真がいいので他はベタ塗り＆文字だけのバナーでもベタっとした印象にならないんでしょう。
「できたてサクサク新定番」「とんかつ」「マックバーガー」の3行を同じ幅に揃えているところも収まりが良いデザインになってます。
- 文字の強弱の付け方
- シンプルな色使い
- 文字の揃え方
スーツのはるやま 3点0円まとめ割
（画像引用元：スーツのはるやま 3点0円まとめ割）
次に目に飛び込んできたのがスーツのはるやまのバナーです。
紺色×黄色という組み合わせが目に入りやすいのだと気づきました。
写真は涼しげなものを選び「0円」「夏のオフィス・お財布」「快適」という黄色文字が目に入るようなデザインになっています。
夏のオフィスで快適に過ごすという部分が伝わる写真です。
お得感はなかなか写真には出ないので、お得にまつわる文言（0円）が目立つようにすればいいんですね。
- 紺色×黄色の使い方
- お得情報の目立たせ方
リッツ・アクア オールインワンゲル
（画像引用元：リッツ・アクア オールインワンゲル）
一眼見た瞬間「あ、これ私がデザインに挑戦したら悲惨なことになるわ…」と思ったバナーがこちらです。
理由は情報が多いから。
化粧品の広告って基本、情報量多いですよね。
- コピー
- サブコピー
- 効果
- 商品画像
- 女性の画像（イメージ画像）
- お得情報
- コンバージョンボタン
って詰め込まれてるイメージです。
このリッツ・アクアのバナーは商品画像のみが使われいて、よくある女性のイメージ画像は入っていません。
それでも文字情報多めですね。
このように文字が多いと配置の仕方がわからなくなってしまうので、ぜひ参考にしたいです。
例えばメインコピーの「乾燥しないオールインワンゲル」の文言以外は帯にしたり下線を引いたり、ボタンにするなどただ文字として置かないようにデザインされている点は勉強になります。
色使いは基本的には青、ピンク、薄い黄色です。
青はスカイブルーの他に商品画像に近いグリーンがかった青もアクセントで使われています。
この塩梅も難しい…今の自分からは出てこないです…
- 文字が多い時の配置
- 文字情報が多い時の配色
オヤコム
（画像引用元：オヤコム）
このバナーにはハッとさせられました。
イメージ画像なしで、ベタ塗り背景に白文字だけ。
文字も特殊な加工はしていない明朝体です。
これでも思わずクリックしてしまいそうなバナーになるんだ、と驚きでした。
コピーが圧倒的にいい場合は、このようにベタ塗りにコピーだけでも成り立つんですね……。
写真やイラストがないのでパッと見てなんのサービスかわかりませんが下に「ありがとう」を伝えるおくりものサイトと書いてあるのですぐに疑問は解けます。
えんじ色なのも「親孝行」のイメージに合っていて、高級感もあります。
手抜きではなく戦略的に文字だけのバナーを作れるようになったら上級者って感じがします。
- コピーがよければ文字だけドーンと配置もあり
- 画像がないなら何のサービスかはっきり書く
サンシャイン水族館の夏休み
（画像引用元：2016年サンシャイン水族館の夏休み）
画像のかわいらしさが目を引く水族館のバナーです。
青のグラデーションと白、黄色で構成されています。
コピーを読ませるというより、遊び心のある写真の使い方で「行きたい！」と思わせるデザインになってますね。
私が気になったのが「生き物みんなでオモテナシ。」の文字の加工。文字を綺麗にラウンドさせるってどうやるんだ…？
調べてみると、曲線ツールで曲線パスを描いた後にそこに文字入力をすると文字がラウンドするようです。
やってみました！
曲線ツールで曲線を引きます。
ちょっと出発点と終わりの点がずれてる…
ここに中央揃えの文字を入力してみます。
ラウンドした文字になりました！
ちょっと歪んでる？
許容範囲でしょうか？
この「歪み」の感覚があまりなくて困ります😢
でもやり方がわかってスッキリしました！！
- 文字のラウンドのさせ方
- 遊び心のある写真の使い方
- 色使い
今回の感想
バナーは色使いと配置が占める割合が大きいです。
どちらも苦手意識があるので、頑張って感覚を身につけたいところ……。
今回バナーを色々見て気づいたのはアクセントで黄色を使っているバナーが多い！ということです。
特に青×黄色の組み合わせは多い気がします。
緑×黄色もよく見かけましたし、女性向けならピンク×黄色もありました。
紺×黄色はかなり目立つ色合いなので、覚えておくと便利そうだなと思います。
文字数がかなり違っても文字幅を揃えるとデザインとしてすっきり見やすくなることも大きな学びでした。
今回学んだことはバナーの実践に活かしていきたいです。
きっとまだまだ既存のバナーから学ぶ点あると思うので、またこの研究シリーズするかもしれません😊