IHI（株式会社IHI） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 重工業のコーポレートサイト。白地に #1E52A6 の青一色で、角丸は 3〜6px と控えめ。面で区切らず 罫線で区切る（しかもその罫線を box-shadow の inset で引いている）
• 密度: 高い。グローバルナビに 6 階層、下層はリンクリストが主体。本文は line-height: 1.8 でゆったり組む
• キーワード: 10px ルート、% でサイズを書く、inset の下線、青一色、palt を使わない

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

1. html { font-size: 0.625em } で 10px、body に font-size を一切書かない。 だから body も 10px のまま。サイズは全部 %（170% = 17px）で書く。CSS 全文で font-size: <数値>% が 155 箇所。7 つの幅（1440 / 1200 / 1024 / 834 / 768 / 767 / 375px）で測っても html も body も 1px も動かない
2. letter-spacing: 0.04em は body に 1 回だけ書いてある。しかし body が 10px なので、子へ降りるのは 0.4px という絶対値。 実測 216 要素中 214 要素が 0.4px。17px の本文では実効 0.024em で、見た目はほとんど字間ゼロ。「0.04em のサイト」ではない
3. font-feature-settings の実測は 0 件。 CSS には .feature-palt / .feature-halt というユーティリティクラスがちゃんと定義されているのに、トップ・下層とも 1 要素も使っていない。約物は詰めない
4. CSS Custom Properties は 2 個だけ（--pc-height: 400px / --sp-height: 240px）。色もサイズも余白も変数化されていない。デザイントークンは存在しない

2. Color Palette & Roles

Primary（ブランドカラー）

Neutral（ニュートラル）

