こんにちは、yuriです。
先日、ヒカルさんから教えていただくバナー作成の1on1レッスンが、第6回目を迎えました✨
今回は、ヒカルさんがブラッシュアップしてださったバナー（300px X 250px）から、リターゲティング広告として作った横長のバナー（728px × 90px )をブラッシュアップして頂きました✨
アイキャッチの画像は、ヒカルさんがブラッシュアップしてくださった、架空のカニ通販サイトのお歳暮販売キャンペーンのバナー（300px x 250px）です。
そして、こちらの上の画像が、私が初めに作ったもので、下の画像がヒカルさんがブラッシュアップをしてくださったものです。
＜ヒカルさんがブラッシュアップしてくださった流れ＞
🌟初めに、横長のバナーを制作する時の重要な考え方について
バナーの中央で割って二分割にして、左と右でレイアウトをとる。そうすると、情報が伝わりやすくなる。
- まずは、要素を減らしていく（例：飾りである金の円を一度、消す。ジャンプ率を高くしていた、「２kg」の文字を「8000円」と揃える。）
- 左手に、「期間限定〜まで」を持ってくる。右手に「本生ズワイガニ」と「２kg8000円」という似ているテキストを持ってくる。
- 私は「お歳暮・冬ギフト」の下に菱形の図形を敷いた。長方形の図形は、収まりが良くできるが、菱形や円は使えないエリアが四隅にできるため、少ないエリアを有効活用をさせないといけない今回のバナーの時には、ロスが発生する。そこで菱形を正方形で置いてみるとエリアは確保しやすい。しかし、ブロック感が出てしまい、全体を割っていくときに１ブロックを使い切ってしまう。なので、「お歳暮・冬ギフト」のテキストの下に図形を敷かずにそのまま置き、飾りの金の円を再び表示させる
- 金の円からもれる影を作る。まず図形を作り、そこへドロップシャドウをかける
- 「期間限定〜まで」の、日付の高くしていたジャンプ率を元に戻し、下に敷く帯の高さもギリギリまで狭くする。左上にぴったりと配置させ色を赤に変更して目立たせ、下の帯の右手にグラデーションをかけ、自然に見せる
- 右手に配置した、「本生ズワイガニ」と「２kg8000円」どちらを目立たせたいかを考える。「２kg8000円」と決定し、調整していく
- 蟹の写真を拡大して使う
- 一番右手に、「全国送料無料」という文字を縦書きで置き、下に赤色の帯を敷く（アイキャッチとしての役割を担う）
- 「北海道産」のテキストの配置を、「２kg」の左手にくるように配置した。（下の巻物のイラストをなくして、「本生ズワイガニ」のテキストとまとめても良いかもしれない）
- 全体を見て、蟹の写真を調節したり、文字のカーニングを整えたりしていく
蟹の写真を中心にして、左と右に割った感じに仕上げた。
「お歳暮・冬ギフト」の下に菱形を敷くと余白ができてしまいもったいない為、そのままテキストを配置した。
蟹の写真は大きめに使用した。
情報をまとめてあげると、パッと見、見やすくなる（目が泳がない）。
視線の誘導をするときに、誘導するポイントをばらばらにしていると目が泳いでしまう。
情報をまとめて、目が泳がないようにするには、近接と、ブロック同士を遠ざけるとよい。今回は、蟹でブロックを遠ざけた。
横長のバナー（728px × 90px )を制作するときに、スペースが狭いためどう配置していいのか分からず、難しいと感じました。
しかし、今回もヒカルさんが丁寧にポイントの一つ一つを解説してくださったので、なるほど！と、デザインの面白さや奥深さを感じることができました。
デザインも、コーディングも、楽しんで取り組めることに感謝してこれからも頑張ります✨
