こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、57回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン57にて公開されています✨
今回のお題は、不動産会社の賃貸物件紹介バナーです。
前回から、一度3時間を目標に作成して、その画像を残し、その後仕上げて完成させることになりました。
作成するときに、背景におく画像を探すのに時間をかけてしまって、あせっていたせいか、必須の文言「音楽不動産（店舗名）」を入れ忘れるという失態をしてしまいました。
最後、落ち着いてチェックすることを忘れないようにします！
今回のお題の詳しい内容はこちらになります！
今回のバナーの目的 不動産会社の賃貸物件紹介バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、20～30代
雰囲気 ポップ
サイズ 300px x 250px
画像 楽器の画像
配色 お任せ
文言
（必須）
- 楽器が演奏できる・お部屋特集
- 防音室仕様物件
- 音楽不動産（店舗名）
- 詳しくはこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- ワンルームのCG画像を背景において、賃貸物件のバナーということが一目で伝わるようにした。
- 文字やイラストの視認性を保つため、CG画像の上に白い四角を置き、不透明度を調節した。
- 「楽器が演奏できる」をアーチにすることで、ポップさを出した。
- 反省点は、ポップな雰囲気ではなく、落ち着いた雰囲気になってしまっているところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
・背景に置く画像を、楽器のイラストのテイストとあわせ、不透明度を下げ、上に配置する文字やイラストの視認性を保った
画像をイラスト調にする方法
- Illustratorで、コントロールパネルの「ファイル」から、「配置」を選択する
- パネルの「画像トレース」の右横にある下矢印をクリックして、「写真（低精度）」を選択する
加工前の画像
加工後の画像※今回のバナーでは、不透明度を20％に下げて使ったので、イラスト調にしたことがあまりわからないかも、ということでした。私は、この方法を知らなかったので、教えていただけて嬉しかったです✨
①文字組み(「楽器が演奏できる・お部屋特集」の部分)
・文字を大きくできるように分割して組むと、目が留まりやすい
雰囲気 ポップさを出すため、フォントに「海と湖の丸明朝」を使用した。
私はこのフォントを持っていなかったのですが、とてもかわいかったのでこちらのサイトで購入しました✨
「できる」の文字を吹き出しに入れて、「お部屋特集」の「特集」を縦書きで組むことで、「楽器が演奏」と「お部屋」の文字を大きくして目が留まるようにした。
②イラストの配置（楽器と音符）
・文字を中心に配置してイラストはバラして配置するとまとまる
③印象のバランス(楽器のイラストと、文字などの印象)
・文字色の彩度を上げて、テクスチャを掛けると印象が整う
私が「楽器が演奏できる」に使ったピンクだと、楽器のイラストの色よりも薄く目が留まりにくかったので、彩度を上げた。
また、私が「お部屋特集」に使った茶色は暗めの色だったので、ピンクに合わせて彩度を上げた。
テクスチャの掛け方
- レイヤーパネルでテクスチャを掛けたいものをクリックし（文字や吹き出し、外枠）、レイヤースタイルを選択する。
- パターンオーバーレイから、ざらっとした画像（土）を選び、描画モードをソフトライトにする
④「防音室仕様物件」を配置する場所
「楽器が演奏できる お部屋特集」の下に配置した。この配置の方が、バナーが「賃貸物件の紹介」が目的であると伝わりやすい。
⑤バナーの枠を角丸にすることでポップさを出す
ポップさを出す別な方法としては、ふわっとした線を描いてくり抜いてもよい（ちょうど、私がアイキャッチで写真をくり抜いたように、パスを描いてマスクをかける）
今回のレッスンも、沢山の学びを頂きました✨
文字組みで、意味で分割して一部の文字を大きくすることにより、目を留まらせることができたり、出したい雰囲気に合わせてフォントを選ぶことです。
また、イラスト画像を使用するときに、文字などをパターンオーバーレイを使って印象を合わせるとまとまること、優先順位をつけることにより視線をスムーズに誘導できることなどです。
そして、ポップな雰囲気を出すためのポイントも、沢山教えていただいたのでしっかり引き出しにいれるようにします✨
