大林組（OBAYASHI） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 約物サブセットフォントで括弧と句読点だけ詰め、letter-spacing は一切書かない。 角丸ゼロ・影ゼロ。写真とグレースケールの面だけで組む、ゼネコンの企業サイト
• 密度: 中。ナビゲーションは 14.08px（0.88rem）で細かく、本文は 16px / line-height: 1.8 でゆったり組む
• キーワード: YakuHanJPs、游ゴシック Medium、角丸ゼロ、影ゼロ、モノクローム、1px の緑

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

1. 約物サブセット（YakuHanJPs）＋ 游ゴシック Medium 別名の2層構成。 実測で 可視テキスト 353 要素中 337 要素がこのスタック。font-feature-settings は 0 要素、letter-spacing は 353 要素中 346 要素が normal。つまりこのサイトは字間を一切いじらない。詰まって見えるのは約物サブセットだけの効果
2. border-radius も box-shadow も、2 ページの実測で 0 種類。 CSS 全文でも border-radius: 50%（丸アイコン）と 999px / 18px / 5px が各1件ずつあるだけ。面は必ず直角、浮かせない
3. font-weight は 400 と 700 の2段だけ。 実測 400 が 301 要素、700 が 52 要素。500・600 は 1 要素も無い
4. コーポレートグリーン #018A0E は、静止状態では 1 要素も描画されない。 ナビ項目の下に height: 1px の線として仕込まれ、opacity: 0 からホバーで現れるだけ。ブランド色を面に塗らない

2. Color Palette & Roles

Primary（ブランドカラー）

ブランド色は「塗る色」ではなく「引く線」。 ロゴマークの緑三角以外、緑は 1px の下線としてしか出てこない。新規実装で #018A0E をボタンの面色に使うと、このサイトの構えから外れる。

News カテゴリ色（:root 変数・記事種別のラベル文字色）

4色はバッジの左端 4px の帯にだけ使う。 バッジ本体は background: #eff0f2 / 文字 #272727 で種別を問わず共通、::before に width: 4px; height: 100% を置いて種別色を塗る。実測のバッジ面は #eff0f2 が 30 要素。 暗い面のニュース一覧ではバッジが #585858・幅 190px・左帯 5px に切り替わる（実測 14 要素）。文字色に種別色を使わない。

Neutral（ニュートラル）

