KDDI DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 通信キャリアのコーポレートサイト。白地に #222222 の文字、角丸 8px をほぼ全要素に効かせた、丸く柔らかい面の集合。ブランドの紺 #0E0D6A とシアン #1EACE5 はアクセントとして点でしか出さない
• 密度: 中〜高。カード主体で、見出しには一律 0.08em の字間を当てる
• キーワード: 34 個の設計トークン、12 カラム 1256px、角丸 8px、影ゼロ、0.08em、filter で色を配る

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

1. CSS Custom Properties が 34 個あり、色・レイアウト・動き・ヘッダー高さ・カルーセルの再生状態まで変数で持っている。 このリポジトリの収録サイトの中でも厚いほうの設計トークン
2. --content-grid-width--pc: 68px × 12 ＋ --content-grid-gap--pc: 40px × 11 = 1256px = --content-width。 コンテナ幅が 12 カラムグリッドの計算結果として定義されている
3. 字間は em を各要素に当てる。既定は 0.08em。 48px の見出しなら 3.84px、16px の本文なら 1.28px と、サイズに比例して px が変わる（body から継承する設計ではない）
4. トップと下層でテンプレートが違う。 トップは html に font-size 宣言が無く UA 既定の 16px、下層は html { font-size: 62.5% } の 10px。palt の配り方も、トップはコンポーネント単位で 51 箇所（実測 202 要素）、下層は body に 1 行（実測 1047 要素）と正反対

2. Color Palette & Roles

Primary（ブランドカラー）

ブランドの紺は驚くほど出てこない。 #0E0D6A の実測は両ページ合わせて 3 要素だけ。このサイトの印象を作っているのは紺ではなく #222222 の文字と角丸 8px の白い面。

Semantic（意味的な色）

Neutral（ニュートラル）

--rgb 付きの別名が 3 つある（--color_text_main--rgb: 34 34 34 など）。rgb(var(--color_text_main--rgb) / 0.6) のように透明度を後から足すため。

色を filter で配るトークン（このサイト固有）

css--color_text_main--filtered:  brightness(0) saturate(100%) invert(4%) sepia(0%) saturate(1…);
--color_link_hover--filtered: brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(…);

黒い PNG / SVG アイコンを filter で #222222 や #1D9BFF に塗り替えるための文字列。 fill を持たない画像アイコンにブランド色を当てる手口で、色トークンが 2 種類の形（hex と filter）で並行して存在する。

グラデーション

