概要 overview
課題：株式会社divのアフィリエイト広告用バナー制作(架空案件)。３サイズ制作。 注意した点：小さくても、視認性・可読性・判読性が下がらないよう、文字同士のまとまりとジャンプ率を意識しました。また遷移先のLPと違和感が生まれないよう、メインカラーを統一しました。
- 制作期間：3日間
- 担当箇所：デザイン
- 使用ツール：Illustrator、Photoshop
- URL：なし
制作プロセス Process
クライアント調査
クライアントは、「TECH CAMP」というプログラミング教育事業を展開するITベンチャー企業。理念は「人生にサプライズを」。ビジョンは「全ての人が幸せに生きる世界を作る」。競合にはバレットグループ株式会社や株式会社Emotion Techなどがあります。
ターゲットの具体化
今現在エンジニア、Webデザイナーに転職を考え、かつプログラミングスクールを探している20〜30代が検索候補として出てきたスクールを閲覧。20〜30代の男女で、テクノロジースキルを必要としている人の状況として、考えられる可能性は【①仕事上必要 ②転職したい ③自分磨き】の3つ。③を除いては必要に駆られてスクールを探しているので、情報収集には積極的なはず。 また彼らは就業中であることが考えられるため、平日の日中の情報収集はスキマ時間に限られる。 そこで積極的に活用できるスキマ時間として、電車での通勤時間を想定しました。
参考デザインのピックアップ
①人物画像を使用している ②掲載要素が大体同じ ③スクール系、以上の３点を基準に参考になるバナーを選びました。画像や文字要素の配置の仕方、ジャンプ率のバランスなどを参考にしました。
デザイン作成
モノクロでのレイアウト案
伝えたい情報が多いので、いかに人物を邪魔せずテキストを配置するのか。 クライアントの雰囲気を損なわないシンプルなデザインを意識しました。
配色・テキストの調整
配色は遷移先のイメージに合わせ、フォントは指定の物を使用。指定色がモノクロ+赤だったので、赤が目立つように配色しました。また文字のデザインにおいて大切な「視認性・可読性・判読性」に気をつけました。また文字とは別に、一目でなんの話か察しがつく人物の画像は、できるだけ大きく扱いました。一部配布された画像以外に、男女どちらも参加しやすい説明会という意味を込めて、男女が写っている画像をチョイスしました。
配色
- テキストカラー：遷移先指定のものを使用
- ベースカラー：遷移先指定のものを使用
- メインカラー：遷移先指定のものを使用
- アクセントカラー：遷移先指定のものを使用
フォント
サイズ展開
既にデザインが固まっていた300×250のバナーから、大きく離れたデザインにならないように気をつけながら３サイズ展開しました。468×60のバナーは、「可読性・判読性」を考えるとサイズ的に入れられる文章の量が限られると感じたため、文言の優先順位を整理し見やすくまとめました。160×600のバナーは、文字要素のバランスに悩みましたが、あくまでも「見やすさ」を忘れないようデザインしました。
最終的な制作物
人物に文字が被らないように大きさを調整。目立ちすぎる矢印は小さなアイコンに変更しました。この課題では、サイズの異なるバナーを複数制作したことで、より優先度の高い要素は何か、ユーザーにとって見やすいデザインはどういうものかについて考えることができました。クライアントの要望を鵜呑みにするのではなく、クライアントとユーザーのどちらの視点も満足できるバナー作りとはどういうものか、についてより具体的に学ぶことができました。 制作を通して、クライアントが望む物、ターゲットを想定し自分が制作したデザインを客観的にどう思えるのかが大事だと思いました。