MOS BURGER (mos.jp) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

1. Visual Theme & Atmosphere

• デザイン方針: 温かみのある、親しみやすい、ナチュラル。日本発のプレミアムハンバーガーチェーンとして、素材感と安心感を表現
• 密度: ゆったりとしたプロモーション型。商品写真を大きく配置し、情報量は絞り込む
• キーワード: 温かい、親しみやすい、ナチュラル、グリーン、フレンドリー
• 特徴: グリーン + オレンジの暖色系デュアルブランドパレット。ピル型ボタン（radius 24px）がデザイン全体の統一要素。ライトピンクやクリームの背景で温かみを演出

2. Color Palette & Roles

Primary（ブランドカラー）

• MOS Green (#00a728): メインのブランドカラー。Primary CTA（ネット注文、今すぐ注文する）に使用
• MOS Green Dark (#006436): 強調見出し、グリーン面上のテキスト
• MOS Green Deeper (#004924): より深いグリーン、ダークセクション
• MOS Green Darkest (#002614): フッター背景等の最も暗いグリーン
• MOS Green Pale (#d9f2df): 薄いグリーン背景。カテゴリ表示やアクセント面

Secondary（セカンダリカラー）

• MOS Orange (#ff7e47): セカンダリCTA。ダウンロードボタン、会員登録ボタンに使用

Semantic（意味的な色）

• Danger / Warning (#e90000): エラーテキスト、警告バッジ、注意喚起

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト（純黒使用）
• Text on Green (#ffffff): グリーン背景上のテキスト
• Border (#dddddd): 区切り線、入力欄の枠
• Background (#ffffff): ページ背景
• Surface Gray (#f5f5f5): セクション背景、カード面
• Surface Pink (#ffebeb): ライトピンクの温かみ背景（メニューページのフレーム等）
• Surface Cream (#fffbf0): クリーム色の温かみ背景（メニュー詳細等）

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴ ProN W3（macOS）、メイリオ（Windows）
• 明朝体は使用しない

3.2 欧文フォント

• 和文フォント内蔵の欧文グリフをそのまま使用。欧文専用フォントの指定なし

3.3 font-family 指定

css/* 全体共通 — システムフォントのみ */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif;

フォールバックの考え方:

• 和文フォント名を英語表記・日本語表記の両方で指定（ブラウザ互換性確保）
• macOS はヒラギノ角ゴ ProN、Windows はメイリオにフォールバック
• Webフォントは使用しない。完全にシステムフォント依存

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間 (line-height): 1.6（14px / 22.4px）。日本語として標準的な値
• 見出しの行間: 1.3〜1.65。見出しサイズにより変動
• 本文の字間 (letter-spacing): normal（0）。字間調整なし
• 見出しの字間: normal（0）。字間調整なし

ガイドライン:

• letter-spacing は全階層で normal。プロポーショナル字詰めなし
• 行間は本文 1.6、見出しは 1.3〜1.65 の範囲
• ディスプレイ見出し（36px）は weight 400 で軽やかな印象

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

特別な禁則設定は検出されない。標準的なブラウザデフォルトに依存

3.7 OpenType 機能

css/* palt, kern ともに未使用 */
font-feature-settings: normal;

• palt: 未使用。本文・見出しとも字詰めなし
• kern: 未使用
• システムフォントのデフォルトカーニングのみ

3.8 縦書き

該当なし

4. Component Stylings

Buttons

全ボタンが radius 24px のピル型。モスバーガーのデザインを特徴づける統一要素

Primary CTA（注文系）

• Background: #00a728 (MOS Green)
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 24px（ピル型）
• Font Size: 16px
• Font Weight: 700

Secondary CTA（ダウンロード・登録系）

• Background: #ff7e47 (MOS Orange)
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 24px（ピル型）
• Font Size: 16px
• Font Weight: 700

Outline（誘導系）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Padding: 12px 24px
• Border Radius: 24px（ピル型）
• Font Size: 16px
• Font Weight: 700

Category Pill（メニューカテゴリ）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Padding: 6px 16px
• Border Radius: 10px
• Font Size: 13px
• Font Weight: 400

Inputs

• Background: #ffffff
• Border: 1px solid #dddddd
• Border (focus): 1px solid #00a728
• Border Radius: 8px
• Padding: 10px 14px
• Font Size: 14px
• Height: 44px

Cards

• Background: #ffffff
• Border: 1px solid #dddddd
• Border Radius: 12px
• Padding: 16px
• Shadow: 0 2px 8px rgba(0,0,0,0.08)

5. Layout Principles

Spacing Scale

Container

• Max Width: 1040px
• Padding (horizontal): 20px

Grid

• Columns: 可変（商品カードは 2〜4 列の auto-fit）
• Gutter: 16px〜24px

6. Depth & Elevation

サイト全体としてフラットな印象。影は控えめで、色面とボーダーで区切りをつける

7. Do's and Don'ts

Do（推奨）

• ボタンは必ず radius 24px のピル型にする。モスバーガーのデザインアイデンティティの核
• グリーン (#00a728) を注文系アクション、オレンジ (#ff7e47) を登録・促進系アクションに使い分ける
• 温かみのある背景色（#ffebeb ピンク、#fffbf0 クリーム）をセクション背景に活用する
• ディスプレイ見出しは weight 400 で大きく軽やかに。bold にしない
• font-family は英語名・日本語名の両方を指定する（"Hiragino Kaku Gothic ProN" と "ヒラギノ角ゴ ProN W3" の併記）
• 本文テキストは 14px / line-height 1.6 を維持する

Don't（禁止）

• カテゴリピル以外のボタンに radius 24px 以外の角丸を使わない
• グリーンとオレンジを同じ用途で混在させない（注文＝グリーン、促進＝オレンジで統一）
• letter-spacing や palt を追加しない（サイト全体で normal を徹底している）
• 本文テキストの line-height を 1.4 以下にしない
• グリーン背景上のテキストに黒を使わない（必ず白 #ffffff を使用）
• Webフォントを追加しない（システムフォントのみの方針）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG基準）
• ピルボタンは高さ 48px を確保

フォントサイズの調整

• モバイルではディスプレイ見出しを 24px 程度に縮小
• 本文 14px はモバイルでもそのまま維持
• ナビゲーションはハンバーガーメニューに切り替え

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #00a728 (MOS Green)
Secondary Color: #ff7e47 (MOS Orange)
Text Color: #000000
Background: #ffffff
Warm BG Pink: #ffebeb
Warm BG Cream: #fffbf0
Font: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif
Body Size: 14px
Line Height: 1.6
Button Radius: 24px (pill)

プロンプト例

モスバーガーのデザインシステムに従って、メニュー一覧ページを作成してください。
- プライマリカラー: #00a728（注文ボタンに使用）
- セカンダリカラー: #ff7e47（登録・促進ボタンに使用）
- フォント: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif
- 行間: 本文は line-height: 1.6
- ボタン: すべて border-radius: 24px（ピル型）
- カード背景: #ffffff, border: 1px solid #dddddd, radius: 12px
- セクション背景: #fffbf0（クリーム）または #ffebeb（ピンク）で温かみを演出