KOKUYO（コクヨ） DESIGN.md

KOKUYO（https://www.kokuyo.co.jp/）コーポレートサイトのデザイン仕様書。 「Curiosity is Life — 好奇心を人生に」を掲げる文具・家具・空間・通販を横断する大手メーカー。 2024年に CI/VI を全面リニューアルし、カテゴリごとにブランドカラーを割り当てたモジュラー型ナビゲーションと、Helvetica Now Text + 田鶴ゴシック StdN（Morisawa）の混植が特徴。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白 #ffffff の上に、カテゴリ別の彩度高めブランドカラーパネル（青・緑・桃・赤・砂色・黄）をタイル状に配置するカラフルだが整理されたモジュラー UI。文字は Helvetica Now Text + 田鶴ゴシック StdN という洗練された欧米寄り混植
• 密度: 本文 17px / line-height 24px（≈1.41）、見出し 19px / weight 500、ボタンや CTA はすべて OKLCH 色空間で統一された彩度カーブで定義。色面同士のコントラストは強いが彩度が揃っているので調和する
• キーワード: Helvetica Now Text、田鶴ゴシック StdN（Morisawa）、Curiosity is Life、OKLCH パレット、カテゴリカラータイル、palt 適用、純白背景、モジュラーナビ
• 特徴:
  • CSS Custom Properties が約 50 種類と充実（--brand_blue / brand_red / brand_pink / brand_green / cyan / purple / salmon / tan / sand / sun / violet / cloud / bean / lavender / mint / apricot / sea / cream / lemon 等）
  • OKLCH（CIE LAB ベース）色空間を採用 — oklch(0.79 0.14 221) 等で記述。すべての色が 明度 0.7〜0.9 / 彩度 0.12〜0.17 に揃えられており、トーンが統一されている
  • カテゴリごとにキーカラーを割り当て: 文具＝シアン青、家具＝緑、空間＝ピンク、通販＝赤、マガジン＝クリーム黄
  • 全要素で font-feature-settings: "palt" を有効化 — 田鶴ゴシックの和文プロポーショナル詰めを最大限活かす
  • Spacing スケールが 8px 基準（--space8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 112 / 144）— 8px → 16px → 24px → 32px → 48px と倍々ではなく加算的に伸びるカスタムスケール
  • 黒は純黒ではなく oklch(0.2718 0.001 0) ≈ #313131（--black100）
  • ボーダー・区切り線は --gray_line、ボタン背景は --gray_btn、汎用面背景は --gray_bg と命名規則が明確
  • ダークモード非対応

2. Color Palette & Roles

実サイトの computed style 実測値。OKLCH を hex 換算して併記。 KOKUYO は OKLCH ベースの統一カーブで、彩度・明度が一定の範囲に揃っている。

Brand Category Colors（カテゴリパネルの面色）

