Square Enix DESIGN.md

Square Enix Co., Ltd.（https://www.jp.square-enix.com/）のデザイン仕様書。 実サイトの CSS computed style に基づく。ゲーム・出版物の総合情報ポータル。

1. Visual Theme & Atmosphere

• デザイン方針: 黒を基調とした重厚なダークテーマ。ゲームの世界観を引き立てるための「黒い額縁」として機能するサイト設計。赤いCTAボタンが黒背景の中で強い視線誘導を果たす
• 密度: 情報密度が高い。ニュース、ゲームタイトル、商品、スケジュールが1ページに集約されたポータル型
• キーワード: ダーク、シャープ、矩形、ゲーミング、ポータル
• 特徴: border-radius が全要素で 0px。角丸を一切使わない鋭角的なデザイン。CSS Custom Properties 不使用のレガシー構成。ヘッダーは白、メインコンテンツは黒、フッターはグレーという3層構造

2. Color Palette & Roles

Primary（ブランドカラー）

• Square Enix Red (#c80000): ブランドアクセント。CTAボタン背景、価格テキスト、リンクホバー。rgb(200, 0, 0) の実測値
• Black (#000000): メインコンテンツ領域の背景。ダークテーマの基盤

Secondary（ナビゲーション・構造）

• Nav Dark (#333333): ヘッダーナビゲーションバー背景。「ストア」「メンバーズ」等のメニュー項目
• Footer Grey (#e5e5e5): フッター背景、セカンダリボタン背景、カレンダーカード背景
• Dark Grey (#444444): フッター下部の補助背景

Neutral（ニュートラル）

• Text Primary (#000000): 白背景上のテキスト
• Text White (#ffffff): 黒背景上のテキスト、CTAボタンテキスト
• Text Subtle (#60676f): セクション見出し（トピックス、CM等）の控えめなグレー
• Background Header (#ffffff): ヘッダー領域の白背景
• Background Main (#000000): メインコンテンツ領域の黒背景
• Surface Card (#e5e5e5): カレンダーカード、記事カードの面
• Hero Overlay (rgba(0, 0, 0, 0.8)): ヒーロースライダーのキャプション背景
• Search BG (#ededed): 検索入力フィールド背景
• Search Border (#dedede): 検索入力フィールドのボーダー

3. Typography Rules

3.1 和文フォント

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

• メイリオ / Meiryo（Windows 環境のメイン）
• ヒラギノ角ゴ Pro W3 / Hiragino Kaku Gothic Pro（macOS 環境のメイン）

注意: 実サイトでは "ヒラギノ角ゴ Pro W3" を指定しているが、ProN ではなく Pro。また英語名の "Hiragino Kaku Gothic Pro" も併記されている

3.2 欧文フォント

• サンセリフ: Helvetica（最優先）、Arial（フォールバック）
• モバイル: "Doroid Sans"（Droid Sans の誤記と推測されるが、実サイトの指定をそのまま記録）

3.3 font-family 指定

css/* 全体（body） — 欧文優先型 */
font-family: Helvetica, Arial, "Doroid Sans", メイリオ, Meiryo,
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

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

• 欧文フォントを先に指定（Helvetica > Arial > Doroid Sans）
• 和文フォントはメイリオを先に（Windows カバレッジ優先）、ヒラギノが後
• 単一の font-family でサイト全体を統一。見出し・本文の使い分けなし
• Web フォントは不使用。OS インストールフォントのみに依存

preview.html 用の代替: Noto Sans JP（Google Fonts）をメイリオ / ヒラギノの代替として使用。preview.html でのみ適用

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

以下は computed style による実測値

3.5 行間・字間

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

• body: 15.75px (14px x 1.125) -- 非常にタイトな行間
• トピックタイトル: 22.54px (16.1px x 1.4)
• ヒーロー: 48.384px (40.32px x 1.2)
• フッター td: 24.5px (14px x 1.75)
• CTA ボタン: 50px（固定値、フォントサイズによらない）

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

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

ガイドライン:

• 本文の line-height: 1.125 は日本語サイトとしては異例に狭い。ゲーム情報ポータルとしての情報密度を優先した設計
• 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

Primary CTA（大）

• Background: #c80000
• Text: #ffffff
• Padding: 0px 108.6px（左右大きめ）
• Border Radius: 0px（角丸なし）
• Font Size: 22.12px
• Font Weight: 400
• Line Height: 50px（固定高さ）

Primary CTA（小）

• Background: #c80000
• Text: #ffffff
• Padding: 1% 2.5%
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400

Secondary（記事を読む）

• Background: #e5e5e5
• Text: #333333
• Padding: 内部で調整
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400
• Line Height: 30px

Inputs

Search Input（検索）

• Background: #ededed
• Border: 1px solid #dedede
• Border Radius: 2px（唯一角丸がある要素）
• Padding: 1px 10px 1px 35px（左にアイコン分の余白）
• Font Size: 14px

Cards

Calendar Card / Product Card

• Background: #e5e5e5
• Border: なし
• Border Radius: 0px
• Padding: 20px

Topic Card

• Background: #ffffff（白背景）
• Border: なし
• Border Radius: 0px
• Shadow: なし（フラットデザイン）

Nav Menu Button

• Background: #333333
• Text: デフォルトリンク色（ブラウザデフォルト）
• Padding: 0px 20px
• Border Radius: 0px
• ダイヤモンド装飾: CSS 擬似要素による菱形アイコン付き

5. Layout Principles

Spacing Scale

Container

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

Grid

• Columns: マルチカラム（トピックスはグリッド、カレンダーは1カラム）
• Gutter: 可変

6. Depth & Elevation

• サイト全体がフラットデザイン。box-shadow の使用は確認されていない
• 奥行きは色のコントラスト（白ヘッダー → 黒メイン → グレーフッター）で表現
• ヒーロースライダーは rgba(0,0,0,0.8) のオーバーレイで奥行きを演出

7. Do's and Don'ts

Do（推奨）

• CTAボタンは #c80000 の赤背景 + 白文字。角丸は 0px を厳守する
• 黒背景上のテキストは #ffffff を使い、コントラストを確保する
• ヘッダーは白背景、メインコンテンツは黒背景、フッターはグレー背景の3層構造を維持する
• font-family は欧文先頭（Helvetica > Arial）の指定順序を守る
• 価格表示は #c80000（ブランドレッド）で太字にする
• セクション見出し（トピックス、CM等）は #60676f のグレーで控えめに表示する
• ナビメニューは #333333 の暗いグレー背景に白系テキスト

Don't（禁止）

• border-radius を使わない（検索入力の 2px を除き、全要素 0px）
• 本文の line-height を 1.5 以上に広げない（1.125 のタイトな行間がこのサイトの特徴）
• #c80000 以外の赤をCTAに使わない
• ヒーローキャプションの背景を単色の黒にしない（rgba(0,0,0,0.8) の半透明を使う）
• Web フォントを追加しない（OS フォントのみの軽量設計が意図されている）
• ドロップシャドウやグロウエフェクトを加えない（完全なフラットデザイン）
• ナビの #333333 を #000000 に変えない（メインの黒背景と差別化するため）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• CTA ボタンの line-height: 50px で十分な高さを確保

フォントサイズの調整

• モバイルでは CTA ボタンのフォントサイズが 22.12px → 12.96px に縮小
• ナビゲーションはハンバーガーメニューに切り替え

9. Agent Prompt Guide

クイックリファレンス

Brand Red: #c80000（CTA・価格・リンクホバー）
Black BG: #000000（メインコンテンツ背景）
White BG: #ffffff（ヘッダー背景）
Nav Dark: #333333（ナビ背景）
Footer Grey: #e5e5e5（フッター背景）
Text Subtle: #60676f（セクション見出し）
Hero Overlay: rgba(0,0,0,0.8)（ヒーローキャプション背景）
Search BG: #ededed
Search Border: #dedede

Text Primary: #000000（白背景上）
Text White: #ffffff（黒背景上）

Font: Helvetica, Arial, "Doroid Sans", メイリオ, Meiryo,
      "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif

Body Size: 14px / line-height: 1.125 / letter-spacing: normal
Hero Caption: 40.32px / 700 / white on rgba(0,0,0,0.8)
Section Title: 22.12px / 700 / color: #60676f
CTA Large: 22.12px / 400 / white on #c80000 / line-height: 50px / radius: 0px
palt: なし
border-radius: 0px（全要素）

プロンプト例

Square Enix のサイトデザインに従って、ゲームタイトル一覧ページを作成してください。
- フォント: Helvetica, Arial, "Doroid Sans", メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
- 背景: #000000（黒）
- テキスト色: #ffffff（白）
- CTA ボタン: bg #c80000, white, radius 0px, font-size 22.12px, line-height 50px
- セカンダリボタン: bg #e5e5e5, #333, radius 0px
- ヘッダー: bg #ffffff（白）、ナビ: bg #333333
- セクション見出し: 22.12px, 700, color: #60676f
- 本文: 14px, line-height: 1.125, letter-spacing: normal
- 全要素 border-radius: 0px
- palt / kern は使わない
- ドロップシャドウは使わない