LUMINE（ルミネ） DESIGN.md

LUMINE（https://www.lumine.ne.jp/）のデザイン仕様書。 JR東日本グループの駅ビル型ファッションビル。"わたしらしくをあたらしく"をコンセプトに、都市生活者のライフスタイルを提案する商業施設。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: モノクロームを基調に、余白と細い線で構成されたエディトリアルデザイン。ファッション誌のような洗練された静謐さ
• 密度: コンパクトな行間（body line-height 1.15）と統一的な字間（0.05em）で、テキストを詰め気味に組む。情報密度は高いが、余白のバランスで窮屈にならない
• キーワード: モノクローム、エディトリアル、洗練、静謐、ファッション
• 特徴:
  • Inter（欧文）+ Noto Sans JP（和文）の組み合わせ。font-family は欧文優先で Inter を先頭に置く
  • palt をグローバル有効化。body レベルで font-feature-settings: "palt" を適用
  • テキスト色は純黒 #000000。フッターは黒背景 #000000 に白文字 #ffffff の反転レイアウト
  • CTA はグレー #777777。ブランドカラーによる主張を排し、プロダクトとビジュアルが主役になる設計
  • タグ・ピルは #f7f7f7（ライトグレー）背景に 8px radius で柔らかい角丸
  • インフォメーションパネルに #d9e7f1（淡いブルー）を使用。色味のある要素はここだけ
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Black (#000000): テキスト・見出し・フッター背景。ブランドの基調色
• Gray CTA (#777777): 主要 CTA "ショップ検索" / "READ MORE" / "MORE" の背景
• Info Blue (#d9e7f1): インフォメーションパネルの背景。唯一の色味あるアクセント

CTA / Buttons

• Primary CTA: 背景 #777777 / 文字 #ffffff / radius 8px / 14px / weight 400
• Tag Button: 背景 #f7f7f7 / 文字 #000000 / radius 8px / 14px / weight 400
• Header Button: 背景 #f7f7f7 / 文字 #000000 / radius 4px / padding 0 16px

Neutral

Accent

• Info Blue (#d9e7f1): インフォメーションパネル。shadow rgba(0,0,0,0.16) 0 1px 3px 0 付き
• Overlay (rgba(0,0,0,0.6)): スライダーオーバーレイ

Semantic（実測未確認・推奨値）

• Danger: #d32f2f
• Success: #388e3c
• Warning: #f57c00

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を使用
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ: Inter を最優先。欧文部分は Inter で描画される
• Noto Sans JP の欧文グリフは Inter 不在時のフォールバック

3.3 font-family 指定

css/* 全要素共通 */
font-family: Inter, "Noto Sans JP", sans-serif;

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

• 欧文優先で Inter を先頭に置く。欧文部分は Inter の洗練されたグリフで描画し、和文は Noto Sans JP にフォールバック
• フォールバックチェーンが非常に短い（3要素のみ）。Inter + Noto Sans JP + generic で完結する潔い構成
• Inter / Noto Sans JP ともに Google Fonts で配信

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

実測値（トップページ、2026-05-09 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (16px): 1.15（18.4px / 16px）— 日本語としては非常にタイト。エディトリアルレイアウト
• 英字見出し (28px): 1.3
• ナビリンク (15px): 1.6
• タグ (14px): 1.2
• CTA (14px): 1.5

字間 (letter-spacing) — 実測:

• ほぼ全要素で 0.05em。統一的なトラッキング
• ナビリンクのみ 0.024em とやや狭い

ガイドライン:

• body line-height 1.15 はファッション誌のような詰め組みの印象を作る
• letter-spacing 0.05em の統一が静謐さを生む
• weight は 400 が基本。見出しでも最大 500。bold 700 は使わない

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• palt をグローバル有効化。body レベルで全要素に継承

3.8 縦書き

• 該当なし

4. Component Stylings

Buttons

Primary CTA（グレー角丸） — "ショップ検索" / "READ MORE"

• Background: #777777
• Text: #ffffff
• Border Radius: 8px
• Font: 14px, weight 400, letter-spacing 0.05em

Tag Button — "新宿" / "有楽町" 等

• Background: #f7f7f7
• Text: #000000
• Border Radius: 8px
• Font: 14px, weight 400

Info Panel — "INFORMATION"

• Background: #d9e7f1
• Text: #000000
• Padding: 16px
• Border Radius: 0 3px 3px 0
• Shadow: rgba(0,0,0,0.16) 0 1px 3px 0

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #d9d9d9
• Border (focus): 1px solid #000000
• Border Radius: 4px
• Padding: 12px 16px
• Font: 16px, weight 400
• Height: 44px

Cards

• Background: #ffffff
• Border: なし、または 1px solid #f7f7f7
• Border Radius: 8px
• Shadow: none

Footer

• Background: #000000
• Text: #ffffff
• Padding: 80px 67px 160px

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px
• Padding: mobile 16px / desktop 40px

Grid

• Columns: 12
• Gutter: 24px

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

• フォントは Inter → Noto Sans JP → sans-serif の順（欧文優先）
• font-feature-settings: "palt" を body に設定
• letter-spacing は 0.05em で統一
• CTA は #777777 グレー + 8px radius
• タグは #f7f7f7 + 8px radius
• モノクローム基調。色味は #d9e7f1 のインフォパネルのみ
• weight は 400 基本、最大 500

Don't（禁止）

• font-family で和文フォントを欧文より前に置かない
• bold（700）を使わない
• CTA に彩度の高い色を使わない — グレー CTA が基本
• line-height を 1.5 以上にしない（1.15 がエディトリアル感の源泉）
• pill（radius 9999px）を使わない。8px が上限
• box-shadow を多用しない
• palt を外さない

8. Responsive Behavior

Breakpoints

タッチターゲット

• CTA: 高さ 42px 以上
• タグ: 高さ 36px 以上

ダークモード

• 該当なし

9. Agent Prompt Guide

クイックリファレンス

Black: #000000
Gray CTA: #777777
Light Gray: #f7f7f7
Info Blue: #d9e7f1
Separator: #d9d9d9
White: #ffffff

Font: Inter, "Noto Sans JP", sans-serif
font-feature-settings: "palt"

Body: 16px / line-height 1.15 / weight 400 / letter-spacing 0.05em
H2 (en): 28px / line-height 1.3 / weight 500
Tag/CTA: 14px / line-height 1.2-1.5 / weight 400
Caption: 12px / line-height 1.0-1.5

Border Radius: 4px（header）/ 8px（CTA・タグ）
Shadow: 基本 none

プロンプト例

LUMINE のデザインに従って、店舗一覧ページを作成してください。
- フォント: Inter, "Noto Sans JP", sans-serif / font-feature-settings: "palt"
- 英字見出し: 28px / weight 500 / line-height 1.3 / letter-spacing 0.05em
- 本文: 16px / weight 400 / line-height 1.15 / letter-spacing 0.05em / color #000
- CTA: 背景 #777777 / 白文字 / radius 8px / 14px
- タグ: 背景 #f7f7f7 / 黒文字 / radius 8px / 14px
- フッター: 背景 #000 / 文字 #fff
- bold は使わない（最大 weight 500）
- box-shadow は基本 none