AGC（AGC株式会社） DESIGN.md

AGC（https://www.agc.com/）のデザイン仕様書。 旧・旭硝子。ガラス・化学品・電子部材・セラミックスなど、素材の力で社会を支えるグローバル素材メーカー。 実サイトの computed style 実測（2026-05-25 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ディープネイビー #001f6b をブランドアイデンティティに据え、クールトーンのブルーグレーを基調に、シャープなレッド #e40046 の CTA で行動を促す。素材メーカーとしての精密さ・信頼性・技術力を視覚的に表現
• 密度: 本文の line-height が 2.0 と非常に広く、記事・IR 情報を落ち着いて読ませるメディア寄りの組版。余白を贅沢に使うコーポレートサイト
• キーワード: ディープネイビー、コーポレート、精密、クールトーン、シャープコーナー、素材メーカーの信頼感
• 特徴:
  • テキストカラーがネイビー #001f6b（純黒ではない）。見出し・本文・リンク以外のほぼ全テキストがこの色で統一されており、AGC のブランドアイデンティティそのもの
  • CTA ボタンは #e40046（ビビッドレッド）で border-radius 2px。角がほぼ直角のシャープなコーポレートボタン。pill ではない
  • ピル型ボタン #3860be（ミディアムブルー）は radius 17px でサブアクション用。メインCTA とは明確に分離
  • サーフェスに #dae0e4（ブルーグレー）と #d5e9ff（ライトブルー）の2種を使い分け
  • フッターは #465a64（ダークブルーグレー）にライトブルーテキスト #dcebff
  • フォントは Noto Sans JP 一本。欧文も和文も統一
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Primary Navy (#001f6b): ブランドアイデンティティカラー。テキストカラーとして全面的に使用（見出し・本文・ナビ）。AGC のコーポレートブルー
• Accent Red (#e40046): メイン CTA ボタンの背景色。行動喚起・重要アクションに使用
• Medium Blue (#3860be): ピル型サブボタンの背景。ネイビーより明るいブルーでセカンダリアクションを表現

CTA / Buttons

• Primary CTA: 背景 #e40046 / 文字 #ffffff / radius 2px（シャープ）/ padding 12px 32px / ~13px / weight 600
• Pill Button: 背景 #3860be / 文字 #ffffff / radius 17px（ピル寄り）
• White Button: 背景 #ffffff / 文字 #001f6b / border 1px solid #001f6b / radius 2px

Neutral — Cool Gray Scale

Semantic（実測未確認・推奨値）

実サイトには明確なエラー／成功色は表面化していない。コーポレートサイト向けに推奨する補完値:

• Danger: #c9243f 程度（ブランドレッド #e40046 と調和する暗めのレッド）
• Success: #1a7a3a 程度のグリーン
• Warning: #c67a00 程度のオレンジ

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を使用。Google Fonts 提供のオープンソースフォント
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• 専用の欧文書体は持たず、Noto Sans JP の欧文グリフがそのまま使われる
• font-family には和文フォントのみ指定し、フォールバックは sans-serif で終端

3.3 font-family 指定

css/* 全要素共通（body, h1〜h5, p, a, span, button, nav, header, footer） */
font-family: "Noto Sans JP", sans-serif;

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

• Noto Sans JP が唯一の指定フォント。ウェイト 400 / 700 を使用
• 欧文専用書体は挟まない。Noto Sans JP の欧文グリフで統一
• 極めてシンプルな構成で、環境差が出にくい

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

実測値（トップページ、2026-05-25 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (16px): 2.0（32px / 16px）— 日本語コーポレートサイトでも広い部類。IR・技術情報を読ませるための配慮
• フッター (10px): 2.0（20px / 10px）— 本文と同じ比率を維持
• リンク (16px): 1.8（28.8px / 16px）
• H1 (36px): 1.3（46.8px / 36px）— 見出しは引き締め
• H2 (18px): 1.2（21.6px / 18px）— セクション見出しはタイト

字間 (letter-spacing) — 実測:

• 全テキスト: normal（明示的な letter-spacing 指定なし）
• ボタンラベル: 0.01em（ほぼ normal と同等）

ガイドライン:

• AGC は letter-spacing をほぼ使わず、Noto Sans JP のメトリクスに任せる方針
• line-height 2.0 が全体を貫くリズム。ゆったりとした行間で技術的な文章の可読性を確保
• 見出しは 1.2〜1.3 でタイトに詰めて、本文との対比を作る

3.6 禁則処理・改行ルール

css/* 推奨設定（コーポレートサイト標準） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 技術用語・製品名が長い場合があるため、overflow-wrap: break-word で安全に折り返す

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• letter-spacing も normal で、フォントのデフォルトメトリクスをそのまま使用

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（レッド・シャープ） — メインの行動喚起

• Background: #e40046
• Text: #ffffff
• Padding: 12px 32px
• Border Radius: 2px（ほぼ直角。AGC の特徴的なシャープコーナー）
• Font: Noto Sans JP, ~13px, weight 600
• Border: none
• Letter Spacing: 0.01em

Pill Button（ミディアムブルー） — サブアクション

• Background: #3860be
• Text: #ffffff
• Padding: 8px 20px
• Border Radius: 17px（ピル寄り）
• Font: Noto Sans JP, ~13px, weight 600
• Border: none

Secondary（白・アウトライン） — 控えめなアクション

• Background: #ffffff
• Text: #001f6b
• Border: 1px solid #001f6b
• Padding: 12px 32px
• Border Radius: 2px
• Font: Noto Sans JP, ~13px, weight 600

Text Link — 本文中のリンク

• Background: transparent
• Text: #1566cc
• Padding: 0
• Font: Noto Sans JP, 16px, weight 400
• Text Decoration: underline（ホバー時）

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #dae0e4（ブルーグレーボーダー）
• Border (focus): 2px solid #001f6b
• Border Radius: 2px（ボタンと統一したシャープコーナー）
• Padding: 12px 16px
• Font: Noto Sans JP, 16px, weight 400
• Height: 44px
• Color: #001f6b

Cards / Surfaces

• Background: #ffffff（メイン）/ #dae0e4（ブルーグレー面）/ #d5e9ff（ライトブルー面）
• Border: 1px solid #dae0e4 または border なし
• Border Radius: 4px（控えめな角丸）
• Shadow: 基本フラット（box-shadow: none）

Header

• Background: #ffffff
• Border Bottom: 1px solid #dae0e4
• Position: fixed top: 0
• z-index: 100

Footer

• Background: #465a64（ダークブルーグレー）
• Text: #dcebff（ライトブルー）
• Font Size: 10px
• Line Height: 2.0
• Padding: 40px 24px

5. Layout Principles

Spacing Scale（8px グリッド）

Container

• Max Width: 1200px
• Padding (horizontal): mobile 16px / desktop 32px

Border Radius Scale

Grid

• 12 カラムグリッド
• Gutter: 24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は ブルーグレーサーフェス #dae0e4 と ライトブルーサーフェス #d5e9ff の色面で表現
• 影を使う場合もネイビー系の影色 rgba(0, 31, 107, ...) を推奨（純黒の影よりブランドと調和する）

7. Do's and Don'ts

Do（推奨）

• テキストカラーは ネイビー #001f6b を使う（純黒 #000000 ではない）。AGC の最大の視覚的特徴
• CTA ボタンは #e40046 のシャープコーナー（radius 2px） で作る。角が立つことで精密・信頼の印象が出る
• 本文の line-height は 2.0 を基本にする。AGC の技術的な文章を読みやすく見せるリズム
• サーフェスは #dae0e4（ブルーグレー） と #d5e9ff（ライトブルー） を使い分け、白との3層で階層を表現
• フッターは #465a64 背景 + #dcebff テキスト のクールトーンで統一
• フォントは Noto Sans JP 一本で、ウェイトは 400（本文）と 700（見出し）の2段階
• リンクは #1566cc で、ネイビーテキストと区別しつつ同系色で調和させる

Don't（禁止）

• テキストに 純黒 #000000 を使わない — AGC ではネイビー #001f6b がテキストカラー
• CTA ボタンを pill（9999px） にしない — AGC のボタンは 2px の直角が特徴。pill はサブアクション（17px）のみ
• CTA に ブルー系（#3860be や #1566cc）を使わない — メイン CTA は必ずレッド #e40046
• ウォーム系のグレー（#f2f2f0、#737368 等）を使わない — AGC はクールトーン一貫
• 本文に line-height 1.5 以下 を使わない（AGC の line-height 2.0 のリズムが崩れる）
• letter-spacing に 負の値 を使わない — AGC は全体的に normal で統一
• 角丸を 8px 以上 にしない（シャープなコーポレート感が失われる）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Hero H1: 36px → 24〜28px
• Section H2: 18px → 16px
• 本文サイズは 16px を維持（line-height も 2.0 維持）
• ボタンは幅 100% のブロック表示に切り替え

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• CTA ボタン: 高さ 44px 以上（padding 12px 32px + ~13px font）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Primary Navy (Text): #001f6b
Accent Red (CTA): #e40046
Medium Blue (Pill): #3860be
Link Blue: #1566cc
Blue-Gray Surface: #dae0e4
Light Blue Surface: #d5e9ff
Footer Dark: #465a64
Footer Text: #dcebff
White: #ffffff

Font: "Noto Sans JP", sans-serif
Body Size: 16px / line-height 2.0 / weight 400 / letter-spacing normal
H1: 36px / line-height 1.3 / weight 400
H2: 18px / line-height 1.2 / weight 700
Button: ~13px / weight 600 / letter-spacing 0.01em

CTA Radius: 2px（シャープ）
Pill Radius: 17px（サブアクション用）
Card Radius: 4px
Shadow: 基本 none。階層は #dae0e4 / #d5e9ff サーフェスで表現

プロンプト例

AGC のデザインに従って、素材メーカーの製品紹介セクションを作成してください。
- フォント: "Noto Sans JP", sans-serif
- テキストカラー: #001f6b（ネイビー）— 純黒は使わない
- セクション見出し: 18px / weight 700 / line-height 1.2 / color #001f6b
- 本文: 16px / weight 400 / line-height 2.0 / letter-spacing normal / color #001f6b
- リンク: 16px / weight 400 / line-height 1.8 / color #1566cc
- 主要 CTA: 背景 #e40046（レッド）/ 白文字 / border-radius 2px / padding 12px 32px / ~13px / weight 600
- サブボタン: 背景 #3860be（ミディアムブルー）/ 白文字 / border-radius 17px / padding 8px 20px
- セカンダリ: 背景 白 / 文字 #001f6b / border 1px solid #001f6b / radius 2px
- カード背景: 白 #ffffff、強調面は #dae0e4（ブルーグレー）または #d5e9ff（ライトブルー）
- フッター: 背景 #465a64 / テキスト #dcebff
- box-shadow は基本 none。立体感は色面で表現
- 角丸は 2〜4px のシャープ路線。pill は 17px のサブアクション専用
- ウォーム系グレーは使わない。クールトーン一貫