デザイン 〜 バナー制作 〜

なんとmiku-nosueはデザインも学習中です。バナー奥が深い!
デザイン学習についての気づきやポイントなど徒然のままに描いていきます。今回はバナーです。

作品紹介

 まずは、実際の作品を掲載します。これらはRaiseTechの制作課題です。条件として以下が与えられ写真選びから構図まで自分で行います。

  • 架空学習塾のバナー
  • トンマナ:誠実、真面目、スタンダード
  • 300×250と750×375 の2本
  • この他に必須で入れるべき文言あり

作品1

女子高生がパソコンに向かって微笑んでいるバナー画像
300×250
女子高生がパソコンに向かって微笑んでいるバナー画像
700×375

作品2

制作後記

 作品1の700×375は人生2本目の作品です。処女作は作品2になります。そんな私のスキルはこんなところです。

  • Photoshop、Illustrator
    • 趣味でレタッチ
    • マスクは理解が乏しかった
    • ベジェは問題ない
  • 絵を描くことが好き

もともとPhotoshop、Illustratorを触っていたこともあってバナーとレースに関してはある程度自身がありました。自分で言うのもアレですけど、真似ることは得意な方だと思います。

作品2(処女作)ふりかえり

いや〜、正直まいりました。ただ、写真の上に文字に色をつけて整えて置くだけなのに・・・なんで、こんなに時間がかかるんだ。0→1難しいと思いました。

制作手順

1. 見本集め
 作り方が全くわからないので、まずは見本を集めることに。GoogleやPintarestで塾のバナーをかき集める。だいたい候補を10個ぐらいに絞る。
ここで、大まかに、構図、色、文字の組み方の方針をぼんやりと決める。
2. 書き始める
 もうね、いきなり描き始めます。描くにあたって何か手引きになるものが欲しかったのでYouTubeの出番です。合計10本ほど見ました。色々な方法があるのですがどれかに絞らないといけないので良さげなやつの通りに作っていきました。
 良くも悪くもまずは手を動かしてレビューしてもらいスキルの引き出しを増やしたいと考える。

この時の感想を下に書きます。暇な人は読んでください。

要約すると、構図が難しい、色使いはどうだ、色は多すぎないかということです。

感想

  • 構図が難しい。どこをどうすれば良いのか
  • 色々バナー集めて真似した感じ
  • 色々パターンが思い浮かんでくるが、ますます混乱する。
  • 最終的に落ち着いたがが迷い中
  • 守破離の守を意識しました。
  • 何の変化もない面白くもないバナーですが頑張りました。
  • 採用したのがヘッドマイクつきの写真ではなかったのでヘッドマイクをレタッチ処理しました。
  • 制作時間6時間

説明

  • 構図としては女子高生をモチーフに。
  • オンラインの雰囲気としてヘッドマイク
  • キャッチーなコピーを入れる「自宅でもがっつり学べる」←これはオリジナルではありません
  • 良さげな写真があったのでこれを使うもノートパソコンが半分にぶった切られているためその部分をどう処理するか
  • 結局マスクかけるか緑で覆い隠す方法を取る。

悩んでいるところ

  • 写真狭過ぎないか
  • キャッチーなコピーを白にするか青にするかで迷う。結局白の方がスッキリしたので白を本命に。
  • その下の「オンライン授業と併用」は同じ色で統一した方がよかったのか?
  • さらに、文字は全部同じ色の方がよかったのか?
  • 入会金0円の丸に文字がかかっているが、これで良いのか?
  • 資料請求・申込は黄色を使っている。トータル4色でいいのか?3色がよかったのかな。
  • 新年度高校生から下へ順に色を変えたのは一応それぞれのワードをブロックとして分けて目立つようにしたのです。

添削

添削していただいた先生の作品です。

どうですか!自分の悩んでいたところがスッキリしています。

添削ポイント

  • 構図は問題ないけど文字群をみるともっと写真スペース広くできるよ
  • 色は使いすぎだね
  • 違う色で同じ背景色で文字を目立たせるのは無理だよ
  • 写真は外向いていてもそっぽを向いた感じにならないよ
  • 背景の白を活かそうよ

素晴らしい。感動です。これで何か自分の中に入ってきました。
「やれるんじゃね」です。

作品1ふりかえり

こちらは、新たな写真で作ったものを添削してもらった後の作品です。では、添削前後を見比べてみましょう。

添削前
添削後

添削ポイント

 今回も割と難産で手が動かない時期もありましたが、前に比べ戦略的に考えてみました。この辺は後で書くとしてまずは添削のポイントです。

  • 構図はいいよ。
  • 文字組みも悪くないよ。
  • 残念なのは入会金とかキャンペーンのところのドロップアンドシャドウ青使っているおかげでボケちゃっているよ。こういう時にやるなら背景の白を使ったほうがいいよ。
  • この場合、光彩のほうがいいよ。
  • 自宅でもがっつりのところは悪くはない。でも、なくてもいいかもよ。
  • 写真の色、明るくしようよ。元気が出るよ。
  • キャンペーンのとこちゃんと字詰めしようよ。

素晴らしい!今回も悩んでいたところをズバってきた。そして、今回はなんか自身ついたし、引き出しが増えた確信があった。

制作手順

1. 写真選び
 前回の添削で何となーくやり方がわかっことと、同期のなごみさんの作品に衝撃を受け写真選びが大きなウエイトを占めることを肝に銘じ再チャレンジ。
2. 生配信のバナー見まくり
 もう、バナーが気になって仕方がない。そんな中AmazonのUnlimitedバナーで気づく。どこに着眼させるか。気になるのはやっぱりコストだよね。そしたら、次に何見てもらう?ということを自分の体験から考える。その時のTweetがこれ。
3. 描く
 写真は良さげなのをチョイス。まずキャッチコピーを透明度80くらいでその上に白文字を置くと割といけそう。この路線でいくことを決める。色は青、黄色でいく。ここまでは順調。問題はここから、手が動かん。ラフを紙と鉛筆で描いてみる(その時のTweetが下)。
 はっと、ひらめいたのが文字を四角で囲む方法。これはYouTubeであるデザイナーさんが紹介していた手法。何となく見ていたのが役立った!新規入会を囲ってみるとキャンペーンとの幅感がちょうど良さげ。あとは一気に行ったんだけど。資料請求のところ黄色か白で迷う。最終的なレビューでは黄色で問題なさそう。

まとめ

  • たくさん見て良いことを真似しよう
  • デザインはゴールから逆算 Amazonのバナーのように買ってもらう=>まず見てもらう=>99円
  • ラフを描こう
  • すぴかあやか先生すごすぎる。

Follow me!

みくのすけ

スターウォーズ日本人CGデザイナーである成田さんの「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」という言葉に心を動かされる。 独学でpythonを始めるも、そもそもhtmlが分からないと話にならないと気づく。そこからhtml、scss、javascript とコーディング、デザインを始める。 アプリ開発が目標。

コメントを残す

メールアドレスが公開されることはありません。

PAGE TOP