dentsu (電通) DESIGN.md

dentsu（https://www.dentsu.co.jp/）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は未使用。

1. Visual Theme & Atmosphere

• デザイン方針: ニューモーフィズムを取り入れた、ソフトでモダンなコーポレートデザイン。柔らかいシャドウと丸みのあるカードで、温かみのある企業イメージを演出
• 密度: ゆったりとした余白。ヒーローエリアは全幅ビジュアル、コンテンツは大きめのカードレイアウト
• キーワード: ニューモーフィック、ソフト、コーポレート、クリーン、信頼感
• 特徴: 純白でなく #f3f5f7 のライトグレーを背景に使い、ニューモーフィック（凸型・凹型）シャドウでカードやボタンに立体感を持たせている

2. Color Palette & Roles

Primary（ブランドカラー）

• dentsu はブランドカラーとして特定の1色を前面に出すデザインではなく、黒とグレーのニュートラルトーンを基調とする

Accent（カテゴリ別アクセント）

• Blue (#009be0): 日本の広告費アーカイブ
• Red (#d83f30): 世界の広告費
• Navy (#254590): 情報メディア白書
• Green (#189f3b): 媒体別広告量
• Orange (#e4a334): 広告景気年表

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト
• Text White (#ffffff): ダーク背景上のテキスト
• Background (#f3f5f7): ページ背景（ニューモーフィズムのベース面）
• Surface Light (#eaeaea): カード下地、区切り
• Surface Mid (#e9ecef): セクション背景
• Surface Dark (#313131): GDPR バナー背景
• Footer (#000000): フッター背景

3. Typography Rules

3.1 和文フォント

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

• Noto Sans JP（Google Fonts / Web フォント）
• ヒラギノ角ゴ ProN（macOS フォールバック）
• ヒラギノ角ゴシック（macOS 新名称）
• メイリオ（Windows フォールバック）

3.2 欧文フォント

• Roboto: 見出し・セクションタイトルで和文より先に指定
• Helvetica Neue: 本文のフォールバック
• Arial: 追加フォールバック

3.3 font-family 指定

css/* 本文 */
font-family: "Noto Sans JP", "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, meiryo, sans-serif;

/* 見出し（Roboto 先頭で欧文優先） */
font-family: Roboto, "Noto Sans JP", "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, meiryo, sans-serif;

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

• 本文は Noto Sans JP を最優先。欧文は Noto Sans JP 内蔵グリフを利用
• 見出しは Roboto を先頭に置き、英字タイトル（"News Releases" 等）のジオメトリック感を出す

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

3.5 行間・字間

• 本文の行間 (line-height): 1.75（15px → 26.25px）
• 見出しの行間: 1.0〜1.4（見出しサイズにより変動）
• 本文の字間 (letter-spacing): normal（0）
• 見出しの字間: normal（0）

ガイドライン:

• letter-spacing は全要素 normal。日本語の字間調整をしない設計
• font-feature-settings も normal。palt / kern は未使用

3.6 禁則処理・改行ルール

明示的な指定なし（ブラウザデフォルトに依存）

3.7 OpenType 機能

• font-feature-settings は全要素 normal
• palt / kern は未使用

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Outline Pill（ダーク背景用）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 5px 40px
• Border Radius: 60px
• Font Size: 16px
• Font Weight: 500

Outline Pill（ライト背景用）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 5px 40px
• Border Radius: 60px
• Font Size: 16px
• Font Weight: 500

Neumorphic Pill（プライマリ CTA）

• Background: transparent
• Text: #000000
• Border: none
• Padding: 5px 40px
• Border Radius: 60px
• Font Size: 16px
• Font Weight: 500
• Box Shadow: rgb(255,255,255) -2px -2px 5px 0px, rgba(0,0,0,0.25) 10px 10px 20px 0px

GDPR 同意ボタン

• Background: #ffffff
• Text: #000000
• Padding: 10px 32px
• Border Radius: 4px
• Font Size: 16px
• Font Weight: 700

Cards

News Card（ニューモーフィック）

• Background: transparent
• Border Radius: 30px
• Padding: 25px
• Box Shadow: rgba(0,0,0,0.21) 9px 8px 10px 0px, rgb(255,255,255) 0px 0px 5px 0px, rgb(255,255,255) -4px 0px 5px 0px, rgb(255,255,255) -4px -6px 15px 0px

Horizontal Card

• Background: transparent
• Border Radius: 30px
• Padding: 35px
• Box Shadow: 同上

Data Card（広告資料）

• Background: transparent
• Border Radius: 10px
• Padding: 0

Inputs

明示的な input 要素の実測データなし

5. Layout Principles

Spacing Scale

Container

• Max Width: コンテンツ幅は可変（レスポンシブ）
• Hero Padding: 0px 144px（左右大きめ）

Grid

• News Cards: 4カラムグリッド
• Data Cards: 5カラムグリッド（広告資料セクション）

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

• ニューモーフィック（凸型）シャドウでカードに立体感を持たせる
• #f3f5f7 のライトグレー背景をベースにする（ニューモーフィズムの前提）
• ボタンは pill 型（border-radius: 60px）のアウトラインスタイルを使う
• 見出しには Roboto を先頭にした欧文優先スタックを使う
• カードの角丸は 30px と大きめに設定する

Don't（禁止）

• 純白 #ffffff をページ背景にしない（ニューモーフィック効果が出ない）
• ボタンにベタ塗り背景を使わない（アウトラインまたはニューモーフィック）
• letter-spacing を追加しない（全体で normal 統一）
• font-feature-settings: "palt" を使わない（未使用の設計）
• カードに1px border を使わない（シャドウで境界を表現する設計）

8. Responsive Behavior

Breakpoints

実測データからの推定（明示的な CSS 変数なし）:

タッチターゲット

• Pill ボタン: 高さ約 32px + パディング

フォントサイズの調整

• ヒーロー見出しは SP で縮小（60px → 推定 28〜32px）
• 本文は 15px を維持

9. Agent Prompt Guide

クイックリファレンス

Primary Color: なし（ニュートラルトーン基調）
Text Color: #000000
Background: #f3f5f7
Font Body: "Noto Sans JP", "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, meiryo, sans-serif
Font Heading: Roboto, "Noto Sans JP", "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, meiryo, sans-serif
Body Size: 15px
Line Height: 1.75
Button Style: pill (60px radius), outline or neumorphic shadow
Card Radius: 30px

プロンプト例

dentsu のデザインシステムに従って、ニュースリリース一覧ページを作成してください。
- 背景色: #f3f5f7（ニューモーフィズムのベース）
- フォント: 見出しは Roboto + Noto Sans JP、本文は Noto Sans JP
- カード: border-radius 30px、ニューモーフィックシャドウ
- ボタン: pill 型（radius 60px）、アウトラインスタイル
- 行間: 本文は line-height: 1.75