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

Webデザインスクール体験談_クリエイターズファクトリー_CF_3

当サイトの記事には広告として、アフィリエイトプログラムが使用されています。
アフィリエイトによって得られた収益は、読者の皆様に還元するために当サイトの運営費に充てています。

当サイトの円滑な運営のため、読者の皆様にはご理解とご協力をよろしくお願いします。

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

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

今週の授業内容
  • 文字の基礎知識
  • レイアウトについて
  • オリジナルバナー作成

無料説明会参加で1万円割引

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

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

バナートレース

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

バナートレース_1

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

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

バナートレース_2

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

バナートレース_3

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

オリジナルバナーその1

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

20230721_オリジナルバナー_1

楽天のバナー。

バナーの要件

■サイズ

1024px×768px

■ターゲット

・楽天オンラインストアを普段利用している女性(20〜40代くらい)
・セールがわかるように目立つように

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

オリジナルバナーその2

20230721_オリジナルバナー_2

国内旅行のバナー。

バナーの要件

■サイズ

300px×250px

■ターゲット

・友達と関西で旅行したくなるようなバナー
・可愛いいけど、シンプルに情報が伝わりやすく

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

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

あしらいが微妙な感じ。

オリジナルバナーその3

20230721_オリジナルバナー_3

ファッション系バナー。

バナーの要件

■サイズ

1024px×768px

■ターゲット

・20代後半~30代 女性
・読んでる雑誌:SWEET 美人百花

■要望

桜のイメージを使ってほしい

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

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

なんかダサいか・・・

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

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

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

banner_600x600_3

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

オリジナルバナー作成手順

STEP1 文字組み

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

STEP3 あしらいの追加

STEP1 文字組み

banner_600x600_1

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

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

banner_600x600_2

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

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

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

STEP3 あしらいの追加

banner_600x600_3

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

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

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

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

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

「宿題があります。」

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

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

懐かしい響き。

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

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

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

無料説明会参加で1万円割引