ミサワホーム（MISAWA HOME） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地・墨 #333333・青 #0078be で組むハウスメーカーのコーポレートサイト。和文は 約物サブセット ＋ 和文 ＋ 総称の 3 層スタックで積み、欧文は Outfit に分ける
• 密度: 詰め気味。コンテナ 1200px、行間は 1.40〜1.46 に集中。情報量の多いメガメニューを持つ
• キーワード: YakuHanJP ＋ Noto Sans JP ＋ Outfit、palt と YakuHanJP の併用、rem の基準が 10px、欧文を縦に組む、影は 1 種だけ

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

1. body の font-family は "Hiragino Kaku Gothic ProN" だが、実際に描かれているのは Noto Sans JP。 そのスタックを持つのは可視 309 要素のうち 11 要素だけ。実体は Yakuhanjp, "Noto Sans JP", sans-serif が 176 要素、"Noto Sans JP", sans-serif が 102 要素。body の宣言を見て書体を決めないこと
2. YakuHanJP（約物サブセット）と font-feature-settings: "palt" を併用している。 palt は 860 要素に継承されている。約物のアキを詰める手段が二重に入っている。→ 3.7 を必ず読むこと
3. html { font-size: 10px }。 rem は 10px 基準。16px 基準で rem を換算しないこと
4. font-weight は実質 400 一本。 可視 309 要素のうち 400 が 301 要素、600 が 7、700 が 1。Noto Sans JP は可変フォント（100〜900）で読み込んでいるのに、太さで階層を作っていない
5. 欧文ラベルを writing-mode: vertical-rl で縦に組んでいる。 HOME+Advanced HOME+Upgrade Life など 5 要素。和文ではなく欧文を縦にする。→ 3.8 を必ず読むこと
6. コーポレートトップと /kodate/（注文住宅）は別のデザインシステム。 下層は Noto Sans JP 単独スタック・Oswald / Nobel-Book・weight 300 を使い、字間は normal（174 要素）で palt も無い。→ 3.9 を必ず読むこと

2. Color Palette & Roles

青 1 色を導線に使う。文字は墨 #333333。

ホームラウンジの 3 導線だけ色分けしている（各 1 要素）。

#0078be と #0e3e6a は使い分けている。 導線・CTA は #0078be、サービスブランド名は #0e3e6a。混ぜないこと。 ヒーローの上の白文字は半透明の面（rgba(255,255,255,0.29)）に乗せている（BAUHAUS FINLAND のタブ）。ベタ塗りではない。

3. Typography Rules

3.1 和文フォント

約物サブセット ＋ 和文 ＋ 総称の 3 層。

body は "Hiragino Kaku Gothic ProN" と宣言されているが、それが効いているのはフッター注記の 11 要素だけ。 実体は Noto Sans JP。computedStyles.body を根拠に書体を決めない。

document.fonts の実測（トップ）:

YakuHanJP は 9 ウェイト宣言されているが loaded は 400 だけ。 400 以外のウェイトを当てると、約物だけ Noto Sans JP に落ちて全角に戻る。3.4 で font-weight を 400 に固定する理由がこれ。 Noto Sans JP と Outfit は可変フォントとして 1 本で 100〜900 を持つ。それでも実装は 400 しか使っていない。

3.2 欧文フォント

Outfit（Google Fonts・可変）。20 要素。

• セクションラベル — PICK UP（30px）
• ヒーローのタブ — BAUHAUS / FINLAND
• 縦組みの事業ラベル — HOME+Advanced など 5 要素（3.8 参照）

本文中の英数字は Noto Sans JP のラテングリフで描かれる。 Outfit はラベル専用。

3.3 font-family 指定

css/* 見出し・リード・CTA — 約物を詰めたい文字 */
font-family: Yakuhanjp, "Noto Sans JP", sans-serif;

/* ナビ・メガメニュー・リスト — 約物が出てこない短い文字 */
font-family: "Noto Sans JP", sans-serif;

/* 欧文ラベル */
font-family: Outfit, sans-serif;

フォールバックの考え方

