Loading...

#Webサイト #自主制作

【架空】秋のレトロ喫茶フェア特設ページ

秋のレトロ喫茶フェア特設ページ

制作概要

ファミリーレストラン「nommies」のHP内の、「喫茶シオン」とのコラボメニューの特設ページを作成しました。昭和レトロな雰囲気を現代的なWebデザインで表現し、限定メニューの魅力を効果的に訴求しています。

担当領域

Direction/Design

制作期間

企画 2日間/デザイン 2週間

使用ツール

Photoshop/Illustrator/Figma

制作目的

コラボメニューの認知、販売促進。

ターゲット

20-40代女性。
デザートメニューの充実さ・落ち着いた雰囲気を求める層。
ランチタイム〜15時ごろに利用するママ会。

課題

「nommies × 喫茶シオン」の世界観を自然に伝えたい。
興味を持ってくれたユーザーに、フェア名・期間・メニューを漏れなく伝える。

コンセプト

昭和レトロな喫茶店文化をモチーフに、「懐かしさを手頃に再体験できる」ことがこのコラボのコンセプトです。商品名も情緒的にし、世界観を強化しています。
「ファミリーレストランのサイト内にある特設ページ」という設定にしているので、ヘッダーやフッターは別物として考えました。 全体を落ち着いたボルドーでまとめ、昭和レトロ感もありつつ視認性が保てる配色にしました。 キャッチコピーに明朝体を用いることで、優しくクラシックな印象に仕上げました。

昭和レトロな雰囲気を現代的なWebデザインで表現することを重視しました。メインビジュアルでは「秋のレトロ喫茶フェア」というキャッチコピーを大きく配置し、季節感とノスタルジックな印象を同時に訴求する設計にしました。
異なる種類の料理とドリンクを一つのシーンに組み合わせることで、喫茶店の豊富なメニューラインナップを訴求し、「どれも美味しそう」という印象を与える配置になっています。リボンのデザイン要素を取り入れることで、特別感のあるフェアの雰囲気を演出し、限定感を表現しています。

商品の魅力を最大限に伝えるビジュアル重視の設計を採用しました。各メニューアイテムにトーンの同じ写真を配置し、価格情報とともに見やすくレイアウトしています。グリッドシステムを活用して統一感を保ちながら、それぞれの商品の個性が伝わる配置にしました。
背景のワインレッドに対して、白いフレームで商品写真を際立たせることで、メニューが見やすく、選びやすい構成にしています。価格表示も明確に配置し、お客様が迷わずオーダーできるユーザビリティを重視した設計になっています。

つくったもの一覧