ROYCE'（ロイズ） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 出典: https://www.royce.com/ — 2026-05-21 取得の computed style 実測値

1. Visual Theme & Atmosphere

• デザイン方針: 北海道発の高級チョコレートブランドらしい、上品で落ち着いたトーン。ネイビーブルーをブランドカラーに据え、装飾的な英字スクリプトフォントでエレガンスを演出
• 密度: EC サイトとしての商品一覧は情報密度が高いが、ブランドページは余白を活かしたビジュアル重視
• キーワード: エレガント、クラシカル、ネイビー、北海道、ギフト

2. Color Palette & Roles

Primary（ブランドカラー）

• Primary (#1e2678): ブランドネイビー。見出し、リンク、フッター背景、ナビゲーションテキストに使用
• Primary Light (#32327f): 一部リンクやサイドバーテキスト（rgb(50,50,127)）

Semantic（意味的な色）

• Danger (#c62828): エラー、削除（推定値）
• Warning (#e0a800): 警告（推定値）
• Success (#2e7d32): 成功（推定値）

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト
• Text Secondary (#454545): 補足テキスト、商品名（rgb(69,69,69)）
• Text White (#ffffff): ダーク背景上のテキスト
• Text Muted (#8f93bc): フッターのコピーライト（rgb(143,147,188)）
• Border (#cfcfcf): 区切り線（rgb(207,207,207)）
• Tag Background (#bbbbbb): タグ・ピルの背景
• Background (#ffffff): ページ背景
• Nav Background (#e4eef8): カテゴリナビゲーションの背景（rgb(228,238,248)）
• Footer Background (#1e2678): フッター背景（ブランドネイビー）

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans Japanese, メイリオ, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic ProN, Meiryo, ＭＳ Ｐゴシック, MS PGothic

3.2 欧文フォント

• サンセリフ: Arial, Helvetica（フォールバック末尾に配置）
• 装飾書体: tangerineregular（セクション英字タイトル専用）

3.3 font-family 指定

css/* 本文 */
font-family: "Noto Sans Japanese", メイリオ, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif;

/* セクション英字タイトル */
font-family: tangerineregular;

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

• Noto Sans Japanese（Webフォント）を最優先
• メイリオ / ＭＳ Ｐゴシック で Windows 環境をカバー
• ヒラギノ角ゴ Pro W3 で macOS をカバー
• 欧文フォント（Arial, Helvetica）はチェーン末尾に配置

注意: tangerineregular は Web フォントとしてサイト内で読み込まれる装飾書体。preview.html では Google Fonts の Tangerine で代替

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

3.5 行間・字間

• 本文の行間 (line-height): 1.6（13px / 20.8px）
• 見出しの行間: 1.6
• 本文の字間 (letter-spacing): normal
• 見出しの字間: normal

ガイドライン:

• 全体的に line-height: 1.6 で統一された簡素な設計
• letter-spacing は全テキストで normal

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt, kern ともに適用なし

3.8 縦書き

該当なし

4. Component Stylings

Buttons

ROYCE' のサイトではテキストリンクと画像ベースの CTA が主体で、明示的なボタンコンポーネントは少ない。

Tag / Pill（商品カテゴリタグ）

• Background: #bbbbbb
• Text: #ffffff
• Padding: 10px
• Border Radius: 20px（pill 型）
• Font Size: 12px
• Font Weight: 400

Inputs

明示的なフォーム入力は検出されなかった（検索は画像ベースの UI）。

Cards

• Background: #ffffff（推定）
• Border: none
• Border Radius: 0px
• Shadow: none
• 商品カードは画像＋テキストのシンプルな構成

5. Layout Principles

Spacing Scale

Container

• Max Width: 推定 1000px
• Padding (horizontal): 20px

Grid

• Columns: 2カラム（メインコンテンツ + サイドバー）
• Gutter: 推定 20px

6. Depth & Elevation

ROYCE' のサイトはフラットデザインで、box-shadow をほぼ使用しない。

7. Do's and Don'ts

Do（推奨）

• ブランドネイビー #1e2678 を見出し・リンク・フッターに一貫して使用する
• セクションタイトルは英字スクリプト（Tangerine 64px）+ 日本語（15px）の二段構成にする
• タグ・ピルは border-radius: 20px の pill 型で統一する
• 商品一覧は画像主体で、テキストは控えめに

Don't（禁止）

• ブランドネイビー以外の濃い色をアクセントカラーに使わない
• セクションタイトルの英字にゴシック体を使わない（必ずスクリプト体を使用）
• 本文のフォントサイズを 13px より大きくしない（EC サイトとして情報密度を保つ）
• 商品カードに影やボーダーを付けない（フラットな構成を維持）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）

フォントサイズの調整

• モバイルでは本文 13px を維持、ブランドページの body は font-size: 10px に縮小

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #1e2678 (navy)
Text Color: #000000
Text Secondary: #454545
Background: #ffffff
Nav BG: #e4eef8
Footer BG: #1e2678
Font: "Noto Sans Japanese", メイリオ, "ヒラギノ角ゴ Pro W3", sans-serif
Display Font: tangerineregular (64px)
Body Size: 13px
Line Height: 1.6
Tag Pill: radius 20px, bg #bbbbbb

プロンプト例

ロイズのデザインシステムに従って、商品一覧ページを作成してください。
- ブランドカラー: #1e2678（ネイビー）
- フォント: "Noto Sans Japanese", メイリオ, "ヒラギノ角ゴ Pro W3", sans-serif
- セクションタイトル: 英字スクリプト (Tangerine 64px) + 日本語 (15px #1e2678)
- 本文: 13px / line-height: 1.6 / color: #000000
- 商品名: 18px / color: #1e2678
- 価格: 24px / color: #454545
- タグ: pill 型 radius 20px, bg #bbbbbb, text white
- フッター: #1e2678 背景