お花屋さんの母の日ギフトのバナー

こんにちは、yuriです。

今回、ヒカルさんから教えていただくバナー作成のレッスンが、第15回目を迎えました✨

今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン15にて公開されています✨

今回のお題は、お花屋さんの母の日ギフトのバナーでした。

今回のバナーの目的　お花屋さんの母の日ギフト

ターゲット　女性・20〜30代

雰囲気　シンプル・キレイ

サイズ　300px x 250px

画像　カーネーションの画像

配色　メインカラーブラック / バックグラウンドカラー・ピンク系（淡い感じ）

文言

（必須）

・THANKS Mother’s Day

・2020.5.10sun

・ギフトボックスラッピング無料

・Flower Company’s（店舗名）

（任意）なし

左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップをしてくださったものになります。

私が、バナーを作ったときに意識したことは、あしらいを使う時は、目立たせないよう色を薄くしたことと、下の帯は、色を濃くすることにより安定感を出したところです。

反省点は、Thanks Mother’s Day の部分の文言を、参考にしたデザインを真似たのですが、今回のバナーの配置に合わせてアレンジしたかったけれどできなかった点です。

参考にしたデザインは、正方形よりの四角の中央に文言があり収まりが良くなっていました。

初めに、ヒカルさんが指摘してくださったこと

私の作成するバナーは、雰囲気を出せてはいる

しかし、ジャンプ率がつけられておらず、どこか一番大切かということを掴めていない

ヒカルさんの指摘してくださった通り、今回はどこが重要なポイントか掴めず、メリハリを考えられていなかったと気付きました。（花を大きく見せないとと、勘違いもしていました💦）

ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっていいます。復習をするため、それを参考に「ブラッシュアップの流れ」を書かせていただきました。

Twitter

外部サイト

https://twitter.com/design_hikaru/status/1254568429001912321?s=20

ブラッシュアップの流れ

文言の、「Thanks」を筆記体にして、色を背景と馴染ませる色にして、リズムを変える。
文言で、「Mother’s Day」を横に繋げた。今回は「母の日」という文言は入っていないため、ここで母の日のバナーであることを伝える。
ギフトボックスの帯の幅を狭くして、文言を横に並べる。ラッピング無料の横のあしらいは、ペンツールを使って作ると調節しやすい。文字へ視線を誘導するため、このあしらいの色を、白から背景と馴染む色へ変更する。視線を誘導したいのは、上の「Mother’s Day」なので、この帯の部分の文言のフォントサイズを小さくしてメリハリをつける。
「感謝の気持ちを伝えよう」のフォントを、私は TA-ことだまRを使用したが、優しく可愛いイメージとなり、今回の課題の雰囲気と違っている。フォントは、筑紫B丸ゴシックを使用して、文字間を広げた。
ペンツールを使用して、花を切り抜く。この時のポイントは、少し内側（1px程）を切っていくこと。そうすると合成したときにジラジラしない。
背景を作る。花の画像（背景が薄いピンク）で、花を「コンテンツに応じた塗りつぶし」で消して、画像を補正する（露光量をあげ、ピンク感が欲しいので彩度をあげる）
花の配置を決める。花の茎の印象が強いため、トリミングで隠す。対角線上に配置して上を小さくするとキュッとまとまる。花束の画像を、角度を変えて使用することで、２つが違う花束のようにみせる。
帯の色は、私の方の帯の色では浮いて見えてしまうので、トーンを合わせた色へ変更する。