クラレ（KURARAY） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 濃紺 1 色と丸ピル。 文字も CTA の面も #000f3c の濃紺ひとつで通し、ボタンは border-radius: 30px の完全なピル。影を一切使わず、カードは 8px の角丸と淡い面色で分ける
• 密度: 中。本文 16px / 行間 1.75 とゆったり組み、コンテンツ幅 1280px・左右 44px
• キーワード: Noto Sans CJK JP 単一、濃紺 #000f3c、ピルボタン、字間ゼロ、影ゼロ

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

1. 書体は noto-sans-cjk-jp 1 ファミリーだけ。和文も欧文もこれで組む。 実測で可視テキストの 100%（トップ 139/139 要素・下層 96/96 要素）がこのスタック。配信は Adobe Fonts（Typekit・キット ID bvs7xqv）で、p.typekit.net/p.gif?…&f=43111.43112.43113 が示すとおり読み込んでいるのは 3 書体＝ウェイト 400 / 500 / 700。すべて loaded
2. letter-spacing を一切いじらない。 実測 normal が 136/139 要素。残り 3 件は Cookie バナー由来。詰めも空けもせず、Noto Sans CJK JP の素の字送りで組む
3. ルートもサイズも完全固定。流体を 1 つも使っていない。 html 16px / body 16px が 1920 / 1440 / 1200 / 1024 / 834 / 768 / 767 / 375 / 374px の 9 幅すべてで不変。CSS 全文に clamp() 0 件、font-size: …vw 0 件。見出しだけメディアクエリで 2 段に切り替える
4. CSS Custom Properties が 1 つも無い。 自社トークン 0・プラットフォーム由来 0。AEM（Adobe Experience Manager）＋ Scene7 の構成で、値はすべて CSS に直書き

ヒーローの斜めカットは CSS ではなく画像。 全走査で clip-path 0 件・skew 変形 0 件。 Scene7 から …:21-9 のクロップ指定で配信される 1280×549 の JPEG に、斜めの切り口ごと焼き込まれている。 clip-path や transform: skew() で再現しようとしない。

2. Color Palette & Roles

Primary（ブランドカラー）

アクセントカラーが無い。 濃紺・白・淡いグレーの 3 つだけで、赤や緑のような差し色を持たない。 CTA に別の色を足さない。

Neutral（ニュートラル）

