住友化学（Sumitomo Chemical） DESIGN.md

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

1. Visual Theme & Atmosphere

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

1. 和文本体は OS ローカル書体で組み、Web フォントは「約物」と「欧文」にだけ使う。 読み込んでいるフォントファイルはトップで 3 本だけ — YakuHanJPs-Regular.woff2 / YakuHanJPs-Bold.woff2（約物だけのサブセット）と Google Fonts の Roboto Condensed。かな・漢字は 1 バイトも落としていない。
2. palt を 1 度も書かずに約物が詰まっている。 font-feature-settings の宣言は CSS 全文で 0 件、実測も 0 要素。それでも 「日本語」、約物。（テスト） の実測幅は 480.81px で、同条件の塩野義（520px）・島津（518px）より 約 7% 狭い。YakuHanJPs がスタック先頭にいて約物を半角幅に差し替えているため。
3. 字間は「見出しだけ」に em で当て、本文は normal。 しかも文字が大きいほど字間を狭くしている（40px → 0.10em、30px → 0.14em、18px → 0.14em、16px → 0.20em）。光学的な調整として逆方向に見えるが一貫している。本文は可視 144/159 要素（トップ）が normal。
4. 文字サイズ切替（小・中・大）を前提にした二重宣言。 CSS は font-size: 14px; font-size: 1.4rem; のように px を書いてから rem で上書きする形を全面的に採る（rem 239 宣言 / px 104 宣言）。ヘッダーに data-fz="S|M|L" の切替 UI がある。

• デザイン方針: 全画面の写真ヒーロー ＋ 白地のコンテンツ。水色〜紺のレンジで統一
• 密度: 中。本文 13px と小さめで、情報量は多い
• キーワード: 端正、寒色、字空けの効いた見出し、アクセシビリティ配慮（文字サイズ切替・多言語）

2. Color Palette & Roles

CSS Custom Properties は 0 個（--ot-footer-space は CMP の OneTrust 由来）。色はすべて CSS に直書きされている。

Primary（ブランドカラー）

