こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第36回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン36にて公開されています✨
今回の記事のアイキャッチで、画像の加工を、楠田 諭史さんの著書「Photoshopレタッチ・加工 アイデア図鑑」を参考にさせて頂きました。
この本の「Recipe 62 写真に印刷物風のドット加工をする」を参考にし、Unsplash（フリー素材のWebサイト）で見つけた犬の写真を使って作りました。
この犬が、実家にいた犬と瓜二つでとってもほっこりとした気持ちになりました。
こちらが、食いしん坊で散歩大好きだった、うちのワンコです。
今回のバナーのお題の内容はこちらになります！
今回のバナーの目的 Go To トラベルキャンペーンのバナー
配信場所 GDN・YDNなど
ターゲット 男性、女性、20～60代
雰囲気 ポップ
サイズ 300px x 250px
画像 指定なし
配色 背景色：青、文字色：白、アクセントカラー：お任せ
文言
（必須）
- Go To トラベル
- 宿泊代金 最大35%OFF
- 旅行で元気な日本へ
- 実施期間：2020.7.22～2021.3.15予定
- 詳しくはこちら
- （任意）なし
（フォント）指定なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 実施期間が来年の3月15日までの予定なので、紅葉や冬景色など季節を限定しない写真を選んだ。
- Go To トラベルは、観光地の旅への利用だけではなく、地元の地域の旅も対象となるため、有名な観光地の写真に限定しないものを選んだ。
- 掲載する情報の中で、「35％OFF」という文言の優先順位が高いと考え、フォントサイズを大きくしジャンプ率をつけ、文字色を黄色にして目立たせた。
- 「宿泊代金 最大35%OFF」の部分を、四角く文字組みできればよかったが思いつかず、「最大」の吹き出しが飛び出すなど、でこぼこしてしまった。
ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①コピーのブロック感（「旅行で元気な日本へ」と「Go To トラベル」の部分）
・フォントを合わせると印象が揃ってブロック感が出る
「旅行で元気な日本へ」の所で、私はフォントに「クレー」を選んだが（クレーは、文字の起筆部と終筆部に硬筆の筆記具で書いた文字特有のアクセントをもたせた硬筆体）、ヒカルさんは「Go To トラベル」と同じ小塚ゴシックを選び、一体感を出した。
そして、その文言のアーチを少し強くした。
また、「Go To トラベル」の所で文字詰めをして、よりブロック感が出るようにした。
②文字組み（「宿泊代金 最大35%OFF」の部分）
・縦にうまく文字組みするとリズムが出て読みやすくなる
「旅行で元気な日本へ」と「Go To トラベル」の部分が横長になる組み方なので、「宿泊代金 最大35%OFF」の所を縦に文字組みするとリズムを変えることができる。
写真の上にそのままテキストを配置すると視認性がよくないため、写真をCamera Rawフィルターを使って加工する。
具体的には、自然の彩度のつまみを右に動かし、明瞭度とかすみの除去のつまみを左へ動かし、露光量を少し上げた。
そして、「宿泊代金 最大35%OFF」の文字に青色の境界線を入れて、視認性を上げた。また、「35%OFF」の文字色の黄色を、フレッシュな黄色に変更した。
③背景画像の配置
・背景画像の位置をテキストと調整すると、視認性が上がる
背景画像の中で、空、山、街並み、川で区切りがあるため、その区切りをいかして、掲載される文字を読みやすくする配置を考える。
・「実施期間：2020.7.22～2021.3.15予定」という文言を、私は下の帯に対して上下左右に余白なく、パツパツにおいてしまったが、ヒカルさんはバランスよくなるように調節して配置した。
・「実施期間：2020.7.22～2021.3.15予定」の下に敷いた帯と、「詳しくはこちら」の帯が、同じ幅にならないようにして、リズムを変えた。
また、「詳しくはこちら」の帯の色を、空の青色をスポイトツールでとって、そこから濃いめの青にした（バナーとしてのまとまり感が出たと感じました）。
今回も大きな視点の持ち方から、細部の丁寧な調整の仕方まで学ばせて頂きました✨
まず、今回写真を選ばせていただいたんですが、なかなか決められず迷ってしまいました。これから写真を探すときは、なんとなくではなく、求めるポイントを言語化して少しでもスピーディに選べるようになりたいと思います。
文字組みの仕方も、まずいろいろ試してみるチャレンジ精神を持たないと！と反省です。
写真の加工で微調整することにより、上に配置したテキストが読みやすくなることも学びました。
今回の学びを、引き出しにしっかり入れるよう復習しつつ進みたいと思います！
