父の日の限定ギフトキャンペーンバナー

こんにちは、Yuriです。

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

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

今回は、父の日に関するお題ということで、Pinterestなどを見ていたら黄色のお花の写真やイラストをよく目にしました。青に黄色が映えて素敵です。

初めて知ったのですが、父の日に黄色の花を贈るのは、黄色いリボンキャンペーンが関係しているとのこと。

それは、家族の愛情や尊敬を表す黄色を父の日のイメージカラーとして啓蒙している活動だそうです。この活動が、海外から日本へ伝わった父の日にバラを贈る風習と同化し、父の日に黄色い花を贈る今の風習になったそうです。

素敵な風習を知ることができて嬉しかったです✨

そして、今回のバナーのお題の内容はこちらになります。

今回のバナーの目的　父の日の限定ギフトキャンペーンバナー

ターゲット　男女・10〜30代

雰囲気　カジュアル・シンプル

サイズ　300px x 250px

画像　革財布の写真

配色　ベージュ・ブラウン・ブルー

文言

（必須）

・父の日

・2020.6.21 SUN

・限定本革レザー

・名入れ可能

・今すぐチェック

（任意）なし

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

バナー作成時に意識したことと、反省点

今回の指示の雰囲気、カジュアル・シンプルを意識しつつ、父の日を祝う華やかなイメージをストライプを使うことで表現した。
本革レザーの財布のイメージから、ビンテージ感のあるあしらいを使用した。
父の日のフォントに筑紫B丸ゴシックを選んだが、フォントサイズが２種類しか選べなかったので、レギュラーを選んだが、印象が弱くみえる。
「限定本革レザー」のテキスト周りの余白が、広くみえる。

ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっています。

復習をするため、それを参考に「ブラッシュアップの流れ」を書かせていただきました。

Twitter

外部サイト

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

ブラッシュアップの流れ

今回の中心となる改善点：商品が小さい・あしらいが悪目立ち

私の作成したバナーは、ストライプの背景で、右上の角に色が薄い部分が少しだけ出てしまっている →バナーより大きな面積のストライプの背景を用意し、端にくる位置を調整した
ストライプが少し目立ちすぎているので、視線誘導を妨げないよう、枠の面積を少し落とした
バナーの面積は狭いため、個性的なリボンをそのまま使うと、テキストより目立ってしまうため、調整していく
リボンを不透明度を50%して、リボンの不要な部分はトリミングしていく
リボンをラスタライズして、マスクをかける。描画色を黒、背景色を白にする
グラデーションツールで「描画色から透明に」を選択、リボンにかけたマスクの部分を選択し、リボンの左側の部分をフワッと消す
リボンの形状の、縦幅や横幅、角度を調整し目立ちすぎないようにする。
「2020.6.21 SUN 」のフォントの色の視認性が低いため、「父の日」のフォントの色に変更する
「名入れ可能」の文言が入ったあしらいを、目立ちすぎないよう不透明を下げる（37%にした）
本当は、商品にあしらいが被るのはよくないが、今回は「名入れ可能」と言う意味合いがあるので、少しだけ被せる。少し、傾けてリズムを出す
「限定本革レザー」のフォントも、「名入れ可能」と同じく貂明朝に変更し、縦書きにする
「父の日」のフォントも、貂明朝に変更する
「今すぐチェック」の帯を、ストライプの色からとって少し濃い色にする。文言の色は白にする
財布の角度を平行にする。私の財布の配置の仕方は、右肩下りになっているが、リズムをつけるときは右肩上がりにすると良い。今回はバランスを見て、角度を平行にした。
各パーツの大きさ、位置を調整する。