• Text Primary (#272727): 本文・見出し（可視 94 要素）
• Text Secondary (#666666): --notice-text-color。注記、ボタンのホバー黒（可視 46 要素）
• Text Tertiary (#767676): --news-tab-text-color。ニュースのタブ（可視 4 要素）
• Text on Dark (#d5d5d5): フッター上のテキスト専用（可視 126 要素 = 2 ページ合計。白ではなく薄いグレーを置く）
• Border (#cad0d5): 罫線。CSS 全文で 37 回。このサイトで最も多い線色
• Surface Badge (#eff0f2): ニュース種別バッジの面（可視 30 要素）
• Surface Notice (#f1f2f4): --important-notice-background。重要なお知らせ帯
• Footer (#565656): フッター全面。border-bottom: 10px solid #565656 も同色
• Hover Fill (#d6dade): --basic-button-hover-color。淡グレーのボタンのホバー
• Background (#ffffff): ページ背景

pageBackground.resolved は信用しない。 トップは rgb(0,0,0)（根拠 viewportTopBySample (9/12)・div.swiper）、下層は rgb(39,39,39)（div.keyVisual）を返すが、どちらもヒーローの色。html / body はともに rgba(0,0,0,0) で、コンテンツの地色は #ffffff。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: 游ゴシック Medium。Windows で Regular に落ちる問題を MyYuGothicM という別名 @font-face（local() のみ）で吸収している
• 約物サブセット: YakuHanJPs（Web フォント）。スタックの先頭に置き、括弧・句読点だけを詰める
• 明朝体は使わない

3.2 欧文フォント

• Roboto（Web フォント・--en-font-family）: 英字セクション見出しと通し番号専用。NEWS が 70px / weight 700、カルーセルの 01 | 05 が 15px
• 和文のラテングリフは游ゴシックのものをそのまま使う（英数字だけ Roboto に逃がすことはしない）

3.3 font-family 指定

css/* 本文・UI（html, body に 1 回だけ宣言して全体に継承させる） */
font-family: "YakuHanJPs", "MyYuGothicM", "游ゴシック Medium", "Yu Gothic Medium",
             "游ゴシック体", YuGothic,
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
             "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 游ゴシック Medium を Windows でも当てるための別名（実サイトのまま） */
@font-face {
  font-family: "MyYuGothicM";
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}
@font-face {
  font-family: "MyYuGothicM";
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");
}

/* IE 向け（游ゴシックを丸ごと外してヒラギノ→メイリオへ） */
@media all and (-ms-high-contrast: none) {
  html, body {
    font-family: "YakuHanJPs", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
                 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
}

/* 英語ページ */
html:lang(en) body {
  font-family: "YakuHanJPs", Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* 欧文見出し・通し番号 */
font-family: "Roboto", sans-serif;   /* --en-font-family */

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

• YakuHanJPs を必ず先頭に置く。 約物（（）「」、。・：）だけを含むサブセットなので、先頭に置いても和文本体は次の游ゴシックに落ちる
• MyYuGothicM → "游ゴシック Medium" → "Yu Gothic Medium" → 游ゴシック体 → YuGothic の順で、OS と Chrome/Firefox の差を4段で吸収している
• html, body の両方に書いている（html だけだとフォームコントロールに継承されないため）

3.4 Web フォントの実際

MyYuGothicM が error でも設計は壊れない。 local() しか書いていないので、游ゴシックが無い環境では次の "ヒラギノ角ゴ Pro W3" に落ちるだけ。このエラーは意図どおりで、再現実装でも src に URL を足してはいけない（別の書体になる）。

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

サイズはすべて rem。ただし px を 16 で割って小数2桁に丸めているため、実測は半端な値になる。

丸めた rem の実例（CSS 出現回数）: 0.88rem 66回 / 0.75rem 36回 / 1rem 35回 / 0.82rem 32回 / 1.13rem 23回 / 1.25rem 15回 / 0.94rem 13回 / 0.63rem 12回。

DESIGN.md を読んで実装するときは、rem 値をそのまま書くこと。 14.08px を 14px に丸めると 66 箇所すべてがズレる。逆に「14px にしたい」という理由で 0.875rem に直すのも、既存ページと 0.08px ズレる。このサイトの単位は rem で、丸めた値そのものが仕様。

同じセレクタに rem が二重宣言されている箇所がある。 例: .heading-type2__title { font-size: 1.13rem; font-size: 1.125rem; }（後勝ちで 18px）、.heading-type1__title { font-size: 1.375rem; font-size: 8.2vw; font-size: 1.375rem; }（vw を書いて直後に取り消している）。実装値は最後の宣言。

3.6 行間・字間

• 本文の行間: 1.8（/company/philosophy.html の理念本文で 21 要素）
• 既定の行間: 1.7（実測 113 要素で最多。ナビ・リスト・注記）
• カード・見出しの行間: 1.5（実測 99 要素）
• セクション見出しの行間: 1.6（実測 33 要素）
• 本文の字間: normal。書かない（実測 353 要素中 346 要素）
• 例外はヒーローのキャプションのみ: letter-spacing: 0.01em（28px に対して 0.28px・7 要素）

ガイドライン:

• letter-spacing を足さない。 このサイトの「詰まった見え」は YakuHanJPs が作っている。em を重ねると約物が二重に詰まって崩れる
• CSS 全文の letter-spacing は 0（5件）、-1em（3件・inline-block の隙間潰し hack）、0.05em（1件）、0.01em（1件）だけ。-1em は組版ではなくレイアウト hack なので真似しない

3.7 OpenType 機能

css/* このサイトは font-feature-settings を 1 要素も使っていない */

• palt は 0 件（2 ページ・353 要素すべて normal）
• 約物の詰めは palt ではなく YakuHanJPs（サブセット書体）で行う。 これはブラウザ・OS を問わず同じ見えになる反面、詰まるのは約物だけで、かなと漢字の間は詰まらない

3.8 縦書き

css/* 該当なし。writing-mode は 2 ページで 0 要素 */

4. Component Stylings

Buttons

このサイトに面で塗った CTA は無い。押せるものは「罫で囲む」か「テキストリンク」のどちらか。

Basic（淡グレー・罫線）

• Background: #ffffff
• Text: #272727
• Border: 1px solid #cad0d5
• Border Radius: 0
• Font Size: 0.88rem（14.08px）/ Weight: 700
• Hover: Background #d6dade（--basic-button-hover-color）

Basic Black

• Background: #272727
• Text: #ffffff
• Border Radius: 0
• Hover: Background #666666（--basic-button-black-hover-color）

Badges（ニュース種別）

css.news-section__list__item__category {
  display: grid; place-items: center;
  background: #eff0f2;          /* 種別で変えない */
  color: #272727;
  min-height: 21px;
  font-size: 0.6875rem;         /* 11px。モバイルは 0.625rem = 10px */
  font-weight: 700;
  border-radius: 0;
  position: relative;
}
/* ★種別色は左端 4px の帯にだけ使う */
.news-section__list__item__category::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--news-press-release);   /* --news-ir / --news-sustainability / --news-others */
}

暗い面のニュース一覧では別バリアントになる。

css.select-news-section__list__item__category {
  background: #585858; color: #ffffff;
  width: 190px; min-height: 20px; margin: 16px 0 10px;
  font-size: 0.75rem; font-weight: 700;
}
.select-news-section__list__item__category::before { width: 5px; height: 100%; background: white; }

• ニュースの見出しリンクは text-decoration: underline
• ニュースのタブは選択中だけ ::after に border-bottom: 1px solid black を敷く

Cards

• Background: #ffffff
• Border: 1px solid #cad0d5（または罫線のみ）
• Border Radius: 0
• Shadow: none
• Hover: transform: scale(1.05) / transition: scale 0.35s ease-out（--hover-scale-value / --hover-scale-transition）

ホバーは色ではなく拡大で示す。 カード全体を 1.05 倍にする挙動が変数化されている。

Nav Item

• Font Size: 0.88rem（14.08px）/ Weight: 700
• 下線: ::before に height: 1px / background-color: #018A0E / opacity: 0 → ホバーで opacity: 1
• transform-origin: right center（右から左へ引く）

5. Layout Principles

Container

• ヘッダーの左右 padding: 30px / 上下 20px

Grid / Gap

実測の gap は小さい値に偏る（リスト項目の区切りに使い、カードの間隔は margin で取っている）。

Spacing

余白は em と % で書かれている（margin-bottom: 10% / padding: 6.25% 0 0 / margin-top: 0.8em）。px の固定余白はほとんど無いので、再現実装でも比率で持つ。

6. Depth & Elevation

• 実測 2 ページで box-shadow は 0 種類。 CSS 全文でも 0px 0px 2px 3px rgba(0,0,0,0.2) が 1 件（フォーカスリング相当）あるだけ
• 奥行きは影ではなく、罫線（#cad0d5 1px）と面の明度差（#ffffff / #eff0f2 / #f1f2f4 / #565656）で作る

7. Do's and Don'ts

Do（推奨）

• YakuHanJPs をスタックの先頭に置く。 これが約物の詰めを担う
• html, body の両方に font-family を書く（実サイトがそうしている）
• font-weight は 400 と 700 だけ使う
• border-radius: 0 を明示する
• 本文は line-height: 1.8、それ以外は 1.7 を既定にする
• サイズは丸めた rem をそのまま書く（0.88rem / 0.82rem / 2.38rem）
• ブランドグリーン #018A0E は 1px の線としてだけ使う

Don't（禁止）

• letter-spacing を足さない。 このサイトは 346/353 要素が normal
• font-feature-settings: "palt" を足さない。 実サイトは 0 件で、YakuHanJPs と二重に効いて崩れる
• box-shadow を足さない（実測 0 種）
• border-radius を足さない（実測 0 種）
• font-weight: 500 / 600 を使わない（実サイトに 1 要素も無い）
• MyYuGothicM の @font-face に URL を足さない。 local() だけなのが仕様
• #018A0E をボタンやバッジの面色にしない
• 本文の色に #000000 を使わない（#272727）
• letter-spacing: -1em を組版として真似しない（inline-block の隙間潰し hack）

8. Responsive Behavior

Breakpoints

実装は max-width 主体（デスクトップファースト）。

モバイルでのサイズ調整

• 見出しは rem を下げる（1.75rem → 1.375rem、1.25rem → 1.13rem）
• 余白は % で持っているので自動で縮む（margin-bottom: 10% など）

タッチターゲット

• ナビ項目の padding は 47px 58px 0 0 と大きく取る（デスクトップ）。モバイルではアコーディオンに切り替わる

9. Agent Prompt Guide

クイックリファレンス

Brand Green:   #018A0E   （1px の下線としてのみ。面に塗らない）
Text Primary:  #272727
Text Secondary:#666666
Text on Dark:  #d5d5d5
Border:        #cad0d5
Surface:       #eff0f2 / #f1f2f4
Footer:        #565656
Background:    #ffffff

Font: "YakuHanJPs", "MyYuGothicM", "游ゴシック Medium", "Yu Gothic Medium",
      "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
      "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Font (EN): "Roboto", sans-serif

Body Size:  16px (1rem)   Line Height: 1.8
Nav Size:   0.88rem (14.08px) / 700
Letter Spacing: normal（書かない）
Border Radius: 0   Box Shadow: none
Container: 1240px（読み物は 800px）
Weights: 400 / 700 のみ

プロンプト例

大林組のデザインシステムに従って、事業一覧のカードグリッドを作成してください。

- font-family は上記スタックをそのまま使う（YakuHanJPs を先頭に置く）
- letter-spacing は書かない。font-feature-settings も書かない
- border-radius: 0、box-shadow: none を明示する
- カードの枠は 1px solid #cad0d5
- カード見出しは 1.25rem / 700 / line-height 1.6、本文は 1rem / 400 / line-height 1.8
- カテゴリバッジは面 #eff0f2 / 文字 #272727 / 11px / 700 / radius 0。
  種別色は ::before の width:4px; height:100% の左帯にだけ塗る（文字色にしない）
- ホバーはカード全体を transform: scale(1.05) / transition: scale .35s ease-out
- コンテナは max-width: 1240px
- 文字色は #272727。#000000 は使わない