• Primary Blue (#0296E5): リンク・CTA の面・言語切替のアクティブ。実測 文字 22 要素 / 面 9 要素
• Primary Blue Light (#28A6E9): 検索ボタン。1 要素
• Navy (#27455C): 濃紺の面。8 要素

Neutral（ニュートラル）

• Text Primary (#555963): 本文。html に直接宣言されている。実測 37 要素（ヒーローが白文字のため件数は少ない）
• Text on Image (#FFFFFF): ヒーロー上の文字。実測 126 要素
• Background (#FFFFFF): html に宣言。pageBackground.resolved は from: "html" で白
• Surface Pale (#ECF3F6): セクションの淡い地。実測 18 要素
• Surface Pale 2 (#E4EEF1): 文字サイズ切替・言語切替のアクティブ背景。6 要素
• Surface Dark (#48535B): 1 要素

事業部門の識別色（4 系統）

トップの事業カード 4 枚にだけ使われる。文字色とアイコン塗りでペアになっている。

• 文字色は彩度を落とした濃い側、アイコンは明るい側、という 2 段の持ち方をしている

計測に混ざる CMP（採用しない）

interactive の上位に出る font-size: 13.008px / 14.4px、letter-spacing: 0.13008px / 0.144px、font-weight: 600 の要素はすべて OneTrust の Cookie バナー（Cookie設定 / OK）。半端な px はバナー側の rem スケールによるもので、サイト本体の設計ではない。

3. Typography Rules

3.1 和文フォント

• Web フォントは使っていない。 かな・漢字は OS ローカル書体（メイリオ → ヒラギノ角ゴ ProN → ＭＳ Ｐゴシック）
• 約物だけ YakuHanJPs を Web フォントで読む。 @font-face は 100 / 200 / 300 / 400 / 500 / 700 / 900 の 7 本宣言されているが、実際に読まれるのは 400 と 700 の 2 本だけ（残り 5 本は document.fonts で unloaded）
• YakuHanJPs は約物（「」、。（） など）のみを含むサブセット。本文の字形は一切変えない

3.2 欧文フォント

• Roboto Condensed（Google Fonts、300 / 400）。トップのセクション欧文見出し（BUSINESS & PRODUCTS / ABOUT THE COMPANY / INVESTOR RELATIONS、weight 300）に 8 要素
• 下層ページでは 1 件も読まれない（会社概要ページのフォント要求は YakuHanJPs の 2 本のみ）。欧文見出しはトップ専用の意匠

3.3 font-family 指定

csshtml {
  color: #555963;
  background: #ffffff;
  font-family: YakuHanJPs, "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",
               "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "MS PGothic",
               Helvetica, Arial, sans-serif;
  font-size: 62.5%;   /* = 10px */
}

/* 欧文見出しだけ差し替える */
.en-heading { font-family: "Roboto Condensed", sans-serif; }

• 宣言が body ではなく html にある。 色・背景・書体・ルートサイズを 1 ブロックにまとめている
• スタックの先頭が YakuHanJPs であることが要。約物はここで拾われ、それ以外の文字は次の候補に落ちる
• メイリオ が Hiragino Kaku Gothic ProN より前にある。Windows 優先のスタックで、macOS でもメイリオが入っていれば（Office 経由など）そちらが当たる。意図が和文の統一なら、ヒラギノを先に置く構成も検討に値する
• 末尾に Helvetica, Arial, sans-serif があり、generic family は最後にだけ 1 回。途中に sans-serif を挟んでいないので、スタックが死んでいる箇所は無い

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

ルートは html { font-size: 62.5% } ＝ 10px。1440 / 1200 / 1024 / 834 / 768 / 767 / 375px の 7 幅すべてで 10px から動かない。 body だけが 768/767px を境に 16px → 14px に切り替わる（2 段の階段。流体ではない）。

• ウェイトは 300 / 400 / 700 の 3 段。300 は欧文（Roboto Condensed Light）専用で、和文には使わない
• 和文に 300 を当てない。 OS ローカル書体（メイリオ／ヒラギノ角ゴ ProN）はそれぞれ 2 本ずつしか持たないので、300 を指定しても Regular で出る
• 本文の 13px は小さい。文字サイズ切替 UI があることと一体の設計

3.5 行間・字間

字間は要素ごとに em で宣言する型（body からの px 継承ではない）。サイズが変われば px も比例して変わるのが根拠。

• 大きい見出しほど字間が狭く、小さいコピーほど広い。 40px のヒーロー見出しが 0.10em、その下の 16px のサブコピーが 0.20em で倍の開きになっている。一般的な光学調整（大きいほど詰める）の考え方と一致する
• 本文には一切当てない。 可視 144 要素（トップ）/ 124 要素（下層）が normal
• 行間は無単位の比率で、本文 2.00（13px → 26px）、見出し 1.50 / 1.25 / 1.10。本文の 2.0 は日本語としてかなりゆったりした側
• CSS には letter-spacing: -0.40em も存在するが、これはインラインブロック間の空白を消すハックで、タイポグラフィの指定ではない

3.6 禁則処理・改行ルール

• body の word-break は normal。日本語の禁則処理はブラウザ任せ
• CSS には word-break: break-all / break-word が部分的にある（表組みなど）
• word-break: auto-phrase は使っていない

3.7 OpenType 機能

• font-feature-settings の宣言は CSS 全文で 0 件、実測も 0 要素。palt も halt も書いていない
• それでも約物は詰まっている。 同一文字列での実測:

normal の時点で約 7% 狭いのが YakuHanJPs の効果。palt を足すと二重に詰まるので、再現時に palt を加えないこと

3.8 縦書き

• writing-mode: vertical-rl は 0 要素。縦組みは使っていない

4. Component Stylings

Buttons

css/* 面塗りの CTA */
.btn-primary {
  font-size: 13px;
  font-weight: 400;
  line-height: 2;          /* 26px */
  color: #FFFFFF;
  background: #0296E5;
  border-radius: 5px;      /* 実測 8 要素 */
  letter-spacing: normal;
}

/* テキストリンク */
.link-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 2;
  color: #0296E5;
  background: transparent;
}

/* 検索ボタン */
.btn-search { background: #28A6E9; color: #FFFFFF; }

文字サイズ切替（Text Size Switcher）

サイトの特徴的なコンポーネント。ヘッダー右上に常設。

html<div class="text-fontsize">
  <p class="fontsize-ttl">文字サイズ :</p>
  <ul class="fontsize-list">
    <li class="list-item"><button class="item-inner" data-fz="S">小</button></li>
    <li class="list-item"><button class="item-inner is-active" data-fz="M">中</button></li>
    <li class="list-item"><button class="item-inner" data-fz="L">大</button></li>
  </ul>
</div>

css.fontsize-ttl,
.fontsize-list        { font-size: 13px; font-size: 1.3rem; }
.fontsize-list .item-inner          { padding: 3px; border: none; background: transparent;
                                      transition: all .3s ease-out; }
.fontsize-list .item-inner.is-active,
.fontsize-list .item-inner:hover    { background: #E4EEF1; color: #0296E5; }
.fontsize-list .item-inner:visited  { color: #555963; }

• 既定は 中（M）がアクティブ
• これを成立させるために、本文のサイズ指定が px → rem の二重宣言になっている（下記 7 章の Do を参照）

Cards

css.card {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);  /* 実測 15 要素 */
  border-radius: 7px;                        /* 実測 4 要素 */
}

• 角丸は 5px（ボタン）/ 7px（カード）/ 50%（円形アイコン）の 3 種だけ

コンテンツ用サイズユーティリティ

本文中の文字サイズを段階で指定するクラスが用意されている。モバイルで 1 段上がる。

5. Layout Principles

Container

• ヒーローは全画面幅（1440×732px の JPG をカルーセルで横送り）
• 以降のコンテンツは中央寄せのコンテナ

Grid

• トップは事業 4 部門のカード、ニュース 2 カラム、バナー群
• ヒーローは Swiper 系のカルーセル。左右に ±1440px 刻みで同じ画像が並ぶ（無限ループ用の複製）。そのため letter-spacing: 4px ×12 のように件数が複製ぶん水増しされる。実体は 1 要素と読むこと

Spacing

• 余白のトークンは無い。rem の実値で指定（ルート 10px なので 2.4rem = 24px のように読みやすい）

6. Depth & Elevation

• 影は 1 種類: 0 0 20px rgba(0, 0, 0, 0.3)（実測 15 要素）
• offset を持たない全方位のぼかしで、不透明度 0.3 はかなり強い。黒 30% をそのまま写すこと（薄く丸めない）
• CMP の 0 0 18px rgba(0,0,0,.2) は OneTrust 由来なので採用しない

7. Do's and Don'ts

Do（推奨）

• 約物を詰めるなら palt ではなく YakuHanJPs をスタック先頭に置く。 これがこのサイトの字面の要

  cssfont-family: YakuHanJPs, "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;

• 字間は見出しだけに em で当てる。 40px → 0.10em、30px / 18px → 0.14em、16px のサブコピー → 0.20em。大きいほど狭く
• 本文の letter-spacing は normal。 継承させない
• 行間は無単位の比率で、本文 2.0、見出し 1.5 / 1.25 / 1.10
• html に色・背景・書体・font-size: 62.5% をまとめて宣言する
• サイズ指定は rem。 文字サイズ切替と拡大表示に追従させるため
• 影は 0 0 20px rgba(0,0,0,.3) の 1 種だけ
• 事業部門の色は文字用の濃い側とアイコン用の明るい側をペアで持つ

Don't（禁止）

• font-feature-settings: "palt" を足さない。 YakuHanJPs ですでに約物が詰まっており、二重にかかる
• YakuHanJPs の 7 ウェイトを全部読み込まない。 実際に使われているのは 400 と 700 の 2 本だけ。残り 5 本は宣言だけで unloaded
• 和文に font-weight: 300 を当てない。 300 は欧文の Roboto Condensed 専用。OS ローカルの和文書体は Regular / Bold の 2 本しか持たないので細くならない
• 半端な px（13.008px / 14.4px / 0.13008px）を設計値として写さない。 すべて OneTrust の Cookie バナー
• letter-spacing: -0.40em を文字詰めとして使わない。 インラインブロックの空白除去のハック
• font-size を px だけで書かない。 文字サイズ切替 UI があるので、px 単独指定は拡大できなくなる。実サイトは font-size: 14px; font-size: 1.4rem; と両方書いて rem で上書きする形を取っている（rem 239 宣言に対し px 104 宣言）
• ヒーローのカルーセルの複製を要素数として数えない。 同じ見出しが 12 回出るのは無限ループ用の複製
• ヒーローのコピー（「地球がつぎに、必要なものを。」）は実テキスト。画像化しないこと（背景写真だけが JPG）

8. Responsive Behavior

Breakpoints

実測で切り替わるのは 768 / 767px の 1 箇所。

• body が 2 段で切り替わる階段型。 html は固定なので、ルートだけ測ると「完全固定のサイト」に見える
• ヒーロー見出しの字間は 4.8px → 3px だが、em 換算ではどちらも 0.12em で一定。em で宣言しているので自動的に追従している
• 流体（vw / clamp()）は 1 箇所も使っていない

タッチターゲット

• 文字サイズ切替のボタンは padding: 3px と小さい。モバイルでは 44px 以上に拡げること（実サイトはこうだが、正しくは拡げる）

9. Agent Prompt Guide

クイックリファレンス

書体    : YakuHanJPs, "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif
          （和文本体は OS ローカル。Web フォントは約物の YakuHanJPs 400/700 のみ）
欧文    : "Roboto Condensed", sans-serif（300 / 400・セクション欧文見出し専用）
ルート  : html { font-size: 62.5%; color: #555963; background: #ffffff }  → 10px 固定
本文    : 13px / line-height 2.0 / letter-spacing normal / #555963
見出し  : 40px ls 0.10em ／ 30px・18px ls 0.14em ／ 16px サブコピー ls 0.20em
ウェイト: 400 / 700（和文）、300（欧文のみ）
主色    : #0296E5（リンク・CTA）/ 濃紺 #27455C
面      : #FFFFFF / 淡青 #ECF3F6 / アクティブ #E4EEF1
部門色  : 緑 #739931・橙 #C69044・桃 #C6637B（文字）/ #B6E37D・#EDC47D・#FCA7B9・#82D3FD（塗り）
角丸    : 5px（ボタン）/ 7px（カード）/ 50%（円）
影      : 0 0 20px rgba(0, 0, 0, .3) の 1 種のみ
OpenType: 書かない（YakuHanJPs が約物を担当するため palt 不要）
縦組み  : 使わない
単位    : font-size は rem（文字サイズ切替に追従させる）

プロンプト例

住友化学のコーポレートサイト風に、事業紹介のセクションを作ってください。 書体は YakuHanJPs, "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif で、 和文の Web フォントは読み込まず、約物用の YakuHanJPs（400/700）だけ読み込んでください。 font-feature-settings は書かないでください（YakuHanJPs が約物を詰めるので不要です）。 ルートは font-size: 62.5%（10px）で、以降は rem 指定。 本文 13px / 行間 2.0 / letter-spacing は normal。 大見出しは 40px で letter-spacing: 0.10em、その下のサブコピーは 16px で 0.20em と、 大きい文字ほど字間を狭くしてください。 リンクと CTA は #0296E5、本文色は #555963、セクションの地は #ECF3F6。 カードは border-radius: 7px ＋ box-shadow: 0 0 20px rgba(0,0,0,.3)。 768px 以下では body を 14px に落としてください。