CAPCOM (カプコン) DESIGN.md

CAPCOM（https://www.capcom.co.jp/）のデザイン仕様書。 1983年設立の大手ゲームメーカー。ストリートファイター、バイオハザード、モンスターハンター、デビルメイクライ等を擁する。 コーポレートサイトはゲーム情報・IR・プレスリリースのポータル。 実サイトの computed style 実測（2026-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白基調のクリーンなコーポレートポータル。各コンテンツ領域を 色分けされたセクションカラー で識別する情報設計が特徴。ゲーム企業らしい彩度の高いカテゴリカラーと、堅実な企業サイトとしての構造が共存
• 密度: 本文 line-height 1.0〜1.5 と密度が高い。14px / 13px の小さめテキストが中心で、ニュースポータルに近い情報密度
• キーワード: コーポレートポータル、セクションカラー色分け、コンパクト組版、レガシーCSS、ヒラギノ角ゴ
• 特徴:
  • カテゴリカラーシステム: ゲーム情報=ブルー #0063a2、プレスリリース=ティール #3a6565、IR・会社情報=パープル #6a458d、イベント=シアン #008fa1 と、セクションごとにブランドカラーを割り当てる大胆な配色
  • CSS Custom Properties は使用していない（レガシーなインライン寄りの CSS 設計）
  • フォントは ヒラギノ角ゴ Pro W3 を筆頭とするシステムフォントスタック。Webフォントは不使用
  • OpenType 機能（palt / kern）は未使用
  • コーポレートトップと各ゲームページでテンプレートが異なり、h1 サイズが 14px〜32px まで変動する
  • ナビゲーションに 負の letter-spacing (-2px) を使うコンパクト設計
  • ダークモード非対応

2. Color Palette & Roles

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

Section Colors（セクション識別カラー）