• YakuHanJP を先頭に置く。 約物（、。「」（）・：；）だけを収録したサブセットなので、それ以外の文字は自動的に次の "Noto Sans JP" に落ちる。これが「約物だけ半角」の仕組み
• 和文のローカルフォント名（游ゴシック・ヒラギノ）をスタックに書いていない。Noto Sans JP が落ちたら sans-serif（OS 既定）に直行する
• Yakuhanjp と小文字で書かれているが、@font-face の宣言は YakuHanJP。CSS の font-family は大文字小文字を区別しないので動作するものの、新規実装では YakuHanJP と正しく書くこと
• スタックを 2 系統に分けているのが設計。 約物が出る文（見出し・リード）は YakuHanJP 付き、出ない短い語（ナビ項目）は Noto Sans JP 単独。全域に YakuHanJP を当てていない

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

html { font-size: 10px }・body { font-size: 10px }。rem は 10px 基準。

サイズの分布（トップ・可視 309 要素）: 15px(135) → 14px(62) → 12px(35) → 22px(16) → 16px(14) → 11px(11) → 18px(9)

ウェイトの分布

400 一本で組む。 600 はメガメニューの開閉ボタン 7 要素だけ、700 は緊急のお見舞い告知 1 要素だけ。見出しを太字にしていない。階層はサイズと字間で作る。 font-weight を 400 以外にすると YakuHanJP が外れる（loaded は 400 のみ）。見出しを太くすると約物だけ全角に戻る。

3.5 行間・字間

行間は 1.40〜1.46 に集中している。

本文の行間が 1.40 と狭い。 日本語サイトの標準（1.7〜2.0）より詰まっている。情報量の多いコーポレートサイトの密度として意図的に選ばれている。1.8 に広げないこと（広げてよいのは緊急告知だけ）。

字間は「継承の px」と「見出しの em」の 2 流儀が同居している。

0.96px 0.36px 0.88px を em に読み替えないこと。 サイズが違うのに px が同じ＝上位要素に書いた em が px として継承されている。子要素で em を書き直すと値が変わる。 見出しの 0.1em / 0.08em は逆に各要素に当てている（サイズに比例して px が変わる）。大きい文字ほど空ける設計。

3.6 禁則処理・改行ルール

• 見出しは要素を分けて改行（「新築戸建・土地活用」「リフォーム・不動産」）。<br> に頼っていない
• メガメニューのラベルは [注文住宅] のように角括弧を別 span にして、親と別の字間を当てている
• 行末揃えは text-align: left

3.7 OpenType 機能

font-feature-settings: "palt" が 860 要素に継承されている。しかも YakuHanJP と併用している。

これは約物を詰める手段が二重に入っている状態。

新規実装ではどちらか一方に寄せること。

• YakuHanJP を使うなら palt は書かない（約物は YakuHanJP が処理する）
• palt だけで済ませるなら YakuHanJP を読み込まない（リクエストが 1 本減る）

実サイトは両方入れているが、同じ目的の処理を重ねる必要はない。tnum は使っていない（数字の字幅は揃えていない）。

/kodate/ では font-feature-settings が 0 要素。 同じサイト内で palt の有無が分かれている。

3.8 縦書き

縦組みは 5 要素。すべて欧文ラベル。

css/* 事業領域のラベル（HOME+Advanced など） */
.section-projects__copy {
  writing-mode: vertical-rl;
  font-family: Outfit, sans-serif;   /* 和文ではなく欧文 */
  font-size: 15px;
  line-height: 19px;                 /* 1.27 */
  letter-spacing: 1.2px;             /* 0.08em */
  color: #c7c7c7;
}

• 和文を縦に組んでいるのではない。 HOME+Advanced HOME+Upgrade Life HOME+Create-Value HOME+Global Partners HOME+More Heart の 5 つの事業ラベルを、欧文のまま縦に倒している
• 色は #c7c7c7（淡いグレー）。背景の装飾として置かれている
• 下層（/kodate/）には縦組みが無い
• 外部ウィジェット由来ではない（classes が section-projects__copy の自前クラス）

欧文を縦組みにすると字が横倒しになる。 ここでは意図的にそうしている（装飾）。読ませる文字には使わないこと。

3.9 同一サイト内の 2 つのデザインシステム

コーポレートトップと /kodate/（注文住宅）は別系統。

