野村不動産（NOMURA REAL ESTATE DEVELOPMENT） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-26 / 対象: https://www.nomura-re.co.jp/, /corporate/message/

1. Visual Theme & Atmosphere

• デザイン方針: 詰めて読ませる。 font-feature-settings: "palt" をトップページの 562 要素に全面適用し、letter-spacing: .04em を body に1回書いて全体へ流す。文字色は黒と白の2色だけ。色は「事業セグメントの識別」にしか使わない
• 密度: 高め。行間 1.75 で、約物が詰まった和文がブロックとして固まって見える
• キーワード: バーントオレンジ、palt 全面、黒と白の2色、10px の角丸、ほとんど見えない影

このサイトの核心は4つある。

1. palt の全面適用。 トップページで 562 要素、下層 /corporate/message/ で 175 要素。「人々の“幸せ”と社会の“豊かさ”の最大化」を目指し のような鉤括弧・引用符だらけの見出しでも、約物が閉じて1本の線に見える
2. letter-spacing は body に1回だけ。 computed 値は 0.64px（= 16px × 0.04em）で、可視 123 要素中 119 要素（下層は 57/58）。子要素は px のまま継承している。em を再宣言しているのはヒーローのコピーだけ（16px → 1.6px = 0.1em）
3. 文字色は 2 色しかない。 可視要素の color は #ffffff（92 要素）と #000000（31 要素）のみ。グレーの補助テキストすら使わない
4. 色は事業セグメントの識別子。 バーントオレンジ #b85911 / #9c4300 がブランド面、#3862a5（住まい）・#e29460（街づくり・商業施設）・#8aad45（ロジスティクス）がカテゴリタグ。装飾ではなく分類のための色

CSS Custom Properties は自社トークン 0 個（2 個は Swiper の既定値）。Noto Sans JP は可変フォント（weight: 100 900）を読み込んでいるが、実際に使うのは 400 / 500 / 700 の3段だけ。

2. Color Palette & Roles

Primary（ブランドカラー）

interactive の color を鵜呑みにしない。 分譲住宅（bg #9c4300）の color は rgb(0,0,0) と出るが、これはラベルを子の <span> に置いている構造で、実際に描画される文字は白。スクリーンショットで確認済み。#9c4300 の上は白文字。

Category（事業セグメントのタグ色）

