概要

職業訓練校の課題として、実在するコーヒーショップ「LLOYD'S COFFEE小樽店」を題材に、コーヒー豆のオンライン販売開始を告知するバナーを制作しました。（336×280）

課題

限られたバナーサイズの中で、「オンライン販売開始」という新しい情報を分かりやすく伝えつつ、ブランドの世界観や信頼感を損なわない表現が求められていました。ターゲット層やキャッチコピーを明確にし、短時間で内容が伝わる構成が必要でした。

目的

実店舗を利用したことのある既存顧客に向けて、オンラインでもコーヒー豆を気軽に購入できることを伝え、購入につなげること。また、オンライン販売を通じて初めてお店を知るユーザーにも、ブランドの世界観やコーヒーへのこだわりを感じてもらい、購入体験をきっかけに将来的な来店につなげること。

ターゲット

実店舗を利用したことがあり、コーヒー豆やドリップコーヒーを日常的に楽しむ20代後半〜40代の男女。
自宅でもこだわりのコーヒーを気軽に楽しみたいと考える既存顧客を中心に、オンライン販売をきっかけに初めてブランドを知り、店舗の世界観やコーヒーへのこだわりに共感する新規ユーザーも想定。

情報設計

「オンライン販売開始」を最も目立つ位置に配置し、次に商品イメージ、最後にブランド名が自然に認識される流れを設計しました。一瞬で内容が理解できるよう情報量を絞り、視線誘導を意識した構成としています。

デザイン

コーヒー豆やカップの写真を中心に構成し、商品の魅力が直感的に伝わるデザインとしました。店舗から海が見えるロケーションをヒントに、背景にはやわらかな曲線を用いて海をイメージし、親しみやすさと温かみを表現しています。背景のざらつき感はテーブルを連想させ、自宅でコーヒーを楽しむシーンを想起させる工夫をしました。散らばるコーヒー豆は素材から切り抜き、自然な配置にすることで、ひと目でコーヒーの商品広告だと伝わるよう意識しています。全体は落ち着いた配色でまとめ、日常に寄り添うブランドイメージを大切にしました。

使用フォント

Brandon Grotesque / Bahnschrift / HGゴシックM
英字のメインには「Brandon Grotesque」を使用し、カフェらしい洗練された印象を演出しています。サブ要素にはロゴに近い「Bahnschrift」を用いて統一感を持たせました。日本語には可読性が高く英字と相性の良い「HGゴシックM」を使用し、キャッチコピーがひと目で伝わるようにしています。

配色

#FCF2E8

#78A8B2

#E27851

店舗の雰囲気を参考に、やわらかなベージュをベースに、海を連想させるブルーグリーンをメインカラーとして採用しました。アクセントにはコーヒーの深みを感じさせるオレンジを使用し、落ち着きのある中にも印象に残る配色としています。コントラストを抑えつつ、視認性とおしゃれさを両立させました。

使用ツール

Photoshop

制作期間

約5時間