風が運ぶ、
ひとときのコーヒー時間。
地域密着型の個人カフェ「KAZE COFFEE」を想定した、自主制作の架空ブランドサイト。ペルソナ設計から配色・フォント選定までを論理的に積み上げ、「行ってみたい」と思わせる空気感と、迷わない情報設計を両立させた。
SNS頼みの集客から、
自走できるブランドへ。
Instagramで発信する個人カフェが、初めて自分たちの「家」となるWebサイトを持つ。そこから逆算して、必要な情報と空気感を1ページに集約した。
店舗の雰囲気は良いのに、来店判断に必要な情報——メニュー・営業時間・アクセス——がSNS上にバラバラで、初めて訪れる人の不安を解消できていない。そんな地方の個人カフェを想定したプロジェクト。
オーナーの想い、コーヒーへのこだわり、店内の空気感を伝えながら、「ここに来れば全部ある」という安心感を設計する。デザインでは派手な装飾を避け、写真と余白で空気を作ることに集中した。
「ふらっと寄れる」を
デザインで再現する。
自然光の中の静けさ
カフェの名前「KAZE（風）」に合わせ、ベージュと深いフォレストグリーンを基調に。コンクリート、木、観葉植物のある実店舗の光と影を、Webの上で再現することを目指した。
写真は大きく、テキストは小さく、余白を贅沢に。スクロールのリズムをゆっくり作ることで、読み急がせない構成にした。
- 配色は3色まで。補助色は使わない
- 見出しはセリフ体、本文はゴシック体で可読性確保
- ボタンは角丸の控えめな形で主張を抑える
- 写真はモノクロではなく、色温度を統一
素直なHTML/CSSで、
長く使える作りに。
フレームワークには頼らず、素のHTML/CSS/JavaScriptで実装。後でオーナー本人が少しずつメンテナンスできるよう、クラス名を日本語が想起しやすい英語で整理した。
このプロジェクトで
得たもの。
ペルソナから逆算する設計
「誰が、いつ、どんな気持ちで見るか」を先に決めてからデザインを組み立てると、迷いが大幅に減ることを実感。余計な要素を削ぎ落とす勇気も持てるようになった。
写真と余白でつくる空気感
装飾を足すのではなく、見せたい部分に意識を集中させるために「引く」デザインが、個人店のような実店舗型ビジネスには有効だと学んだ。
素の技術で最後まで書く
フレームワークを使わないことで、ブラウザ挙動とCSSの基礎理解が深まった。小規模案件なら、素のHTML/CSSで十分に表現できる手応えを得た。
次に進むなら
本番運用を想定するならCMS化、予約フォーム連携、Google Map埋め込み最適化、実店舗の写真撮影ディレクションまで踏み込みたい。
実案件と仮定した場合の成功指標
このブランドサイトは「カフェの世界観に共感する新規客の来店・指名購入を増やす」ための設計です。公開後3ヶ月時点で、以下の数値を成功ラインと定義しています。
（店名＋地域）
到達率
（世界観の訴求）
※ 本作品はコンセプトワーク（自主制作）のため、実測値ではなく設計時に設定したKPI目標です。
「こういうブランドサイト、
うちもつくれる？」
ヒアリング・お見積もりまで無料でご相談いただけます。