この DESIGN.md はコーポレート（トップ）側を採用している。 /kodate/ は商品サイトとして別に作られており、**font-weight: 300 の細い見出し（45px / 58px）と Nobel-Book の大きな欧文（78px）**という別の顔を持つ。 新規実装ではコーポレート側に統一すること。 両方を混ぜると、字間（px 継承 vs normal）と太さ（400 一本 vs 300〜900）が衝突する。

4. Component Stylings

Buttons

面を塗らない。白地に青い枠線が基本。

css/* Primary — 白地＋青枠（「カタログ請求」「住まいのご相談」） */
.btn-primary {
  font-family: Yakuhanjp, "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;      /* 1.40 */
  letter-spacing: 0.96px;   /* 継承値 */
  color: #0078be;
  background: #ffffff;
  border: 1px solid #0078be;
  border-radius: 4px;
  box-shadow: none;
}

/* Secondary — 白地・枠なし（メガメニューの項目） */
.btn-secondary {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 0.36px;   /* 継承値 */
  color: #333333;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
}

/* メガメニューの開閉ボタン — ここだけ 600 */
.btn-menu {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 21.9px;
  letter-spacing: normal;
  color: #ffffff;
  background: #0078be;
}

border-radius: 4px が既定（実測 150 要素）。ピルにも直角にもしない。 CTA を青ベタで塗らない。 青は枠線と文字に使う（ベタ塗りはメガメニューの開閉ボタンだけ）。

Cards

css.card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 0 10px 0;  /* 影は 1 種だけ */
}

影は 1 種類しかない（15 要素）。 rgba(0,0,0,0.12) 0 0 10px 0 — offset なしの全方向ぼかし。濃さも 0.12 で淡い。別の影を作らないこと。

Inputs

フォーム要素は露出していない。実装するならボタンに合わせて border-radius: 4px・border: 1px solid #0078be・フォーカスリングは #0078be で揃える。

5. Layout Principles

Container

Spacing Scale

gap の実測値: 4 / 14 / 15 / 30 / 32 / 50 / 58 / 80px。

最頻値は 50px（7 箇所）。セクション内のカラム間はここで揃える。

Grid

• メガメニューは多段（「住まい」「土地活用」「リフォーム」「複合開発」…）。1 枚の中に 20 項目以上が並ぶ
• ヒーローはタブ切り替え付きの全画面（BAUHAUS / FINLAND）。タブは rgba(255,255,255,0.29) の半透明面
• 円形要素（border-radius: 50%）が 116 箇所 — アイコン・矢印ボタン

6. Depth & Elevation

box-shadow は 1 種類だけ（15 要素）。

cssbox-shadow: rgba(0, 0, 0, 0.12) 0 0 10px 0;

• offset は 0。 下に落とさず、全方向に均等にぼかす
• 濃さは 0.12。強く落とさない

層は次の 3 つで作る。

1. この 1 種類の影 — カードを浮かせるとき
2. 面色の差 — #ffffff / #f8f8f9 / #d6dee3 / #6d7b84
3. 罫 — CTA の 1px solid #0078be

影を増やさないこと。 hover で影を濃くする指定も無い（hover は @media (hover: hover) で別に管理されている）。

Border Radius

7. Do's and Don'ts

Do（推奨）

• スタックを 2 系統に分ける。 約物が出る文（見出し・リード）は Yakuhanjp, "Noto Sans JP", sans-serif、短い語（ナビ）は "Noto Sans JP", sans-serif
• html { font-size: 10px } を前提に rem を書く
• font-weight は 400 で通す。 階層はサイズと字間で作る
• 字間は上位要素に書いて px で継承させる（0.96px / 0.36px）。見出しだけ 0.1em / 0.08em を各要素に
• 行間は 1.40〜1.46。広げるのは緊急告知（1.80）だけ
• CTA は白地＋#0078be の 1px 枠、border-radius: 4px
• 影は rgba(0,0,0,0.12) 0 0 10px 0 の 1 種類だけ
• コンテナ 1200px、gap は 50px を基準に

Don't（禁止）

