SEGA DESIGN.md

SEGA Corporation（https://www.sega.co.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。ニュース・コーポレート情報を中心とした企業サイト。

1. Visual Theme & Atmosphere

• デザイン方針: クリーンで信頼感のあるコーポレートサイト。ニュース配信とIR情報が中心。SEGA ブルーを軸とした強い色彩アイデンティティ
• 密度: ゆったりとした余白。本文 line-height: 2.0 で可読性重視
• キーワード: コーポレート、クリーン、ブルーアイデンティティ、ニュースメディア、信頼
• 特徴: 複数のブルーシェードを使い分け、用途ごとに明確な色の役割を持たせている。欧文ディスプレイに Oswald、和文に Noto Sans JP という二軸フォント構成

2. Color Palette & Roles

Primary（ブランドカラー）

• SEGA Blue (#1627cc): メインブランドカラー。フッター背景、ナビセクション見出しに使用。深い青
• SEGA Bright Blue (#0086ff): ヘッダーロゴテキスト、EN ボタン背景、リンク CTA
• SEGA Sky Blue (#019fff): 「お知らせ一覧へ」CTA 背景、セクション見出し色、サブアクセント

Secondary（カテゴリ・バッジ）

• Category Blue (#49acde): 「製品・サービス」カテゴリバッジ背景
• Corporate Blue (#4a68de): 「企業」カテゴリバッジ背景
• Link Blue (#397ee5): ニュースリンクテキスト

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Nav (#595757): ナビゲーションテキスト
• Text Date (#adadad): 日付テキスト
• Background (#ffffff): ページ背景
• Surface (#f9f8f4): セクション背景（暖色系オフホワイト）
• Surface Button (#eeeeee): ページトップボタン背景
• Search Border (#0060ff): 検索入力ボーダー

3. Typography Rules

3.1 和文フォント

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

• Noto Sans JP（Google Fonts）

3.2 欧文フォント

• ディスプレイ: Oswald（Google Fonts、見出し・ナビゲーション用）
• サンセリフ: sans-serif（フォールバック）

3.3 font-family 指定

css/* 本文（和文） */
font-family: "Noto Sans JP", sans-serif;

/* 欧文ディスプレイ（見出し・ナビ） */
font-family: "Oswald", sans-serif;

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

• 和文は Noto Sans JP 単独指定。Google Fonts で Web フォントとして読み込み
• 欧文ディスプレイは Oswald。NEWS セクション見出しやコーポレートロゴテキストに使用
• Oswald は 700（Bold）のみ使用

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

以下は computed style による実測値

3.5 行間・字間

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

• 本文 (p): 28px (14px x 2.0) — 非常にゆったりした行間
• フッター: 21.6px (12px x 1.8)
• 見出し: ブラウザデフォルト

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

• 全要素: normal（letter-spacing の明示的な指定なし）

ガイドライン:

• 本文の line-height: 2.0 はニュース記事の可読性を重視した設定
• letter-spacing はサイト全体で normal。字詰めは行わない

3.6 禁則処理・改行ルール

css/* 標準的な設定 */
word-wrap: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

css/* サイト全体で palt / kern は適用されていない */
font-feature-settings: normal;

• palt: 未使用。本文・見出し共に normal
• kern: 未使用

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

EN Button

• Background: #0086ff
• Text: #ffffff
• Padding: 5px 8px
• Border Radius: 5px
• Font Size: 14px

CTA Link（お知らせ一覧へ）

• Background: #019fff
• Text: #ffffff
• Border Radius: 5px
• Font Size: 14px

Inputs

Search Input（検索）

• Background: #ffffff
• Border: 4px solid #0060ff
• Border Radius: 40px（ピル型）
• Padding: 10px 20px
• Font Size: 14px

Cards

• Background: #ffffff
• Border: なし（リストベースのニュースレイアウト）
• 区切り: ボーダーラインで分離

Category Badge

• Background: カテゴリ別（#49acde 製品・サービス / #4a68de 企業）
• Text: #ffffff
• Font Size: 12px
• Font Weight: 700
• Border Radius: 5px
• Padding: 3.5px 5px

5. Layout Principles

Spacing Scale

Container

• Max Width: 960px（推定）
• Padding (horizontal): 20px

Grid

• Columns: 1（ニュース一覧は単一カラム）
• Gutter: 16px

6. Depth & Elevation

• サイト全体がフラットデザイン寄り。シャドウの使用は控えめ
• フッターは #1627cc のベタ塗りで奥行きを表現

7. Do's and Don'ts

Do（推奨）

• 欧文ディスプレイ（NEWS、SEGA CORPORATION 等）には Oswald 700 を使う
• 和文テキストは全て Noto Sans JP で統一する
• ブルーの使い分けを守る: ディープブルー #1627cc はフッター/背景面、ブライトブルー #0086ff は CTA、スカイブルー #019fff はセクション見出し
• カテゴリバッジは背景色で種類を区別し、文字は白 700
• 検索入力はピル型（40px radius）で太いブルーボーダー（4px solid #0060ff）
• 本文は 14px / line-height: 2.0 のゆったりした行間を維持する
• テキスト色は #333333。純粋な #000000 は使わない

Don't（禁止）

• Oswald を和文テキストに使わない（欧文ディスプレイ専用）
• 複数のブルーを混同しない（各ブルーには明確な役割がある）
• 検索入力のボーダーを 1px に薄くしない（4px の太さがデザインの特徴）
• カテゴリバッジの角丸を丸くしすぎない（5px であって pill ではない）
• #333333 以外の色を本文テキストに使わない
• フッター背景に #0086ff 等の明るいブルーを使わない（#1627cc の深いブルーを使う）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは本文 14px を維持、見出しはデスクトップの 70-80% に縮小
• ナビゲーションはハンバーガーメニューに切り替え

9. Agent Prompt Guide

クイックリファレンス

Brand Blue (Deep): #1627cc（フッター・背景面）
Brand Blue (Bright): #0086ff（CTA・ロゴ）
Brand Blue (Sky): #019fff（セクション見出し・サブ CTA）
Search Border: #0060ff
Category Blue: #49acde（製品・サービス）
Corporate Blue: #4a68de（企業）
Link Blue: #397ee5

Text Primary: #333333
Text Nav: #595757
Text Date: #adadad
Background: #ffffff
Surface: #f9f8f4

JP Font: "Noto Sans JP", sans-serif
EN Display Font: "Oswald", sans-serif

Body Size: 14px / line-height: 2.0 / letter-spacing: normal
Section Title: 30px / 700 / color: #019fff
Category Badge: 12px / 700 / white on colored bg / radius: 5px
Search Input: radius: 40px / border: 4px solid #0060ff
palt: なし

プロンプト例

SEGA コーポレートサイトのデザインに従って、ニュース一覧ページを作成してください。
- 和文フォント: "Noto Sans JP", sans-serif
- 欧文見出しフォント: "Oswald", sans-serif（700、NEWS 等のセクション名に使用）
- テキスト色: #333333
- セクション見出し: 30px, 700, color: #019fff
- カテゴリバッジ: 12px, 700, white, radius 5px, bg は #49acde（製品）/ #4a68de（企業）
- CTA ボタン: bg #019fff, white, radius 5px
- 検索入力: border 4px solid #0060ff, radius 40px
- フッター: bg #1627cc, 白文字, 12px
- 本文: 14px, line-height: 2.0, letter-spacing: normal
- palt / kern は使わない