概要 overview
TECH CAMPのオンライン説明会を周知するバナーの作成課題です。 遷移先のトンマナを意識した配色と、文字サイズのバランスに注意して作成しました。
- 制作期間：3日間
- 担当箇所：デザイン
- 使用ツール：Illustrator、Photoshop
- URL：なし
制作プロセス Process
クライアント調査
主にプログラミング教養や転職支援、研修サービスを行っている会社で、 「人生にサプライズを」という理念や「すべての人が幸せに生きる世界をつくる」というビジョンを掲げている。
ターゲットの具体化
顧客の依頼として「プログラミング含むテクノロジースキルの習得に興味があり、 その中の候補の１つにテックキャンプが挙がっているユーザー」に向けたものの作成とありましたのでそのまま起用しました。 候補として考えている為、サービスの概要は知っているユーザーだという認識です。
参考デザインのピックアップ
文字量を意識して参考バナーをピックアップしました。 作成するバナーの文字量を考えてイメージしやすいものを選んでいます。 PCを見ている人物の写真の使い方等を作成物に取り入れました。
デザイン作成
モノクロでのレイアウト案
PCを見ている人物の写真を使って欲しいとの要望がございましたので、 参考バナーを参考に写真のグラデーションで徐々に白くする効果を使いました。
配色・テキストの調整
遷移先のトンマナを意識して配色を行いました。 全体を見て強調したい箇所に赤色を入れて目立たせるよう工夫しました。
配色
- テキストカラー：黒で落ち着きを持たせ読みやすいようにしました
- ベースカラー：背景に写真を用いているので、シンプルに落とし込むよう白に合わせました
- メインカラー：遷移先で用いられている赤色をメインで使いました
- アクセントカラー：遷移先のトンマナを意識し、また他の色を潰さないようグレーを選択しました
フォント
サイズ展開
統一感を持たせる為にCTAボタンや配色は同じ物を使用しました。 参考にしていたバナーが300×250のサイズのみだったのでサイズ展開の引き出しがなく、とっかかりに苦労しました。
最終的な制作物
同じ内容のバナーでもサイズが違うと配置や見せ方が大きく変わってくるということを学びました。 また自分の引き出しのなさに気づいたので日頃から意識してデザインに触れ、 どういう意図で配色、配置を決めているのかということを考えていきたいと思います。