Canon（キヤノン） DESIGN.md

Canon（https://canon.jp/）のデザイン仕様書。 カメラ・プリンター・複合機を中心とした総合イメージングメーカーのコーポレートサイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: Canon Red #cc0000 をブランドアクセントに、Noto Sans JP 統一の端正なタイポグラフィと pill 型ボタン（radius 40px） で構成されたモダンコーポレートデザイン
• 密度: 本文 line-height 1.5（24px / 16px）で標準的。大きな見出し（38px）とゆったりしたカードレイアウトで、プレミアム感を演出
• キーワード: Canon Red、Noto Sans JP 統一、pill ボタン、モダンコーポレート、プレミアム感
• 特徴:
  • 和文フォントに Noto Sans JP のみを使用。環境を問わず統一的な表示
  • Canon Red #cc0000 は「個人のお客さま」「法人のお客さま」カードの背景に使用。テキストは白 #ffffff で、大胆な面使いが特徴
  • CTA は pill 型（border-radius: 40px）のゴーストボタン。border 1px solid #222222 のダーク枠線で、ホバー時に赤背景に変化するクラス（of-hover-bg-red）が存在
  • キービジュアルのCTAには box-shadow 付きの角丸ボタン（radius 6px, shadow 3px 3px 10px rgba(0,0,0,0.1)）
  • テキスト色は #222222（near-black）が基本。#141414 をヘッダーロゴ・サイト名に使用
  • ニュースカード背景に #ffebeb（ライトピンク）を使い、赤のブランドカラーを柔らかく展開
  • フッターは ダーク背景（#f4f4f4 ライトグレー面 + 白テキスト #ffffff）
  • ダークモード非対応

2. Color Palette & Roles

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

Brand — Canon Red

Neutral

Surface / Background

CTA / Buttons

• Pill CTA（Primary）: 背景 #ffffff / 文字 #222222 / border 1px solid #222222 / radius 40px / padding 18px / 15px / weight 700
• Pill CTA（on Red）: 背景 #ffffff / 文字 #222222 / border 1px solid #ffffff / radius 40px — 赤背景上で白ボーダー。クラス of-hover-bg-red でホバー時に赤に変化
• KV Button: 背景 #ffffff / 文字 #222222 / border 1px solid #dbdbdb / radius 6px / padding 18px 12px / shadow 3px 3px 10px rgba(0,0,0,0.1) / 16px bold
• 404 Navigation Button: 背景 #ffffff / 文字 #222222 / border 1px solid #dbdbdb / radius 6px / shadow 3px 3px 10px rgba(0,0,0,0.1) / padding 14px 18px / 16px bold

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

• Danger: #cc0000（Canon Red を流用）
• Success: #00875a
• Warning: #cc7700

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP のみ。Google Fonts で配信
• 明朝体: 使用しない

3.2 欧文フォント

• Noto Sans JP 内蔵の欧文グリフを使用
• 専用の欧文書体指定なし

3.3 font-family 指定

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

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

• Noto Sans JP 1書体のみのシンプルなスタック
• Google Fonts で確実に配信されるため、フォールバック不要
• 環境を問わず統一的な表示が保証される

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

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5〜1.65
• 見出しの行間: 1.2〜1.3（大見出しはタイトに）
• カード説明文の行間: 1.8（ゆったり）
• 本文の字間 (letter-spacing): normal（0）
• カード説明文: 0.03em（唯一 letter-spacing が指定されている要素）

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern ともに未使用。Noto Sans JP のデフォルトメトリクスをそのまま使用

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Pill Primary

• Background: #ffffff
• Text: #222222
• Border: 1px solid #222222
• Padding: 18px
• Border Radius: 40px
• Font Size: 15px
• Font Weight: 700

Pill on Red Background

• Background: #ffffff
• Text: #222222
• Border: 1px solid #ffffff
• Padding: 18px
• Border Radius: 40px
• Font Size: 15px
• Font Weight: 700
• Hover: 背景が Canon Red #cc0000 に変化

KV Button（キービジュアル）

• Background: #ffffff
• Text: #222222
• Border: 1px solid #dbdbdb
• Padding: 18px 12px
• Border Radius: 6px
• Font Size: 16px
• Font Weight: 700
• Shadow: 3px 3px 10px rgba(0,0,0,0.1)

Inputs

• Background: #fafafa
• Border: 1px solid #e6e6e6
• Border Radius: 0px
• Padding: 8px 64px 8px 20px（デスクトップ）/ 8px 48px 8px 10px（ドロワー）
• Font Size: 16px
• Color: #727272（プレースホルダー）

Cards

• Background: #ffffff または #ffebeb（ライトピンク）
• Border: none
• Border Radius: 0px
• Shadow: none
• 大きなビジュアルカードレイアウト。テキストオーバーレイまたは下部配置

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 16px〜40px

Grid

• Columns: 可変（カードグリッド、2〜4カラム）
• Gutter: 16px〜24px

6. Depth & Elevation

基本はフラット。KV ボタンや重要なナビゲーション要素にのみ影を適用。

7. Do's and Don'ts

Do（推奨）

• Canon Red #cc0000 は面（カード背景）で使い、白テキストとのコントラストを確保する
• CTA は pill 型（radius 40px）のゴーストボタンを基本にする
• 大見出しは 38px bold で存在感を出す
• Noto Sans JP のみのシンプルなフォントスタックを維持する
• ニュース・お知らせ領域は #ffebeb（ライトピンク）背景で赤を柔らかく展開する
• KV ボタンには box-shadow を付けて重要度を示す

Don't（禁止）

• Canon Red #cc0000 を小さなテキストの色に使わない（可読性低下）
• #000000 純黒をテキスト色に使わない（実測値は #222222）
• ボタンに小さな radius（3px〜5px）を使わない（pill 40px か角丸 6px）
• Noto Sans JP 以外のフォントを追加しない
• letter-spacing を広げすぎない（ほぼ normal で運用）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• モバイルでは見出しを縮小（38px → 24px 程度）
• pill ボタンの padding を縮小

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #cc0000 (Canon Red)
Text Color: #222222
Header Text: #141414
Background: #ffffff
Light Pink BG: #ffebeb
Light Gray BG: #f4f4f4
Font: "Noto Sans JP", sans-serif
Body Size: 16px
Line Height: 1.5
Button: pill (radius 40px) or rounded (radius 6px)

プロンプト例

Canon のデザインシステムに従って、製品一覧ページを作成してください。
- フォントは "Noto Sans JP" のみ使用
- テキスト色は #222222、背景は #ffffff
- セクション見出しは 38px bold
- CTA は pill 型ボタン（radius: 40px, border: 1px solid #222222, padding: 18px, font-weight: 700）
- 重要なカードには Canon Red #cc0000 背景 + 白テキストを使用
- ニュースカードは #ffebeb 背景