概要 overview

TECH CAMPでの、バナー製作の模擬案件。クライアントのご要望と、ユーザーの見やすさを、両立させる工夫をいたしました。複数のデザインのレイアウトやパターンをクライアントに提案した事によって、イメージの共有がしやすように致しました。

• 制作期間：4日間
• 担当箇所：デザイン
• 使用ツール：Illustrator、Photoshop
• URL：なし

制作プロセス Process

investigation 調査

クオリティの高いメンターが専属して、転職活動までを一貫してサポートする、挫折しない環境を作り出しているところ。規模問わず多くの企業に利用されている実績も強みの一つと、調査する事ができました。

Targeting ターゲットの具体化

アフィリエイターの手持ちのサイト内でテックキャンプのオンライン説明会を紹介し、このようなユーザーを、LPへ送客する際に貼られるバナーになる必要があると、目的も明確化できました。

Pick Up参考デザインのピックアップ

セミナーや説明会などのLPに送られる、同じような目的のバナーをピックアップ致しました。できるだけ人物を背景にします。文字が多くなっても、見やすいようなデザインをされているバナーも参考にして活用致しました。

Design デザイン

モノクロでのレイアウト案

モノクロで作成しても、伝えたい事が伝わるかどうか、確認しながら作業を行いました。イメージが湧かないため一部分を着色しております。

配色・テキストの調整

モノクロ案の中から三案を抽出。リンク先のイメージに合わせ配色致しました。最終的に一番左上の案に決定いたしました。背景にPCを操作した男性を配置します。また、グラデーションをかける事で、文章との境界線をより目立たせました

配色

• テキストカラー：FFFFFF ベースとのコントラストが強い色を使用して、目立たせました。
• ベースカラー：A83032 リンク先のイメージカラーと合わせる事で、違和感なくしました。
• メインカラー：A83032 リンク先のイメージカラーと合わせる事で、違和感をなくしました。
• アクセントカラー：B3B3B3 クライアントのページで使用されていた、テキストカラーを使用して 統一感を持たせました。。

フォント

最終的な制作物

クライアントの要望はもちろんですが、リンク先のページに飛んだ場合でも、違和感がないような配色や、可読性の高いフォントを選ぶ事等、利用する側の思いを反映させる事が大切だと学びました。また、バナーの場合だと、小さすぎて読めない場合も発生するため、できるだけ要点を捉えた文章にしつつ、コントラストを強める事で、理解してもらいやすいようにいたしました。