CAPCOMの最大の特徴である、コンテンツ領域ごとの色分けシステム:

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Sub (#555555): 補足テキスト
• Link Blue (#0044ab): ニュースリンクの文字色
• Dark BG (#141414): ダークセクション背景（フッター付近等）
• Light Gray BG (#f4f4f4): テーブル・詳細ページの面背景
• Border (#d8d8d8): 標準ボーダー
• Border Sub (#888888): ニュースリンクのボーダー
• Copyright Gray (#cccccc): コピーライト文字色
• Footer BG (#f2f2f2): フッターボタン背景
• Background (#ffffff): ページ背景

Semantic（推奨補完値）

実サイトにはエラー/成功/警告色が表面化していないため、セクションカラーとの整合性を考慮した補完値:

• Danger: #cc3333 — セクションカラーと彩度を揃えたレッド
• Success: #2e8b57 — ティールに近い落ち着いたグリーン
• Warning: #d4920a — ゲーム情報ブルーと対比するオレンジ

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴ Pro W3 を最優先。トップページとゲームページで微妙にスタック構成が異なる
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• 専用の欧文書体は持たず、和文フォントの欧文グリフを使用
• フォールバックに Osaka、MS PGothic を含むレガシー構成

3.3 font-family 指定

css/* トップページ（コーポレート） */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* ゲーム個別ページ */
font-family: "Hiragino Kaku Gothic ProN", sans-serif;

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

• トップページは ヒラギノ角ゴ Pro W3（日本語名指定 + 英語名のダブル指定）を筆頭に、Windows 向けメイリオ、古い Mac 向け Osaka、さらに古い Windows 向け MS PGothic まで幅広くカバーするレガシー構成
• ゲーム個別ページは Hiragino Kaku Gothic ProN（ProN 版）を使用。トップページの Pro W3 とは別バリアント
• Webフォントは一切使用しない完全システムフォント運用

Pro と ProN の違い: Pro（Apple 従来版）は JIS X 0208 の文字セットに従い、一部の漢字が旧字体。ProN（JIS X 0213 準拠）は新字体に更新されている。ページテンプレートごとに使い分けがある

代替フォント注記: ヒラギノ角ゴは macOS / iOS のシステムフォントのため、Windows や Linux では表示されない。プレビューや社外環境では Noto Sans JP を代替として使用すると、ニュートラルなゴシック体の印象が近い（preview.html はこの代替を使用）。

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

実測値（トップページ + ゲーム情報ページ、2026-06 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (14px): 1.0（14px / 14px）— 一般的な日本語サイトより非常にタイト
• セクション見出し (14px): 1.5（21px / 14px）
• ナビ (13px): 1.5（19.5px / 13px）
• ゲームページ h1 (32px): normal（ブラウザ既定、約 1.2）

字間 (letter-spacing) — 実測:

• ナビ: -2px（-0.15em 相当）。日本語ナビとしては極端に詰める。タブ状のコンパクトレイアウトのため
• その他の要素: normal（letter-spacing の明示指定なし）

ガイドライン:

• CAPCOM のコーポレートサイトは line-height 1.0〜1.5 の密度の高い組版。記事ページではなくポータルサイト向けの設計
• ナビの -2px letter-spacing は特殊。再現時はカテゴリタブ幅の制約に注意
• 一般的な日本語サイトの推奨（line-height 1.7〜2.0）とは異なる方針であることを認識した上で運用する

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: auto;

• レガシーなテーブルレイアウトに近い構成のため、禁則処理の明示設定は少ない
• ニュースリスト等は固定幅のカラム内に収めるスタイル

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern 等の OpenType 機能は一切使用していない
• システムフォントの既定メトリクスに依存する方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

News Link Button — ニュースカテゴリリンク

• Background: transparent
• Text: #0044ab
• Border: 2px solid #888888
• Padding: 15px 20px
• Border Radius: 4px
• Font: 12px, weight 700

Footer Button — フッターアクション

• Background: #f2f2f2
• Text: #333333
• Border: 1px solid #d8d8d8
• Padding: 内部 line-height 48px で高さ確保
• Border Radius: 4px
• Font: 14px, weight 400

Section Header Button — カテゴリセクション見出し

• Background: セクションカラー（#0063a2 / #3a6565 / #6a458d / #008fa1）
• Text: #ffffff
• Padding: セクション全幅
• Border Radius: 0（角型）
• Font: 14px, weight 700

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #d8d8d8
• Border (focus): 2px solid #0063a2（Game Blue をフォーカス色に）
• Border Radius: 4px
• Padding: 8px 12px
• Font: 14px, weight 400
• Height: 36px

Cards / Surfaces

• Background: #ffffff（メイン）/ #f4f4f4（テーブル・詳細背景）
• Border: 1px solid #d8d8d8
• Border Radius: 0〜4px（基本的に角型〜微小角丸）
• Shadow: 基本なし（フラットデザイン）

Header

• Background: #ffffff または各セクションカラー
• Border Bottom: セクションカラーに依存
• Position: static（スクロール追従なし）

Footer

• Background: #141414（ダーク）
• Text: #cccccc
• Padding: 20px 0

5. Layout Principles

Spacing Scale（実測ベースの 4px グリッド）

Container

• Max Width: 960px 程度（コーポレートトップ）
• Padding (horizontal): 15px〜20px

Grid

• テーブルレイアウトに近い CSS 構成が残る
• ニュースリストは 1 カラム、ゲーム一覧は 3〜4 カラムグリッド
• Gutter: 10px〜20px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 階層の表現は セクションカラーの帯 と 背景色の切り替え（白 / #f4f4f4 / #141414）で行う
• 影を使うより ボーダー #d8d8d8 で区切る方がサイトのトーンに合う

7. Do's and Don'ts

Do（推奨）

• セクションごとに カテゴリカラー（Blue / Teal / Purple / Cyan）を一貫して使う。色でコンテンツ領域を識別する CAPCOM のナビゲーション設計を踏襲する
• 和文フォントは ヒラギノ角ゴ Pro W3 を最優先に、メイリオ → Osaka → MS PGothic のレガシーフォールバックを維持する
• テキストサイズは 13px〜14px を中心に、情報密度の高いポータルレイアウトを保つ
• セクション見出しは 色付き帯の上に白文字（14px / 700）で統一する
• ボーダーには #d8d8d8 を使い、サイト全体のグリッドを明示する
• ダーク背景（#141414）はフッター等の限定領域にとどめる
• ニュースリンクは #0044ab を使い、セクションカラーの #0063a2 とは区別する

Don't（禁止）

• カテゴリカラーを セクション以外でランダムに使わない — 色の識別機能が壊れる
• ヒラギノ角ゴのフォールバックに Noto Sans JP や游ゴシックを混ぜない — CAPCOM のレガシースタックはシステムフォント完結
• 本文に line-height: 2.0 以上を使わない — ポータルの密度が崩れる
• セクション見出しの 白文字をグレーにしない — 背景色とのコントラストが弱まる
• border-radius を 8px 以上にしない — CAPCOM は 0〜4px の角型デザイン。丸み過剰はブランドに合わない
• ナビの letter-spacing -2px を 本文にまで適用しない — ナビのコンパクトタブ専用の処理

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• ゲームページ h1: 32px → 24px
• ナビの letter-spacing -2px は解除し、メニューをドロワー化
• ニュースリスト: 固定幅テーブル → 1カラムリスト
• セクションカラー帯は維持（色による識別をモバイルでも保つ）

タッチターゲット

• ニュースリンクボタン: padding 15px 20px で高さ 44px 以上を確保
• フッターボタン: line-height 48px で WCAG 基準クリア

ダークモード

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

9. Agent Prompt Guide

クイックリファレンス

Section Colors:
  Game Blue:    #0063a2
  Press Teal:   #3a6565
  IR Purple:    #6a458d
  Event Cyan:   #008fa1

Text Primary:   #333333
Text Sub:       #555555
Link Blue:      #0044ab
Dark BG:        #141414
Light Gray BG:  #f4f4f4
Border:         #d8d8d8
Copyright:      #cccccc
Background:     #ffffff

Font (top): "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Font (game): "Hiragino Kaku Gothic ProN", sans-serif
（環境非依存の代替: Noto Sans JP）

Body Size: 14px / line-height 1.0〜1.5 / weight 400 / letter-spacing normal
Section Title: 14px / weight 700 / line-height 1.5 / white on section color
Nav: 13px / weight 700 / letter-spacing -2px
Game Page H1: 32px / weight 700 / line-height normal
News Link: 12px / weight 700 / color #0044ab / border 2px solid #888

Border Radius: 0〜4px（角型基調）
Shadow: 基本 none。階層はセクションカラー帯と背景色切り替えで表現

プロンプト例

CAPCOMのデザインに従って、ゲーム情報ポータルのニュース一覧セクションを作成してください。
- フォント: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
- セクション見出し: 背景 #0063a2（Game Blue）に白文字 14px / weight 700 / line-height 1.5
- ニュースリンク: #0044ab / 12px / weight 700 / border 2px solid #888 / radius 4px
- 本文: 14px / weight 400 / line-height 1.0 / color #333333
- 補足テキスト: 14px / weight 700 / color #555555
- ボーダー: #d8d8d8
- 背景: #ffffff（メイン）/ #f4f4f4（テーブル行）
- border-radius は 0〜4px（角型）
- セクションカラーで領域を色分け: ゲーム=#0063a2, プレスリリース=#3a6565, IR=#6a458d, イベント=#008fa1
- 影は使わない。ボーダーと背景色で階層を表現