CAFE — DEMO SITE

Cafe HARUカフェサイト|デモ制作

cafe-haru-demo.netlify.app

↕ 各フレーム内を直接スクロールしてご覧いただけます

制作種別
デモサイト(架空の店舗)
担当範囲
企画・デザイン / コーディング
使用技術
HTML / CSS / JavaScript
制作年
2026

Overview概要

「Cafe HARU」は、地域に根ざした小さなカフェを想定したデモ制作です。おしゃれさよりも“ふらっと立ち寄れる親しみやすさ”を優先し、はじめての人にも入りやすい空気感づくりをテーマにしました。

Challenge設計の狙い

飲食店サイトで最も見られるのは「メニュー」「営業時間」「場所」。この3つに素早くたどり着けることを最優先に、写真で雰囲気を伝えつつ、実用情報を迷わせない導線に整理しました。

温かみを出しながらもブランドの上品さは崩さないよう、色に頼らず余白と写真のトーンで“やわらかさ”を表現しています。

Approach取り組み

ファーストビューは店内の空気が伝わる大きな写真を主役にし、スクロールに応じて情報が静かに現れる構成に。スマートフォンでの閲覧を主軸に、地図・電話・営業時間へワンタップで届く設計にしています。

Pointポイント

日々更新したくなる「お知らせ」「本日のスイーツ」枠を想定し、店主が無理なく運用できる構造を意識しました。実案件では、Instagram連携やテイクアウト予約まで広げ、来店のきっかけを増やす設計につなげます。