DAIKEN（大建工業） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: Web フォントを 1 本も読まず、OS のローカル書体だけで組む。 代わりに html の 1 行に palt と word-break: break-all を置いて、和文の見え方をブラウザ側の機能だけで整えている。面は 20px のピル・カードが基調
• 密度: 高い。1200px のコンテナにタグピル・バナー・カードを詰める。トップは可視テキスト 191 要素
• キーワード: Web フォント 0 本、html に palt、break-all、角丸 20px のピル、パステル 3 色の事業カード

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

1. Web フォントを 1 本も読み込まない。 フォントファイルのリクエストは 0 件。@font-face は CSS 全文で 3 件あるが、swiper-icons と icomoon_close07（外部 CRM ウィジェット templates-cf.karte.io 配信）というアイコン専用だけ。和文はすべて OS ローカルの書体で組む
2. html の 1 行に 4 つを押し込んでいる。 font-size: 62.5% / line-height: 1.5 / word-break: break-all / font-feature-settings: "palt" がすべて html セレクタにある。body ではないので、html の宣言を外すと全体が崩れる
3. word-break: break-all で日本語の禁則処理を無効にしている。 行末で熟語の途中でも折り返す。狭いカード内で行が溢れないことを優先した指定で、読みやすさとは引き換え
4. 本文スタックの先頭が Meiryo。 macOS では 2 番目の -apple-system に落ちるが、Windows ではメイリオが当たる。游ゴシックでもヒラギノでもなく、意図的にメイリオを第一候補にしている
5. 事業カードの h3 だけ書体が違い、しかも游ゴシックの並びが誤っている。 素材事業 / 建材事業 / エンジニアリング事業 の 3 つだけ 游ゴシック体, YuGothic, "游ゴシック Medium", … を使っているが、YuGothic（Regular）が "游ゴシック Medium" より前にあるため Windows では細く出る

2. Color Palette & Roles

Primary（ブランドカラー）

青が 3 つあるが役割が分かれている。 #0068b7 がリンクと汎用、#004d96 が会員系の導線、#3ea2a3 はユーザー登録専用。新規実装では #0068b7 を基準にしてよい。

事業カードのパステル 3 色

• 文字はどれも #333333 のまま。面だけで事業を区別する

Neutral（ニュートラル）

