DESIGN.md Templates

Appearance

レストラン/カフェUI設計ガイド -- "Craft Warmth" ​

レストラン・カフェのUIに求められるのは「温もり」と「クラフト感」だ。Sweetgreen の新鮮さ、Blue Bottle Coffee の丁寧さ。食の体験は画面越しでも伝わる。暖色系の背景に大きなフード写真、セリフ書体の品のある見出し。全てが「手仕事」の温かみを感じさせるデザイン。

本テンプレートは Sweetgreen と Blue Bottle Coffee から着想を得た「Craft Warmth」設計システムを定義する。ウォームホワイトの背景にキャラメルのアクセント、セリフ書体の見出しが、食への敬意と空間の質を伝える。

核心となる設計思想

料理が主役であり、UIは料理を引き立てる器。フード写真を大きく配置し、テキストは最小限に。暖色系のカラーパレットで食欲を刺激し、セリフ書体で「丁寧に作られたもの」の印象を与える。予約CTAは常にアクセスしやすい位置に。

1. デザイン哲学 -- 「食の温もり」 ​

Sweetgreen のアプローチ -- 新鮮さの可視化 ​

Sweetgreen は食材そのものの色彩をデザインに活かしている。グリーンの葉物野菜、オレンジのにんじん、紫のビーツ。料理の写真がそのままカラーパレットになる。UIは透明で、食材が語る。

Blue Bottle Coffee のアプローチ -- 余白のクラフト感 ​

Blue Bottle Coffee は徹底した余白の美学で知られる。一杯のコーヒーに集中させるために、画面には最小限の情報しか置かない。セリフ書体と暖色系のトーンが、手作業の丁寧さを伝える。

カフェページプレビュー ​

Craft & Bloom
MenuAboutAccessReservation
TODAY'S SPECIAL
Seasonal Harvest Bowl
地元農家から届いた旬の野菜と自家製グラノーラ、
ハニーマスタードドレッシングで仕上げた一皿。
1,680
photo
Avocado Toast
自家製サワードウに完熟アボカド
980
photo
Craft Latte
シングルオリジンの丁寧な一杯
580
photo
Berry Parfait
季節のベリーと自家製グラノーラ
880
Reserve Your Table
Open Daily 8:00 - 21:00
Make a Reservation

このテンプレートの適用範囲 ​

カテゴリ適合度具体例
カフェ/コーヒーショップ最適Blue Bottle, Starbucks Reserve, 個人カフェ
レストラン最適Sweetgreen, カジュアルダイニング, ビストロ
ベーカリー最適パン屋、パティスリー、和菓子店
フードデリバリー適合Uber Eats店舗ページ風
旅館/ホテル適合食事メニュー紹介ページ
ファストフード非推奨温もり感が合わない
バー/クラブ非推奨DARK_THEME を使用

2. ウォームカラー配色システム ​

暖色の3段階 -- 食の温もり ​

WARM TONE HIERARCHY

bg-base#fffdf8
bg-subtle#f5efe6
bg-muted#ebe3d7
bg-dark#2c1810

アクセントカラー -- キャラメル & グリーン ​

ACCENT PALETTE

CARAMEL
#c17f4e
GREEN
#5a7247
ESPRESSO
#2c1810

3. セリフ書体タイポグラフィ ​

フォントシステム ​

Seasonal Harvest
Display -- Cormorant Garamond, 42px, weight 400
Our Menu
Heading 2 -- Cormorant Garamond, 28px, weight 500
地元農家から届いた旬の野菜を使い、一皿一皿丁寧に仕上げています。
Body -- Inter / Noto Sans JP, 16px, weight 400
1,680
Price -- Cormorant Garamond, 24px, accent-primary
TODAY'S SPECIAL
Caption -- Inter, 11px, uppercase, accent-primary

4. コンポーネント詳細 ​

ボタンスタイル ​

Reserve a Table
View Menu
Learn More
Reserve Now
Contact Us

メニューカード ​

4:3 food photo
Eggs Benedict
1,280
ポーチドエッグとオランデーズソース、自家製イングリッシュマフィン
Organic

バッジ/タグ ​

Today's SpecialOrganicVeganSold OutLimited

5. レイアウト原則 ​

余白とグリッド ​

レストラン/カフェサイトの余白は「呼吸」を表現する。料理写真に十分なスペースを与え、視覚的に味わう時間を作る。最大幅は 1200px、コンテンツはゆったりと中央に。

要素デスクトップモバイル
最大コンテンツ幅1200px100%
サイドパディング48px20px
セクション間余白64px40px
カードギャップ24px16px
メニューグリッド3列1列

6. ダークセクション活用 ​

エスプレッソカラーのCTA ​

A Table Awaits You
Open Daily 8:00 - 21:00 | Closed Wednesday
Reserve a Table
Call Us

7. Do's and Don'ts ​

Do ​

  • フード写真を大きく高品質に配置する
  • セリフ書体で温もりとクラフト感を維持する
  • ウォームトーン (#fffdf8 / #f5efe6) で統一する
  • 営業時間・住所・電話番号を目立つ場所に
  • 予約CTAを常にアクセスしやすく
  • ダークセクション (#2c1810) でメリハリ
  • 余白を贅沢に使い、高級感を出す

Don't ​

  • フード写真を小さくしない
  • ネオンカラーや蛍光色を使わない
  • 純白 (#ffffff) を背景にしない
  • メニューをPDF埋め込みだけにしない
  • 過度なアニメーションを入れない
  • 電話番号をクリック不可にしない

8. レスポンシブ対応 ​

画面サイズメニューグリッドヒーローヘッダー
Mobile (<640px)1列縦長ハンバーガー + 予約ボタン
Tablet (640-1024px)2列維持全ナビ表示
Desktop (1024px+)3列横長パノラマ全ナビ + 予約CTA

9. プロンプトガイド ​

クイックカラーリファレンス ​

Background: #fffdf8 | Panel: #f5efe6 | Dark: #2c1810
Text: #2c1810 | Secondary: #6b5b4e | Muted: #9a8b7e
Accent: #c17f4e | Green: #5a7247 | Border: #ebe3d7

Stitch向けプロンプト例 ​

「カフェのメニューページを作成してください。
DESIGN.md の RESTAURANT_CAFE プリセットに従ってください。
背景 #fffdf8、ヘッダー高さ 72px、border-bottom #ebe3d7。
店名は Cormorant Garamond セリフ体。
メニューカードは3列グリッド、角丸 12px。
各カードに料理写真 (4:3)、料理名 (serif)、説明文、価格 (#c17f4e)。
ダークセクション (#2c1810) で予約CTAを配置。」