NTT docomo DESIGN.md

NTT docomo（https://www.docomo.ne.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。日本最大の携帯キャリアのコーポレートサイト。

1. Visual Theme & Atmosphere

• デザイン方針: ドコモレッドを軸とした信頼感のあるコーポレートサイト。カード型UIとやわらかな角丸で親しみやすさを演出。ライトグレー背景に白カードを浮かせるレイヤー構造
• 密度: 情報量が多いがカード型で整理されている。本文 line-height: 1.5 で標準的な可読性
• キーワード: コーポレート、レッドアイデンティティ、カード型UI、やわらかな角丸、親しみやすさ
• 特徴: ドコモレッド #cc0033 がヘッダー・ボタンボーダー・アクセントに一貫して使われる。欧文に Roboto を部分的に使用。全体的にシャドウ付きカードで視覚的階層を作っている

2. Color Palette & Roles

Primary（ブランドカラー）

• docomo Red (#cc0033): ヘッダー背景、ボタンボーダー、アクセント。ドコモの象徴色
• Dark Blue (#093475): 被災地支援リンク等、信頼性が求められるコンテキストで使用

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト
• Text Content (#272727): 見出し・コンテンツテキスト
• Text Card (#333333): カードリンクテキスト
• Text Muted (#b2b2b2): 補助テキスト、ポイント単位
• Background (#f3f3f3): ページ背景（ライトグレー）
• Surface (#ffffff): カード・ヘッダー等の面
• Surface Dark (#5c5c5c): 報道発表バッジ背景
• Footer (#272727): フッター背景
• Border Faint (#d9d9d9): 区切り線

Semantic（意味的な色）

• Light Red (#fff2f2): 注意喚起エリア背景
• Disabled (#757575): 送信ボタン等の無効状態

3. Typography Rules

3.1 和文フォント

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

• ヒラギノ角ゴ Pro W3（macOS / iOS）
• メイリオ（Windows）

3.2 欧文フォント

• サンセリフ: Roboto（Google Fonts、MENU ラベル・ポイント表示等の部分使用）
• フォールバック: sans-serif

3.3 font-family 指定

css/* 本文（和文） */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

/* 欧文アクセント（MENU、ポイント表示） */
font-family: Roboto, sans-serif;

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

• 和文はシステムフォント依存。ヒラギノ → メイリオの二段構え
• 欧文は Roboto を部分的に使用。MENU ラベル、ポイント数値等のアクセントに限定
• Web フォントの読み込みは最小限に抑えたパフォーマンス重視の設計

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

以下は computed style による実測値

3.5 行間・字間

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

• 全テキスト: 1.5（21px / 14px）— 統一的な行間設定
• 見出し: 1.5（30px / 20px）

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

• 本文: normal
• MENU ラベル: 0.99px（0.09em 相当）
• お知らせテキスト: 1px（0.07em 相当）

ガイドライン:

• 行間は全体的に 1.5 で統一されている
• 字間は特殊なラベル要素にのみ適用

3.6 禁則処理・改行ルール

cssword-wrap: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

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

• palt: 未使用
• kern: 未使用

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Login Button

• Background: #ffffff
• Text: #000000
• Border: 1px solid #cc0033
• Padding: 8px
• Border Radius: 4px
• Font Size: 12px
• Font Weight: 700

Card Link（角丸カード型ボタン）

• Background: #ffffff
• Text: #272727
• Border: none
• Padding: 4px 26px 4px 13px
• Border Radius: 10px
• Font Size: 14px
• Font Weight: 700
• Shadow: 2px 2px 8px rgba(0,0,0,0.2)

Pill Link（お知らせ系）

• Background: #ffffff
• Text: #000000
• Padding: 8px 8px 6px 24px
• Border Radius: 15px
• Font Size: 15px
• Font Weight: 700

Inputs

• 検索入力の詳細は未確認（トップページにフォーム要素の露出が少ない）

Cards

• Background: #ffffff
• Border: none
• Border Radius: 10px
• Padding: 4–13px
• Shadow: 2px 2px 8px rgba(0,0,0,0.2)

Badge（報道発表）

• Background: #5c5c5c
• Text: #ffffff
• Font Size: 推定 12px
• Border Radius: 4px

5. Layout Principles

Spacing Scale

Container

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

Grid

• カード型レイアウトが中心
• サービス一覧: 4カラムグリッド
• ニュース一覧: リスト形式

6. Depth & Elevation

• カード型UIが特徴で、デフォルトでシャドウを持つ要素が多い
• ヘッダーはフラットで、#cc0033 のベタ塗りで存在感を出す

7. Do's and Don'ts

Do（推奨）

• ヘッダーとアクセントには必ずドコモレッド #cc0033 を使う
• カードリンクには border-radius: 10px + シャドウで浮遊感を出す
• 欧文ラベル（MENU、P 等）には Roboto 700 を使う
• 和文テキストはヒラギノ角ゴ → メイリオのフォールバックを守る
• ページ背景は #f3f3f3 のライトグレー、カード面は #ffffff の白
• 本文は 14px / line-height: 1.5 を維持する
• ログインボタンは白地にレッドボーダー（1px solid #cc0033）
• フッターは #272727 のダークグレー背景

Don't（禁止）

• ドコモレッド #cc0033 をテキスト色として使わない（背景・ボーダー専用）
• カードの角丸を 4px 以下にしない（10px 以上のやわらかな角丸がブランドの特徴）
• Roboto を和文テキストに使わない（MENU、P 等の欧文ラベル専用）
• フラットなカード（シャドウなし）を使わない（浮遊感がデザインの要）
• 純白 #ffffff をページ背景に使わない（#f3f3f3 を使う）
• letter-spacing を本文に適用しない（normal を維持）

8. Responsive Behavior

Breakpoints

タッチターゲット

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

フォントサイズの調整

• モバイルでは本文 14px を維持、見出しはデスクトップの 70–80% に縮小
• ハンバーガーメニューに切り替え（MENU ラベル: Roboto 11px 700）

9. Agent Prompt Guide

クイックリファレンス

docomo Red: #cc0033（ヘッダー背景・ボタンボーダー・アクセント）
Dark Blue: #093475（信頼性コンテキスト）

Text Primary: #000000
Text Content: #272727
Text Muted: #b2b2b2
Background: #f3f3f3
Surface: #ffffff
Footer: #272727

JP Font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
EN Accent Font: Roboto, sans-serif

Body Size: 14px / line-height: 1.5 / letter-spacing: normal
Heading 2: 24px / 700
Card Radius: 10px / shadow: 2px 2px 8px rgba(0,0,0,0.2)
Login Button: white / border 1px solid #cc0033 / radius 4px
palt: なし

プロンプト例

NTT docomo のデザインに従って、サービス一覧ページを作成してください。
- 和文フォント: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
- 欧文ラベル: Roboto, sans-serif（700、MENU 等に使用）
- ヘッダー: 背景 #cc0033、白ロゴ
- ページ背景: #f3f3f3
- カード: 白背景、radius 10px、shadow 2px 2px 8px rgba(0,0,0,0.2)
- テキスト色: #272727
- 見出し: 24px, 700
- 本文: 14px, line-height: 1.5, letter-spacing: normal
- フッター: bg #272727, 白文字
- palt / kern は使わない