こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第35回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン35にて公開されています✨
今回の記事のアイキャッチで、画像の加工を、トミナガハルキさんの著書「#ズボラPhotoshop 知識いらずの絶品3分デザイン」を参考にさせて頂きました。
「#002 お手軽！色鉛筆画風の仕上がり」を参考にしましたが、違う画像を選んだ方がよかったかも？となりました💦
けれど、こんなフィルターがあるんだ！、描画モードってこういう風に使うんだ！という発見がありました✨
Photoshopに触れるのが楽しくなる、勉強にもなる、素敵な本でワクワクしています。
トミナガさんは、Twitterで本の作例を新たに発表してくださったり、YouTube動画でも解説してくださったりしています✨ 感謝しつつ、学ばせて頂きたいと思います。
今回のバナーのお題の内容はこちらになります！
今回のバナーの目的 デスクの販促バナー
配信場所 GDN・YDNなど
ターゲット 男性、20～50代
雰囲気 男性的
サイズ 300px x 250px
画像 デスクの画像
配色 焦げ茶・黒・白など
文言
（必須）
- 天然無垢デスク
- サイズオーダー無料
- ※幅・奥行きのカスタムオーダー
- NEUTRAL WOOD（ブランド名）
- オーダーはこちら
（任意）なし
（フォント）お任せ
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 「男性的」な雰囲気を持たせるため、装飾を抑え気味にした。
- 色味は、落ち着いた雰囲気になるようにした。
- 「※幅・奥行きのカスタムオーダー」のテキストをそのまま置くと、視認性が低くなるため光彩外側の効果をかけた。
- 写真を切り抜かずに使用したが、レイアウトが単調になってしまったので、切り抜いて、他のレイアウトも試してみるべきだった。
ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①画像のトリミング
・机の足を残してあげるとデスクに見える
ヒカルさんが指摘してくださったこと：私の画像のトリミングの仕方だと、机の脚の部分が隠れ、天板のみしか見えない
私は、画像の下にある椅子を隠そうとトリミングし、「机に見えるかどうか？」考えてみることができなかった。
以前にも、ヒカルさんが見せたくない部分は、マスクをかけ、グラデーションツールを使って隠す方法を教えてくださっていたことを思い出します💦
今回、机の画像を中央に配置すると、上下と、左側に足りない部分があった。そこで、300px X 250pxの四角形を作り、配色を黒にして配置することで、上下の空白部分は埋まった。左側と下側の画像が足りず、写真の線がくっきりしているため、マスクをかけ、グラデーションツールを使って、フワッと線を消した。
自然に暗がりからふわっと机が照らされているように見えるようになり、帯を使わずに、テキストを置くことができるようになった。
②コピーの配置（Shop名と天然無垢デスクの部分）
・帯を使わず、中央揃えで配置すると、シンプルできれいにまとまる
ヒカルさんが指摘してくださったこと：「天然無垢デスク」を、大きなサイズで見せるのは良い感じだけど、配置が中途半端な印象になっている
ヒカルさんがブラッシュアップしてくださったバナーからは、高級感を感じます。
このバナーで魅力的に感じてもらいたいのは机であり、それを引き立せるためのテキストの位置は？、サイズは？と考えられるように、私もなりたいと思います。
③帯の使い所（ショップ名・「サイズオーダー無料」の部分）
・画像をマスクで削るなど調整して、テキストをうまく収める
ヒカルさんが指摘してくださったこと：画像に直線が多いので直線の帯を使うとリズムが似てしまう
人や、有機的なものの画像の場合は、帯でレイアウトを区切った方が良い場合もあるしかし、今回は机の画像がすでにレイアウトを区切る感じになっている。
今回も、沢山学ばせていただきました✨
まず、「男性的」な雰囲気とは？と考えることから始まりました。
最近はPinterestで参考になるデザインを集めていたんですが、それだけでは雰囲気をつかめず、バナーのまとめサイトをいくつか見ました。分類分けされていてわかりやすく、これからも参考にしたいと思いました。
ヒカルさんから、バナーのまとめサイトだけではなく、Webデザインのまとめサイトも雰囲気をつかむのによいと教えていただいたで、そちらも参考にしたいと思います。
そして、画像のトリミングの仕方、テキストの配置の仕方や、サイズ感、その時々に合わせて調整することが大切なんだと学びました。
参考にするデザインをなんとなく見るのではなく、どんな意図があるのか？、どうやってトリミングしているのか？と考えつつ、取り入れられるようになりたいと思います。
今回の学びを、しっかりと自分の引き出しに入れらるよう、過去のレッスンでの学びと結び付けながら復習していきたいと思います！
