【制作の流れ】
Hertechの課題で子供向けプログラミング教室のバナーを制作しました。
制作時間:3時間
情報設計、デザインまで担当。
【デザイン】
・カラー
本バナーでは、小学生向けサービスであることと、保護者が安心して申し込めることの両立を
意識してカラー設計を行いました。
ベースカラーには、黄色・オレンジ系の明るい色を使用しています。
これにより、楽しさ・前向きさ・親しみやすさを直感的に伝えられるようにしました。
・タイポグラフィ
Mochiy Pop Oneを使用しています。
読みやすさと親しみやすさを重視して選定しました。
・情報設計
小学生向けプログラミング教室の集客バナーを想定して制作しました。
明るく親しみやすい配色で「楽しさ」を表現しつつ、
保護者が判断に必要な情報を、視線の流れを意識して整理しています。
■情報の整理と優先順位
伝えるべき情報を洗い出し、以下の順で優先度を設定しました。
・サービスの価値・魅力(楽しみながら学べる)
・サービス内容(小学生向けプログラミング教室)
・不安を解消する情報(初心者歓迎・PC無料貸出)
・行動喚起(無料体験への申込み)
「何のサービスか」「なぜ検討しやすいか」「次に何をするか」が
直感的に理解できる構成を意識しています。
■安心材料の配置
保護者が不安に感じやすい「初心者でも大丈夫か」「準備は必要か」といった点を想定し、
関連する情報を視線の流れの途中に配置しました。
興味を持った直後に不安を解消できることで、離脱を防ぐ設計を意識しています。
【工夫したポイント】
■視線の流れを意識した配置
上部で興味を引き、中央で内容を理解し、下部のCTAへ自然に視線が流れる構成にしています。
■保護者視点での情報配置
「初心者歓迎」「PC無料貸出」など、判断材料となる情報を目に入りやすい位置にまとめました。
■行動につながる導線設計
CTAを目立たせることで、次のアクションが迷わず分かる構成にしています。