• Text Primary (#333333): 本文・見出し・ナビ。可視 129 要素（トップ）/ 123 要素（下層）で最多。純黒は使わない
• Text on Dark (#ffffff): ヒーローの大見出し、青面上のテキスト（可視 40 要素）
• Text Muted (#707070): 日付、カテゴリラベル（可視 12 要素）
• Border / Divider (#dddddd): 後述のとおり box-shadow で引く
• Surface Gray (#f5f5f5): カードの面（可視 7 要素）
• Surface Blue-Gray (#f2f4f8): 地域切替パネルの面
• Gray Badge (#9f9f9f / #767676): 「English」「その他」などの小さなバッジ（各 3 要素）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）

計測に Cookiebot が混ざる。この 5 色は IHI の色ではない。 #141414（CMP の本文）、#1032CF（許可する ボタン）、#2A4EEF（CMP のリンク）、面の #F4F4F4（97 要素）と #D6D6D6（30 要素）は、すべて同意バナーの Cookie 一覧表。 uniqueBackgrounds の 1 位・2 位がこれなので、上位の色をそのまま拾うと間違える。border-radius: 3.75px と font-weight: 600 も CMP 由来で、サイト本体には存在しない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一の本文書体）: Noto Sans JP（Google Fonts / 300・400・500・700 の 4 ウェイト）。実測 212 要素（トップ）/ 143 要素（下層）
• 明朝体: Noto Serif JP 300。ただしトップページの 2 要素だけ（持続可能であるために の 54px 見出し）。下層ページではフォント要求が 0 件で、1 要素も使われない
• OS ローカルの游ゴシック・ヒラギノはフォールバックとしてのみチェーンに入る

3.2 欧文フォント

• 専用の欧文フォントは実質ない。 Lato（300/400/700/900）が Google Fonts の URL に書かれているが、フォント要求は両ページとも 0 件。1 バイトも読み込まれていない
• 数字・アルファベットは Noto Sans JP の欧文グリフで出る
• icomoon.ttf を自前配信（アイコンフォント）

3.3 font-family 指定

css/* 本文・UI（唯一のスタック） */
font-family: "Noto Sans JP",
             "Yu Gothic Medium", "游ゴシック Medium",   /* ★Windows を Medium に当てる */
             YuGothic, 游ゴシック体,                      /* macOS / Windows の Regular */
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, sans-serif;

游ゴシック問題の解き方は「スタック順」。 @font-face による別名定義も上書きも使わず、Medium を Regular より前に置くことで Windows に Medium を当てている（東京オペラシティ アートギャラリーと同じ流儀）。 ただし先頭が Web フォントの Noto Sans JP なので、通常は游ゴシックまで到達しない。これは Web フォントが落ちたときの受け皿として機能する。

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

基準は html の 10px。CSS には % で書く（170% → 17px）。以下は 1440px 幅での実測値。

ウェイトは 300 / 400 / 500 / 700 の 4 段。@font-face もこの 4 本しかない。 ナビと見出しの既定は 500（可視 80 要素）で、400（98 要素）より多い。 600 を指定しないこと — @font-face に無いので合成太字になる（実測で 600 が出るのは Cookiebot だけ）。

3.5 行間・字間

css/* body に 1 回だけ。これが全ページの基礎 */
body {
  font-size: /* 宣言なし → html の 10px がそのまま */;
  letter-spacing: 0.04em;   /* ★10px に対する 0.04em = 0.4px が絶対値で全子孫へ降りる */
  line-height: 1.8;         /* ★無単位。各要素が自分のサイズで再計算する */
  color: #333;
  background-color: #fff;
}

同じ 1 ブロックの中で、字間と行間が正反対に継承される。

• letter-spacing: 0.04em は 10px に対して計算され、0.4px という絶対値になって降りる。 可視 216 要素中 214 要素が 0.4px。17px の本文では 0.024em、61px のヒーローでは 0.0066em。大きい文字ほど字間が無くなる
• line-height: 1.8 は無単位なので、各要素が自分の font-size で掛け直す。 17px → 30.6px、14px → 25.2px と正しく追従する

行間の使い分け（実測の比率分布）:

line-height: calc(60 / 1200 * 100vw) という流体の行送りが 1 箇所だけある（見出しの装飾用）。

3.6 禁則処理・改行ルール

• word-break / overflow-wrap / line-break の宣言は body に無い（normal のまま）。ブラウザ既定の日本語禁則に任せている
• word-break: auto-phrase も使っていない

3.7 OpenType 機能

実測 0 件。このサイトは約物を詰めない。

css/* CSS には定義されているが、どのページでも 1 要素も使われていない */
.feature-palt { font-feature-settings: 'palt' 1; }
.feature-halt { font-feature-settings: 'halt' 1; }

ユーティリティクラスとして用意だけされて、適用がゼロ。 再現するときも palt を足さないこと（足すと全体の字面が変わる）。 YakuHanJP のような約物サブセットフォントも使っていない。

3.8 縦書き

該当なし。 writing-mode: vertical-* の実測は 0 件。

3.9 ヒーローは「和文＝テキスト、欧文＝SVG画像」

トップのヒーローは ihi_mv.mp4（1440×640）の動画の上に文字を重ねる。

• 和文の大見出し「世界中の人々の安心・安全、豊かな暮らしを根幹から支える」は 実テキスト（h1 / 61px / 700 / #ffffff）
• 欧文のサブコピー「For Industry & National Security」は index_main-visual-text_2026_img.svg（680×46）の画像。等幅のように字間が開いて見えるのはそのため

欧文側を Web フォントで再現しようとしないこと。 distributions.fontFamily に該当する欧文書体が 1 要素も出ないのが証拠。

4. Component Stylings

Buttons

css/* Primary（青ベタ） */
.btn-primary {
  background: #1E52A6;
  color: #ffffff;
  font-size: 140%;          /* 14px */
  font-weight: 500;
  letter-spacing: 0.4px;    /* body からの継承。宣言しない */
  border-radius: 4px;
  padding: 16px 18px;
  border: 0;
}

/* Secondary（白地に青枠） */
.btn-secondary {
  background: #ffffff;
  color: #1E52A6;
  font-size: 170%;          /* 17px */
  font-weight: 500;
  letter-spacing: 0.68px;   /* ★ここだけ 0.04em を再宣言している（17px × 0.04）*/
  border: 1px solid #1E52A6;
  border-radius: 4px;
  padding: 17px 30px;
}

/* 小さいバッジ */
.badge { background: #1E52A6; color: #fff; border-radius: 3px; padding: 5px 7px 4px; font-size: 140%; }
.badge--gray { background: #9f9f9f; }   /* English */
.badge--mid  { background: #767676; }   /* その他 */
.badge--cyan { background: #399FC4; }

• 角丸は 4px が標準（可視 9 要素）、バッジは 3px、地域切替パネルだけ 6px、アイコンの円は 50%（11 要素）
• border-radius: 3.75px は Cookiebot のボタン。採用しない

Cards

css.card {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 20px 42px 20px 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 8px 0;   /* 可視 6 要素 */
}

Inputs

• font-size: 170%（17px） / color: #333333 / 既定のまま。独自の枠線色は持たない

5. Layout Principles

ルートの決め方（このサイトの最大の特徴）

csshtml { font-size: 0.625em; }   /* = 10px。7 幅すべてで固定 */
/* body に font-size の宣言が無いので、body も 10px */

すべてのサイズを % で書く。 170% = 17px、460% = 46px。 rem も clamp() も vw も（1 箇所の line-height を除いて）使わない。

この設計の利点と落とし穴:

• 利点: 10px 基準なので % の数値がそのまま px として読める（170% → 17px）
• 落とし穴: body が 10px なので、em で書いた値はすべて 10px 基準で計算されてしまう。 実際 letter-spacing: 0.04em がこれで 0.4px に固定された（3.5 節）

Container

• 中央寄せの固定幅コンテナ。max-width の変数は無い（ハードコード）
• 変数は --pc-height: 400px / --sp-height: 240px の 2 つだけで、これはヒーロー画像の高さ

6. Depth & Elevation

このサイトの影は「罫線」である。

css/* 可視 43 要素（両ページとも同数）。リンクリストの区切り線 */
box-shadow: rgb(221, 221, 221) 0 -1px 0 0 inset;

/* カードの浮き。可視 6 要素（トップのみ） */
box-shadow: rgba(0, 0, 0, 0.16) 0 0 8px 0;

border-bottom ではなく inset の box-shadow で下線を引いている。 影は実質この 2 種類だけ。 （rgba(0,0,0,0.3) 0 30px 70px 0 は Cookiebot のモーダル。採用しない）

見出しの下線は「ハードストップのグラデーション」

css/* 左 50px だけ濃い青、そこから先は淡い青。可視 2 要素 */
background: linear-gradient(90deg, #1E52A6 50px, #B3C5E3 50px);

2 色を同じ停止位置に置いて段差を作る手口。border-bottom を 2 本並べるのではなく 1 枚のグラデーションで済ませている。

7. Do's and Don'ts

Do（推奨）

• html { font-size: 0.625em } で 10px に落とし、サイズは % で書く（170% = 17px）
• letter-spacing は body に 1 回だけ書く。 ただし下の Don't も読むこと
• line-height: 1.8 を body に無単位で書く。 見出しは 1.1〜1.3 に個別で落とす
• ウェイトは 300 / 400 / 500 / 700 の 4 段で組む。 ナビと見出しの既定は 500
• 区切り線は box-shadow: #dddddd 0 -1px 0 0 inset で引く
• 青は #1E52A6 ひとつ。 文字色は #333333、純黒は使わない
• 見出しの下線は linear-gradient(90deg, #1E52A6 50px, #B3C5E3 50px)

Don't（禁止）

• font-feature-settings: "palt" を足さない。 実測 0 件。.feature-palt が定義されていても使われていない
• letter-spacing を「0.04em のサイト」として再現しない。 body が 10px なので実際に効いているのは 0.4px（17px の本文で 0.024em）。子要素に 0.04em を配ると文字サイズに比例して広がってしまい、別物になる
• font-weight: 600 を使わない。 @font-face に無く合成太字になる（600 が出るのは Cookiebot だけ）
• Lato を読み込まない。 Google Fonts の URL には入っているが、実際のフォント要求は 0 件。使っていない
• Noto Serif JP を本文や下層に広げない。 使われているのはトップの 2 要素のみ
• ヒーローの欧文コピーを Web フォントで組まない。 実体は SVG 画像
• CSS 変数を設計トークンとして期待しない。 2 個しかなく、どちらも画像の高さ
• border-radius を 8px 以上にしない。 サイト本体は 3〜6px（8px は CMP）

8. Responsive Behavior

Breakpoints

768px / 767px の 1 箇所だけ。 7 幅で測った結果、html（10px）と body（10px / lh 18px / ls 0.4px）は 全幅で完全固定。変わるのは見出しだけ。

本文のサイズはモバイルでも 17px のまま。 834px でも 375px でも同じ。

タッチターゲット

• CTA ボタンの padding は 16px 18px（高さ約 46px）。17px 30px の二次ボタンで約 55px

9. Agent Prompt Guide

クイックリファレンス

書体:     Noto Sans JP のみ（300/400/500/700）。明朝は使わない
ルート:   html 10px（0.625em）/ body も 10px。サイズは % で書く（170% = 17px）
本文:     17px / line-height 1.8 / letter-spacing 0.4px（継承）/ #333333
見出し:   46px·700·#1E52A6（下層）、61px·700·#fff（ヒーロー）、28px·700（小）
ブランド: #1E52A6 一色。リンクも CTA もこれ
字詰め:   palt を使わない（実測 0 件）
角丸:     4px（バッジ 3px、円 50%）
影:       #dddddd 0 -1px 0 0 inset（罫線代わり・43 要素）
          rgba(0,0,0,.16) 0 0 8px（カード）
変数:     使わない（実サイトは 2 個のみ）
BP:       768 / 767 の 1 箇所。本文サイズは変えない

プロンプト例

IHI（www.ihi.co.jp）の DESIGN.md に従って、製品一覧ページを作ってください。

- html に font-size: 0.625em（10px）を置き、body には font-size を書かない
- フォントサイズは % で指定する（本文 170%、見出し 280%）
- body に letter-spacing: 0.04em と line-height: 1.8 を 1 回だけ書く
  （字間は 0.4px の絶対値として降りる。子要素で em を再宣言しない）
- font-feature-settings は書かない
- リストの区切りは box-shadow: #dddddd 0 -1px 0 0 inset
- 書体は Noto Sans JP、ウェイトは 400 と 500 だけ。600 は使わない
- 文字色 #333333、ブランド色 #1E52A6、角丸 4px

10. 計測メモ（再現時の注意）

• 可視テキスト要素はトップ 216 / 下層 150。 Cookiebot が画面下部を覆うため、interactive の最上位スコア（#1032CF の 許可する）と uniqueBackgrounds の 1〜2 位（#F4F4F4 97 要素 / #D6D6D6 30 要素）は全部 CMP
• computedStyles の p / a / span / li / button / input / label のうち、色が rgb(20,20,20)・字間が 0.1px のものは Cookiebot。サイト本体は #333333 / 0.4px
• CSS 全文は 1.24MB、@font-face は 1002 ブロック（Google Fonts の unicode-range 分割）。それでも実際のフォント要求は 3 ファイル（Noto Sans JP ×2 ＋ icomoon.ttf）
• 同意ベンダー一覧に Fontplus.jp が載っているが、FontPlus のフォント要求は 0 件。このページでは配信されていない