こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第45回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン45にて公開されています✨
今回のバナーのお題は、珈琲豆のサブスクです✨
「サブスク（サブスクリプション）」とは、どんなサービスなのかを知るため、「コスパ部」さんのサイトを見てみました。そして、すごく沢山のサービスがあることを知り、びっくりしました。
今回のバナーのお題の詳しい内容はこちらになります！
今回のバナーの目的 珈琲豆のサブスク販促バナー
配信場所 GDN・YDNなど
ターゲット 男性、30～５0代
雰囲気 シンプル・高級
サイズ 300px x 250px
画像 コーヒーの画像
配色 お任せ
文言
（必須）
- 毎月届く香る珈琲
- 1,480円/月～
- 福岡珈琲（店舗名）
- ご注文はこちら
（任意）なし
（フォント）明朝体
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 画像の上に黒色のレイヤーを重ね、マスクをかけ、コーヒーカップや豆の画像の部分をグラデーションツールで削った。文字の視認性をあげ、また、高級感のある雰囲気をだした。
- 「毎月届く」というテキストを、リボンの上に配置し、目が留まるようにした。
- コーヒーから出る湯気の量が少なかったので、湯気の画像を配置し、描画モードをスクリーンにして、不透明度を調節してなじませた。
- 「福岡珈琲」（店舗名）のフォントは、貂明朝にして、平体（90％）をかけ雰囲気をだした。
- 反省点は、コーヒーカップと皿が、白色で形状が円の為、そちらに視線が誘導されてしまうところ。
今回、ヒカルさんからリボンの色や、「ご注文はこちら」の帯の色の選び方がよかったと言っていただきました✨ 「高級感」のある雰囲気を出すためには、色を沢山使いすぎず、一体感を出すとよいと、アドバイスを頂きました。
そして、ヒカルさんがこの回のレッスンを画像を使って解説するツイートをしてくださっています✨
このツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①画像のトリミング（「コーヒーカップの皿」）
・円の一部をトリミングすると安定感が出て悪目立ちしない
画像をCamera Rawフィルターで加工して、コーヒーカップとコーヒー豆にスポットライトがあたっているイメージにした。具体的には、露光を上げ（0.6）、テクスチャと明瞭度のつまみを少し右へ動かし、自然な彩度を上げた（+50）。
②文字組みとブロック感（「毎月届く」（リボンの帯に配置）と、「香る珈琲」の部分）
・帯と文字に少しジャンプ率をつけてお互いの距離を詰めるとまとまる
帯を私の作成したバナーでは、一部分だけ使用したが、端まで見せても美しい形だったので、全て見えるように使用した。
「毎月届く」というテキストの色を、濃げ茶（ほぼ黒色）にした。印象が引き締まったと感じました。
「香る珈琲」（小塚明朝を使用）というテキストに、長体（110%）をかけた。
③あしらいの使い所
・あしらいの一部を文字へと移して価格を近づけるとまとまる
私の作成したバナーでは、あしらいと「福岡珈琲」というテキストによってキャッチコピーの「毎月届く香る珈琲」と価格が分断されている。近づけることによって、ブロック感が出て、繋がりがあることが伝わりやすくなった。デザインの4大原則の近接にあたる。
あしらいの中央の部分以外を、ブラシで消して、「香る」の文字に重なるように配置した。そして、グラデーションであしらいの端をふわっと消して、不透明度を55%にして悪目立ちしないようにした。
私の作成したバナーでは、画像の上に配置した黒色のレイヤーは、不透明度が55%だったが、ヒカルさんは75%にした。コントラストが出て、高級感が増したと感じました。
今回のレッスンも、沢山の学びを頂きました✨
「違和感をなくす」ことが大切だと教えていただき、まず「違和感」はないか？と自問するくせをつけたいと思います。
つい、余白は埋めたいと考えてしまうのですが、今回の私のあしらいの使い方は、繋がりを分断し、内容を伝える力が弱くなっていました。デザインの４大原則を抑えられるよう、意識して作成してゆきます✨
