KUMON DESIGN.md

KUMON（https://www.kumon.ne.jp/）のデザイン仕様書。 公文教育研究会の公式サイト。実サイトの computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 教育ブランドとしての信頼感と親しみやすさを両立。カラフルな教科カラーと柔らかい角丸で、子どもから大人まで安心感を与えるデザイン
• 密度: 情報量は多いが、セクションごとに背景色を切り替えて視覚的な区切りを作り、読みやすさを維持
• キーワード: 親しみやすい、カラフル、教育的、信頼感、あたたかみ
• 特徴: 教科ごとに固有のブランドカラー（算数=青、英語=オレンジ、国語=緑、ズンズン=ゴールド）を持ち、CTAボタンはオレンジのpill形状で統一。カード要素には底部シャドウ（0px 6px 0px）で立体感を出す

2. Color Palette & Roles

Primary（ブランドカラー）

• KUMON Blue (#00a9e0): メインのブランドカラー。キャンペーン見出し背景、ブランドアクセントに使用
• CTA Orange (#faaf18): 「お近くの教室を探す」等の主要CTAボタン。ヘッダーの検索ボタンにも使用

Subject Colors（教科カラー）

• 算数・数学 (#00a9e0): ブルー。ブランドカラーと共用
• 英語 (#ff5700): オレンジ。英語教材のアクセント
• 国語 (#69be29): グリーン。国語教材のアクセント
• ズンズン (#f0ab00): ゴールド。運筆教材のアクセント

Surface Colors（面色）

• Light Blue (#d0f0ff): セクションボタン（「算数・数学を詳しく見る」等）の背景
• Warm Beige (#f2f1e6): コンテンツセクション（「くもんの先生」等）の背景
• Cool Blue (#e1ecf2): 特長セクション（「KUMONの魅力」等）の背景
• Cream Yellow (#fff0be): プロモーション帯（教室検索エリア）の背景
• Light Sky (#dcf4ff): フッターメニュー等の背景

Subject Tint Colors（教科の淡色背景）

• 英語 Tint (#ffe7db): 英語セクションの淡い背景
• 国語 Tint (#edffe0): 国語セクションの淡い背景

Semantic（意味的な色）

• Danger / Caution (#ff3f2f): 重要なお知らせ見出し（ttlCaution クラス）
• Badge Pink (#fa978d): キャンペーンバッジ

Neutral（ニュートラル）

• Text Primary (#1e1e1e): 本文テキスト
• Text White (#ffffff): 暗い背景上のテキスト
• Border Light (#efefef): 薄いボーダー（ナビゲーションシャドウ rgba(239,239,239,0.8)）
• Background (#ffffff): ページ背景
• Surface White (#ffffff): カード面、ボタン面

Interactive Accent

• Secondary Blue (#7dcdf4): ヘッダーの「学習中の方」バッジ、サポートラベル

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• Noto Sans JP（Google Fonts、主要和文フォント）
• ヒラギノ角ゴ Pro W3 / Hiragino Kaku Gothic Pro（macOS）
• メイリオ / Meiryo（Windows）
• MS Pゴシック（レガシー Windows）

3.2 欧文フォント

• サンセリフ: Lato（Google Fonts、欧文の先頭指定）

3.3 font-family 指定

css/* 本文・見出し共通 */
font-family: Lato, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

/* 入力欄（Lato なし） */
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

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

• 欧文フォント Lato を先頭に指定し、欧文の表示品質を優先
• Noto Sans JP を主要和文フォントとして配置（Google Fonts で読み込み）
• macOS のヒラギノ → Windows のメイリオ → レガシーの MS Pゴシック の順
• 入力欄は Lato を含まないスタック（ブラウザデフォルトに近い動作）

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

以下は公文式オフィシャルサイト（kumon.ne.jp）トップページの computed style 実測値

3.5 行間・字間

行間 (line-height) -- 実測値:

• 本文 (p): 27.2px (16px x 1.7) -- 日本語として標準的な広さ
• セクション見出し (h2): 54px〜61.2px (x1.35〜1.7) -- サイズにより変動
• カード見出し (h3): 24px (20px x 1.2)
• CTA ボタンテキスト: 30.6px (18px x 1.7)

字間 (letter-spacing) -- 実測値:

• 全要素: normal -- letter-spacing の追加指定はなし
• ナビゲーション要素のみ: -0.64px (= -0.04em) -- ネガティブスペーシング

ガイドライン:

• KUMON サイトは letter-spacing をほぼ使用していない。本文も見出しも normal
• ナビゲーションの -0.04em はコンパクト表示のための例外

3.6 禁則処理・改行ルール

css/* 特別な禁則設定は確認されなかった */
/* ブラウザデフォルトの禁則処理に依存 */

3.7 OpenType 機能

css/* トップページの全要素 */
font-feature-settings: normal;

• palt は適用されていない。すべての要素で font-feature-settings: normal
• letter-spacing も normal であり、文字詰めは行われていない

3.8 縦書き

• 該当なし。KUMON サイトは横書きのみ

4. Component Stylings

Buttons

Primary CTA（教室検索）

• Background: #faaf18（CTA Orange）
• Text: #ffffff
• Padding: 12px 40px 12px 28px
• Border Radius: 50px（pill）
• Font Size: 18px
• Font Weight: 400
• 矢印アイコン付き

Secondary CTA（詳しく見る系）

• Background: #ffffff
• Text: #1e1e1e
• Padding: 12px 36px 12px 18px
• Border Radius: 48px（pill）
• Font Size: 18px
• Font Weight: 700
• 矢印アイコン付き

Section Button（教科ページ誘導）

• Background: #d0f0ff（Light Blue）
• Text: #1e1e1e
• Padding: 12px 36px 12px 18px
• Border Radius: 40px（pill）
• Font Size: 18px
• Font Weight: 700
• 一部に border: 2px solid #7dcdf4

Header Badge

• Background: #7dcdf4（Secondary Blue）
• Text: #ffffff
• Padding: 0px 12px
• Border Radius: 3px
• Font Size: 14px
• Font Weight: 700

Nav CTA（ヘッダー内）

• Background: #faaf18
• Text: #ffffff
• Padding: 8px 15px 8px 35px
• Border Radius: 20px
• Font Size: 16px
• Font Weight: 700

Campaign Heading（キャンペーン見出し）

• Background: #00a9e0（KUMON Blue）
• Text: #ffffff
• Padding: 6px
• Border Radius: 8px
• Font Size: 44px
• Font Weight: 700
• Shadow: rgba(0,0,0,0.1) 0px 6px 0px 0px（底部シャドウ）

Inputs

• Background: #ffffff
• Border: 1px solid（色は要素による）
• Border Radius: 3px 0px 0px 3px（検索欄左側）
• Padding: 6px 10px（ヘッダー）/ 13px 15px（メイン）
• Font Size: 14px（ヘッダー）/ 16px（メイン）
• 検索ボタン: bg #faaf18、radius 0px 3px 3px 0px（右側）

Pill Input（教室検索エリア）

• Border Radius: 48px 0px 0px 48px
• Font Weight: 700
• Padding: 12px 20px

Cards（年齢別カード）

• Background: transparent（画像背景）
• Border Radius: 8px
• Shadow: rgba(0,0,0,0.1) 0px 6px 0px 0px（底部のみ）
• Font Size: 20px
• Font Weight: 700

Accordion

• Background: #f2f1e6（Warm Beige）/ #ffffff
• Border Radius: 16px
• Padding: 24px 40px 24px 56px（左にアイコン余白）
• Font Size: 18px〜20px
• Font Weight: 700

FAQ Accordion

• Background: #ffffff
• Border Radius: 16px
• Padding: 24px 40px 24px 56px
• Font Size: 18px
• Font Weight: 700

5. Layout Principles

Container

• Max Width: 約1100px（コンテンツエリア推定）
• Padding (horizontal): 20px〜40px

Spacing

• セクション間: 大きな余白 + 背景色の切り替えで区切り
• カード間のギャップ: 均等配置
• セクション内: 24px〜40px の余白

特徴的なレイアウトパターン

• 背景色ストライプ: セクションごとに #ffffff → #e1ecf2 → #f2f1e6 → #ffffff と背景色を交互に切り替え
• フルワイドセクション: キャンペーンバナーや教室検索は画面幅いっぱい
• カードグリッド: 年齢別カードは横並びグリッド

6. Depth & Elevation

特徴: 一般的な全方位シャドウではなく、底部のみの0px 6px 0pxパターンを多用。ボタンを「押せる」印象にする効果。

7. Do's and Don'ts

Do（推奨）

• テキスト色は #1e1e1e（ほぼ黒）を使い、純粋な #000000 を避ける
• CTAボタンはオレンジ #faaf18 のpill形状（radius 40〜50px）で統一する
• 教科ごとに固有のカラーを使い分ける（算数=#00a9e0、英語=#ff5700、国語=#69be29、ズンズン=#f0ab00）
• セクションの区切りには背景色の切り替え（#e1ecf2, #f2f1e6, #d0f0ff）を使う
• カード要素には底部シャドウ 0px 6px 0px を使って立体感を出す
• 本文の line-height は 1.7 で組む
• フォントは Lato を欧文先頭に、Noto Sans JP を和文主体に配置する

Don't（禁止）

• 教科カラーを間違えて使わない（算数に緑を使う等）
• CTAボタンを四角（radius 0〜8px）にしない（pill形状が基本）
• letter-spacing や palt を追加しない（実サイトでは使用していない）
• ブランドカラー #00a9e0 をCTAボタンの背景に使わない（CTAは #faaf18 オレンジ）
• 全方位シャドウ（0px 4px 8px等）をカードに使わない（底部シャドウ 0px 6px 0px が正しい）
• セクション背景を白一色にしない（色の切り替えで区切るのがKUMON流）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px
• CTAボタンは十分な padding で確保

フォントサイズの調整

• モバイルでは見出しがデスクトップの 70〜80% 程度に縮小
• 本文は 16px を維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color (Blue): #00a9e0
CTA Color (Orange): #faaf18
Text Primary: #1e1e1e
Text White: #ffffff
Background: #ffffff
Surface Beige: #f2f1e6
Surface Cool Blue: #e1ecf2
Surface Light Blue: #d0f0ff
Secondary Blue: #7dcdf4
Danger: #ff3f2f

Subject Math: #00a9e0
Subject English: #ff5700
Subject Japanese: #69be29
Subject Zunzun: #f0ab00

Font: Lato, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif

Body Size: 16px / line-height: 1.7 / letter-spacing: normal
Heading: weight 700-900 / letter-spacing: normal / palt: なし
CTA Button: bg #faaf18, color #fff, radius 50px (pill), shadow 0px 6px 0px
Card Shadow: rgba(0,0,0,0.1) 0px 6px 0px 0px

プロンプト例

KUMON のデザインに従って、教室一覧ページを作成してください。
- フォント: Lato, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif
- テキスト色: #1e1e1e（純粋な黒は使わない）
- 背景: #ffffff、セクション背景は #e1ecf2 / #f2f1e6 / #d0f0ff を交互に使う
- CTAボタン: bg #faaf18, 白テキスト, pill形状 (radius 50px), 矢印アイコン付き
- カードのシャドウ: rgba(0,0,0,0.1) 0px 6px 0px 0px（底部のみ）
- 教科名は各教科カラーで表示: 算数=#00a9e0, 英語=#ff5700, 国語=#69be29
- 本文: 16px, line-height: 1.7, letter-spacing: normal, palt なし