概要
株式会社div様から架空の案件でアフィリエイト広告にて使用するためのバナーの作成を承りました。無料カウンセリング申し込みページのLPサイトへ誘導することが目的です。LPサイトとイメージの齟齬のない、クライアントの企業イメージを崩さず、クリック率を上げることができるかを意識して作成しました。
- 制作期間：3日間
- 担当箇所：デザイン
- 使用ツール：Illustrator、Photoshop
- URL：なし
基本条件
希望イメージ
- 色や雰囲気はテックキャンプの色合いに合わせたい
- 可能であればオンライン説明会の雰囲気を出したい
- 女性もしくは男性がパソコンを見ている画像を希望
ターゲット
20代〜30代の男女がメイン。プログラミング含むテクノロジースキルの習得に興味があり、その中の候補の1つにテックキャンプが挙がっているユーザー
フォント
- 和文：Noto Sans CJK JP
- 欧文：Poppins
色
#121212
#333333
#a93032
#484a4d
#acb5c1
#ffffff
サイズ
300×250 / 468×60 / 160×600
リンク先
制作プロセス
クライアント調査
プログラミング、webデザインに関する教育事業を行なっており、業界で初めて転職サポート、転職保証を導入したweb関連のスクールの大手企業の一つ
ターゲットの具体化
クライアントが転職保証のあるテクノロジースクールを全面に出していることから、ターゲットはITエンジニアやWebデザイナーなどの職種になりたい、また現職に不満があり新しい業種にチャレンジしたいと考えている人と推定しました。
参考デザインのピックアップ
実際のエンジニア、デザイナースクールのバナーはどの様なものがあるかを調べその中から色のトーンがリンク先のLPページと似ているものを中心に参考にし ピックアップしました。
デザイン作成
モノクロでのレイアウト案
参考バナーの文字、写真の大きさなどを参照し自身のバナーの作成に反映しました。完全無料オンラインの説明会であることを強調する為当該部分を強調しました。また写真部分は明るさを上げて人物を目立つ様にして明るい気持ちで勉強をしているというイメージを持ちやすくしました。
配色・テキストの調整
基本条件で指定された赤をメインカラーに指定しLPページと統一させました。またボタン部分は白や類似色のオレンジやを使用し目立つ様にしました。
配色
- テキストカラー：白の背景には黒を、赤の背景には白を使いそれぞれの背景に目立つ色を使用。
- ベースカラー：LPページと統一する為
- メインカラー：LPページと統一する為
- アクセントカラー：メインカラーに対し互いに引き立てる関係にある類似色オレンジを使いボタン部分を強調する為
フォント
リンク先LPのイメージ
修正
③のバナーについて修正しました。ロゴ部分の背景を白にし強調、人物の写真を大きくし顔とパソコンが見えるギリギリまで拡大し、楽しく勉強しているイメージを強くしました。またボタン部分に影をつけさらに強調しました。
サイズ展開
まず160×600、468×60の参考バナーを検索しどの様なレイアウトがあるかを調べました。そして自身の作成した300×250のバナーと同様に完全無料オンラインの説明会であることを強調する為当該部分を強調しました。
最終的な制作物
作品を通じて感じたこと
Photoshop,Illustlatorにてバナーを作成する際にはレイヤーをしっかり分けていなければ後の修正にかなりの時間を費やすことを学びました。一つのレイヤーしか使用しないとオブジェクトの選択がむずかしいなど修正が行いにくいと気づきました。 今後はレイヤーは事前に背景、文章、オブジェクトと最低三つ作成してから制作を開始しようと思います。またバナーとは基本的に読み飛ばされるものなので如何に読み飛ばされない様にどの部分を強調しなくてはならないか考えなければならないかが重要であること、強調する部分を正しく選ぶためにはクライアントの依頼内容を正確に読み解くことが必要であると学びました。