背景・コンセプト
| 依頼内容 | バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：シンプル・エレガントで落ち着いた印象 バナーサイズ：320×100 |
| テキスト | ジェルネイル定額コース ハーフアート＋ストーンつけ放題 8,900円 サンプルを見てみる（Sample check） |
| 画像 | ジェルネイルをしている指先、または施術中の写真 |
出典: https://webdesign-mame.com/web-design/banner-theme/#link05
目的・課題
概要
お題の「依頼内容」を踏まえ、「エレガントで落ち着いた」印象にするために優しい色味のネイルが施された写真を選定し、明朝体系統のフォントを用いてそれを表現しました。
写真に白いフィルターを掛けることで優しいニュアンスを演出しました。
また、黒に近い低明度の色味を文字色に用いることで背景画像全体の明るさとのコントラストを作り視認性を確保しました。
デザインの工夫
| 色味 | 「エレガントで落ち着いた」雰囲気を演出するために、過度に高彩度の色味は用いないようにした。 具体的には、黒に近い低明度・低彩度の文字色をメインに使用し、価格の数字部分にのみ彩度がやや高い紫寄りのピンクを用いた。 ターゲット層を考慮し、パステルピンクの背景の写真を選定することで「大人かわいい」イメージを演出。 |
| フォント | 明朝体系統のフォントをメインに使用し、落ち着いた雰囲気を表現。 数字・英字部分には目に入ってきやすいように、セリフ体系統のフォントを用いた上で太めの斜体を使用。 |
| 画像配置 | 雰囲気や方向性を満たしつつ、テキストを入れる部分の余白を作れるような写真を選定。バナー左下に文字を入れられるように大きさや向きを変形して使用した。また、写真全体に白っぽいフィルターを掛けることでバナー全体に優しいニュアンスを加えつつ、文字色とのコントラストでテキストの視認性を確保した。 |
| レイアウト | 視線の流れを考慮して、テキストの一番左上に価格、そのすぐ下に大きめの文字サイズでサービス名を表記し、右下にCTAボタンを置くことで視覚的にも不快感を覚えないレイアウトを意識した。 また、価格やサービス名などのテキストを左下揃えにすることで写真の余白部分を活かしつつ、右下のCTAボタンとの位置も揃え安定感を出した。 CTAボタンのテキストを太めの斜体に設定し、小さいスペースの中で視認性を確保した。 |
使用ツール
Photoshopを用いて制作いたしました。
制作プロセス
1. 初期の案
- 写真選定: ターゲット層を考慮し、優しい色味のネイルを施した指の写真を選定し、「大人かわいい」雰囲気を演出。
- 写真加工: 「エレガントで落ち着いた」雰囲気を強調するため、全体の画像を白っぽく加工。
- フォント選定: 明朝体系統のフォントを使用し、上品な印象を持たせる。
2. 試行錯誤
- 枠で雰囲気を演出: 「おしゃれな雰囲気を出しつつ、情報を伝えやすくする」ことを目的に、ニュアンスのある不規則な形の枠を左上(価格とサービス名)と右下(CTAボタン)に配置。
- 文字を見やすく: 写真の上に白っぽい枠を重ねることで、文字の視認性を向上。
- 視線の流れを考慮: 枠の配置やサイズなどのバランスを調整し、デザインとしての纏まりと視線の流れを意識。
3. デザイナーからのフィードバック
- 写真の客体と文字の重なり: 写真のネイルと手の位置が文字と重なって読みづらい&中途半端な印象に。
- 伸ばす音「ー」を小さく: 伸ばす音は他の文字の85%のサイズにすると視覚的にまとまりが出るので良い。
- 価格を目立たせる: 価格は重要な情報なので、文字色を変えて強調するのもあり。
4. 添削前後の比較
左: 添削前 右: 添削後
- 写真の変更: 写真を変更し、より余白の多い構図にすることで、レイアウトの調整をしやすくした。
- 左上枠の撤去: 左上の不規則な形の枠を除き、代わりに写真の向きや手の位置を調整して左下に余白を確保→スッキリとした印象に。
- 視線誘導を意識したレイアウト: 左下の余白に「価格→サービス名」の順で配置→自然と目に入りやすいレイアウトに。
- 価格の数字表記の変更: さらに太めのフォントにした上で、彩度が高めの紫掛かったピンク色に変更。強調しながらおしゃれな雰囲気を演出。
- CTAの文字調整: 右下のCTAボタンの文字のフォントを筆記体→セリフ体系統に変更し、太めの斜体を設定することで限られたスペースでも視認性を向上
- 文字色を暗く: 文字色を全体的により低明度にし、背景とのコントラストで視認性を向上
外部リンク
こちらのサイトのお題を元に制作いたしました。
https://webdesign-mame.com/web-design/banner-theme/#link05
画像はこちらのサイトのものを使用しました。