css/* 下層ページの main の地 */
background: linear-gradient(1.72deg, #DAE2EA 15.13%, #ECF0F3 54.34%, #F9F9F9 70.26%, #E5EAF0 88.37%);
/* カード */
background: linear-gradient(225deg, #E7E9F2 22.4%, #FFFFFF 97.14%);

角度 1.72deg・停止位置 15.13% / 54.34% / 70.26% / 88.37% は丸めずそのまま写すこと。

• Background: #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 トップは viewportTopBySample (3/3)、下層は body）

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP（Google Fonts の可変フォント、wght@100..900）。明朝は使わない
• OS ローカルの和文書体はスタックに入れない（受け皿は欧文のみ）

3.2 欧文フォント

• サンセリフ: DM Sans（Google Fonts の可変フォント、100 1000）。和文より先に置くので、数字・英字は DM Sans で出る
• フォールバックは "Helvetica Neue", Helvetica, Arial, sans-serif

3.3 font-family 指定

css/* 下層テンプレート（正しい書き方） */
font-family: "DM Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;

欧文優先のスタック。 和文グリフを持たない DM Sans が先頭にあるため、英数字は DM Sans、和文は Noto Sans JP に自動で振り分けられる（和欧二層の標準的な作り）。

実サイトの誤り: トップページだけ Helvetica が 2 回入っている。 "DM Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif（可視 252 要素）。 2 回目は 1 回目で必ずマッチするので到達しない。実害は無いが、正しくは 1 回。

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

トップと下層でルートが違う（5 節参照）。以下は 1440px での実測。

トップページ（html 16px / body 16px）

下層ページ（html 10px / body 15px）

ウェイトは 300 / 400 / 500 / 600 の 4 段（700 は下層に 1 要素だけ）。 Noto Sans JP も DM Sans も可変フォントなので、中間値も含めてすべて実在する。 見出しの既定は 400 か 500。「見出しほど太い」設計ではない —— 42px の見出しが 400、24px のサブ見出しが 500 になる場面がある。

3.5 行間・字間

字間は em を各要素に当てる。body から継承させない。

css/* CSS に書かれている宣言値（全 11 種） */
letter-spacing: 0.01em;   /* 最小の UI */
letter-spacing: 0.04em;   /* 日付・フッターリンク */
letter-spacing: 0.045em;  /* グローバルナビ */
letter-spacing: 0.05em;   /* キャプション */
letter-spacing: 0.06em;
letter-spacing: 0.08em;   /* ★既定。見出しも本文も基本これ */
letter-spacing: 0.1em;
letter-spacing: -0.02em;  /* 欧文の大きな見出し */
letter-spacing: -0.12em;  /* 装飾の数字 */
letter-spacing: 2px;      /* 1 箇所だけ px 直書き */

0.08em がサイズに比例して px に化けるので、分布には 3.84 / 2.88 / 2.56 / 1.92 / 1.44 / 1.28 / 1.2 / 1.12 / 0.96px が並ぶ。 これを「px で継承されている」と読まないこと —— サイズが違えば px も違う＝各要素が em を持っている証拠。

行間（無単位。CSS の宣言値は 1 / 1.4 / 1.5 / 1.6 / 1.7 / 1.75 / 1.8 / 2 / 2.1）:

3.6 禁則処理・改行ルール

css/* 下層テンプレートのみ */
body { word-wrap: break-word; word-break: break-word; }

break-word は break-all と違い、1 行に収まらない語だけを途中で折る。 日本語の禁則は保たれる。 トップページの body は word-break: normal —— ここもテンプレート差。 word-break: auto-phrase は使っていない。

3.7 OpenType 機能

実測 202 要素（トップ）/ 1047 要素（下層）。宣言のしかたが 2 通りある。

css/* 下層テンプレート: body に 1 行で全体へ配る */
body {
  font-size: 1.5rem;
  line-height: 1.7;
  font-feature-settings: 'palt' on;
}
@media (max-width: 767.98px) { body { font-size: 1.4rem; font-feature-settings: 'palt' on; } }

/* トップテンプレート: body には書かず、コンポーネントごとに 51 箇所 */
.top-hero__item__heading__title    { font-size: 40px; font-weight: 400; line-height: 1.5; font-feature-settings: "palt" 1; }
.top-heading2__title               { font-size: 36px; font-weight: 400; line-height: 1.4; font-feature-settings: "palt" 1; }
.footer-link__list > li > [class*="__type"] { font-size: 15px; font-feature-settings: "palt" 1; }
.cmn-link-list-v3 > li > [class*="__type"]  { font-feature-settings: "palt" 1; }

同じサイトで palt の配り方が 2 通りある。 新規実装では body に 1 行（下層の流儀）で足りる。 halt / vpal / tnum は使っていない。YakuHanJP も使っていない。

3.8 縦書き

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

3.9 ヒーローは実テキスト

トップのヒーローは Swiper のカルーセル（index_slide01_*.webp 1440×743）。 大見出し「KDDIが取り組む地域の魅力化」は画像ではなく実テキスト（.top-hero__item__heading__title / 40px / 400 / lh 1.5 / palt）。サブタイトルは 24px / 500 / lh 1.0。

heroCover は false を返すが、ヒーローは Swiper のカルーセル。候補の色が同時に DOM にあるため、pageBackground は下層ページと突き合わせて確認した（両方 #ffffff）。

4. Component Stylings

Buttons

css/* Primary（紺ベタ・ヘッダーの お問い合わせ） */
.btn-primary {
  background: var(--color_main_key);      /* #0E0D6A */
  color: var(--color_mono_white);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.72px;                 /* 0.06em */
  border-radius: 8px;
  padding: 7px 14px 6px;
  border: 0;
}

/* Secondary（淡いグレー面・ENGLISH / サイト内検索） */
.btn-secondary {
  background: var(--color_mono_bg_light); /* #F1F2F6 */
  color: var(--color_text_main);          /* #222222 */
  font-size: 12px;
  letter-spacing: 0.12px;                 /* 0.01em */
  border-radius: 8px;
  padding: 7px 14px 6px;
}

/* Dark（黒ベタ・タブの選択状態） */
.btn-dark {
  background: var(--color_mono_bg_black); /* #222222 */
  color: #ffffff;
  border: 1px solid #222222;
  font-size: 15px;
  letter-spacing: 0.6px;                  /* 0.04em */
  border-radius: 8px;
  padding: 6px 15px;
}

/* Outlined（タブの非選択） */
.btn-outlined {
  background: transparent;
  color: var(--color_text_main);
  border: 1px solid var(--color_text_darkgray);   /* #626262 */
  border-radius: 8px;
  padding: 6px 15px;
}

/* カルーセル上のピル（半透明） */
.pill { background: rgba(34, 34, 34, 0.6); color: #fff; border-radius: 14px; padding: 4px 12px; font-size: 12px; }

• 角丸は 8px が標準（トップ 89 要素 / 下層 33 要素）。カードは 6px（下層 49 要素）、ピルは 14px、小さいチップは 4px
• Outlined の枠は --color_text_darkgray。専用の border トークンは持たない

Cards

css.card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color_mono_bg_dark);   /* #DDE0E7 */
  border-radius: 8px;
  padding: 20px 16px 15px 19px;
  /* box-shadow は無い */
}

Inputs

• font-size: 15px / color: #222222 / border-radius: 8px

5. Layout Principles

ルートの決め方（テンプレートで違う）

css/* トップページ: html に font-size の宣言が無い → UA 既定の 16px */
body {
  font-size: 16px;      /* 実測。line-height / letter-spacing は normal */
  word-break: normal;
}

/* 下層ページ */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }   /* = 10px */
body {
  max-width: 1920px;
  margin: 0 auto;
  font-family: "DM Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;             /* = 15px */
  font-weight: 400;
  line-height: 1.7;
  font-feature-settings: 'palt' on;
  word-break: break-word;
  background-color: #fff;
  color: #222;
}
@media (max-width: 767.98px) { body { font-size: 1.4rem; } }   /* = 14px */