• Text Primary (#000f3c): 本文・見出し・リンク。可視 124 要素。純黒は使わない
• Text Muted (#666f8a): パンくず（可視 2 要素）
• Surface Gray (#f2f3f5): タブの帯、ニュースのフィルタ行（可視 8 要素）
• Surface Warm (#f7f6f3): ニュースカードの面（可視 5 要素）
• Surface Beige (#e6e4dc): Pickup の帯（可視 7 要素）
• Border (#000000): カードの 1px 罫（可視 6 要素）
• Input Border (#b2b7c4): 検索欄の枠
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 viewportTopBySample (3/3)）

#ffc845（黄）は Cookie バナー（OneTrust）専用。 すべて拒否する すべての Cookie を受け入れる にしか出ず、 サイト本体には 1 要素も無い。ブランドカラーとして採用しない。 同様に #27455c #468254 #3860be #007ab8 はアイコン SVG と動画プレイヤーの色で、テキストを持たない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans CJK JP。Adobe Fonts 配信のため、CSS 上の名前は noto-sans-cjk-jp（ハイフン区切りの小文字＝Typekit の命名）
• ウェイトは 400 / 500 / 700 の 3 本。document.fonts で 3 本とも loaded
• 明朝体は使わない（可視 0 要素）

3.2 欧文フォント

• 専用の欧文書体を持たない。 欧文も noto-sans-cjk-jp の欧文グリフ（＝Noto Sans）で組む
• CSS には RationalText 400/500/600 と SourceHanSansSC 400/500/700 の @font-face もあるが、 両ページとも unloaded・可視 0 要素。これは多言語サイトの他ロケール用（グローバル英語版・中国語版）の用意で、 日本語ページでは 1 バイトも読まれない。日本語 UI に書き写さない

3.3 font-family 指定

css/* 本文・見出し・ボタン すべて共通。これ 1 行だけ */
font-family: noto-sans-cjk-jp, sans-serif;

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

• 和文と欧文を分けない。 1 ファミリーで両方まかなう
• Adobe Fonts が落ちたときの受け皿は generic の sans-serif だけ
• Google Fonts で代替するなら "Noto Sans JP"（同じ書体のサブセット版）。字形は一致する

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

html / body ともに 16px 固定。rem と px が混在するが、ルートが動かないので換算は常に 1rem = 16px。

ウェイトは 400 / 500 / 700 の 3 段。 見出しは **500（Medium）**で、700 は グローバルナビの大項目と惹句だけ（可視 7〜8 要素）。見出しに 700 を使わない。

3.5 行間・字間

• 本文の行間: 1.75（16px → 28px）。可視 76〜87 要素で最多
• 見出しの行間: 1.5（38px → 57.008px / 32px → 48px / 26px → 39.008px）
• 本文の字間: normal。可視 136/139 要素
• 見出しの字間: normal

cssbody { letter-spacing: normal; }   /* 字間は一切いじらない */
.text    { font-size: 16px; line-height: 1.75; }
.heading { font-size: 38px; line-height: 1.5; font-weight: 500; }

letter-spacing を足さない。 日本語サイトでは 0.03〜0.08em を当てる例が多いが、 このサイトは意図的に素のまま。足すと別のサイトになる。 line-height の 57.008px のような端数は 38px × 1.5002 相当の丸め。比率 1.5 として書いてよい。

3.6 禁則処理・改行ルール

cssbody { word-break: normal; }   /* 実測。9 幅すべてで normal */

word-break は normal。日本語の標準的な禁則処理に任せる。break-all も auto-phrase も使っていない。

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 実測 0 要素 */

• palt / halt は CSS 全文で 0 件、実測も 0 要素。 字詰めはしない
• 字間が normal なのと合わせて、約物の処理に一切手を入れない方針

3.8 縦書き

実測 writing-mode: vertical-rl は 0 要素。縦組みは使わない。

4. Component Stylings

Buttons

Primary（塗り）

• Background: #000f3c
• Text: #ffffff
• Border: 2px solid #000f3c（塗りにも同色の 2px 枠を持たせる）
• Padding: 11px 24px
• Border Radius: 30px（完全なピル）
• Font Size: 16px
• Font Weight: 500
• Letter Spacing: normal

Secondary（アウトライン）

• Background: #ffffff
• Text: #000f3c
• Border: 2px solid #000f3c
• Padding: 11px 24px
• Border Radius: 30px
• Font Size / Weight: Primary と同じ

塗りと線で枠の太さ・余白・角丸が完全に同じ。 ホバーで塗りと線を入れ替えても寸法が 1px も動かない作り。

Tertiary（全て見る）

• Background: #ffffff / Text: #000f3c / Border: 2px solid #000f3c
• Padding: 0 30px / Border Radius: 20px

Cards

• Background: #f7f6f3（ニュース）/ #ffffff
• Border: 1px solid #000000（一部）
• Border Radius: 8px
• Shadow: なし

Chips / Tabs

• カテゴリチップ: Border Radius 4px / Font Size 12px
• タブの帯: Background #f2f3f5 / Border Radius 16px（左端だけ 16px 0 0 16px）

Inputs

• Background: transparent
• Border: 1px solid #b2b7c4
• Border Radius: 20px
• Padding: 10px 17px 10px 44px（左 44px は検索アイコン分）
• Font Size: 16px

Select

• Background: #ffffff / Border: 1px solid #333333 / Border Radius: 4px / Padding: 6px 24px 4px 8px

角丸は役割ごとに違う。 ボタン 30px（ピル）／全て見る 20px ／検索欄 20px ／カード 8px ／タブ 16px ／チップ 4px ／ カルーセルのドット 50%。1 つの値に統一しない。

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px（10 箇所で最多）。記事本文は 900px
• Padding (horizontal): 44px

Grid

• Columns: 3〜4（ニュースカード・セクション導線）
• Gutter: 32px（セクション間）/ 16px（カード間）

6. Depth & Elevation

影はサイト本体に 1 つも無い。 計測に出る rgba(0,0,0,0.2) 0 0 18px は Cookie バナー由来。 面の区別は角丸（8px）と淡い面色（#f7f6f3 / #f2f3f5 / #e6e4dc）でつける。box-shadow を足さない。

7. Do's and Don'ts

Do（推奨）

• font-family: noto-sans-cjk-jp, sans-serif; の 1 行で通す（代替は "Noto Sans JP"）
• font-weight は 400 / 500 / 700 の 3 段。見出しは 500
• 本文の line-height は 1.75、見出しは 1.5
• letter-spacing は normal のままにする
• ボタンは border-radius: 30px のピル。塗りと線で寸法を揃える（2px solid / padding: 11px 24px）
• カードは 8px の角丸と淡い面色で分ける
• コンテナは max-width 1280px / 左右 44px

Don't（禁止）

• letter-spacing を足さない。 このサイトは字間を一切いじらない
• font-feature-settings: "palt" を足さない（実測 0 件）
• box-shadow を足さない。 サイト本体の影はゼロ
• アクセントカラーを増やさない。 #000f3c と白とグレーだけ
• #ffc845（黄）をブランド色として使わない。 Cookie バナー専用
• RationalText / SourceHanSansSC を日本語ページに書かない。 他ロケール用の宣言で、日本語では読まれない
• ヒーローの斜めカットを clip-path / transform: skew() で作らない。 画像に焼き込まれている
• clamp() や vw でサイズを流体にしない。 このサイトは 9 幅すべてで完全固定
• 角丸を 1 つの値に統一しない。 ボタン 30px / カード 8px / チップ 4px は別物

8. Responsive Behavior

Breakpoints

ルートは一切動かない。 html 16px / body 16px が 1920 / 1440 / 1200 / 1024 / 834 / 768 / 767 / 375 / 374px の 9 幅すべてで同じ。clamp() も vw も使わない、メディアクエリによる階段だけの設計。

実測（下層ページ）:

トップページの h2（ヒーロー見出し）は 1024px 以上 38px、834px 以下 32px。

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。実サイトのボタンは padding: 11px 24px + 16px 文字 + 2px 枠で約 46px

フォントサイズの調整

• 本文は 16px のまま落とさない（モバイルでも 16px / 行間 28px）
• 見出しのみ 1 段落とす（32px → 26px、26px → 22px、38px → 32px）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #000f3c（文字色と CTA の面が同じ）
Text Color:    #000f3c
Surface:       #f7f6f3 / #f2f3f5 / #e6e4dc
Background:    #ffffff
Font: noto-sans-cjk-jp, sans-serif（代替: "Noto Sans JP"）
Weights: 400 / 500 / 700
Body Size: 16px
Line Height: 1.75（本文）/ 1.5（見出し）
Letter Spacing: normal（一切いじらない）
Button Radius: 30px（ピル）／ Card Radius: 8px
Shadow: なし

プロンプト例

クラレのデザインシステムに従って、ニュース一覧ページを作成してください。
- フォント: noto-sans-cjk-jp, sans-serif（無ければ "Noto Sans JP"）。和文も欧文もこれ 1 つ
- letter-spacing は normal のまま。足さない
- 本文 16px / line-height 1.75、見出し 26px / weight 500 / line-height 1.5
- 文字色は #000f3c。純黒は使わない
- CTA は border-radius 30px のピル。塗りは背景 #000f3c・白文字・2px solid #000f3c・padding 11px 24px
  アウトラインは地を白、文字を #000f3c にして枠と余白は塗りと完全に同じ
- カードは border-radius 8px、面は #f7f6f3。box-shadow は使わない
- コンテナは max-width 1280px、左右 padding 44px
- サイズは固定。clamp() や vw を使わず、1024px 未満で見出しを 1 段落とすだけにする