
【※6/21追記】バナーレイアウトチャレンジで気づいた「制作のとき意識すること」
みなさんこんにちは。ホマレです!
4月の終わりくらいから、チラシを真似て文字組みの仕方を知ったり、バナーをトレースしたりと、少しずつバナーの練習をしてきました。
そして在宅勤務を終えるラストの週に「レイアウトチャレンジ」を行って、1ヶ月を無事挫折することなく終えることができました。
飽き性な自分からしたら思ってもみなかったことです。レビューをいただいた方、ありがとうございました。今回はそのレイアウトチャレンジの様子を振り返っていきたいと思います。
今回のルール設定
毎回習慣づけのためや作る時のルール、今回は以下のルールを設けました。
・使うテーマは「マイフェバ」さんの旅行紹介バナーから選ぶ。
・304×190のサイズから、YDNでポピュラーだった300×250サイズへ
リサイズして作成していく。
・交互にチートデー(休憩日)挟みながらやっていく。
リサイズする場合でないと、レイアウトが同じになりがちなので他のサイズに変更しました。
5月25日(月) しまなみ海道ロケーションカフェ バナー
マイフェバ さんの「しまなみ海道ロケーションカフェ」の特集ページへのバナーを参考に自作しました。
— イカヅチホマレ|転職活動中 (@homahoma31) May 25, 2020
反省点は、文字が小さすぎる。波のマークが山にも見える。平面的に見えるところ。
もっとこうした良いよってことなど、
あればよろしくお願いします🙇♀️#バナーレイアウトチャレンジ pic.twitter.com/Mf3AcLNW4f
この時意識していたこと
「できるだけ元のバナーの表現しているイメージを抽出して、自分の中で表現してみること」です。今回は「しまなみ海道」ということで「海風を感じる開放感」や、「ロケーションの良さ」を意識して制作しました。
イメージを具体的な言葉にすると
・曲線を取り入れて、風を表現する
・青みのある加工をした写真を使って、夏っぽい光を表現する
・空や景色の良さを取り入れることで、開放感を出す
が重要だと考えました。
いただいたアドバイス
・背景写真の彩度が高くタイトルよりも目立ってしまっている
→ 写真全体の上に黒2%程度のボックスを敷くと情報の優先度が明快になり、全体的にまとまりが出ると思います。
むにぃさん
— イカヅチホマレ|転職活動中 (@homahoma31) May 25, 2020
初めまして!アドバイスありがとうございます。
黒4%をかけてみました。文字の部分と差がついて読みやすくなったと感じます😂✨ありがとうございます!! pic.twitter.com/U35ijp9ZKz
左下のアイスのピンク色部分が目立っていたのですが、若干黒をかけたことによって、左上の文字に視線がいきやすくなりました。
アドバイスをいただくと、自分が気づいていなかった視点からみていただけることがあり、とてもありがたく感じました。優先順位は、見た目の大きさや位置関係だけでなく、色味や色調の温度差なども大切になってくると感じました。
5月27日(水) 広島の幸せスイーツ バナー
マイフェバ さんの「広島の幸せスイーツ」の特集ページへのバナーを参考に自作しました。
— イカヅチホマレ|転職活動中 (@homahoma31) May 27, 2020
反省点は、背景と馴染みすぎて見づらいところ。
制作時間は2時間30分でした。
もっとこうした良いよってことなど、
あればよろしくお願いします🙇♀️#バナーレイアウトチャレンジ pic.twitter.com/yWdMvwVxPc
この時意識していたこと
「どういった層の人がこのバナーを見たらクリックしやすいのか」です。
スイーツが好きな20〜30代女性をメインターゲットとするならばinstagramのような「見栄えにこだわった写真」や「シズル感」が大事。食べているところを想像しやすいような写真を選びました。
イメージを具体的な言葉にすると
・若い女性が好きそうな光を抑えつつも、白っぽい上品な色味
・影を抑えて、朝っぽい光の写真を使う=幸せ感、上質感を出す
・食べているところ(スプーン使ってる、切っているとか)
いただいたアドバイス
・王冠の形が若干わかりづらいのがもったいない。
→シルエットで王冠ってわかるともっと効果的だと思います。
今日の朝活。
— イカヅチホマレ|転職活動中 (@homahoma31) May 28, 2020
シルエットデザインさんを参考にして、王冠の盛り上がった部分を強調したり、装飾の部分を大きく作ってみました。
あとは写真にかぶりすぎていて気になったので、写真を回転させてパンケーキがよく見えるようにしました。#バナーレイアウトチャレンジ pic.twitter.com/wU1u6fKDuG
遠くからだと丸い形がパンのようでいて、あまり王冠らしいポイントが見当たらなかったので、「シルエットデザイン」さんを参考に、王冠らしさを探しました。
・てっぺんに十字架や尖った部分がある
・王冠の頭部分は大きく膨らんで、波を打っている。
・かぶる部分は南瓜のように内側に収まっている。
この3つの点に気をつけてより王冠らしさが出るようにしました。
5月29日(金) 北陸三県心ゆくまで蟹三昧 バナー
今日でバナー レイアウトチャレンジ終わりです。
— イカヅチホマレ|転職活動中 (@homahoma31) May 29, 2020
最後はカニ三昧のバナーを作成しました。
カニ三昧…上海蟹食べたい🤤🤤#バナーレイアウトチャレンジ pic.twitter.com/KxgG9h6EPq
この時意識していたこと
今回は「写真でにぎやかさを演出すること」です。
バナーを制作するときに「きれいに作りすぎる癖」があったので、今回は商売っけを出すというか、純粋に「美味しそう」「賑やかで楽しい感じ」を感じてもらうおうと思いました。
イメージを具体的な言葉にすると
・写真の向きや見せ方のバリエーションを作る
・和風だけど、地味でなく華やかな色味のものを使う
・写真の色味を暖かくして、美味しそうに見せる
いただいたアドバイス
今回は、普段お世話になっている方々からたくさんのアドバイスをいただきました。ラストだからとかなり時間を使って迷走してしまったところがあったので、かなりありがたかったです。
・左上と右下のカニの写真が若干似ている
→どちらかをカニ料理の写真にしたらダブらず華やかさが出るのでは
・目立たせたい部分のコントラストが少し足りない
→ぱっと目を止めてもらえるよう、白入れてみたりすると良いかも。
・写真のトンマナをレタッチして揃えてあげる
→統一感が出る
・縁の線の太さを太くして柔らかさを出すと、美味しさが引き立ちそう
・全体的に同系色 →扇子を白にするとタイトルがもう少し目立つかも。
皆さんからいただいたアドバイスをもとにブラッシュアップしました。
— イカヅチホマレ|転職活動中 (@homahoma31) May 30, 2020
・扇子を白にして、タイトルとコントラストをつける。
・写真のトンマナを統一。
・縁を太めにして、柔らかい印象に。
さらに
・文字色をグラデにして、華やかさをプラス
・「心ゆくまで」をカーブに ありがとうございました🙇♀️✨ https://t.co/HPy8HgqSce pic.twitter.com/hlRYfXEVn2
扇子に白を入れたことで中心のタイトルに目がいくようになり、文字組や太さを変えることでパワポ感が消え、華やかさが出ました。後ろの写真も、元のバナーイメージのように、自然光に近い色味にレタッチで戻すことでお店の空気感が出ました。
今回のチャレンジで気づいたこと
集中して一ヶ月やり切ると自信もつくし、振り返り記事も「自分がどう考えてデザインをしているか」を考えるきっかけになりました。
テーマを1から考えるのは大変だったので、今回スムーズに取り組むことができたのはマイフェバさんの作る素敵なバナーがあったからこそ!だと思っています。(決して元のバナーを改良しよう!という思いからやっているわけではありません)
あとは取り組むときでも、「これをやりたい」っていうよりも「これを見てこう感じて欲しい、こういう人に見て欲しい」を意識した方がより実用的なバナーができると感じました。
上記三つの例でも、「幸せスイーツ」ではどんな年齢層の人がどういったものに興味を持つかを意識していたのに対し、「蟹三昧」では自分が苦手としていることにフォーカスしてしまっていたので分析が甘く、具体的な行動に結びついていません。
今後も、制作するときには「どう感じて欲しいか」「何がこの制作物には求められているのか」を意識していきたいと思いました。
【6/21追記】おでんさんのレビュー会に参加
ポートフォリオ制作に専念しつつも、どうしてもたまに手を動かさないと操作を忘れそう、気がたるんでしまう…と思っていた矢先にしゅんさんに誘っていただき参加することにしました。
修正したのは、納得が行っていなかった「広島の幸せスイーツ バナー」。
時間内にブラッシュアップして、参加者同士でレビューを行いました。
上品さを出すために文字感覚を広げたり、視線が中央に集まるように文字にカーブをつけて組んでみたりとかなりタイトルが見やすくなりました。
また、シンプルすぎて元のバナーより華やかさが足りないとのことだったので、写真をより大きくしたりあしらいに色味を足したりしました。
自分が他の方の制作物をレビューすることで「Webサイトの部分の名称がまだ不安があるなあ」であったり、「ここ私も気を付けたいなあ」と思うことが出てきたりとかなり勉強になりました。
おでんさん、ありがとうございました。
参考文献
・YDS、GDNのバナーサイズ一覧
https://anagrams.jp/blog/banner-size-list-of-ydn-and-gdn/#YDNGDN
・マイフェバ 関西・北陸・せとうちエリアのおでかけ&観光情報
https://www.my-fav.jp/#
気軽にクリエイターの支援と、記事のオススメができます!