新規実装では下層の流儀（html 62.5% ＋ body 1.5rem）に揃えること。 7 幅（1440 / 1200 / 1024 / 834 / 768 / 767 / 375px）で測ると html も body も各テンプレート内では固定。流体なのは一部のコンポーネントだけ（min() / clamp() が計 30 箇所）。

Grid / Container

css:root {
  --content-width: 1256px;
  --content-side--pc: 58px;
  --content-side--sp: clamp(16px, 8.21vw, 32px);
  --content-grid-width--pc: 68px;
  --content-grid-gap--pc: 40px;
  --content-grid-gap--sp: 16px;
  --padding-inline: min(15px, calc(15 / 1372 * 100vw));
}

12 カラム。 68px × 12 + 40px × 11 = 816 + 440 = 1256px。--content-width はこの計算結果。 左右の余白は PC で 58px、SP は clamp(16px, 8.21vw, 32px) の流体。 ページ全体は max-width: 1920px で中央寄せ（下層テンプレート）。

動きのトークン

css--transition_duration: 0.5s;
--transition_easing: ease-out;
--transition_delay: 0s;
--transition_default-set:   var(--transition_duration) var(--transition_easing) var(--transition_delay);
--transition_animation-set: 0.3s var(--transition_easing) var(--transition_delay);

ホバー等は 0.5s / ease-out、アニメーションは 0.3s。 transition: color var(--transition_default-set) のように使う。

ヘッダーとカルーセルのトークン

css--header-height--pc: 121px;
--header-height--sp: 78px;
--header-height: var(--header-height--sp);   /* メディアクエリで PC 値に差し替える */
--header-megamenu-height: 0;                 /* JS がメガメニューの高さを書き込む */

--top-hero-indication-time: 5000ms;          /* カルーセルの 1 枚あたりの表示時間 */
--top-hero-animation-state: paused;          /* JS が running / paused を書き換える */
/* --top-tobira-* / --top-news-carousel-* も同じ 2 つ組 */

JS が書き換える前提の変数を CSS 側で宣言しておく設計。 再生・一時停止を animation-play-state にそのまま流す。

6. Depth & Elevation

影を使わない。 box-shadow の実測は 両ページとも 0 種。

階層は次の 3 つで作る。

