CyberAgent（サイバーエージェント） DESIGN.md

CyberAgent（https://www.cyberagent.co.jp/）のデザイン仕様書。 インターネット広告・メディア・ゲーム事業を展開する総合インターネット企業。ABEMA、Cygames 等の親会社。 実サイトの computed style 実測（2026-05-15 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ウォームグレー #f0f0ee の背景に、ブランドグリーン #82be28 のアクセントを効かせた落ち着いたコーポレートデザイン。トップのフルスクリーンダークヒーロー（黒背景）から、スクロールでウォームグレーのコンテンツエリアに遷移する構成
• 密度: 本文 16px・line-height 1.8 と日本語として標準的な余裕のある組み。セクション間は大きな余白で区切る
• キーワード: ウォームグレー、グリーンアクセント、ダークヒーロー、YuGothic、コーポレート
• 特徴:
  • フォントは YuGothic（游ゴシック） をプライマリに、ヒラギノ角ゴ → Lucida Grande → メイリオのフォールバック。一部ナビに自社書体 CA Sans を使用
  • ブランドカラーは #82be28（ライムグリーン）。フィルタータブのアクティブ状態、テキストリンク、CTA ボタンのテキスト色に使用
  • ダークグリーン #2d8c3c を CTA ボタン背景（"CyberAgent Way"、"プレスリリース"）に使用
  • ダークネイビー #27455c をフッター・暗色セクション背景に使用
  • body 背景は純白ではなく #f0f0ee（ウォームグレー） で、紙のような温かみ
  • ボタンは pill（radius 50px） で、白背景＋グリーン文字 or グリーン背景＋白文字の2パターン
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Green (#82be28): メインのブランドカラー。フィルタータブ active 背景、テキストリンク色、CTA テキスト色
• CTA Green (#2d8c3c): CTA ボタンの背景色。"CyberAgent Way"、"プレスリリース" 等のセクションリンクボタン
• Accent Blue (#3860be): フィルターアイコンの背景

CTA / Buttons

• Primary CTA: 背景 #ffffff / 文字 #82be28 / radius 50px / padding 内包 / 18px
• Secondary CTA (Dark Green): 背景 #2d8c3c / 文字 #ffffff / radius（pill 推定）
• Language Toggle: 背景 #000000 / 文字 #ffffff / radius 30px（"English" ボタン）
• Filter Tab Active: 背景 #82be28 / 文字 #82be28 / radius 50%

Neutral

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

• Danger: #dc2626
• Success: #2d8c3c（CTA Green を流用可）
• Warning: #d97706

3. Typography Rules

3.1 和文フォント

• ゴシック体: YuGothic（游ゴシック） をプライマリに使用
• フォールバック: ヒラギノ角ゴ ProN W3 → Lucida Grande → Hiragino Kaku Gothic ProN → メイリオ → Meiryo → Verdana → ＭＳ Ｐゴシック → sans-serif
• 明朝体: 使用しない

3.2 欧文フォント

• CA Sans: CyberAgent 自社書体。ナビゲーションの "Menu" テキスト（27px）等に使用。font-family 先頭に指定
• 欧文本文は YuGothic の欧文グリフを使用

3.3 font-family 指定

css/* 本文・見出し */
font-family: YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;

/* ナビゲーション（CA Sans 優先） */
font-family: "CA Sans", YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;

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

• YuGothic を先頭に置く和文優先のスタック。macOS / Windows 両対応
• Lucida Grande がフォールバック中間に入っているのは古い macOS 対策
• CA Sans はナビ限定で、本文には使用しない

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

3.5 行間・字間

• 本文の行間 (line-height): 1.8（28.8px / 16px）。日本語として読みやすい広めの設定
• 見出しの行間: — （単行見出しが中心）
• 本文の字間 (letter-spacing): normal（0）。字間調整なし
• 見出しの字間: normal（0）

3.6 禁則処理・改行ルール

css/* 実測ではデフォルト設定 */

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern は使用していない

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（Pill White + Green Text）

• Background: #ffffff
• Text: #82be28
• Padding: 内包
• Border Radius: 50px
• Font Size: 18px

Secondary（Pill Dark Green）

• Background: #2d8c3c
• Text: #ffffff
• Border Radius: pill（推定 50px）

Language Toggle

• Background: #000000
• Text: #ffffff
• Border Radius: 30px

Filter Tab

• Active: 背景 #82be28
• Inactive: 背景 #ffffff
• Border Radius: 50%（円形）
• Font Size: 24px（数字）/ 0px（非表示テキスト）

Cards

• Background: #ffffff
• Border: なし
• Shadow: なし（フラットデザイン）

Navigation

• ハンバーガーメニュー: "Menu" テキスト（CA Sans / 27px）+ 「メニュー」（YuGothic / 16px）
• ドロワー背景: #f0f0ee（ページ背景と同色）
• ドロワーディレクトリ: カテゴリ別にグレースケール背景で階層化（#d0d0d0 → #878787）

5. Layout Principles

Spacing Scale

Container

• Max Width: フルスクリーンヒーロー（1440px+）
• Content Width: 中央寄せ（推定 1080px 程度）

Grid

• ニュースリストは単カラム
• フルスクリーンダークヒーロー → ウォームグレーのコンテンツ → ダークネイビーのフッターという 3 層構成

6. Depth & Elevation

• CyberAgent コーポレートサイトはシャドウを使用しない。背景色の切り替えで階層を表現

7. Do's and Don'ts

Do（推奨）

• ページ背景は #f0f0ee（ウォームグレー）を使い、純白にしない
• アクセントカラーは #82be28（ライムグリーン）を一貫して使用する
• ボタンは pill 形状で統一する
• ヒーローセクションはダーク（黒背景）で大きなビジュアルを使う
• フォントは YuGothic ベースで、ナビのみ CA Sans を使う

Don't（禁止）

• ページ背景を純白 #ffffff にしない。ZOZO と異なり CyberAgent はウォームグレー基調
• グリーン以外のアクセントカラーを増やさない
• ナビ以外に CA Sans を使わない。本文は YuGothic 統一
• 角丸のないスクエアボタンを使わない（pill が基本）
• body の line-height を 1.5 以下にしない（1.8 が基準）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（推奨）

フォントサイズの調整

• モバイルでは本文 14–16px を維持。見出しはデスクトップの 80% 程度に

9. Agent Prompt Guide

クイックリファレンス

Brand Color (Green): #82be28
CTA Color (Dark Green): #2d8c3c
Text Color: #000000
Background: #f0f0ee
Surface: #f2f1f1
Dark Section: #27455c
Font: YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif
Body Size: 16px
Line Height: 1.8

プロンプト例

CyberAgentのデザインシステムに従って、ニュース一覧ページを作成してください。
- ページ背景は #f0f0ee（ウォームグレー）
- フィルタータブは pill 形状で、active は #82be28
- ボタンは白背景 + #82be28 テキスト（pill radius 50px）
- フォントは YuGothic 16px / line-height 1.8
- ヒーロー部分はダーク背景