Facebook 【HerTech架空案件】子供のプログラミング教室のバナー
Logo

【HerTech架空案件】子供のプログラミング教室のバナー

クレジット
Avatar
WEBデザイナー
【HerTech架空案件】子供のプログラミング教室のバナー-1
シェア
制作ノート
制作について

【デザインについて】

*ビジュアルイメージについて*

 プログラミングっぽさを表現するために、背景に幾何学っぽい写真を配置し、カラーにこだわりました。また、テキストや図形の色も背景と統一感を持たせました。

*カラー*

 紫は寒色と暖色の境界にある色で、強い主張がないのに存在感を保っていると感じております。幾何学的な形はシンプルでありながら構造的な強さがあり、そのバランス感覚を表現する色として紫を採用しました。

また、紫の反対色である黄色をアクセントカラーに選びました。黄色の明るさや活発さをイメージさせるのに対して紫がミステリアスさを演出しプログラミングという“なんとなくわかる”という世界を演出しました。

*タイポグラフィー*

 フォントは、パソコンを表現するために機械っぽいイメージとその中でも柔らかさを感じ、機械に対する堅苦しさを和らぐことができるのではと思い、チェックポイントを選択しました。また、訴求したい言葉には丸みのあるゴシック体を使用し、チェックポイントと同様、堅苦しさや抵抗を和らぐことを目的に使用しました。

*情報設計*

 なんの教室なのかをキャッチコピーの上にアーチ型で配置し、誰向けの教室なのかをキャッチコピーの中に“こども”という言葉をいれ一目でなんのバナーなのかを表現しました。

初心者歓迎やパソコンの無料貸出には、キャッチコピーで使用した色の素材の上に、白色のテキストを配置し、見やすさにこだわりました。

【工夫したポイント】

当初、プログラミングよりこどもっぽさに焦点を当ててしまっていたため、テキストや背景、図形など全てをプログラミングに全振りしデザイン全体を見直しました。(当初デザイン6枚目)

背景の上にそのまま素材を置いていくと統一感がなくバラつきが目立っていたため、白色の透明度を下げた四角の図形を置き、見やすさを意識しました。

また、図形の周りには、グレーの枠を配置し、パソコンの画面を連想させるようなデザインに仕上げました。

最後に、CTAボタンにはこの画像の中で使われていないカラーの組み合わせを使用して、デザインの邪魔にならない且つインパクトをのこせるようなデザインにしました。

シェア