【架空案件】カフェ Webバナー制作

【デザインについて】

① ビジュアルイメージ

「静かな空間で、自分の時間に集中できるカフェ」をテーマに、 落ち着きと上質さが伝わるビジュアルを意識しました。

カウンター越しの店内とドリンクの写真を大きく使用することで、 コーヒーそのものだけでなく “カフェで過ごす集中した時間・心が整う時間”を想起させる構成にしています。 一人でも入りやすく、日常の延長として立ち寄れる印象を目指しました。

② カラー

全体は、ブルー・ブラック・ホワイトを基調とした配色で構成しています。

• ブルー …下部の帯部分に使用し、静けさ・集中・知的な印象を表現。カフェで過ごす落ち着いた時間や、ひとりで集中できる空間をイメージしています。
• ブラック… ロゴや写真内の要素と調和させることで、全体を引き締め、上品で大人向けの印象に。空間の奥行きや落ち着きを強調する役割を担っています。
• ホワイト… キャンペーン見出しや装飾フレームに使用し、写真の上でも文字が埋もれないよう視認性と清潔感を確保しています。

背景写真の色味を活かすため、 あえて使用色数を絞り、 写真と文字が自然になじむ配色設計を意識しました。

③ タイポグラフィー

用途ごとに文字のサイズや太さ、余白に差をつけ、 情報の優先順位が自然に伝わるよう設計しました。  

• キャンペーン見出し…「オープンキャンペーン!!／おかわり1杯無料!!」は遠目でも目に入るよう、太さと可読性を重視
• サブコピー・補足情報…主張を抑え、全体の雰囲気になじむ書体を使用
• キャッチコピー…「静けさと、集中を味方に。」は余韻が残るよう、シンプルで上品な書体を選定しました

④ 情報設計

Webバナーとして一瞬で内容が伝わるよう、 以下の順で情報を配置しています。

1. キャンペーン訴求…「オープンキャンペーン!!／おかわり1杯無料!!」
2. 世界観の提示…「静けさと、集中を味方に。」
3. ブランド認知…店舗名・ロゴ（Ruby Coffee）

ユーザーが「どんなカフェで、どんな特典があるのか」を直感的に理解できる構成を意識しました。