【Webデザインスクール体験談#3】いよいよバナー作成！クリエイターズファクトリー（CF）

3回目の授業はいよいよオリジナルバナーの作成です。
講師の方のお手本を見ながら作成していく流れ。

バナーを作るときに講師の方がどう考え、どこに気をつけているのかが垣間見えました。

3回目の授業までにやったこと

先週に引き続きバナートレースをやりつつ、CFのオンライン講座も進めていました。
オンライン講座でもバナー作成に突入したので一足先にオリジナルバナーは作っていました。

バナートレース

まずはバナートレース。
画像も全部取ってきたものなので見本と一緒にはならないですが、似たようなものを取ってきたつもりです。

スポーツシューズのバナーにある赤いシューズは、左上の黒いシューズを無理やり赤に染め直しました。
右にある白いシューズも元は黒いシューズ。

文字組みや配色などの意図を読み取るのが大事だと思うので、細かいところは基本スルーという適当さです。

コーヒーのバナーは、淹れたてのコーヒーが大事かと思ってこの写真にしました。

秋冬モノのファッションバナーは素材探しに苦労しました。
左側の「AUTUMN&WINTER・・・」は写真をそのまま背景に使うと文字が見えづらかったので、写真の左端だけグラデーションにして文字の視認性を上げてみました。

オリジナルバナーその1

続いては、オンライン講座で作成したバナー。

楽天のバナー。

楽天は赤と白のイメージがあったのでこの配色に。クリアランス感謝祭はもっと派手にしてもよかったかもしれないです。

オリジナルバナーその2

国内旅行のバナー。

サイズが小さいので人気スポットを背景に。
「人気スポットランキング」を可愛い感じのフォントにして、文字の一部の色を変えてワクワク感を加えました。

関西のことだと分かるように丸の図形で囲んで強調。
「1位はこちら」を追加して記事への誘導を試みてみました。

あしらいが微妙な感じ。

オリジナルバナーその3

ファッション系バナー。

大人っぽい感じを想定してフォントは明朝体。
写真を上下に配置して動き？を出してみました。

要望の桜は、1つは目立たせ、もう1つの背景の花びらはあんまり目立たないように若干不透明に。

なんかダサいか・・・

授業でオリジナルバナー作成

授業では簡単な文字組みとあしらいを利用した学習塾のバナー。

完成図がこちら。
学生の画像が荒いのはご容赦ください。

今回作成したバナーの作成手順は下記のとおり。
STEPごとにどう変わっていくのか簡単にご紹介します。

STEP1　文字組み

今回は学習塾のバナーなので、「授業料30%OFF」を全面に出すと怪しさがでるので「夏期講習」がメイン。
また、生徒の写真を大きくして勉強してる感をアピール。

STEP2　フォントの変更や色の追加

「夏期講習」の文字はタイトルっぽく、かつ、楽しい感じのフォントにして他の文字と差別化。
文字色は周りの背景のものに色味を合わせると統一感がでる。
そのため、「夏期講習」のフチは空の色と合わせて、「授業料30%OFF」はCF進学塾の色と合わせる。

アクセントとして夏の文字色を変更。夏らしい色に。

背景に空を追加したことで野外で勉強しているみたいだけどそこはご愛嬌。
野外で勉強はある意味話題になるかも？

STEP3　あしらいの追加

あしらいを追加します。あしらいとは、装飾のことです。

30%OFFの背景に長方形を追加してグラデーションで透過。
講師の方曰く、長方形で区切ると上下で分断されているように見えるのでグラデーションをかけて立体感をだすとのこと。なるほど。

あとはなんやかんやあしらいを追加して完成。

授業3回目にして初の◯◯

今週の授業も無事に終了かと思いきや講師の方からある一言が。

「宿題があります。」

とうとう来た・・・
何十年ぶりかの宿題。

S・H・U・K・U・D・A・I

懐かしい響き。

宿題の内容はバナーを作って添削を受けて納品すること。
お題は下記の中から最低1つ。

・ハワイ旅行キャンペーンのバナー
・和風旅館のバナー
・ポケットWifiのバナー

できるなら全部やりたい。
2日に一回のペースでやればなんとかなるか・・・