旭化成（Asahi Kasei） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 書体の出し分けを lang 属性でやる多言語前提の設計。 日本語ページに入ったときだけ palt が効き、英語・中国語では書体ごと差し替わる。見た目は角丸 4px 一種類と青 1 色の、装飾を削ったコーポレート
• 密度: 中。1200px のコンテナに 12 / 20 / 40 / 48 / 72px の整数ギャップで積む。バナーカルーセルを持たず、見出し＋矢印リンクの繰り返しで通す
• キーワード: lang 属性で書体切替、palt、自前配信の Noto Sans JP、角丸 4px、青 1 色

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

1. font-feature-settings: 'palt' on が [lang|="ja"] の中に書いてある。 body でも * でもなく言語セレクタに紐づいているため、日本語ページでだけ約物が詰まり、英語・中国語ページでは詰まらない。可視 1307 要素に継承されていて、実測でも効いている（同一書体で normal 800px → palt 685.17px ＝ 14.4% 詰まる）
2. 書体は --body-font-family という 1 本の変数を lang ごとに差し替えて出し分ける。 [lang|="ja"] なら --font-jp、[lang|="en"] なら --font-en、[lang|="zh"] なら --font-sc。書体スタックを要素ごとに書かない
3. Noto Sans JP を Google ではなく自社ドメインから配信している。 www.asahi-kasei.com/.../fonts/noto-sans-jp/notosans-jp-regular.woff2 など 5 本。しかも unicode-range でサブセット分割していないフル版（U+0-10FFFF）なので、1 ファイルが重い
4. line-height が px の絶対値で降りてくる。 --body-line-tight-m: 16px を body に当てているため、宣言し直さない要素は文字サイズに関係なく 16px の行送りになる。32px の見出しが 16px の行で組まれると重なるので、見出しは必ず自分で line-height を持っている
5. ウェイトのトークンは --fw-thin: 100 から --fw-black: 900 まで 9 段あるが、実際に出るのは 400 / 500 / 700 の 3 段だけ。 @font-face も 300 / 400 / 500 / 600 / 700 の 5 本を宣言しているのに loaded は 400 / 500 / 700 の 3 本で、300 と 600 は読まれない

2. Color Palette & Roles

Primary（ブランドカラー）

