WEBデザインスクールバナーを作成、ブラッシュアップ

こんにちは。

CFバナー課題、今回は「WEBデザインスクールバナー」を作成したので

作成→提出→フィードバック→ブラッシュアップをまとめていきます。

作成

◎クライアントの依頼と要望
■入れたい情報
・卒業がないWEBデザインスクール
・先着10名まで早割中
・無料オンライン説明会はこちら
■色味
オレンジ・黄色系
■バナーサイズ
300 ✕ 250

上記依頼内容に基づいて作成します。

ちなみに2案つくりました。

案1

【意識した点】
・目立つように「Webデザインスクール」、長方形に影を付けました。
・「無料オンライン…」のボタンにグラデーションをかけました。（矢印の方向に）
・間が気になったので輪のあしらいをいれました。
・情報を整列させるのに長方形を並べてその上に文字を配置しました。

【難しかった点】
・情報量が多く、整理して配置するのが難しかったです。
・女性の画像の大きさ。
・全体の色。
・スクールの特徴の文字の太さ。
・長方形と長方形の間の空白の取り方。

CFのサイトの印象としてオレンジと黄色系の透過したものがあったので、同じようにバナーに使いました。

案2

個人的にこっちのほうが好きです。

【意識した点】
・文字の可読性をあげるため写真の明度をさげました。
・背景がスタイリッシュなので柔らかくするため角丸の図形を使用し文字も丸いものを使用しました。
・上下の長方形で締めました。

【難しかった点】
・Webデザインスクールの文字組。
・スクールの特徴の空白のとりかた。

案1よりもCFを意識して作りました。サイトがスタイリッシュなイメージなので意識しました。

背景を黒にすると作りやすいしスタイリッシュなイメージにすることができました。

これを提出してフィードバックをもらいます。

結構いい感じにできたかなと思っていたのですが、大切なことを意識できていなかったようです。

フィードバック

フィードバックいただきました。

要約すると

案1：文字の間隔を考える。情報量が多いのでスクールの強みは3つくらいに絞る。ボタンはとても重要なので補色などで目立たせる。

案2：ぱっとみてスクールの強みが目に入るよう補色などを使うとよい。

ほかに今回指摘いただいたのはセールスを意識すること。

今回のバナーなら無料説明会に申し込んでもらうのが目的。思えばデザイン面ばかり考えて申し込んでもらうのが目的ということを意識できていなかったです。

次回からもっとそのあたりを意識して作成しようと思います。

ブラッシュアップ

案1

訂正前より結構スッキリしました。

重要な情報を絞り配置しました。

重要なボタンは背景をオレンジ系の補色青系にし、目立たせました。

彩度の高い色は扱いにくいということで低めの紺にしました。

背景の左側は結構ごちゃごちゃしていたので教室の写真、あしらいを取り除き、透過もなしにしました。

また、卒業の無いWebデザインスクールとすることでこのスクールの強みが伝わりやすくなったように思えます。

案2

実践型の背景だけ青に変えて目立たせました。

バナーは遠目でも目立つようにつくるべきとのことです。

ボタンはグラデーションを使用していて目立つので色はこのままにしました。

どちらもブラッシュアップ後はパッとしたように思えます。

情報の優先度や動線などを考えて作る必要があります。

案1は引き算をして、本当に重要な情報、あしらいかを考えてブラッシュアップしました。

デザインは引き算が重要ということがよくわかる回になりました。

まとめ

情報の優先度を考えて取捨選択する。

バナーはじっくりとみられるものではないのでパッと見て伝わるようなデザインにする必要がある。

バナーの目的を考えて作る。