バナー制作の進め方

前回の記事で「学習記録を綴っていきます」なんて格好付けて大見栄を切ってから1ヶ月が経とうとしていて、このまま何も書かないでいると「あいつは口先だけの人間だ」「言ったことくらい実行しろよカス」などと批判を浴びたり、あるいは街を歩いているとnote読者や運営から石とか投げられたりしそうなので重い腰を上げてこの学習記録を投稿しようと思った次第です。嘘です。普通に書こうと思いました。

Webデザインの勉強をするにあたって、人それぞれやり方はあるけどまず初めにバナーの模写・制作から着手する人が多いかなと思ったので、今回はバナー制作の進め方について書きます。スクールで学んだことやインターネットの海に漂流している知識等をもとに自分なりの進め方や考えを言語化しているだけです。初学者の方は「へぇ～こいつはこうやってバナー作ってるんや～」とか思いながら、経験者の方は鼻で笑いながら読んでいただけると幸いです。

実際にスクールの授業で作ったフィットネスバナーを例に書き進めていきます。完成形がコレです。クオリティについては何も言わないでください。

いくつか段階に分けて説明していきます。

①ターゲットを絞る

どんな人に向けて発信したいのかを決めます。年齢・性別と、具体的な対象が決まっていると良いです。例えば「女子大生」「アメリカ好きの20代男性」「転職したい30代のサラリーマン」など。

今回は「25～40代前半の女性」です。

感覚的な話になってしまいますが、ターゲットが決まっていると必然的にその人たちに訴求できるバナーを作ることができます。あと個人的に参考にしたいバナーや素材を探すのが捗るしデザインのテイストを考えるのが楽。

②参考にするバナーを調べる

色やレイアウトを参考にしたいバナーを、エグいくらい調べまくります。これを怠ると、折角ターゲットを絞ったにもかかわらず的外れなバナーになってしまった　なんてことが起こり得ます。マジでエグいくらい調べたほうが良いです。

参考バナーを探す際には、同業種・同規模のライバルを調べると良いです。ターゲットにしている層や訴求範囲が類似していることが多いので。

今回はこの画像たちを参考に とのことでした。

こうやって参考バナーをアートボードの隣に置いておくと作業を進めやすいです。

その他にも、ピンタレスト等で「バナー フィットネス」で調べて目に付いたものを2,3枚引っ張って来るのも良いです。参考が多いと、それに比例してデザインの引き出しも増えますからね。

ここで大事なのは、"好みのもの"じゃなくて"吸い寄せられるように目に付いたもの"を選ぶことです。自分の好きなものが、同じく全員が好きとは限らないので。まあその違いを判断するのは甚だ難しいことではありますが…　できるだけ客観視して調べることを心掛けています。

③素材を集める

素材サイト等から使えそうな写真やあしらいを集めます。これが一番悩みます。

実際に仕事を請けた際に素材が配布される場合があるらしいですが、それはそれでどうやってデザインに馴染ませれば良いか悩みそうですね…

写真やイラストの印象でバナーのテイストやキャラクターが大きく左右されるので個人的にはめちゃめちゃ拘るんですけど、探し始めるとあーでもないこーでもないと考え沼にはまって抜け出せなくなるので時間をかけるべきではないと思いますね。予めタイマーで30分 などと時間を設定しておくと良いです。

探してきた素材は、アートボードを新しく作るなどしてそこに置いておくと使いやすいです。

④ワイヤーフレームを考える

だいたいこういう風なレイアウトにする みたいなものを考えます。

手書きが望ましいらしいですが僕は手書きで何か描くのが苦手なのでPsで大雑把にレイアウトを作っています。手書きのほうが良いです。

こんな感じでテキストを入れて

こんな感じで各パーツの位置や大きさを大体でいいので決めます。

重要な文字は大きく、そうでない文字は小さくするなどジャンプ率を意識。

ここで特に伝えたいのは「入会金無料」とキャッチコピーの「目指せ 夏ボディー」なのでそれらを強調します。関連性の高い文字同士を固めるのもポイント。

この時点では色やフォント等は変えないほうが良いです。ここで考え始めると悩みまくって次に進めなくなります。

次に使う色を決めます。

このように使う色をパレットみたいに置いておくと完成色をイメージしやすいです。もちろんデザインしてから変更することもあります。

ここではメインカラー2色と、アクセントで補色を取り入れました。色は多すぎるとごちゃごちゃな印象になって訴求力がなくなったり、小学生の落書きみたいにカオスなバナーになってしまったりするので注意が必要です。

これはよく言われることですが、デザインに取り掛かる前にこれらのワイヤーフレーム作成、色・素材の選定といった準備をしておくことが大切です。

初めてバナーを作ったとき、焦っていきなりデザインから取り掛かって作ったことがあるんですけど、それはもうテイストもブレッブレで統一感やバランス感覚もない、マジで最悪のバナーを生み出してしまいました。事前準備は本当に大切です。

長っ。想像の6倍くらい長々と書いてもた…

もう、面倒臭くなったら読まなくていいですよ。まあこのまま書き続けますが

⑤作る・見直す の繰り返し

描いたワイヤーフレームをもとに実際に試行錯誤しながら作っていきます。

デザインは全て言葉で説明できるように作る。それが必然的に目に付く、あるいは訴求力のあるデザインを作るコツです。って先生が仰ってました。

さっきのワイヤーに画像を入れたり色を付けたりしていきます。

だいたいの色とレイアウトはこんな感じかな。

ただこれだとフィットネスみたいな躍動感とか、文字のインパクトが足りないので装飾を加えます。

まだ躍動感が足りないしちょっとした違和感も残っていますね。

固まり同士の間隔を揃えるなどしてバランスを整えて、文字も斜体にして疾走感を出そうと思います。

アクセントカラーの黄緑も何かのっぺりした印象だったので黄色に変えました。そのほうが夏っぽいし。

まだまだ稚拙な部分はありますが、これにて完成です。

こんな感じで今後も学習したことをざっとまとめて放流していきます。「口先だけの人間」「マニフェスト守れ」などと言われないよう月に1,2本は投稿できたらいいな　そうします。