自主練の記録

#バナーお題 Vol.3 に挑戦してみた

  /
今回はTwitterで実施中の #バナーお題 Vol.3 に挑戦したので、制作したバナーについて書きました。
そもそも「バナーお題って何？」という方は、前回の記事をご参照下さい。

今回のお題は遊園地の開園記念を宣伝するバナー！

今回はなかなか納得いくものができず修正を重ねました。
1枚目が最初、2枚目が最終のデザインです。

▼初期：視線誘導が上手くできていない。
f:id:ne-ochi:20181124224842p:plain
▼最終：視線が左→右へ流れるようレイアウト変更
f:id:ne-ochi:20181124224904p:plain
以下、どのようにこのバナーができたかを書いていきます。
まずは全体のコンセプトやデザインのポイントから。

コンセプト

バナーを見たティーンズが「何か新しい遊園地できたらしい！ネットでチケット買えば安いし冬休みに遊びに行こうよ！」と思うようなバナー。何があるかは分からないけど、なんとなく写真映えしそうな場所を連想させる。そのためにとにかくカラフル&ポップなデザインにすることを心がけました。

デザインのポイント

  • 配色はとにかくカラフルに
  • 盤面率や文字のジャンプ率を高くしてにぎやかに
  • 丸ゴシックと手書き風フォントで親しみUP
  • カラフルな中でも文字の視認性を保つ
主に配色、盤面率、フォント、画像などを意識して若者向けのデザインにしました。

配色はとにかくカラフルに

ポジティブで若々しい印象の色を中心とし、原色に近い高彩度の赤、黄色、水色、ピンク、黄緑などを使用。楽しい印象にするため色数は多くしました。配色見本ブックなどをペラペラめくって考えましたが、最後は結局自分の感覚頼りでした。バランスをとるのが難しかったです。

盤面率や文字のジャンプ率を高くしてにぎやかに

全体をにぎやかな印象にしたかったので、余白を少なめにして盤面率を高くしました。それこそ文字が画面から少しはみ出るぐらいでも良いんじゃないかとも思いました。
文字に関しても、ジャンプ率を大きくしてにぎやかさとメリハリを出しました。

丸ゴシックと手書き風フォントで親しみUP

フォントは子どもっぽさ、親しみやすい印象を与えるために「丸ゴシック」「手書き風」フォントを使うと決めていました。丸ゴシックは文字を太めにすることでより子どもっぽく、かわいらしくなるので、できるだけウェイトが太いものを選びました。

カラフルな中でも文字の視認性を保つ

背景や装飾の色も明るいため、文字は視認性を考慮して#333でフチとドロップシャドウをかけました。ドロップシャドウはいつも自然に見せるため軽めにしてますが、今回はバックがカラフルなのでシャドウは濃いめにしました。

写真素材の選び方について

ティーンズ＝フォトジェニック

どんな素材を使おうかと考えていた時、「若者＝フォトジェニックな場所にホイホイされる」イメージが浮かんだので「お城が必要だ！」と思いました。お城の写真をバックに配置すると、世界観やにぎやかさ、華やかさが増しました。

「サンタさん」でキャンペーン期間がなんとなくわかる

キャンペーンの時期が2018年1月31日までと「冬休みの期間」なので、冬と書かなくても「サンタさん」がいれば時期が伝わると思いました。また人の顔が視線を引きつけるという効果も狙いました。
こんな感じで考えつつデザインしていったのですが、最初に完成したバナーは「カラフル&ポップ」「若者向け」など見た目のデザイン目標をクリアしていても、情報が散乱して見にくいデザインになっていました。そこで迷わず修正することにしました。

修正が必要だと思った点

  1. 視線誘導が上手くできていない
  2. 「Kobayasランド」の文字が入っていない
f:id:ne-ochi:20181124224842p:plain
パッと見るとサンタさんの目立つ写真、黄色い「20%OFF」のアイコンが主張していて、最初に視線を集めるのが右側でした。でも文字は左側から始まっているという矛盾もあって、どこを見れば良いのか迷ってしまうレイアウトになっていました。
また肝心の「kobayasランド」の文字が入っていないので、どこへ誘うバナーなのかよくわからない、クリックしにくいバナーになっていました。

実際に修正したこと

  • 目立つ情報と視線の流れを考慮してレイアウトを変更
  • 「kobayasランド」を追加
  • レイアウト変更によって変わった余白部分への装飾追加
f:id:ne-ochi:20181124224904p:plain
具体的には、注目を集めてしまうサンタさんの写真を左側へ移動させ、近接の効果を狙って「kobayasランドがオープンしたこと」が伝わるようにアイコンとテキストを追加しました。メインのキャッチコピーのレイアウトも変更し、動きを少しでもつけるために「\行こうよ夢の国!/」を傾けて配置しました。
寂しくなったスペースにはマスキングテープや紙吹雪などの素材を配置しました。

感想

初挑戦の横長バナーは、視線の誘導先が限られているので伝わりやすいか否かがすぐにわかりました。いくら見た目がかわいらしくても、情報が整理されていない伝わりにくいバナーではバナーとしての価値がないと思っていたので、すぐに修正しました。一度完成したデザインでも、大胆にレイアウトを変えてみると見やすくなったので、やはり情報の整理って大切なんだなと感じました。明るくて楽しいイメージのバナーは、わくわくして制作がとても楽しかったです！

最後に

今回は #バナーお題 vol.3 で提出したバナーの制作過程や考え方をまとめてみました。お題に沿ったバナーを制作することで自分の力量を確認できたり、練習になってデザイン力がアップしたりします。また #バナーお題 で検索することで他の方々の制作物も見ることができるので、Webデザイナーを目指している方やデザインのスキルアップを望んでいる方にはおすすめのタグです。ぜひ挑戦してみて下さい！

追伸

バナーについてのご意見・ご感想など頂けるとすごく嬉しいです！
（もちろんバナー以外のことでも喜びます…！）
お気軽にコメント頂ければ必ず返信させて頂きますので、どうぞよろしくお願いします！
【改訂版】独学×デザインの本を発売
独学の流れとデザインの独学方法についての薄い本を作りました。
2021年2月27日より、改訂版の紙の本を発売しています。

本の販売ページはコチラ

あわせて読みたい