こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第39回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン39にて公開されています✨
今回のバナーで、アイキャッチの画像の加工を、トミナガハルキさんの著書「#ズボラPhotoshop 知識いらずの絶品3分デザイン」の「#017 ワンタッチで布地のような温かみのある質感に」を参考にさせて頂きました。
＃ズボラPhotoshopで検索すると、書籍を購入した方が作例をアップしてくれるという輪が広がっていて、アイデアにハッとしたりしつつ楽しく学ばせて頂いています✨
画像はUnsplashから、スペインのカサ・バトリョの写真をお借りしました。
以前、ガウディの建築作品を知らないままスペインを訪れて、有機的で存在感のある佇まいのそれらに驚き、圧倒されました。たっぷり魅了されて、帰ってからガウディの建築物や人物像に関する本を購入しました✨
今回のバナーのお題の内容はこちらになります！
今回のバナーの目的 分譲マンションの販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性・30～50代
雰囲気 高級
サイズ 300px x 250px
画像 マンションの画像
配色 黒・白・金
文言
（必須）
- グリーンパーク平尾レジデンス
- JR平尾駅 徒歩5分
- 2,200万円台～
- モデルルーム公開中 完全予約制
（任意）なし
（フォント）明朝体
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 高級感のある雰囲気を出すため、フォントに游明朝体を使用した。
- 視線を誘導するため、「JR平尾駅 徒歩5分」と「2,200万円台～」という文言の数字のフォントサイズを大きくし、配色を金色にした。
- 「グリーンパーク平尾レジデンス」という文言の視認性を上げるため、境界線とドロップシャドウを使用した。
- 反省点は、レイアウトが単調で印象が弱くなってしまったところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①トリミング（マンションの画像）
・写真手前の公園部分も見せると、広々とした印象になる
私は、「2,200万円台～」と駅からの距離の文言の下に、黒い帯をしいた。その帯で写真の範囲が削られて、少し窮屈な印象になっている。
元々画像の下の方は暗くなっているので、その部分の文字の視認性は保てる。黒い四角形（300px x 250px）を作り、そこにレイヤーマスクをかけ、グラデーションツールを使って文字の視認性が保てるくらいまで、ふわっと消す。すると帯を敷いたときより、マンション前の公園が見えて雰囲気を伝えられる。
帯を使うときのコツ
帯を二段積むと、野暮ったくなってしまう。高級感を出すときは、なるべく帯を使わない方がよい。
しかし、訴求やメリットが沢山あり、エリアを分けないとしょうがないというときは、帯を使う場合もある。もし、帯を二段積むときは、片方を幅広く使い、片方を狭く使うというようにアシンメトリーを意識するとよい。もしくは、上と下、右と左というように距離を離すとよい。
②メリハリ（「JR平尾駅 徒歩5分」の部分）
・「徒歩5分」という距離を引き立てる場合、数字を大きくするとメリハリがつく
和文に明朝体を使用し、数字も高級感のあるフォント（今回はTimes New Roman）を選ぶと、大きくしても雰囲気を保てる。
「完全予約制」の文字色を黒、下の帯の配色を金色のグラデーションにして、リズムをかえる。「- 完全予約制 -」というようにあしらいを足して、雰囲気を高めた。
③ドロップシャドウ（「グリーンパーク平尾レジデンス」）
・光彩に切り替えて調整すると、視認性も確保できて印象も損なわない
私の作成した方は、ドロップシャドウが濃くて少し野暮ったい印象になっている。光彩で調整すると、自然な感じで視認性を保つことができる。
「グリーンパーク平尾レジデンス」の文字組みを見て、意味を考慮してジャンプ率をつけ、余白にうまく配置すると、雰囲気を保ちつつリズムがつけられるんだ！と感動しました。
今回、高級感のある雰囲気を保ちつつ、レイアウトにメリハリをつけ、視線を誘導する方法を学ぶことができました✨
これから、バナーの中に収める要素の優先順位を正しく理解してゆきたいと思います。そして文字組に対して、苦手意識を克服できるよう、チャレンジしてゆきたいと思います！