• body の "Hiragino Kaku Gothic ProN" を書体の根拠にしない。 実体は Noto Sans JP（それが効いているのは 11 要素だけ）
• YakuHanJP と palt を両方書かない。 実サイトは併用しているが、同じ目的の処理を重ねる必要はない。どちらか一方に寄せる
• font-weight を 400 以外にしない。 YakuHanJP は 400 しか loaded ではないため、約物だけ全角に戻る
• letter-spacing の継承値（0.96px / 0.36px / 0.88px）を em に読み替えない。 サイズが違っても同じ px であることが設計
• 本文の行間を 1.8 に広げない。 このサイトの密度は 1.40
• 青 #0078be をベタ塗りの CTA にしない。 枠線と文字に使う
• 影を増やさない。 実測 1 種・offset 0・濃さ 0.12
• /kodate/ の作法（normal 字間・weight 300・Oswald / Nobel-Book）を混ぜない。 別のデザインシステム
• 縦組みを和文に使わない。 縦に組んでいるのは欧文の装飾ラベルだけ

8. Responsive Behavior

Breakpoints

480px を境に二分している。 中間のタブレット幅に専用のレイアウトを持たず、max-aspect-ratio: 1/1（画面が縦長かどうか）で縦向きタブレットだけを拾うのが特徴。 (hover: hover) と (hover: none) を両方書いている。 タッチデバイスにはホバーの代わりの表現を当てている。新規実装でも :hover は @media (hover: hover) の中に書く。

タッチターゲット

メガメニューの項目は 15px の文字に上下パディングを足して 44px 相当を確保している。文字サイズを上げずにパディングで作る。

フォントサイズの調整

480px 以下では本文 15px を保ち、見出し（31px / 30px / 26px / 24px）を縮める。本文は縮めない。

9. Agent Prompt Guide

クイックリファレンス

書体:
  見出し・リード・CTA … Yakuhanjp, "Noto Sans JP", sans-serif  （400 のみ）
  ナビ・リスト        … "Noto Sans JP", sans-serif             （400 / 600）
  欧文ラベル          … Outfit, sans-serif                     （400）
色:
  ブルー #0078be（枠線・文字）／ 本文 #333333 ／ サービス名 #0e3e6a
  下地 #f8f8f8 ／ 相談窓口 #d6dee3 ／ 会社案内 #6d7b84 ／ 背景 #ffffff
ルート: html / body ともに font-size: 10px（rem は 10px 基準）
字間:  上位要素に書いて px で継承（0.96px / 0.36px）／見出しだけ 0.1em・0.08em
行間:  1.40〜1.46（緊急告知だけ 1.80）
太さ:  400 で通す（YakuHanJP は 400 しか loaded ではない）
形:    radius 4px ／ 影は rgba(0,0,0,0.12) 0 0 10px 0 の 1 種のみ
       コンテナ 1200px ／ gap 50px ／ BP 480px

プロンプト例

ミサワホームの DESIGN.md に従って、商品ラインアップのページを作ってください。 見出しとリードは Yakuhanjp, "Noto Sans JP", sans-serif、ナビとリストは "Noto Sans JP", sans-serif に分けてください。 html と body の font-size は 10px です。font-weight は 400 で通してください（YakuHanJP が 400 しか読み込まれていないため、太くすると約物が全角に戻ります）。 字間は本文・ナビに px で継承させ（0.96px / 0.36px）、見出しにだけ letter-spacing: 0.1em を各要素に当ててください。 行間は 1.4〜1.46 にしてください（1.8 に広げないでください）。 CTA は白地に #0078be の 1px 枠・border-radius: 4px。影は rgba(0,0,0,0.12) 0 0 10px 0 の 1 種類だけ使ってください。 コンテナは 1200px、gap は 50px、ブレークポイントは 480px です。 palt は書かないでください（YakuHanJP が約物を処理します）。

検証チェックリスト

• 書体を body の "Hiragino Kaku Gothic ProN" から決めていないか（実体は Noto Sans JP）
• YakuHanJP と palt を両方書いていないか
• font-weight が 400 で通っているか（400 以外だと約物が全角に戻る）
• letter-spacing の継承値を em に読み替えていないか
• 行間が 1.40〜1.46 か（1.8 に広げていないか）
• html { font-size: 10px } になっているか
• CTA を青ベタで塗っていないか（白地＋青枠）
• 影が 1 種類（rgba(0,0,0,0.12) 0 0 10px 0）だけか
• 縦組みを和文に使っていないか（欧文ラベルの装飾のみ）
• /kodate/ 側の作法（normal 字間・weight 300）を混ぜていないか