Overview

テックキャンプデザイナー転職の制作課題として作成した、テックキャンププログラミング教養の無料オンライン説明会申込ページへの誘導バナーです。ユーザーの視点に立った情報設計に力を入れました。

• 制作期間：

  3日間

• 担当箇所：

  デザイン

• 使用ツール：

  Illustrator、Photoshop

• URL：

  なし

Process

クライアント調査

クライアントである株式会社divは、プログラミングスクール「テックキャンプ」などの教育事業を展開するITベンチャー企業です。「人生にサプライズを」を理念とし、「すべての人が幸せに生きる世界をつくる」というビジョンを掲げています。

ターゲットの具体化

クライアントのサービスを既に認知しており、積極的に関与してくる見込みの高いセグメントを想定し、具体的に状況を想定しました。

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

競合サービスまたは類似のカテゴリとして人材開発系のサービスから、今回の案件と要素の種類・量が同じくらいのデザインをピックアップしました。テキストと画像のバランスや装飾を参考にしました。

デザイン作成

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

レイアウトにあたっては、信頼感を出すために余白を十分に残すこと、情報の優先順位に応じたメリハリのある文字組み、ユーザーの視線の流れなどを意識しました。

配色・テキストの調整

配色にあたっては、遷移先のトンマナに寄せること、メインカラーを効果的に配置することを意識しました。また、ジャンプ率を確保しつつ可読性をさらに向上させ、意味のまとまりが一目でわかるよう適切に行間を調整するなど、文字組みの調整を行いました。

配色

• テキストカラー：可読性を最優先し、かつ他の要素とも馴染みやすい
• ベースカラー：テクノロジー企業らしく知的で落ち着きがある
• メインカラー：テックキャンププログラミング教養のアイコンカラーであり、アイデンティティとなる
• アクセントカラー：視線誘導に効果を発揮する、メインカラーの補色系

サイズ展開

スペースの制約を考慮した情報の取捨選択、デザインの一貫性、画像の配置を工夫しました。

最終的な制作物

アクセントカラーを追加し視線誘導を図ったほか、ターゲット層のブランド認知を考慮しロゴの配置を変更しました。制作を通して、要件の把握は「最初に」「もれなく」行うこと、クライアントと同じ目線で課題解決に取り組むことを学びました。