• 文具 / Stationery (oklch(0.79 0.14 221) ≈ #5dadd1): シアン青。文具カテゴリのキーカラー
• 家具 / Furniture (oklch(0.73 0.17 159) ≈ #3eb088): エメラルドグリーン。家具カテゴリ
• 空間 / Space (oklch(0.84 0.12 337) ≈ #e08bbf): ピンク。空間カテゴリ
• 通販 / Mail Order (oklch(0.72 0.16 20) ≈ #e76654): コーラルレッド。通販カテゴリ
• コクヨを知る / About (oklch(0.9 0 200) ≈ #dde5e7): 淡いブルーグレー。企業情報セクション
• マガジン / Magazine (oklch(0.89 0.02 93) ≈ #e6e2cb): 淡いクリーム。マガジン

Surface / Background

• Background White (oklch(1 0 0) ≈ #ffffff): ページ基本背景（--white100）
• Surface Sand (oklch(0.9696 0.0696 125.09) ≈ #ecf5d5): キャンパスノート的な明るい黄緑（--sand または --lemon 系）
• Surface Light (oklch(0.95 0 0) ≈ #eeeeee): カード背景・お知らせバナー（--gray_bg）
• Border Light (oklch(0.85 0 0) ≈ #d4d4d4): 区切り線・ボタン枠（--gray_line）

Text

• Black 100 (oklch(0.2718 0.001 0) ≈ #313131): 本文・見出し（--black100）。純黒ではなく若干グレー寄り
• Gray Text (oklch(0.51 0 0) ≈ #7a7a7a): 補足テキスト（--gray_text）
• Gray Text Light (推奨 #a4a4a4): さらに薄い補助（--gray_text_light）
• White (#ffffff): カラーパネル上のテキスト

Extended Palette（CSS Custom Properties で定義 / 実 UI で時々登場）

KOKUYO のフルパレット（OKLCH ベース、明度 0.79〜0.97、彩度 0.05〜0.17 で揃う）

Semantic（補完）

• KOKUYO では --brand_red (#e76654) を通販カテゴリのキーカラーとして使うため、エラー色には使わない
• ステータス色を作る場合: エラー #d04a3a / 警告 #e8a943 / 成功 #3eb088（家具と同色なら別トーン推奨）

3. Typography Rules

3.1 和文フォント

• メイン（ゴシック）: TazuganeGothicStdN（田鶴ゴシック StdN / Morisawa） — 田鶴明朝とペアで設計された Morisawa の humanist gothic。ややカリグラフィックで温かみがある
• フォールバック: システム sans-serif

3.2 欧文フォント

• メイン: HelveticaNowText（Monotype） — Helvetica の現代的リバイバル。よりオプティカルに最適化されたグリフ
• 省略形: hnr（HelveticaNowText の Variable Font 版を CSS 内でカスタム名称）
• フォールバック: システム sans-serif

3.3 font-family 指定

実サイトの実測値:

cssfont-family: hnr, HelveticaNowText, TazuganeGothicStdN, sans-serif;

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

• 欧文 hnr / HelveticaNowText を先頭に置く — ASCII グリフは Helvetica Now Text で組まれる
• 和文は TazuganeGothicStdN（Morisawa）が最優先
• AI で再現する場合、HelveticaNowText・TazuganeGothicStdN ともに商用ライセンスのため:
  • 欧文代替: Inter / "Helvetica Neue" / Arial
  • 和文代替: "Noto Sans JP" / "Hiragino Kaku Gothic ProN" / sans-serif
• 全要素で "palt" 有効

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

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

注: Sliderヒーローの h1/h2 は装飾要素として font-size: 1px で隠蔽されており、視覚的なテキストは画像 / SVG または別タグで表現されている。AI で再現する場合、ヒーローの大型キャッチは見た目のサイズで指定 すること（例: 64〜80px の Helvetica Now Text Bold）。

3.5 行間・字間

• 本文の行間 (line-height): 1.41（24px / 17px）— 欧文寄りのやや締まったプロポーション
• 見出しの行間: 1.47（28px / 19px）
• トグル小文字の行間: 1.82（20px / 11px）— 小文字の余裕を確保
• letter-spacing: ほぼ全要素で normal — palt の自動詰めに任せる

ガイドライン:

• 田鶴ゴシック + Helvetica Now Text の組み合わせは詰まり気味になりやすい — letter-spacing: normal + palt で自動調整に委ねる
• カラーパネル上のラベルは weight 500 で太めに（白文字の可読性確保）
• 本文を line-height: 1.4〜1.5 に保ち、欧米寄りのリズムを維持

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 田鶴ゴシックは humanist スタイルで、禁則自動処理との相性が良い

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• 全要素で "palt" を有効化（実測で確認）— 田鶴ゴシックの和文プロポーショナル詰めをサイト全体に適用

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Category Tile（gnaviButton） — トップナビの大型カラーパネル

• Background: カテゴリカラー（oklch(0.79 0.14 221) 等）
• Text: #ffffff または #000000（明度に応じて選ぶ）
• Padding: 32px（推奨。実測 padding-top 32px、padding-left 32px）
• Border Radius: 0px（タイルは矩形）
• Font: HelveticaNowText + TazuganeGothicStdN, weight 400〜500

News Card — お知らせのカード

• Background: #eeeeee（--gray_bg、oklch(0.95 0 0)）
• Text: #313131（--black100）
• Padding: 24px
• Border Radius: 0px（推奨。実測 0）
• Font: 17px / weight 500 / lh 1.41

Toggle (アニメ ON/OFF)

• Background: #ffffff（OFF）/ #000000（ON）
• Border: 1px solid #d4d4d4
• Text: 11px / weight 500 / lh 20px
• ピル状

Inputs

実 UI に大きく表面化していないが、KOKUYO トーンに合わせる場合:

• Background: #ffffff
• Border: 1px solid #d4d4d4（--gray_line）
• Border (focus): 2px solid カテゴリキーカラー（--keycolor）
• Border Radius: 0px または 8px
• Padding: 12px 16px（--space16 / --space12）
• Font: HelveticaNowText + TazuganeGothicStdN 17px

Cards

• Background: #ffffff または --gray_bg (#eeeeee)
• Border: なし or 1px solid #d4d4d4
• Border Radius: 0px（基本）/ 8px（カラーパネル外の汎用カード）
• Padding: 24px（--space24）
• Shadow: フラット（基本影なし）

Header / Nav

• Background: #ffffff
• Color: #313131
• Padding: 16px 32px（推奨）
• ロゴ KOKUYO 左、検索・言語切替・ナビ右

Footer

• Background: #ffffff
• Color: #313131
• Padding: 64px 32px（--space64 / --space32）

5. Layout Principles

Spacing Scale（CSS Custom Properties 実測）

8px ベースで加算的（8 → 16 → 24 → 32 → 48 → 64 → 80 → 96 → 112 → 144）

Container

• Max Width: 推奨 1280〜1440px
• ヘッダー高さ: --headAreaHeight
• スクロールバー幅: --scrollbar
• Viewport 単位: --vw / --vwnounit（カスタム CSS Variables）

Border Radius Scale

Grid

• カラーパネル: 5〜6 タイルの横並び（コクヨを知る、文具、家具、空間、通販、マガジン、衣・食・住）
• ニュース: 1〜3 カラム（カード型）

6. Depth & Elevation

• KOKUYO は色面で構造を作るため、影はほぼ使わない
• ホバー時に薄い影でフィードバックする程度

7. Do's and Don'ts

Do（推奨）

• HelveticaNowText + TazuganeGothicStdN の混植で組む（欧文先頭、和文 Morisawa を 2 番目）
• 全要素で font-feature-settings: "palt" を有効化
• 本文 line-height は 1.41（24/17）に統一（欧米寄りの締まったリズム）
• カテゴリカラーは OKLCH 色空間で定義し、明度 0.7〜0.9 / 彩度 0.12〜0.17 に揃える（トーン統一）
• カラーパネル上のラベルは weight 500 / #ffffff で
• Spacing は 8px ベースの加算スケール（8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 112 / 144）
• 純黒は使わず、#313131（--black100） をテキスト基本色に
• --keycolor をページごとに切り替え（カテゴリ別の演出）

Don't（禁止）

• 純黒 #000000 を本文に多用しない
• カラーパネル外のカードに派手な色を使わない（白＋グレー＋テキストで構成）
• 影を多用しない（KOKUYO は色面で構造を作る）
• カテゴリカラーを意味のない場所に流用しない（必ずカテゴリと紐付ける）
• 文具の青（--brand_blue）と通販の赤（--brand_red）を CTA エラー色に転用しない
• letter-spacing を強く付けない（palt の自動調整を尊重）

8. Responsive Behavior

Breakpoints

モバイル時の調整

• カラーパネル: 5〜6 タイル横並び → 2 カラム → 1 カラム積み
• 本文: 17px → 15〜16px
• 見出し: 19px → 17px
• Spacing: --space64 → --space32 等で半減

タッチターゲット

• 最小 44×44px。カラーパネルは 96〜112px 角を確保

ダークモード

• 該当なし。常時ライトモード

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff
Text: #313131 (oklch(0.2718 0.001 0), --black100)
Text Muted: #7a7a7a (--gray_text)
Surface Light: #eeeeee (--gray_bg)
Border: #d4d4d4 (--gray_line)

Brand Cyan (文具): #5dadd1 (oklch(0.79 0.14 221), --brand_blue)
Brand Green (家具): #3eb088 (oklch(0.73 0.17 159), --brand_green)
Brand Pink (空間): #e08bbf (oklch(0.84 0.12 337), --brand_pink)
Brand Red (通販): #e76654 (oklch(0.72 0.16 20), --brand_red)
Brand Sand: #ecf5d5 (oklch(0.9696 0.0696 125.09), --sand)
Brand Cloud: #dde5e7 (oklch(0.9 0 200), --cloud)

Font: hnr, HelveticaNowText, TazuganeGothicStdN, sans-serif
Web Fallback (代替): Inter, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif

Heading: 19px / weight 500 / line-height 1.47 / letter-spacing normal / palt
Body: 17px / weight 400-500 / line-height 1.41 (24px) / letter-spacing normal / palt
Card Label (white on color): 17px / weight 500 / color #ffffff / palt

Spacing: 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 112 / 144（加算スケール）
Border Radius: 0px（カラーパネル）/ 8px（汎用カード）/ 999px（トグル）
Shadow: none（基本フラット）
font-feature-settings: "palt"（全要素）

プロンプト例

KOKUYO のデザインに従って、商品カテゴリ一覧ページを作成してください。
- 背景: #ffffff
- フォント: hnr, HelveticaNowText, TazuganeGothicStdN, sans-serif
  （Web 代替: Inter, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif）
- 全要素で font-feature-settings: "palt" を有効化
- 本文: 17px / weight 400 / line-height 1.41 (24px) / color #313131
- 見出し: 19px / weight 500 / line-height 1.47 / color #313131
- カテゴリパネル（4〜6タイル）:
  - 文具: bg #5dadd1 (oklch(0.79 0.14 221))
  - 家具: bg #3eb088 (oklch(0.73 0.17 159))
  - 空間: bg #e08bbf (oklch(0.84 0.12 337))
  - 通販: bg #e76654 (oklch(0.72 0.16 20))
  - パネル内ラベル: white text / 17px / weight 500 / palt
  - padding: 32px、角丸 0px
- ニュースカード: bg #eeeeee / padding 24px / 角丸 0px
- Spacing は 8px ベース加算スケール（8/16/24/32/48/64/80/96/112/144）
- 純黒 #000000 は使わず、#313131（--black100）を基本テキスト色に
- letter-spacing は付けず、palt の自動詰めに任せる
- 影はほぼ使わない（カラーパネルで構造を作る）
- CTA ボタンは矩形 + カテゴリキーカラー + 白文字