はじめに

はじめまして、19新卒デザイナーのtsukamotokです！
アイスタイル Advent Calendar 2019の12/6投稿を担当させていただきます。

今回は、デザイン部に配属になって２か月たった頃に初めてバナーの制作をしたので、バナー制作における気付き・学びを共有したいと思います！

制作手順

1. 情報整理
はじめに、ユーザーに伝えたい情報を列挙し、必要な情報、必要でない情報を整理して、優先順位をつけました。

2. レイアウトを組む。
次に、ユーザーに伝えたい事をきちんと伝えるため、優先順位を参考にレイアウトを組みました。

3. 情報のビジュアル化
レイアウトを基準に、文字を大きくする、アイコン化する、写真を活用するなど効果的にユーザーに伝わるように意識してビジュアル化を行いました。

気付き・学び

遷移先とテイストを揃える。
POPなバナーなのに遷移先が綺麗目なサイトだと違和感しかありません（笑）
デザインに一貫性を持たせるためにも、制作前にはクリエイティブのトンマナを考える必要があると感じました！

限られた範囲で伝えたいことを的確かつ端的に伝える。
ユーザーはバナーを見るためにサイトなどに訪れている訳ではないので、伝えたい事を的確に伝え、ユーザーに興味を持ってもらい、遷移先に飛んでもらうという意識の元、情報整理しビジュアル化する必要があると感じました！

掲載する場所を確認してデザインする。
制作過程で、一度作ったデザインを実際に掲載されるスマホ画面で見た際に、文字が小さくて読み取ることができないということが起きました。
いくら情報が整理されていても伝わらなかったら本末転倒なので、バナーに限らず、クリエイティブを作成する際は、実際に掲載される場所を確認し、視認性も考慮したデザインをする必要があると感じました！

学んだデザインテクニック

1. 背景と被って文字が見にくい場合は、境界線を設けると文字をハッキリ視認することができる。

2. 化粧品などのバリエーションの豊富さを表現したい時は、
枠からはみ出すことで空間の広がりを表現することができる。

頻繁に使用するPhotoshopのショートカットキー

バナーを制作を通して、今後重要になってくると思ったのが、作業の効率化です。

特にクリエイティブを作成するときは何度も修正しブラッシュアップしていくので、スピード感が大事だと感じました！

以下にバナー制作を進めていく上で頻繁に使っていたPhotoshopのショートカットキーを一部記載致しました！

今後もショートカットやPhotoshopの便利な機能を使って作業の効率化と表現の幅を広げていきたいと思います！

機能	Mac	Windows
移動ツール	V	V
選択ツール	M	M
文字ツール	T	T
描画色と背景色の切替え	X	X
コピー	Cmd + C	Ctrl + C
ペースト	Cmd + P	Ctrl + P
新規ファイル作成	Cmd + N	Ctrl +N
保存	Cmd + S	Ctrl + S
別名で保存	Cmd + Shift + S	Ctrl + Shift +S
作業のやり直し	Cmd + Z	Ctrl +Z
選択解除	Cmd + D	Ctrl + D
描画色で塗り潰し	Ctrl + option + delete	Ctrl + alt + delete
100%表示	Cmd + 1	Ctrl + 1
ガイド表示、非表示	Cmd + :	Ctrl + :

最後に

今回のバナー制作を通し、情報のグルーピング、整列、カーニングなどの基本的なデザインのルールの他に、情報をビジュアル化する際のテクニックを学習することができました！

また、クリエイティブを作成するにあたって、掲載する媒体や場所、遷移先を考えてデザインする必要があるという視点を持つことができるようになりました！

バナー制作を1ヶ月間行って、情報整理をし、レイアウトを組むことはある程度できるようになってきましたが、情報をビジュアル化する能力、いわゆる手数が少ない事を痛感したので、様々なクリエイティブを見て、実際に手を動かす事で、ビジュアル化能力をどんどん高めていきたいと思います！