カフェのサイト / Client Work
FILTER 01.
職業訓練校より入学検討者向けのサンプルとして依頼を受け企画した、架空のカフェサイトです。ローカル環境で閲覧可能なHTML/CSS/JSのみでの実装・レスポンシブ対応・複数ページ構成といった指定要件のもと制作しました。
店舗の静謐かつインダストリアルな空間の再現と、直感的なUI設計の両立を図っています。
project-data
- Duration : 4 weeks (2026.07)
- Role : Planning, Design, Coding (All)
- Stack : HTML, CSS, JavaScript
- Tools : Figma, Photoshop, VS Code
design process
制作意図
Challenge
- • 世界観の訴求不足
- 画像で魅せる一般的なカフェサイトでは、店舗の売りである静謐な空間設計やインダストリアルな世界観が伝わっていない。
- • 情報過多による途中離脱
- コーヒーの専門的な情報が多いと画面上のスクロール負担が大きく、ライト層の途中離脱を招いている。
- • メニューページの回遊不足
- 関連動線がないため目的の商品のみで閲覧が終了し、他メニューの認知・発見に繋がっていない。
Goal
- • 最終目標（KGI）
- 実店舗への新規来店数の増加、およびリピーター（ファン層）の獲得。
- • 中間指標（KPI）
- 世界観の訴求を通じた、サイトの平均滞在時間および回遊率の向上。
Target
- • メイン
- 静謐な空間でのリフレッシュを求める、30代〜40代前半の男女。
- • サブ
- 抽出までのプロセスや背景にも関心がある、コーヒー愛好家。
解決手法
Approach
- • 世界観の構築
- 写真の多用を避け、モノトーンな配色と文字の強弱、余白を活用することで、店舗の静謐でインダストリアルな空間を視覚的に表現しました。
- • ターゲット別の情報階層
- メニューの詳細情報をモーダル内に分離。一覧のスクロール負担を抑えつつ、関心が高い層には選択的に情報を届ける設計にしました。
- • ペアリングによる回遊動線
- モーダル内にペアリングメニューへのリンクを設置。スムーズに別メニューへ遷移できる動線を整え、他メニューへの回遊性を高めました。
Key Points
- • 世界観に馴染む画像加工
- インダストリアルな世界観を維持するため、画像背景をコンクリートに統一し、サイト背景色と画像背景のRGB比率を揃える補正を行いました。
- • 動的なカラー演出
- サイト内画像をイベント処理によりモノクロからカラーへ変化させることで、静謐な世界観を保ちつつ、単調さを回避しました。
- • モノトーンでの情報階層化
- モノトーンのみで情報の強弱と優先順位を明確にするため、見出しから補足情報まで段階的に明度を下げたべた色を採用しました。
視覚設計
Typography
- • Noto Sans JP（和文）
- 高い視認性と癖のないフラットな造形で、静謐な世界観を阻害しないため採用しました。
- • Bebas Neue Pro（欧文）
- 縦長でスタイリッシュかつ力強いシルエットにより、見出しに重厚感と視覚的なメリハリを生む意図です。
- • Roboto Mono（欧文）
- 等幅フォントの機械的な佇まいにより、補足情報に精密さを加え、工業的な世界観を補強する意図です。
Color Palette
- • 配色意図
- コンクリート建築の静謐さとインダストリアルな佇まい、珈琲の純度を想起させる配色を目指しました。
- • 色彩設計
-
- #1A1C1E
- #F0F3F6
- #BABCBD
- #080A0C
layout overview
横スクロールして複数ページをご覧いただけます
