概要
京都・築100年の町家をイメージした架空カフェ「MOKU COFFEE」。ダークトーンと大きなビジュアル領域で、焙煎と空間の静けさを伝えるサイトです。予約・アクセスを迷わせない導線を最優先にしました。
制作実績一覧へ
飲食 · 2025
MOKU COFFEE
町家カフェのブランドサイト
コンセプト整理 / デザイン / 実装（架空案件・サンプル）
- Next.js 14
- TypeScript
- Tailwind CSS
要件（仮定を含む）
・30〜40代の男女がターゲット（仮定） ・ダーク系・高級感・写真を大きく見せること ・スマホでの閲覧が主になること
サイト構造
- 01フルスクリーンに近いヒーロー
- 02こだわり・豆の説明
- 03メニュー・店舗情報
- 04予約・Instagram・地図
デザイントークン
背景
#0D0D0D 付近のダーク
テキスト
#F5F5F5
アクセント
#D4A017（ゴールド系）
写真
プレースホルダー（実装時は実撮影に差し替え）
課題とアプローチ
課題
- 暗色基調は読みやすさとの両立が難しいため、コントラストと行間を慎重に調整しました。
- 実写真がない段階でも「世界観」が伝わるよう、グラデーションとタイポで雰囲気を補強しています。
アプローチ
- 重要な情報（営業時間・予約ボタン）を画面下部の固定寄り配置でも繰り返し、迷子を防ぐレイアウトにしました。
- アクセントカラーはCTAに集中させ、装飾には使わない方針に統一しています。
成果メモ（サンプル）
飲食案件で多い「雰囲気は良いが情報が見つからない」状態を避け、世界観と導線の両方を満たすバランスを意識したサンプルです。