小さな角丸なしのチップ（border-radius: 0 / padding: 2px 10px 4px / 12px / 白文字）にだけ使う。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し。可視 31 要素。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): オレンジ面・写真・フッターの上（可視 92 要素）
• Surface Warm (#f4f0ed): 最も多い面（14 要素）。ニュースカード、会社情報の導線、下層の本文ブロック
• Surface Warm 2 (#e9e4e1): 採用セクションの下半分
• Surface Gray (#e6e6e6): 検索フォームの面
• Footer Dark (#211f22 / #2b282c): フッター上下段
• Cookie Popup (rgba(46, 44, 48, 0.95)): 独自実装の Cookie 通知（外部 CMP ではない）
• Background (#ffffff): ページ背景。html / body に塗り指定が無く（rgba(0,0,0,0)）、heroCover.canvasUnpainted: true。トップの resolved は viewportTopBySample (2/4) 根拠で #ffffff、下層は viewportTopBySample (9/12) 根拠で #f4f0ed。地色は白、本文ブロックの面が #f4f0ed と読む

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一の和文）: Noto Sans JP。@font-face は 可変フォント weight: 100 900、status: loaded
• 可変で 100〜900 が使えるのに、実際に使うのは 400 / 500 / 700 の3段だけ。 400 が 102/123 要素、500 が 16、700 が 5
• 明朝は使わない

3.2 欧文フォント

• 専用の欧文フォントを持たない。 BLUE FRONT SHIBAURA View more © NOMURA REAL ESTATE DEVELOPMENT などの英字も Noto Sans JP の欧文グリフ
• swiper-icons が宣言されているが unloaded

3.3 font-family 指定

css/* サイト全体で1本。実測 123 要素すべてがこれ */
font-family: "Noto Sans JP", sans-serif;

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

• チェーンは2段だけ。 fontFamily の分布に他の値が1つも出てこない（トップ 123/123、下層 58/58）。例外の無い単一指定
• OS フォント（游ゴシック・ヒラギノ）を挟んでいない。palt を前提にした組版なので、メトリクスの違う書体に落ちると詰め具合が変わる。チェーンを足さないこと

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

ルートは標準の 16px（html / body ともに 16px）。rem 換算はそのまま。

700 は 5 要素だけ。 見出しは基本 **500（Medium）**で組み、700 は選択中のナビにしか使わない。可変フォントで 900 まで出せるが、使っていない。

3.5 行間・字間

• 本文の行間: 1.75（16px / 28px）。可視 103/123 要素（下層 48/58）と圧倒的多数
• 見出しの行間: 1.50（28px / 42px、36px / 54px）
• UI の行間: 1.20（14px / 16.8px）。ナビ・ボタン
• ヒーローの行間: 2.10（16px / 33.6px）。ここだけ広げる
• 字間: 0.64px（= 0.04em）が 119/123 要素。body に1回書いてpx のまま継承させている
• 例外: ヒーローのリードだけ 1.6px（0.1em）を再宣言（3 要素）

ガイドライン:

• letter-spacing: .04em は body に1回だけ書く。 子要素で em を再宣言すると、サイズごとに px が変わって継承の一様さが壊れる（このサイトはヒーロー以外それをしていない）
• 0.04em は「詰め」ではなく「詰めすぎないための最小値」。 実際の字詰めは palt が担当している
• line-height: 1.75 と palt はセット。 palt で横が詰まる分、縦を 1.75 空けてバランスを取っている。片方だけ真似ない

3.6 禁則処理・改行ルール

css/* 和文本文 */
line-break: strict;
overflow-wrap: break-word;
word-break: normal;

• palt が効いているため、行末の約物が詰まって見える。break-all を入れると詰めた約物が行頭に落ちて台無しになるので使わない
• 統括的な見出し（「人々の“幸せ”と社会の“豊かさ”の最大化」を目指し、価値創造の変革を推進してまいります。）は <br> で3行に割っている。自動折り返しに任せない

3.7 OpenType 機能

css/* サイト全体（実測 562 要素） */
font-feature-settings: "palt";

• palt を全面に当てる。 本文・見出し・ナビ・タグまで区別なく適用している。このサイトで最も特徴的な指定
• "palt" 1 ではなく "palt" とだけ書いている（値を省略すると 1 と同じ）。実装値をそのまま写すなら font-feature-settings: "palt";
• 数字の tnum は使っていない。日付（2026年09月25日）もプロポーショナルのまま

3.8 縦書き

css/* 該当なし。writing-mode の指定は 0 要素 */

縦組みは使っていない（typography.verticalWriting = 0 件）。

4. Component Stylings

Buttons

Primary（黒のピル）

• Background: #000000
• Text: #ffffff
• Padding: 0px 20px（高さは行ボックスで確保）
• Border Radius: 20px
• Font: Noto Sans JP / 16px / 400 / letter-spacing: 0.64px
• 右端に矢印付きの小さな丸を置く（View more ›）

Secondary（枠線・小）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 4px
• Padding: 5px 10px
• Font: Noto Sans JP / 14px / 400
• ヘッダーの お問い合わせ。フッター版は border-radius: 0 ＋ 1px solid #ffffff（背景が暗いため）

List Links（会社情報の導線）

• Background: #f4f0ed
• Text: #000000
• Border Radius: 10px
• Padding: 16px 44px 16px 20px（右 44px は矢印の丸の場所）
• Font: Noto Sans JP / 16px / 400
• 外部リンク版は Background #9c4300 ＋ 白文字（野村不動産ホールディングス IR情報）

Cards

News Card

• Background: #f4f0ed
• Border Radius: 10px（実測 66 要素でこのサイトの既定）
• Padding: 32px 32px 70px（下 70px は日付とタグの場所）
• Shadow: rgba(0, 0, 0, 0.04) 3px 3px 5px 0

Business Card（オレンジパネル内）

• Background: #9c4300
• Text: #ffffff
• Border Radius: 10px
• 写真を左に、ラベルを右に置く 2 カラム

Category Tag

• Background: #3862a5 / #e29460 / #8aad45（セグメント別）
• Text: #ffffff
• Border Radius: 0px（タグだけ角丸を使わない）
• Padding: 2px 10px 4px（上下非対称）
• Font: Noto Sans JP / 12px / 400

Section Panel

• Background: #b85911
• Border Radius: 50px 50px 0px 0px（上 2 隅だけ 50px）
• 中に #9c4300 のカードを 10px の角丸で並べる

Inputs

• Background: #e6e6e6
• Border: なし
• Border Radius: 0px
• Padding: 5px 10px
• Font: Noto Sans JP / 14px / 400 / letter-spacing: 0.64px
• 右端に虫眼鏡アイコン

5. Layout Principles

Spacing Scale

Container

• Max Width: 1120px（実測 8 要素。このサイトはこれ1つだけ）
• 全幅パネル（事業紹介 採用情報）はコンテナの外まで広がり、上 2 隅を 50px で丸める
• Padding (horizontal): 20〜40px

Grid

• Columns: 2（ニュース）/ 3（事業カード）
• Gutter: 6.639%（可変）または 32px（固定）
• 会社情報の導線は 2 カラム × 4 行

6. Depth & Elevation

影は「右下に 3px ずらす」。 0 2px 4px のような真下の影ではなく、X と Y に同じ量ずらすのがこのサイトの型（3px 3px / 5px 5px）。不透明度 0.04 は見えるか見えないかの境目で、黒に丸めたり濃くしたりしないこと。

7. Do's and Don'ts

Do（推奨）

• font-feature-settings: "palt" を全要素に当てる。 本文も見出しもナビもタグも例外なし
• letter-spacing: .04em を body に1回だけ書き、子要素は px で継承させる
• line-height: 1.75 を本文に、1.50 を見出しに、1.20 を UI に
• 文字色は #000000 と #ffffff の2色で通す
• カードの角丸は 10px、ピルは 20px、大パネルは 50px 50px 0 0、タグは 0px
• 影は rgba(0,0,0,0.04) 3px 3px 5px。 X・Y を同量ずらす
• 色はセグメントの識別に使う（住まい＝#3862a5、街づくり＝#e29460、物流＝#8aad45）

Don't（禁止）

• palt を外さない。 外すと鉤括弧・引用符の多い見出しが間延びして、別のサイトになる
• letter-spacing を子要素で em 再宣言しない（ヒーローのリードを除く）。サイズごとに px が変わって継承の一様さが壊れる
• グレーの文字を足さない。 補助テキストも黒。#666666 のような中間色は 1 要素も無い
• font-weight を 300 や 900 にしない。 可変フォント（100 900）を読んでいるが、実際の設計は 400 / 500 / 700 の3段
• 見出しを 700 にしない。 36px の h1 も 28px のセクション見出しも 500。700 は選択中のナビ 5 要素だけ
• 影を濃くしない。 0.04 を 0.1 に上げるとカードが浮いて、このサイトの平板さが失われる
• タグに角丸を付けない。 カードが 10px でもタグは 0px
• font-family に游ゴシック・ヒラギノを足さない。 メトリクスが変わると palt の詰め方が変わる

8. Responsive Behavior

Breakpoints

上限側（max-width: 1920px / 1760px）を持っているのが特徴。 コンテナは 1120px 固定だが、ヒーローの背景と全幅パネルだけは画面幅に追従させ、超ワイドで伸びすぎないよう段階的に抑えている。

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。会社情報の導線は padding: 16px 44px 16px 20px で満たす
• (hover: none) でホバー時の色変化・矢印アニメーションを無効化する

フォントサイズの調整

• Page Title 36px → モバイルで 24〜28px、Section Title 28px → 20〜22px
• 本文 16px / line-height: 1.75 / palt / .04em は据え置く
• 事業カードは 3 カラム → 2 カラム → 1 カラム
• 全幅パネルの border-radius: 50px 50px 0 0 はモバイルで 24px 程度に落としてよい

9. Agent Prompt Guide

クイックリファレンス

Primary Color:  #b85911   （セクション面） / #9c4300（カード）
Brand Purple:   #610f7a   （マークのみ）
Text Color:     #000000   ← グレーは使わない
Text on Dark:   #ffffff
Background:     #ffffff
Surface:        #f4f0ed   （最多の面）
Footer:         #211f22
Font:           "Noto Sans JP", sans-serif
Body Size:      16px
Body Weight:    400   （見出しは 500、700 はナビ選択時のみ）
Line Height:    1.75  （見出し 1.5 / UI 1.2）
Letter Spacing: 0.04em   ← body に1回だけ
palt:           全要素に適用
Radius:         カード 10px / ピル 20px / 大パネル 50px 50px 0 0 / タグ 0px
Box Shadow:     rgba(0,0,0,0.04) 3px 3px 5px 0
Container:      1120px

プロンプト例

野村不動産のデザインシステムに従って、事業紹介の一覧ページを作ってください。
- フォントは "Noto Sans JP", sans-serif の1本
- body に font-feature-settings: "palt" と letter-spacing: .04em を書き、全要素へ継承させる
- 本文 16px / 400 / line-height: 1.75、セクション見出し 28px / 500 / line-height: 1.5
- 文字色は #000000 と #ffffff の2色だけ。グレーの補助テキストは作らない
- セクション全体を #b85911 の面で囲み、border-radius: 50px 50px 0 0 で上 2 隅だけ丸める
- その中のカードは #9c4300 / border-radius: 10px / 白文字
- 事業セグメントのタグは border-radius: 0 / padding: 2px 10px 4px / 12px / 白文字で、
  住まい=#3862a5、街づくり・商業施設=#e29460、ロジスティクス=#8aad45
- カードの影は rgba(0,0,0,0.04) 3px 3px 5px 0（X と Y を同量ずらす）
- コンテナは 1120px、列間は 6.639%