こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第37回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン37にて公開されています✨
今回のバナーのお題の内容はこちらになります！
今回のバナーの目的 もつ鍋のネット販促バナー
配信場所 GDN・YDNなど
ターゲット 男性、女性、20～50代
雰囲気 和風
サイズ 300px x 250px
画像 もつ鍋の画像
配色 背景色：黒、文字色：白、アクセントカラー：金 or 赤
文言
（必須）
- 元祖博多屋 特選もつ鍋
- 待望のネット販売開始！
- 全国送料無料
- ご注文はこちら
（任意）なし
（フォント）明朝体
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
今回のバナーで、鍋から出る湯気の画像の加工を、トミナガハルキさんの著書「#ズボラPhotoshop 知識いらずの絶品3分デザイン」を参考にさせて頂きました。
「#023 使い勝手抜群!? 煙の画像を駆使して雰囲気を高めよう」を参考にし、本当に自然に湯気が出ているように加工できて、魔法のようだ✨とワクワクしました。
トミナガさんが、Twitterで本の作例を新たに発表してくださったり、さらに、＃ズボラPhotoshopで検索すると、書籍を購入した方が作例をアップしてくれるという輪が広がっていて、そこでも刺激を頂いています✨
- もつ鍋の写真画像をより美味しそうに見せるため、Camera Rawフィルターで、露光を上げたり、自然な彩度のつまみを右へ動かしたりして加工した。
- もつ鍋の写真に、コンロが写っていたため鍋のみ切り取って配置した。そうすると鍋の外の湯気がなくなってしまう為、湯気の素材画像を足して、マスクをかけブラシで濃さを調節してなじませた。
- 「元祖博多屋 特選もつ鍋」の文字組を、参考にしたものをそのまま踏襲したので、自分でもっと他の組み方を試してみるとよかった。「もつ鍋」の右手に、空きができてしまった。
ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①文字組（「特選もつ鍋」の部分）
・「特選」の方ではなく「もつ鍋」を大きくすることで、直感的に商品が伝わる
今回、優先順位が高いのは、商品画像と「特選もつ鍋」の文言である。この二つのどちらかが、左上にくるとよい。
②画像のトリミング
・土鍋をトリミングすると商品が大きく見える
私は、切り取った鍋の画像に文字を被せたりせず、その周りに配置している。そうすると、注目して欲しい鍋の中の具材より、鍋の縁（円）に目がいってしまう。
鍋を写真画像をアップにすることで、中の具材により視線を誘導できる。レイアウトを区切ることもできる。
そのように、写真を大きめに使用すると、配置する文字と重なってくる。「特選もつ鍋」のように直に文字を配置するときは、そのまま置くと視認性が悪くなる。その為今回はマスクをかけ、グラデーションを使って、画像をふわっと消した（土鍋の縁がギリギリ消える位、中の画像は見えるように消した）
③帯の配置（「待望のネット販売開始！」の部分）
・帯の高さを出して、始まりも少し左に余裕を持たせると、目に留まる
この文字の配置も、土鍋の縁に被せる。そうすると、中の具材に視線を誘導できる。
④下の帯の部分の調整（「全国送料無料」「ご注文はこちら」）
トラックのアイコンは、「全国送料無料」の文字とバランスがとれるよう小さくした。
今回、ヒカルさんから、バナーの完成度は上がってきているので、作成時間に期間を設けたりと制限をつけてやっていき、「いかに早く作るか」というところを伸ばしていくとよいとアドバイスを頂きました。
前回、数を作っていくことも大切と教えて頂いたので、そのことも手を早くすることは繋がると感じます。
意識が足りていなかったので、まず自分がどれくらい作成時間にかかっているかを把握し、目標を細かく立てていくようにします。
今回、画像のトリミングのポイントが、大変勉強になりました。まず「何を見せたいか」を理解して、教わった方法を実践してゆきたいと思います！
