Mitsubishi Estate (mec.co.jp) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 三菱地所株式会社（Mitsubishi Estate Co., Ltd.）コーポレートサイト。

1. Visual Theme & Atmosphere

• デザイン方針: 大手デベロッパーの王道コーポレート。日英バイリンガルを前提とした堅実・余白の効いたレイアウト。Century Gothic + Noto Sans JP の組み合わせで、英字セクションタイトル（NEWS / TOPICS / SUSTAINABILITY）を大きく置き、和文サブテキストで補足する構成
• 密度: ゆったり。セクション間の縦余白を強くとり、巨大な英字見出しで視覚的な区切りを作る
• キーワード: Corporate, Trustworthy, Bilingual, Spacious, Conservative

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Red (#dc000c): 三菱地所のシグネチャー赤。お問合せ CTA・検索ボタン・主要アクション・強調点に使用。鮮やかで彩度の高い赤
• Brand Red Dark (#d7000f): プレス時に出るやや暗い赤（実測の従属トーン）

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出しの基本色
• Text Sub (#404040): 控えめな本文
• Text Tertiary (#757575 / #959595 / #999999): 補助・キャプション・ラベル
• Text Disabled (#c9c9c9): 無効・低コントラスト
• Beige Accent (#9f9889): リード文・特徴コピー専用の暖色グレー（事業紹介の "超長期視点でのまちづくり…" 等）
• Background Page (#ffffff): 通常ページ背景
• Background Hero (#f7f6f6): ページタイトル帯（H1 が乗る薄いグレー）
• Background Info Card (#f2f1ec): 情報カードの薄いベージュ背景
• Background Subtle (#efefef): 二次ボタン・タグの背景

Default Browser（未スタイル要素のデフォルト）

• Default Link (#0000ee): スタイル指定のないリンクで観測されるブラウザデフォルト青。基本的に使用しない（赤や黒で上書きする）

Tag Color Hints（記事カテゴリタグ等）

• Tag Green (#4da262): カテゴリ識別用の濃緑
• Tag Blue (#4a94bd): カテゴリ識別用の青

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP が和文の基本。コンテンツ本文・セクション見出し・H1 は Noto Sans JP を最優先
• 明朝体は使用していない

3.2 欧文フォント

• Century Gothic: ヘッダー・ナビゲーション・大型英字見出し（NEWS / TOPICS / SUSTAINABILITY）で先頭指定。OS搭載前提。Windows/macOS の標準フォント
• Noto Sans: フォールバックの欧文サンセリフ（Latin 文字）
• Arial: 一部のフォーム系ボタン（検索ボタン等）でブラウザデフォルトとして観測。意図して指定されているわけではない

3.3 font-family 指定

css/* グローバル（ヘッダー・ナビ・トップページの大型英字見出し） */
font-family: "Century Gothic", "Noto Sans", "Noto Sans JP", sans-serif;

/* ページコンテンツ（記事本文・H1・サブセクション） */
font-family: "Noto Sans JP", "Noto Sans", sans-serif;

/* 純和文 H1（ページタイトル） */
font-family: "Noto Sans JP", sans-serif;

/* 英字専用ラベル（"Our Business" 等のセクション見出し小） */
font-family: "Century Gothic", sans-serif;

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

• グローバル領域は欧文先頭（Century Gothic）の独特な構成。これは英字見出しを Century Gothic で出すための指定で、和文文字には Noto Sans JP が後段で適用される
• 一方、コンテンツ領域は和文先頭（Noto Sans JP）に切り替わる。これにより記事本文の和文表示品質が安定する
• Noto Sans → Noto Sans JP の順は欧文専用フォントを優先するパターン

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

3.5 行間・字間

• コンテンツ本文の行間: 1.6〜2.0（28.8 / 16, 32 / 16, 25.6 / 16）— 和文として標準的に広め。可読性重視
• 見出しの行間: 一律 1.4（47.6 / 34, 39.2 / 28, 33.6 / 24, 30.8 / 22, 25.2 / 18）— ボトムアップで×1.4 が基本ルール
• トップページ大型英字見出しの行間: normal（Century Gothic ベースなので和文行間ルールを適用しない）
• letter-spacing: 全要素で normal。負トラッキングや字詰めは観測されず（ベタ組）

ガイドライン:

• 和文 H 系は font-size × 1.4 = line-height を厳守
• 本文は × 1.6〜2.0 で広めに取る（コーポレート系の安心感）
• 字詰めはせず、フォント本来のメトリクスで組む

3.6 禁則処理・改行ルール

css/* 観測上、特殊な禁則設定なし（ブラウザデフォルト準拠） */
word-break: normal;
overflow-wrap: normal;
line-break: auto;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 全ページで font-feature-settings: normal。palt（プロポーショナルメトリクス）は適用されていない
• 字面はベタ組で、和文の文字幅を均等に保つ方針

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA / Contact Pill

• Background: #dc000c
• Text: #ffffff
• Border Radius: 50px（完全な丸ピル）
• Font Family: "Century Gothic", "Noto Sans", "Noto Sans JP", sans-serif
• Font Size: 14px
• Font Weight: 400
• Padding: 横長の楕円ピル（高さに対して横幅が長い）

Search Button

• Background: #dc000c
• Text: #ffffff
• Border Radius: 32px
• Font Size: 22px
• Font Weight: 400

Secondary Button (Filter Tag)

• Background: #efefef
• Text: #000000
• Border Radius: 0px
• Font Size: 13.3333px（ブラウザ既定の 0.8333em）

Clear Button (Text)

• Background: #f7f6f6
• Text: #dc000c
• Border Radius: 0px
• Font Size: 14px
• 用途: 「選択条件をクリア」等のテキスト型 destructive 操作

Modal Close

• Background: #ffffff
• Border Radius: 50%（円形）
• Font Family: Arial
• Font Size: 13px

Links

• Default Link Color: 文中リンクは #000000 ベースで下線。ブラウザデフォルト #0000ee のままになっている箇所もあるが、明示的なブランドリンクカラーは設定されていない
• Hover: 不透明度変化または下線追加（明示なし）

Cards

Info Card（事業紹介・関連情報）

• Background: #f2f1ec（薄いベージュ）
• Text: #000000
• Padding: 内余白あり
• Border Radius: 0px
• Font Size: 18px / line-height 32.4px (×1.8)

News Card

• 背景白・区切り線で構成
• カード内 H3: 22px / 700

Page Title Bar

• Background: #f7f6f6
• H1: Noto Sans JP / 34px / 700 / line-height 47.6px
• 下層ページ共通のヘッダー帯

Inputs

• フォームの詳細は抽出データに含まれず（現状の主要ページにフォームが少ない）
• 検索ボックス・チェックボックス・ラジオは Arial / 13.3333px 基準

5. Layout Principles

Header

• 高さ: 約 110px（body の padding-top: 110px で固定ヘッダー分を確保）
• 背景: #ffffff
• ナビゲーション: 横並びテキストリンク + 右端に赤い「お問合せ」ピル CTA
• 言語切替: JP / EN（2言語）

Spacing Scale

セクション間は数十〜100px超の縦余白を取り、コーポレート系として広めに構成。

Container

• 明示的な max-width 値は抽出されないが、コンテンツ領域は中央寄せ・両端余白あり

Grid

• 事業一覧・ニュース一覧は2〜4カラムのカードグリッド
• カラム数はブレークポイントに応じて変化

6. Depth & Elevation

• ボタン・カードに明示的な box-shadow は観測されず
• 区切りは色面の差（#f7f6f6 / #f2f1ec / #efefef）と境界線で表現

7. Do's and Don'ts

Do（推奨）

• 大型英字見出し（Century Gothic 40〜58px / 700）でセクションを区切る
• ページタイトル帯は #f7f6f6 背景 + Noto Sans JP 34px / 700 で統一する
• 主要 CTA・コンタクトリンクは #dc000c のピル型ボタンで表現する
• 和文本文の line-height は 1.6〜2.0 で広めに取る
• 和文見出しは line-height 1.4 を厳守する（×1.4 ルール）
• リード・特徴コピーには #9f9889（ベージュ）を使い、本文と差別化する
• グローバル領域では Century Gothic を先頭に置き、コンテンツ領域では Noto Sans JP を先頭に置く（領域で stack を切り替える）

Don't（禁止）

• letter-spacing を負の値にしない（ベタ組ベース）
• 本文に Century Gothic を使わない（英字見出し・ナビ専用）
• ブランド赤 #dc000c を本文や広面積背景に使わない（CTA・強調点・主要アクションのみ）
• #0000ee（ブラウザデフォルトリンク色）をそのまま見せない（必ず黒や赤で上書きする）
• 和文見出しの font-feature-settings を palt にしない（normal を維持）
• 派手なシャドウやグラデーションでフラット感を崩さない

8. Responsive Behavior

Breakpoints

※ 具体的な数値は抽出データに含まれず。一般的なコーポレートサイト基準を推奨

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 推奨）
• お問合せピル CTA はモバイルでも十分な高さを確保

フォントサイズの調整

• モバイルでは Display 58px → 32px 程度、H1 34px → 24px 程度に縮小
• 本文 16px はそのまま維持

9. Agent Prompt Guide

クイックリファレンス

# Brand
Brand Red:        #DC000C   ← CTA・検索・強調
Page Bg:          #FFFFFF
Hero Bg:          #F7F6F6   ← ページタイトル帯
Info Card Bg:     #F2F1EC   ← ベージュ系カード
Subtle Bg:        #EFEFEF   ← 二次ボタン
Text Primary:     #000000
Text Sub:         #404040
Text Tertiary:    #999999
Beige Accent:     #9F9889   ← リード文専用

# Typography
Global Stack:     "Century Gothic", "Noto Sans", "Noto Sans JP", sans-serif
Content Stack:    "Noto Sans JP", "Noto Sans", sans-serif
Page H1 Stack:    "Noto Sans JP", sans-serif
Display Hero (EN): Century Gothic / 58px / 700 / lh: normal
Page H1:          Noto Sans JP / 34px / 700 / lh: 47.6px (×1.4)
Section H2:       Noto Sans JP / 28px / 700 / lh: 39.2px (×1.4)
Body:             Noto Sans JP / 16px / 400 / lh: 28.8-32px (×1.8-2.0)
letter-spacing:   normal（全要素ベタ組）
font-feature-settings: normal（palt 不使用）

プロンプト例

三菱地所のコーポレートサイトのデザインシステムに従って、サービス紹介ページを作成してください。

- ページタイトル帯: bg #F7F6F6 / H1 "Noto Sans JP" 34px / 700 / line-height: 47.6px / color: #000000
- セクション英字見出し: "Century Gothic" 46-58px / 700 / lh: normal / color: #000000（"NEWS" "TOPICS" 等）
- セクション和文見出し: "Noto Sans JP" 28px / 700 / line-height: 39.2px / color: #000000
- リード文（特徴コピー）: "Noto Sans JP" 22px / 700 / line-height: 30.8px / color: #9F9889
- 本文: "Noto Sans JP" 16px / 400 / line-height: 28.8-32px / color: #000000
- 主要 CTA: bg #DC000C / color: #FFFFFF / border-radius: 50px / "Century Gothic" 14px / ピル型
- 情報カード: bg #F2F1EC / 角なし / 18px lh 32.4px の本文
- letter-spacing: 全要素 normal（ベタ組）
- 和文見出しの行間: font-size × 1.4 を厳守
- 和文本文の行間: × 1.6〜2.0（広め）

Stack 切り替えのコツ

実サイトはヘッダー・ナビ・トップページ大型英字見出しでは Century Gothic 先頭、下層ページのコンテンツでは Noto Sans JP 先頭 に stack を切り替えている。エージェント側でも領域に応じて使い分けると正確性が上がる:

1. グローバル/ヘッダー/英字見出し → Century Gothic 先頭の stack
2. 記事本文/H1/H2/H3 → Noto Sans JP 先頭の stack