• Text Primary (#333333): 本文・見出し。可視 152 要素（トップ）／ 104 要素（下層）で圧倒的に最多。純黒にしない
• Text Strong (#1a1a1a): 大見出し（可視 10 要素／5 要素）
• Text Secondary (#444444 / #4f4f4f / #696969): 補足（各 1〜2 要素）
• Text on Dark (#ffffff): 塗りピル・写真上（可視 17 要素／13 要素）
• Background (#ffffff): pageBackground.resolved = rgb(255,255,255)（根拠 body）
• Surface (#f2f2f2 / #f5f5f5 / #f4f4f4): セクションの地（可視 4 要素）
• Border（濃） (#808080): DAIKEN魂！を読む などの線ボタン
• Border（既定） (#cccccc): 一覧の枠線。最もよく出る
• Border（淡） (#ababab / #aaaaaa): ピルの線

外部ウィジェット由来（実装しない）

• #1371c3（クッキー設定 ボタン・border-radius: 18px / 14px / 700）は Cookie 同意バナー
• #3860be は Cookie バナーのフィルタ UI
• icomoon_close07（templates-cf.karte.io 配信）は CRM ツールのアイコン

宣言だけで使われていない

• font-family: "HG教科書体", "HG正楷書体-PRO", serif が CSS にあるが 可視 0 要素（Windows 専用の教科書体）
• CSS カスタムプロパティは 0 個。 トップ・下層とも own: 0。色もサイズも全部ハードコードで、デザイントークンの層が存在しない

3. Typography Rules

3.1 和文フォント

• Web フォントは 0 本。 フォントファイルの要求 0 件、document.fonts は swiper-icons（unloaded）と icomoon_close07（loaded・外部 CRM）のアイコン 2 件だけ
• ゴシック体: OS ローカル。Windows は メイリオ、macOS は -apple-system（San Francisco → ヒラギノ角ゴ）
• 事業カードの h3 だけ游ゴシック（可視 3 要素）
• 明朝体: 使わない（セリフ系の和文は 2 ページとも可視 0）

3.2 欧文フォント

• 専用の欧文書体を持たない。Arial, sans-serif が 4 要素だけ（数値ラベル）
• ヒーローの筆記体 The New Flooring は画像（mv_artio01〜06.avif）。font-family の分布に筆記体は 1 要素も無い

3.3 font-family 指定

css/* 実サイトの宣言をそのまま */
body {
  font-family: Meiryo, -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.6rem;      /* = 16px（html が 62.5%）*/
  color: #333;
  font-weight: 400;
}

/* 事業カードの見出しだけ別系統（可視 3 要素） */
.business__wrap--title {
  font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
               游ゴシック, "Yu Gothic", sans-serif;
}

事業カードの游ゴシックの並びは誤っている。 YuGothic（Regular）が "游ゴシック Medium" より前にあるため、Windows では Regular に当たって細く出る。正しくは:

css/* 正しい並び（Windows で Medium を拾わせる） */
font-family: 游ゴシック体, "游ゴシック Medium", "Yu Gothic Medium",
             YuGothic, 游ゴシック, "Yu Gothic", sans-serif;

本文スタックの Meiryo 先頭も意識して書かれている。 macOS では -apple-system に落ちるため、Windows と macOS で見た目がかなり変わる設計。太さを揃えたい案件では Web フォントを入れるか、スタックの順を揃えること。

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

ルートは 62.5% = 10px 固定で、サイズは rem（1rem = 10px）で書く。6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）とも完全固定で、流体もブレークポイント切替も無い。

• ウェイトは 400 と 600 の 2 段が基本（可視 140 / 31 要素、下層 95 / 20）
• font-weight: 900 が 14 要素（トップ）／ 8 要素（下層）出るが、これは合成太字。 Web フォントを読まないため、メイリオにもヒラギノ角ゴ ProN にも Black は無く、ブラウザが Bold を機械的に太らせている。ショールーム　トップページへ（18px）、ソーシャルメディア 公式アカウント（25px）、Facebook / Instagram / YouTube などの SNS ラベル（16px）
• 700 は 6 要素だけで、うち Cookie バナー由来が含まれる

3.5 行間・字間

css/* 実サイトの宣言 */
html {
  font-size: 62.5%;                 /* = 10px */
  line-height: 1.5;                 /* ★無単位。ここから全体へ継承 */
  word-break: break-all;
  font-feature-settings: "palt";
}
body { font-size: 1.6rem; }         /* = 16px、行送り 24px */

• 行間は無単位の比率。 使われているのは 1.5（本文・見出し。可視 114 要素／65 要素で最多）と 2.0（一覧・日付。53 要素／47 要素）の 2 つ。ほかは 1.2（大見出し・15 要素）、1.25、1.6 が少量
• 一覧とリンク行だけ 2.0 に開ける。 13〜14px の小さい文字を縦に積むところで行間を広く取る設計
• 字間は normal 一択。 可視 185/190 要素（トップ）・**127/127 要素（下層は全要素）**が normal。例外は 1px 3 要素と 0.6px 3 要素のみで、下層には 1 要素も無い
• palt で詰めたあとに letter-spacing で空け直していない

3.6 禁則処理・改行ルール

csshtml { word-break: break-all; }

• break-all を html に当てている。 日本語の禁則処理を無効にし、行末で熟語の途中でも折り返す
• これは auto-phrase（改行位置を文節に寄せる）の反対側の選択。狭いカード・ピル内でテキストが溢れないことを優先している
• 再現するなら html に書く。 body に書くと html 由来の他の指定と宣言位置がずれる
• 読みやすさを優先する案件では word-break: normal（または auto-phrase）に変えること。ただしそのときはカード幅の検証をやり直す

3.7 OpenType 機能

csshtml { font-feature-settings: "palt"; }

• palt が可視 713 要素（トップ）／ 430 要素（下層）に継承されている。宣言は html の 1 行だけ
• 実測で効いていることを確認済み: 同一ページ・同一書体で 「東京・大阪」（株式会社）、デザインの話。 を組むと normal 797.61px → palt 683.28px（14.3% 詰まる）。halt は 697.61px
• Web フォントを読まなくても、OS ローカルのヒラギノ角ゴ／メイリオが palt テーブルを持っているので詰まる
• palt 以外の feature（halt / vpal / tnum）は使っていない

3.8 縦書き

使っていない（writing-mode: vertical-* は 2 ページとも 0 要素）。

4. Component Stylings

Buttons（ピル）

角丸 20px のピルが基調。塗りと線がペアで並ぶ（新規会員登録 / ログイン）。右に矢印を置くため padding-right だけ広い。

css/* Primary（塗り） */
.btn-pill-primary {
  background: #004d96;
  border: 1px solid #004d96;
  color: #ffffff;
  border-radius: 20px;
  padding: 7px 29.87px 7px 20px;   /* ★右だけ広い（矢印のぶん） */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

/* Secondary（線） */
.btn-pill-secondary {
  background: #ffffff;
  border: 1px solid #004d96;
  color: #004d96;
  border-radius: 20px;
  padding: 7px 29.87px 7px 20px;
  font-size: 16px;
  font-weight: 600;
}

/* Teal（ユーザー登録専用） */
.btn-pill-teal { background: #3ea2a3; border-color: #3ea2a3; color: #ffffff; }

/* 小さい線ピル（タグ導線・詳しくはこちら） */
.btn-pill-sm {
  background: #ffffff;
  border: 1px solid #ababab;
  color: #333333;
  border-radius: 15px;
  padding: 5px 28px 5px 15px;
  font-size: 14px;
  font-weight: 400;
}

/* 角のある線ボタン（一覧を見る） */
.btn-rect {
  background: transparent;
  border: 1px solid #808080;
  color: #333333;
  border-radius: 0;                /* ★角丸なし */
  padding: 10px 28px 10px 10px;
  font-size: 14px;
  font-weight: 600;
}

/* 検索 */
.btn-search {
  background: #0068b7;
  border: 1px solid #0068b7;
  color: #ffffff;
  border-radius: 10px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 400;
}

• 角丸は用途で 4 段: ピル 20px / 15px、検索 10px、バッジ 5px、一覧ボタン 0
• 塗りピルと線ピルで枠線は同じ 1px、色だけ入れ替える

Badges

css.badge-topics { background: #0c8752; color: #ffffff; border-radius: 5px;
                padding: 5px 0; font-size: 10px; font-weight: 400; }
.badge-news   { background: #616161; color: #ffffff; border-radius: 5px;
                padding: 5px 0; font-size: 10px; font-weight: 400; }
.badge-product{ background: transparent; border: 1px solid #0068b7; color: #0068b7;
                border-radius: 5px; padding: 5px 0; font-size: 10px; }

• 10px の極小バッジ。トピックス（緑）/ ニュース（グレー）/ 製品情報（青の線）で分類を示す
• 左右の padding は 0 で、幅は親で固定する

Cards（事業カード）

css.business__wrap {
  background: #f0f5d2;      /* または #d8e9f8 / #fdebca */
  border-radius: 20px;
  padding: 32px 16px;
  color: #333333;
  font-size: 16px;
}
.business__wrap--title {
  font-family: 游ゴシック体, "游ゴシック Medium", "Yu Gothic Medium",
               YuGothic, 游ゴシック, "Yu Gothic", sans-serif;
  font-size: 22px;
  line-height: 1.5;
}

• カードはピルと同じ 20px の角丸。影は無い

Tags

css.tag { border-radius: 15px; border: 1px solid #ababab; color: #333333;
       padding: 5px 28px 5px 15px; font-size: 14px; }

トップ上部に DAIKEN GROUP REPORT 2026 リフォーム お家ミラクルウォール などのタグピルが並ぶ。

5. Layout Principles

Spacing Scale

CSS カスタムプロパティは 0 個。px を直書きしている。

• 実測のギャップは 20px（5 要素／4 要素）・30px（2 要素）・24px（4 要素・下層）・16px・10px・8px・70px
• 20px が基準。 2 の倍数で 8 / 10 / 16 / 20 / 24 / 30 / 70px
• 内側の余白は 32px 16px（カード）、10px（一覧）、7px 20px（ピル）

Container

css.container { max-width: 1200px; margin-inline: auto; }

• 1200px が 8 要素（トップ）／ 12 要素（下層）で最多
• ヒーローは 1420px / 1440px と画面幅いっぱいに近く、本文だけ 1200px に絞る
• 狭いカラムは 520px

Grid

• 事業カードは 3 カラム、ニュースは 1 カラムのリスト。CSS Grid と flex の併用

6. Depth & Elevation

影は実質「無い」。

• rgba(0, 0, 0, 0) の 18 要素を「影がある」と読み違えない。 α が 0 なので描画されず、ホバーで 0.5 に切り替わるための初期値
• 平常時の階層は面色（白 / #f2f2f2 / パステル 3 色）と 1px の線だけで作る
• filter: drop-shadow() は SVG の <g> 2 要素だけ（ヒーローのロゴ装飾）。テキストには掛かっていない

7. Do's and Don'ts

Do（推奨）

• html に 4 つまとめて書く: font-size: 62.5% / line-height: 1.5 / word-break: break-all / font-feature-settings: "palt"
• Web フォントを読み込まない。 OS ローカルの書体 ＋ palt で組む
• サイズは rem（1rem = 10px）で書く。 本文 1.6rem、一覧 1.4rem、補足 1.3rem
• 本文色は #333333（純黒にしない）、大見出しだけ #1a1a1a
• 行間は 1.5（本文・見出し）と 2.0（一覧・日付）の 2 つを無単位で
• 字間は normal。一切いじらない
• ウェイトは 400 と 600 の 2 段で組む
• 角丸はピル 20px / 小ピル 15px / 検索 10px / バッジ 5px / 一覧ボタン 0 の 5 段
• ピルの padding-right を広く取る（7px 29.87px 7px 20px）。矢印を置く場所
• 事業・分類はパステルの面色（#f0f5d2 / #d8e9f8 / #fdebca）で分ける。 文字色は変えない
• 影を使わない。 面色と 1px の線で階層を作る
• コンテナは 1200px、ギャップは 20px 基調

Don't（禁止）

• font-weight: 900 を当てない。 Web フォントが無いので合成太字になる（メイリオにもヒラギノ角ゴ ProN にも Black は無い）。実サイトは 14 要素に当てているが、太さは機械的に水増しされているだけ
• font-weight: 700 も避ける。 サイト本体は 400 / 600 の 2 段
• 游ゴシックのスタックを YuGothic, "游ゴシック Medium" の順で書かない（実サイトはそうだが Windows で細く出る）。Medium を先に置く
• Meiryo 先頭のスタックを無批判に真似しない。 Windows と macOS で太さ・字形が大きく変わる。太さを揃えたい案件では Web フォントを入れる
• box-shadow: 0 0 10px rgba(0,0,0,0) を「影」として実装しない（α が 0 の初期値）
• ヒーローの筆記体を Web フォントで実装しない。 The New Flooring も 2026年8月 新床材 Artio（アーティオ）誕生 も mv_artio*.avif に焼き込まれた画像で、font-family の分布に筆記体は 1 要素も無い
• "HG教科書体" / "HG正楷書体-PRO" を実装しない（宣言だけ・可視 0・Windows 専用）
• #1371c3 / border-radius: 18px を実装しない（Cookie バナー由来。サイト本体に 18px の角丸は無い）
• word-break: break-all を body に移さない（html の他の宣言とセットで効いている）
• CSS カスタムプロパティがある前提で書かない。 このサイトは own: 0

8. Responsive Behavior

Breakpoints

css/* 実サイトの最頻（上位 5 件） */
@media screen and (max-width: 599px) { }                          /* 83 箇所 */
@media (any-hover: hover) { }                                     /* 59 箇所 */
@media screen and (min-width: 600px) { }                          /* 41 箇所 */
@media screen and (min-width: 1025px) { }                         /* 39 箇所 */
@media screen and (min-width: 600px) and (max-width: 1024px) { }  /* 34 箇所 */

• 境界は 600 / 1025 の 2 本（= 599 以下 / 600〜1024 / 1025 以上の 3 段）。768px は使わない
• @media (any-hover: hover) を 59 箇所で使い、ホバー演出をポインタがある端末に限定している

タッチターゲット

• ピルは padding: 7px … ＋ 16px 文字で高さ約 38px。44px を下回るので min-height: 44px を別途保証する
• 10px のバッジは装飾（タップ対象ではない）

フォントサイズの調整

• html は全幅 62.5% = 10px 固定、body は 16px / 行送り 24px 固定。 6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）とも完全に動かない
• 流体（vw / clamp()）も、ルートの階段切替も使っていない
• モバイルで小さくするところは、各要素が @media screen and (max-width: 599px) の中で rem を個別に書き換える

9. Agent Prompt Guide

クイックリファレンス

ブランド色: #0068b7（基準の青）／#004d96（会員導線）／#3ea2a3（ユーザー登録）
バッジ: #0c8752（トピックス）／#616161（ニュース）／#0068b7 の線（製品情報）
事業カード: #f0f5d2（素材）／#d8e9f8（建材）／#fdebca（エンジニアリング）
本文色: #333333 ／ 大見出し #1a1a1a
地色: #ffffff ／ 面 #f2f2f2 ／ 線 #cccccc（既定）・#808080（濃）・#ababab（淡）
書体: Meiryo, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif
      ★Web フォントは 0 本
ルート: html { font-size: 62.5% } = 10px 固定（全幅）
本文: 1.6rem = 16px / 行送り 24px
ウェイト: 400 / 600（700・900 は使わない＝合成太字）
文字サイズ: 40 / 30 / 22 / 20 / 16 / 15 / 14 / 13 / 12 / 10px
行間: 1.5（本文・見出し）/ 2.0（一覧・日付）無単位
字間: normal（一切いじらない）
palt: html に "palt"（14.3% 詰まる）
word-break: break-all（html に書く）
角丸: 20px（ピル・カード）/ 15px / 10px / 5px / 0
影: 使わない（rgba(0,0,0,0) は初期値）
コンテナ: 1200px ／ ギャップ 20px 基調
ブレークポイント: 600 / 1025 ／ ホバーは @media (any-hover: hover)
CSS 変数: 0 個

プロンプト例

DAIKEN のデザインシステムで製品一覧ページを作って。 Web フォントは読み込まない。 html に font-size: 62.5% / line-height: 1.5 / word-break: break-all / font-feature-settings: "palt" の 4 つをまとめて書き、body は font-family: Meiryo, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif / 1.6rem / #333333。 サイズは rem（1rem = 10px）で、本文 1.6rem・一覧 1.4rem・補足 1.3rem。ルートは全幅固定で流体にしない。 ウェイトは 400 と 600 の 2 段だけ（900 は合成太字になるので使わない）。行間は本文 1.5 / 一覧 2.0、字間は normal。 導線は角丸 20px のピルで、padding: 7px 29.87px 7px 20px と右だけ広く取って矢印を置く。塗りは #004d96、線は白地に #004d96 1px。 分類は 10px のバッジで #0c8752（トピックス）/ #616161（ニュース）/ #0068b7 の線（製品情報）。 事業カードは角丸 20px にパステル（#f0f5d2 / #d8e9f8 / #fdebca）を敷き、文字色は #333333 のまま。 影は使わず、面色と 1px の #cccccc の線だけで階層を作る。コンテナは 1200px、ギャップ 20px。 ブレークポイントは 600 / 1025 の 2 本、ホバー演出は @media (any-hover: hover) で囲う。