背景・コンセプト
【特典】
❶通常料金より10%OFF
❷貸切風呂 利用無料(要予約)
❸○×美術館ペアチケットプレゼント
———————————-
バナー設置場所：旅館公式サイトのTOPページ（予約の導線に近い所）
対象：Web予約・カップル限定
ターゲット：30〜40代 カップル
1泊2食付の通常料金：大人一人12,000円〜
バナーサイズ：W500×H500px
出典: https://note.com/kobayas/n/n11cfc93d345d?magazine_key=m3e73ae9c2748
目的・課題
概要
温泉の予約に繋げるためのWebバナーです。
全体的に深い緑と赤を基調に、黄み掛かった光や和風の模様などを用いて「温泉らしい」雰囲気をバナー全体で伝える方向性で制作しました。
フォントは明朝体をメインに使用し、高級感と落ち着きを演出しました。
デザインの工夫
| 色味 | ターゲット層やバナー内容を考慮し、深めの緑と赤を基調に選定し「温泉らしい」和風で落ち着いた印象に。 全体の深めの地色に対して本文のテキストには白文字を使用することでメリハリをつけ自然と目に入ってくるよう工夫。 CTAの背景には深めの金色グラデーションを用いて高級感を演出しつつ、視覚的に他の部分と色味を区別することで自然な誘導を図る。 タイトルのメインカラーもCTAの背景と同系統のマスタード色+光彩を用いて背景と視覚的に分けながらも、バナー全体の色味や雰囲気との統一感を意識。 |
| フォント | 温泉らしい「和」のテイストを強調するため、明朝体フォントを主に使用。 数字部分には太めのセリフ体フォントを使用し、メインのフォントと調和しつつも目を引きやすいよう工夫。 |
| 画像配置 | 「温泉らしさ」を伝えるため、露天風呂と温泉街と食事の写真を使用。全て丸型の図形に入れて輪郭をグラデーションでぼかして背景に馴染ませ、 露天風呂の写真は左上に大きく配置し、水面の明るさや彩度を調整することで透き通った印象に。 温泉街の写真は、灯りを強調しながら全体的に明度を落とすことで「温泉街らしい」情緒を演出。 食事の写真は中心の食べ物の部分とその周辺で彩度や明度などを調整し、自然と中心が引き立つよう工夫。 |
| レイアウト | バナー上部2/3に写真とタイトルを配置し、雰囲気が一目で分かるよう目立たせる。タイトルはその中の中央に縦書きで配置し、バナーの和風のイメージとの調和を図った。 また、タイトルの「貸切温泉」の部分の文字サイズを一回り大きくしメリハリをつけることで視線がスムーズに流れるようにした。 特典記載部分は2色の深い赤色の正方形で枠を作り、後方のより深い赤色のものを向きをずらして重ねて配置することで、和風な雰囲気と視覚的なリズム感を強調。 左下の料金表示は価格の数字部分のみ赤の文字色+光彩を用いて視覚的な差別化を行うことで、自然な視線誘導を意識。 CTA部分には、光彩を強めにつけることで重要性が一目で分かるように強調。 背景全体に市松模様をうっすらつけ、写真周辺にも温泉マークや波模様などをさりげなく設置。これにより、温泉らしさを強調しつつ品のある和風の雰囲気を保つよう工夫。 |
使用ツール
Photoshopを用いて制作いたしました。
制作プロセス
1. 初期の案
- 写真選定: 日中の雪景色の露天風呂の写真をバナー背景に使用。
- 配色: 写真の色味に合わせて紺色とその同系色の青色・白を基調にし、差し色で彩度の高めのピンクを用いて「カップル限定」であることを表現。
- レイアウト: バナー上部にタイトル、中心に横幅優位の特典枠、下部に価格を記載。
- あしらい: 一番下の特典枠からバナー最下部にかけて紺色のグラデーションをつけ、価格部分を白文字にすることで視認性を上げる。
2. 試行錯誤
- 梅の花装飾: 特典の番号部分やタイトル上部の「限定」のテキスト部分にピンクの梅の花の枠を設け、少し向きをずらして配置。これにより、バナーにアクセントをつけ和風の雰囲気や「カップル限定」などとも関連を持たせる。
- タイトル調整: タイトルの文字を明度の違う同系統の青色のものを作り、少し後方を右下にずらし重ねて配置することで単調さを回避。さらに光彩と陰影を用いて立体感を出す。
- 特典枠の調整: 白地の和紙模様のものの後方に薄い青色の枠を右にずらし重ねて配置し千代紙風に。枠が目立ちすぎるのを防ぎながら、雰囲気やバナー全体とのレイアウトのバランスを考慮。
3. デザイナーからのフィードバック
- 写真を目立たせることの重要性: 温泉関係のバナーは雰囲気が伝わるのが重要なので、写真を中心に配置して目立たせるのが良い。温泉のお湯や湯気、灯りなどの演出にもっと配慮すべき。こうした趣を出すには日中ではなく、夜間の風景写真を用いるのがコツ。
- 若すぎるデザイン: 梅の花は比較的若い年代をターゲットにする際に用いる事が多い。このバナーのターゲット層(30-40代)には若すぎる印象。
4. 添削前後の比較
左: 添削前 右: 添削後
- 配色の見直し: 配色のコントラストが強すぎる印象。深めの緑及び赤、マスタード色を選定し、配色を落ち着かせつつも温泉の温かみを表現。テキストには白文字を用いて背景とのコントラストで視認性を確保。
- レイアウトの見直し: バナー上部2/3のスペースを写真とタイトルに割き、雰囲気をメインで伝える方向性に。その真下に特典枠を横に並べ、バナー最下部の左側に利用料金及び右側にCTAを設置。読み手に内容が伝わり、自然と予約に誘導出来るような配置を意識。
- フォントの見直し: とりわけ丸文字が温泉の落ち着きにそぐわず、安っぽい印象があったので、明朝体をメインに使用。数字部分は太めのセリフ体フォントを用いて本文との視覚的な調和を取る。本文のフォントは太くはないので、光彩や配色のコントラストなどで視認性を補うことに。
- 模様の追加: 背景にうっすらと市松模様を設けて味気ない印象を解消。さらに写真・タイトル周辺には波模様や温泉マークなどをさりげなく配置してバナー全体で「温泉らしさ」を演出。また、特典記載枠の右下に金箔のあしらいを追加することで高級感と視覚的なリズムを添加。
- CTAの設置:バナー内容が「予約に繋げる」ものであるのを踏まえ、視線の最後に来る右下にCTAを追加。深めの金色のグラデーションを掛け、高級感を演出しつつ視覚的に他の部分と区別することで読み手に重要性が伝わるよう工夫。ボタンの輪郭に外側光彩をつけて悪目立ちすることなく背景から浮かせて目立たせた。
- 価格の文字調整: 数字部分のみを深い赤の文字色+光彩を設けて目に入りやすいように工夫。
外部リンク
こちらのサイトのお題を参考に制作いたしました。
https://note.com/kobayas/n/n11cfc93d345d?magazine_key=m3e73ae9c2748
最初の案にて用いた写真は以下のサイトのものです。