1. 面の色 —— #ffffff / rgba(255,255,255,0.8) / #F1F2F6 / rgba(241,242,246,0.9)
2. 1px の枠線 —— 1px solid #DDE0E7
3. グラデーション —— linear-gradient(1.72deg, #DAE2EA 15.13%, …) を main の地に敷く

7. Do's and Don'ts

Do（推奨）

• 色・レイアウト・動きを CSS Custom Properties で持つ。 命名は --color_<系統>_<役割>（アンダースコア区切り）
• html { font-size: 62.5% } ＋ body { font-size: 1.5rem; line-height: 1.7 }（下層テンプレートの流儀）
• font-feature-settings: 'palt' on を body に 1 行
• 字間は em を各要素に当てる。既定は 0.08em、小さい UI は 0.04〜0.05em
• 角丸は 8px（カード 6px、ピル 14px）
• ウェイトは 300 / 400 / 500 / 600 の 4 段。見出しは 400 か 500
• グリッドは 12 カラム（68px × 12 ＋ gap 40px × 11 = 1256px）
• 透明度が要る色は --rgb の別名を作る（rgb(var(--color_text_main--rgb) / 0.6)）
• アイコン画像の色替えは filter トークンで持つ

Don't（禁止）

• box-shadow を足さない。 実測 0 種。階層は面と 1px の枠線で作る
• 字間を body から継承させない。 このサイトは各要素が em を持つ設計。body に px で書くと、サイズの違う要素が同じ字間になって別物になる
• font-family に Helvetica を 2 回書かない。 トップページの実装はそうなっているが誤り
• <a> にテキストを直接置くときは color を必ず宣言する。 実サイトは <a> に色指定が無く、ロゴの画像リンクや読み上げ用ラベル（新規ウィンドウで開く）が UA 既定の #0000EE のままになっている（画像リンクなので実害は無いが、テキストを直下に置くと青が出る）
• ブランドの紺 #0E0D6A を面に広げない。 実測は両ページで 3 要素。このサイトの地色は白
• 明朝を使わない。 和文は Noto Sans JP の 1 書体
• font-weight: 700 を既定にしない。 実測はほぼ 400 / 500 / 600。700 は下層に 1 要素だけ
• トップと下層でルートが違うことを「設計」として真似しない。 2 世代のテンプレートが同居しているだけ

8. Responsive Behavior

Breakpoints

768px / 767.98px の 1 箇所。 7 幅で測った結果は次のとおり。

見出しは 768px で 0.75 倍に落とす（48 → 36px、32 → 24px）。字間は em なので自動で追従する。

流体の使いどころ

全面的な流体ではなく、上限付きの min() / clamp() を部品ごとに当てる。

css--content-side--sp: clamp(16px, 8.21vw, 32px);
--padding-inline:   min(15px, calc(15 / 1372 * 100vw));
.top-tobira__card__title { font-size: min(18px, calc(18 / 1372 * 100vw)); }

分母の 1372 が SP 側の基準幅。

タッチターゲット

• ボタンの padding は 7px 14px 6px（高さ約 31px）と小さめ。タップ領域は親要素で確保している

9. Agent Prompt Guide

クイックリファレンス

書体:     DM Sans（欧文・可変 100-1000）→ Noto Sans JP（和文・可変 100-900）
          → "Helvetica Neue", Helvetica, Arial, sans-serif
ルート:   html 62.5%（10px）/ body 1.5rem（15px）/ lh 1.7
          767.98px 以下は body 1.4rem（14px）
本文:     15px / lh 1.7 / letter-spacing normal / #222222
見出し:   48px·500·0.08em·lh1.5 / 32px·500·0.08em / 36px·400·0.08em·lh1.4
字間:     0.08em が既定（em を各要素に当てる。継承させない）
色:       文字 #222222 / 補助 #626262 / ラベル #7A7A7A
          リンク #0066AA（hover #1D9BFF）/ 紺 #0E0D6A / シアン #1EACE5
          面 #F1F2F6 / 枠 #DDE0E7 / アラート #C50018
字詰め:   body に font-feature-settings: 'palt' on
角丸:     8px（カード 6px / ピル 14px / チップ 4px）
影:       使わない（実測 0 種）
グリッド: 12 カラム 68px + gap 40px = 1256px / 左右余白 58px
動き:     0.5s ease-out（アニメは 0.3s）

プロンプト例

KDDI（www.kddi.com）の DESIGN.md に従って、サービス一覧ページを作ってください。

- :root に --color_* / --content-* / --transition_* のトークンを定義する
- html { font-size: 62.5% }、body { font-size: 1.5rem; line-height: 1.7;
  font-feature-settings: 'palt' on; word-break: break-word }
- コンテナは max-width 1256px、左右余白 58px、12 カラム（68px / gap 40px）
- 見出しの letter-spacing は 0.08em を各要素に当てる（body に継承させない）
- box-shadow は使わない。カードは 1px solid #DDE0E7 と border-radius 8px
- 文字色は #222222、リンクは #0066AA、CTA の面は #0E0D6A
- ウェイトは 400 と 500 だけ。700 は使わない
- transition は var(--transition_default-set)（0.5s ease-out）

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

• トップと下層で html の font-size が違う（16px / 10px）。layout.css は共通だが、トップは top_renew + top_new、下層は lower_new + common_new/app.css + corporate と CSS 一式が別。1 ページだけ測るとルートを取り違える
• palt の実測件数（202 / 1047）も同じ理由で倍以上ずれる。 件数ではなく宣言のしかた（コンポーネント単位 51 箇所 / body に 1 行）を見ること
• rgb(0,0,238) が可視 19 要素。子に <img> しか持たない <a>（ロゴ 100×46）と、視覚的に隠した読み上げラベル。計測失敗ではなく実サイトの構造
• CSS 変数は customPropertiesSummary で own: 34 / platform: 1（Swiper の --swiper-theme-color）。ページから直接読むと 42 個見えるが、8 個は Swiper とカルーセル制御用
• @font-face は 129 ブロックあるが、実際のフォント要求は 2 ファミリー（DM Sans ＋ Noto Sans JP）