css/* 事業領域の帯だけに使うグラデーション（1 要素） */
background: linear-gradient(90deg, #04233c 0%, #005bac 100%);

Neutral（ニュートラル）

• Text Primary (#222222): 本文・見出し。可視 59 要素（トップ）／ 62 要素（下層）で最多。純黒にしない
• Text Secondary (#646464): タブの非選択ラベル、補足（可視 9 要素／1 要素）
• Text on Dark (#ffffff): 青面・動画上のテキスト（可視 21 要素／12 要素）
• Background (#ffffff): pageBackground.resolved = rgb(255,255,255)（根拠 body）。トップはヒーローの <video>（1440×720）が被さるが、ページの地色は白
• Surface (#f8f8f8): セクションの淡い地（可視 4 要素）
• Border (#d3d3d3): 線ボタンの枠、区切り線。--separator-line-color
• Border Secondary (#7a7a7a): 破線の区切り
• Divider（濃） (#a7a7a7): 1 要素

宣言されているが使われていない色（実装しない）

このサイトは Adobe Experience Manager Edge Delivery Services の雛形の上に組まれており、:root にその既定値が残っている:

• --link-color: #3b63fb / --link-hover-color: #1d3ecf（EDS の既定の青。可視 0。リンクは #222222 のまま下線で表現する）
• --text-color: #131313（宣言はこれだが実際の本文は #222222。#131313 が出るのは YouTube 埋め込みのラベル 1 要素だけ）
• --dark-color: #505050 / --light-color: #f8f8f8（--light-color だけ使われている）

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

• 確認しました ボタン（border-radius: 18px / font-size: 12px / 白地に白枠）は Cookie 同意バナー。サイト本体に 18px の角丸は無い

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（自社ドメインから配信）。loaded は 400 / 500 / 700 の 3 本
• @font-face は 300（Light）/ 400 / 500 / 600（SemiBold）/ 700 の 5 本を宣言しているが、300 と 600 は unloaded（当たる要素が無い）
• unicode-range を指定していないため、どのウェイトもフル版（U+0-10FFFF）が 1 ファイルで落ちてくる。フォント要求はトップで 5 件
• 明朝体: 使わない。セリフ系の和文は 2 ページとも可視 0 要素

3.2 欧文フォント

• Noto Sans（400・Regular と Italic の 2 本を宣言）。ただし日本語ページでは unloaded。[lang|="en"] のときだけ --font-en 経由で使われる
• 日本語ページの欧文・数字は Noto Sans JP が受け持つ

3.3 font-family 指定

css/* 実サイトの宣言をそのまま */
:root {
  --font-jp: "Noto Sans JP", system-ui, -apple-system,
             "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sc: "Noto Sans SC", system-ui, -apple-system,
             "PingFang SC", "Microsoft YaHei", sans-serif;
}

[lang|="ja"] {
  --body-font-family: var(--font-jp);
  font-family: var(--font-jp);
  font-feature-settings: 'palt' on;      /* ★palt はここにしか無い */
}
[lang|="en"], html[lang=""] {
  --body-font-family: var(--font-en);
  font-family: var(--font-en);
}
[lang|="zh"] {
  --body-font-family: var(--font-sc);
  font-family: var(--font-sc);
}

body { font-family: var(--body-font-family); }

ただし --font-jp の游ゴシックの指定は誤っている。 "Yu Gothic"（Regular）だけが書かれていて "Yu Gothic Medium" が無いため、Noto Sans JP が落ちた Windows では Regular に当たって細く出る。正しくは:

css/* 正しい並び（Windows で Medium を拾わせる） */
--font-jp: "Noto Sans JP", system-ui, -apple-system,
           "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium",
           "Yu Gothic", "Meiryo", sans-serif;

実害は限定的（Noto Sans JP が loaded なので通常そこまで到達しない）が、配信が落ちた時だけ細くなるので直す価値がある。

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

• ウェイトは 400 と 700 の二択が基本（可視 73 / 28 要素、下層 61 / 17）。500 は 5 要素だけで、しかも下層には 1 要素も無い
• --fw-thin: 100 〜 --fw-black: 900 の 9 段は宣言されているだけ。 実装に存在するのは 400 / 500 / 700 の 3 段
• 600 を書かない。 @font-face に SemiBold があるが unloaded で、当てても読まれない

3.5 行間・字間

css/* 実サイトの宣言 */
body {
  font-size: var(--body-font-size-m);     /* 16px（768px 以下は 14px）*/
  line-height: var(--body-line-tight-m);  /* ★16px — 絶対値 */
  font-weight: 400;
}

• line-height が px の絶対値で子へ降りる。 --body-line-tight-m: 16px なので、宣言し直さない要素は文字サイズに関係なく 16px の行送りになる。実測でも「16px → 16px（比率 1.00）」が 8 要素ある
• 本文ブロック・見出しには必ず line-height を宣言する。 しないと 32px の見出しが 16px の行で組まれて行が重なる
• 実装で使われている行間比は 1.6（本文・見出し。可視 72 要素／55 要素で最多）と 2.0（リード文。20 要素／7 要素）の 2 つ
• 字間は normal が既定（可視 98/106・73/78 要素）。当てるのは次の 2 つだけ:

• どちらも小さな英数字ラベル専用で、和文の本文には一切当たっていない

3.6 禁則処理・改行ルール

• word-break は normal（既定のまま）。auto-phrase も break-all も使っていない
• 改行の制御は palt と line-height: 1.6 だけで済ませている

3.7 OpenType 機能

css/* 日本語ページのときだけ効く */
[lang|="ja"] { font-feature-settings: 'palt' on; }

• palt が可視 1307 要素（トップ）／ 437 要素（下層の計測時点）に継承されている
• 実測で効いていることを確認済み: 同一ページ・同一書体（Noto Sans JP）で 「東京・大阪」（株式会社）、デザインの話。 を組むと normal 800px → palt 685.17px（14.4% 詰まる）。halt は 700px
• 宣言位置を body や * に移さない。 [lang|="ja"] に置くのがこの設計の要で、英語ページでは palt が外れる
• palt 以外の feature（halt / tnum / pkna）は使っていない
• palt で詰めたあとに letter-spacing で空け直していない（本文は normal のまま）

3.8 縦書き

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

4. Component Stylings

Buttons

塗りと線がペアで並ぶ（Creating for Tomorrow / ニュース）。角丸は 4px 一種類。

css/* Primary（塗り） */
.btn-primary {
  background: #005bac;
  border: none;
  color: #ffffff;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;          /* ★必ず宣言する（body の 16px が降りてくる） */
}

/* Secondary（線） */
.btn-secondary {
  background: #ffffff;
  border: 1px solid #d3d3d3;   /* 枠はニュートラルグレー。青にしない */
  color: #222222;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 700;
}

/* 検索ボタンだけ角丸 2px */
.btn-search {
  background: #005bac;
  color: #ffffff;
  border-radius: 2px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 700;
}

• 線ボタンの枠は青ではなくグレー #d3d3d3。 塗りが青、線がグレー＋黒文字という組み合わせ
• 影は付けない（可視の box-shadow はモーダルの 1 要素だけ）

Badges / Chips

css.badge-year {
  background: #e5eff7;
  color: #04233c;
  border-radius: 4px;
  padding: 0 8px 2px;        /* 下だけ 2px 多い */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 1;
}

• ニュース一覧の 2026年 業界・業績 研究・開発 などに付く。可視 14 要素
• 淡い青の面に濃紺の文字。青地に白ではない

Tabs

css.tab {
  padding: 20px 40px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 4px 4px 0 0;   /* 上だけ角丸 */
}
.tab[aria-selected="true"] { background: #e5eff7; color: #005bac; }
.tab[aria-selected="false"] { background: #f8f8f8; color: #646464; }

• ニュースの すべて / 経営・決算 / 事業・製品 / 研究・開発 / お知らせ
• 選択中は淡い青＋青文字、非選択はグレー地＋グレー文字

Cards / Links

• カードは枠も影も角丸も持たないことが多く、画像＋見出し＋右端の → で構成する
• 一覧のリンク行は下線ではなく上下の区切り線（#d3d3d3 1px）で仕切り、右端に → を置く

5. Layout Principles

Spacing Scale

整数の px トークン。流体スケールは使っていない。

css--gap-vertical-l: 32px;
--scale-spacing-vertical-3xl: 72px;
--separator-margin-desktop: 40px;
--separator-margin-mobile: 32px;

• 実測のギャップは 20px（8 要素／6 要素）・12px（8 要素／4 要素）・40px（6 要素／4 要素）・48px（3 要素）・72px（2 要素／5 要素）・8px（5 要素）
• 4 の倍数で、8 / 12 / 20 / 32 / 40 / 48 / 72px の 7 段。16px と 24px はほぼ出ない

Container

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

• 1200px が 42 要素（トップ）／ 29 要素（下層）で圧倒的に最多
• 3 カラムは calc(33.3333% - 13.3333px)、2 カラムは calc(50% - 10px)（＝ギャップ 20px を割り付ける古典的な計算）
• 本文のナローカラムは 590px / 564px / 387px

Grid

• 3 カラム（ニュース・カード）と 2 カラム（テキスト＋画像）が基本。CSS Grid ではなく flex ＋ calc() で組んでいる

6. Depth & Elevation

影をほぼ使わない。

• カード・ボタン・バッジに影は付かない。 階層は面色（#ffffff / #f8f8f8 / #e5eff7）と 1px の区切り線だけで作る
• filter: drop-shadow() は使っていない（0 要素）
• 角丸は 4px が 58 要素（トップ）／ 36 要素（下層）で最多。ほかは検索ボタンの 2px、タブの 4px 4px 0 0、Cookie バナーの 18px（外部）

7. Do's and Don'ts

Do（推奨）

• palt は [lang|="ja"] に書く。 body や * ではなく言語セレクタに紐づける
• 書体は --body-font-family 1 本を lang ごとに差し替える。 要素ごとにスタックを書かない
• ブランド色は #005bac 1 色。濃紺 #04233c と淡い青 #e5eff7 で役割を分ける
• 本文色は #222222（純黒にしない）
• ウェイトは 400 と 700 の二択で組む
• 行間は 1.6（本文・見出し）／ 2.0（リード文）。すべての本文ブロックと見出しで明示的に宣言する
• 角丸は 4px 一種類
• 階層は面色と 1px の線で作る。影を使わない
• 線ボタンの枠はグレー #d3d3d3
• コンテナは 1200px、ギャップは 8 / 12 / 20 / 32 / 40 / 48 / 72px

Don't（禁止）

• line-height を宣言し忘れない。 body の 16px が絶対値で降りてくるので、32px の見出しが 16px の行で組まれて重なる
• line-height を px で新しく配らない（実サイトはそうだが、これが上の事故の原因）
• font-weight: 100 / 200 / 300 / 600 / 800 / 900 を使わない。 --fw-* に 9 段あるが実装は 400 / 500 / 700 の 3 段で、300 と 600 は @font-face があっても unloaded
• --link-color: #3b63fb を実装しない（AEM Edge Delivery の雛形の既定値・可視 0）。リンクは #222222 ＋下線
• --text-color: #131313 を本文色にしない（宣言はこれだが実装は #222222）
• letter-spacing を和文に当てない。 当たっているのは 11〜12px の英数字ラベルだけ（0.15 / 0.32px）
• 明朝体を混ぜない（2 ページとも可視 0）
• カード・ボタンに影を付けない
• 角丸 18px を使わない（Cookie バナー由来）
• Noto Sans JP を unicode-range 無しのフル版で配信する設計をそのまま真似しない。 実サイトはそうだが、新規実装ではサブセット分割するほうがよい

8. Responsive Behavior

Breakpoints

css/* 実サイトの宣言（Media Queries Level 4 のレンジ構文） */
@media (width >= 768px)  { }   /* 7 箇所 */
@media (width >= 1280px) { }   /* 4 箇所 */
@media (width > 767px) and (width < 1280px) { }
@media (prefers-reduced-motion: reduce) { }   /* 6 箇所 */
@media (prefers-contrast: more) { }           /* 2 箇所 */

• 境界は 768 / 1280 の 2 本。 >= > < のレンジ構文で書かれている
• prefers-reduced-motion と prefers-contrast に対応している（カルーセルの自動送りと配色）

タッチターゲット

• ボタンの padding: 8px 20px ＋ 16px 文字で高さ約 42px。モバイルで本文が 14px に落ちるとボタンも縮むので、min-height: 44px を別途保証する
• ページネーションは --pagination-height-desktop: 40px / -tablet: 36px / -mobile: 32px とモバイルで小さくなる（44px を下回る）

フォントサイズの調整

• html は全幅 16px 固定。
• body だけが 768px を境に 16px → 14px に切り替わる（769px = 16px、768px = 14px を実測で確認）。流体ではなく 1 段の階段
• 行送りも同時に 16px → 14px に切り替わる（--body-line-tight-m ごと差し替わる）
• 見出しは 6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）とも固定値のまま

9. Agent Prompt Guide

クイックリファレンス

ブランド色: #005bac（青・唯一の彩度色）
濃紺: #04233c ／ 淡い青: #e5eff7（バッジ・選択タブ）
本文色: #222222 ／ 補足 #646464
地色: #ffffff ／ セクション面 #f8f8f8
線: #d3d3d3（1px）／ 破線 #7a7a7a
書体: --body-font-family を lang で切替
      ja → "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
           "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif
ウェイト: 400 / 700（500 は例外・600 以上は使わない）
文字サイズ: 40 / 32 / 24 / 18 / 16 / 15 / 14 / 12 / 11px
本文: 16px（768px 以下は 14px）
行間: 1.6（本文・見出し）/ 2.0（リード）★必ず明示的に宣言
字間: normal（英数字ラベルだけ 0.15〜0.32px）
palt: [lang|="ja"] に 'palt' on（14.4% 詰まる）
角丸: 4px 一種類（検索ボタンのみ 2px）
影: 使わない（モーダルの 0 5px 15px rgba(0,0,0,.5) のみ）
コンテナ: 1200px ／ ギャップ 8/12/20/32/40/48/72px
ブレークポイント: 768 / 1280（width >= 構文）

プロンプト例

旭化成のデザインシステムでサステナビリティのページを作って。 ブランド色は #005bac の 1 色、濃紺 #04233c と淡い青 #e5eff7 で役割を分ける。本文は #222222。 書体は --body-font-family を 1 本だけ定義して [lang|="ja"] で --font-jp に差し替える構造にし、font-feature-settings: 'palt' on もその [lang|="ja"] の中に書く。 ウェイトは 400 と 700 の二択。見出しにも本文にも line-height を必ず明示する（body の行送りが 16px の絶対値で降りてくるため）。本文 1.6 / リード 2.0。 字間は normal。角丸は 4px 一種類。影は使わず、面色（白 / #f8f8f8 / #e5eff7）と 1px の #d3d3d3 の線だけで階層を作る。 線ボタンは白地にグレー枠＋黒文字、塗りボタンは青地に白文字、どちらも padding: 8px 20px / 16px / 700。 ニュースの年号バッジは #e5eff7 地に #04233c の 11px、letter-spacing: 0.15px。 コンテナは 1200px、ギャップは 20px 基調。ブレークポイントは @media (width >= 768px)。