DAIWA HOUSE（大和ハウス工業） DESIGN.md

大和ハウス工業（https://www.daiwahouse.co.jp/ / https://www.daiwahouse.co.jp/jutaku/）のデザイン仕様書。 日本最大の住宅メーカー。コーポレートサイトと住宅サイト（jutaku）の二面構成。 実サイトの computed style 実測（2026-05-25 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 日本最大のハウスメーカーとしての信頼感と、住まいの温もりを両立。コーポレートサイトはブルーグレー #5b79a8 を基調とした堅実なトーン、住宅サイトはブラック CTA + セリフ見出し（Noto Serif JP）で上質な暮らしを訴求
• 密度: 本文 12px と小さめで情報密度が高い（典型的な日本の大企業サイト）。line-height 1.7 で読みやすさを確保
• キーワード: ブルーグレーの信頼感、住宅の品格、セリフ×サンセリフの使い分け、伝統的な日本語フォントスタック、二面性（コーポレート／住宅）
• 特徴:
  • 二つの顔: コーポレート（IR・企業情報）は #5b79a8 のブルーグレーで堅実さを、住宅サイトは黒ピル CTA + Noto Serif JP の見出しで上質さを演出
  • 和文フォントは Noto Sans JP を最優先。フォールバックに メイリオ → MS P ゴシック と続く、伝統的な日本の大企業サイトのフォントスタック
  • 住宅サイトの一部見出しに Noto Serif JP を採用し、和の品格を加える
  • 本文は 12px（日本の大企業サイトに典型的な小さめのベースサイズ）
  • コーポレートの CTA は border-radius: 6px の角丸、住宅の CTA は border-radius: 30px のピル型と、サイトごとに異なるボタン意匠
  • font-feature-settings: normal（palt 不使用）。letter-spacing はサブナビで -0.7px 程度の詰めがある以外はほぼ既定
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Blue-Gray (#5b79a8): コーポレートサイトのメインブランドカラー。CTA ボタン背景、ブランドアイデンティティに使用
• Accent Teal (#368bb1): コーポレートサイトのセカンダリアクセント

CTA / Buttons — Corporate

• Primary CTA (Corporate): 背景 #5b79a8 / 文字 #ffffff / radius 6px / padding 10px 24px / 14px / weight 700
• Ghost CTA (Corporate): 背景 transparent / 文字 #5b79a8 / border 1px solid #5b79a8 / radius 6px
• Round Icon Button: radius 50px（丸型アイコンボタン）

CTA / Buttons — Housing (jutaku)

• Primary CTA (Housing): 背景 #000000 / 文字 #ffffff / radius 30px（ピル）/ padding 12px 32px / 14px / weight 500
• Secondary CTA (Housing): 背景 #000000 / 文字 #ffffff / radius 4px（シャープ）
• White Card CTA: 背景 #ffffff / 文字 #000000 / radius 5px / border 1px solid #ebebeb

Neutral

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

実サイトにはエラー色・成功色の表面化が確認されなかった。推奨する補完値:

• Danger: #c53030 程度の落ち着いたレッド
• Success: #2f855a 程度のグリーン
• Warning: #d69e2e 程度のイエロー

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を最優先。Noto Sans Japanese（住宅サイト旧名）も同系統
• フォールバック: メイリオ (Meiryo) → MS P ゴシック (MS P Gothic) → sans-serif
• 明朝体（住宅サイト見出し用）: Noto Serif JP — 住宅ページの一部見出し（H2 等）で使用。品格ある和の雰囲気を演出

3.2 欧文フォント

• サンセリフ: Arial（コーポレートのフォールバック内）
• 純粋な欧文優先フォントは font-family に含まれない。Noto Sans JP / Noto Serif JP の欧文グリフを使用

3.3 font-family 指定

css/* コーポレートサイト — 本文・見出し共通 */
font-family: "Noto Sans JP", メイリオ, Meiryo, "ＭＳ Ｐゴシック",
  "MS P Gothic", Arial, sans-serif;

/* 住宅サイト — 本文・ナビ */
font-family: "Noto Sans Japanese", メイリオ, Meiryo, "ＭＳ Ｐゴシック",
  "MS P Gothic", sans-serif;

/* 住宅サイト — セリフ見出し */
font-family: "Noto Serif JP", serif;

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

• Noto Sans JP（Google Fonts）を最優先し、和文・欧文ともに統一
• メイリオは Windows ユーザー向けの第1フォールバック。伝統的な日本の大企業サイトの定番構成
• MS P ゴシックは古い Windows 環境向けの最終フォールバック（全角名 ＭＳ Ｐゴシック と半角名 MS P Gothic を併記）
• 住宅サイトは Noto Sans Japanese（旧名）を使用しているが、実質 Noto Sans JP と同一

フォント注記: コーポレートと住宅で font-family 名が微妙に異なる（Noto Sans JP vs Noto Sans Japanese）が、表示結果は同一。住宅サイトの方がやや古い記述。

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

実測値（コーポレートサイト＋住宅サイト、2026-05-25 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (12px): 1.7（20.4px / 12px）— 小さめの文字に対して広めの行間で可読性を確保
• 見出し H2 (28px): 1.43（40px / 28px）
• ナビ (14px): 1.0（14px / 14px）— ナビは一行高さ

字間 (letter-spacing) — 実測:

• 本文・見出し: normal（letter-spacing の明示的な指定なし）
• サブナビ: -0.7px (-0.058em)（サブナビのみ詰め）
• 全体的に letter-spacing は最小限。Noto Sans JP のメトリクスに委ねる方針

ガイドライン:

• 日本語本文は line-height 1.7 で 12px の小さい文字をカバー
• letter-spacing はほぼ normal。palt も不使用。フォント自体のメトリクスを信頼する方針
• サブナビのみ -0.7px のネガティブトラッキングで情報密度を上げている

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Noto Sans JP / Noto Serif JP のメトリクスに任せる方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA (Corporate) — ブルーグレー角丸

• Background: #5b79a8
• Text: #ffffff
• Padding: 10px 24px
• Border Radius: 6px
• Font: Noto Sans JP, 14px, weight 700
• Border: none

Ghost CTA (Corporate) — アウトライン角丸

• Background: transparent
• Text: #5b79a8
• Border: 1px solid #5b79a8
• Padding: 10px 24px
• Border Radius: 6px
• Font: Noto Sans JP, 14px, weight 700

Primary CTA (Housing) — ブラックピル

• Background: #000000
• Text: #ffffff
• Padding: 12px 32px
• Border Radius: 30px（ピル）
• Font: Noto Sans JP, 14px, weight 500
• Border: none

Secondary CTA (Housing) — ブラックシャープ

• Background: #000000
• Text: #ffffff
• Padding: 10px 24px
• Border Radius: 4px
• Font: Noto Sans JP, 14px, weight 500

White Card CTA (Housing)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #ebebeb
• Padding: 10px 20px
• Border Radius: 5px
• Font: Noto Sans JP, 14px, weight 500

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #aaaaaa
• Border (focus): 1px solid #5b79a8
• Border Radius: 4px
• Padding: 8px 12px
• Font: Noto Sans JP, 14px, weight 400
• Height: 40px

Cards

• Background: #ffffff
• Border: 1px solid #ebebeb
• Border Radius: 5px（住宅）/ 0px（コーポレート・フラット）
• Padding: 20px
• Shadow: 基本 none（フラットなデザイン）

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px（コーポレート）/ 1100px（住宅）
• Padding (horizontal): mobile 16px / desktop 24px

Grid

• Columns: 12
• Gutter: 20px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感はサーフェスの色分け（#ebebeb / #eceff4 / #f4f4f4）で表現するフラットな設計思想
• 大企業サイトらしい堅実で控えめな階層表現

7. Do's and Don'ts

Do（推奨）

• フォントは Noto Sans JP を最優先、フォールバックは メイリオ → MS P ゴシック → sans-serif
• 住宅ページの見出しには Noto Serif JP でセリフのアクセントを入れ、品格を出す
• 本文の line-height は 1.7 を基本にする（12px の小さい本文でも読みやすく）
• コーポレートの CTA は #5b79a8 のブルーグレー＋角丸 6px
• 住宅の CTA は #000000 のブラックピル（30px radius）
• 色のコントラスト比は WCAG AA 以上を確保する
• サーフェスは用途に応じて使い分ける（#ebebeb コーポレート / #eceff4 青み / #e5e4e0 温かみ / #f4f4f4 汎用）

Don't（禁止）

• コーポレートの CTA にブラックを使わない（コーポレートは #5b79a8 ブルーグレー）
• 住宅の CTA にブルーグレーを使わない（住宅はブラック #000000 が基本）
• コーポレートと住宅の CTA スタイルを混在させない — サイトごとにトーンが異なる
• 本文に line-height: 1.4 以下を使わない（12px の文字が読みにくくなる）
• font-feature-settings: "palt" を追加しない（実サイトは normal で統一）
• 住宅ページの全見出しをセリフにしない（セリフは H2 等の大見出しにのみ使用し、H3 以下はサンセリフ）
• フォールバックチェーンから メイリオを省略しない（日本の大企業サイトの Windows 対応の定番）
• ボタンに強い影 (box-shadow) をつけない — フラットが基本

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• 住宅ピル CTA は高さ 44px 以上を確保

フォントサイズの調整

• モバイルでは本文 12〜14px（ベースが小さいため大きな縮小は不要）
• 見出しはデスクトップの 70〜80% 程度に縮小
• Noto Serif JP の見出しもモバイルでは 15〜18px 程度に縮小

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Blue-Gray (Corporate CTA): #5b79a8
Accent Teal: #368bb1
Black (Housing CTA): #000000
Dark Gray (見出し): #2d2d2e
Medium Gray (本文): #4d4d4f
Text Gray (住宅本文): #666666
Light Gray (補助): #8d8d8d
Border: #aaaaaa
Surface (Corporate): #ebebeb
Surface (Housing Blue): #eceff4
Surface (Housing Warm): #e5e4e0
Surface (Housing Light): #f4f4f4
Background: #ffffff

Font (Corporate): "Noto Sans JP", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, sans-serif
Font (Housing): "Noto Sans Japanese", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif
Font (Housing Serif): "Noto Serif JP", serif

Body Size: 12px / line-height 1.7 / weight 400 (Corporate) or 500 (Housing)
H2 Size: 28px / line-height 1.43 / weight 700
H2 Serif (Housing): 17-25px / weight 500-700 / Noto Serif JP

CTA Radius (Corporate): 6px
CTA Radius (Housing Pill): 30px
Card Radius: 5px
Shadow: 基本 none。サーフェスの色分けで階層を表現

プロンプト例

大和ハウス工業のデザインに従って、住宅商品一覧ページを作成してください。
- フォント（本文）: "Noto Sans JP", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif
- フォント（見出し）: "Noto Serif JP", serif を一部セクション見出しに使用
- セクション見出し（セリフ）: 25px / weight 500 / Noto Serif JP / color #000000
- 小見出し: 18px / weight 700 / Noto Sans JP / color #000000
- 本文: 12px / weight 500 / line-height 1.7 / color #666666
- 補助テキスト: 12px / weight 400 / color #8d8d8d
- 主要 CTA: 背景 #000000 / 白文字 / border-radius 30px (ピル) / padding 12px 32px / 14px / weight 500
- カード: 背景 #ffffff / border 1px solid #ebebeb / radius 5px / 影なし
- セクション背景: 白 #ffffff と #f4f4f4 の交互。青みの #eceff4 や温かみの #e5e4e0 も使用
- letter-spacing: normal（palt なし）
- ボタンに影をつけない。フラットが基本