Droga5 Japan (droga5.jp) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 Droga5 は Accenture Song 傘下のクリエイティブエージェンシー。

1. Visual Theme & Atmosphere

• デザイン方針: ミニマル・大胆なタイポグラフィ主導。巨大見出し + 余白で強い印象を与えるクリエイティブエージェンシーの定型
• 密度: 非常にゆったり。フルスクリーンのセクションに大きな文字を配置し、余白を贅沢に使う
• キーワード: Bold Typography, Minimal, High Contrast, Creative, Purpose-driven

2. Color Palette & Roles

出典: Accenture Song 101（April 2022）— Droga5 公式ブランドガイド。 "The digital-first, high-contrast palette we use is made up of five main colors: white, blue, black, orange and gray(s)."

Brand Palette（公式5色）

CSS Custom Properties

css--brand-white:  #ffffff;
--brand-blue:   #0000d5;
--brand-black:  #000000;
--brand-orange: #d05005;
--gray-light:   #d5d5d5;
--gray-mid:     #959595;
--gray-dark:    #555555;

Roles

• Primary / CTA Blue (#0000D5): CTA ボタン、リンクテキスト、ブランドキーカラー
• Accent Orange (#D05005): 差し色。ハイライト・強調点。本文や広面積には使わない
• Text Primary (#000000): 本文・見出し
• Text Secondary (#555555 / #959595): キャプション・補足・セクションラベル
• Border / Divider (#D5D5D5): 薄い区切り線・ボーダー
• Background (#FFFFFF): ページ背景
• Inverse Background (#000000): ダーク反転背景。テキストは #FFFFFF

使用比率

ブランドガイドのバー比は Blue ≈ Black > Orange / Grays > White。 Blue と Black が支配的、Orange は最も小さい面積でアクセント運用。

3. Typography Rules

3.1 和文フォント

Droga5 は Noto Sans JP を 3つの独立した @font-face 名 で読み込んでいる。通常の "Noto Sans JP" ウェイト指定ではない点に注意。

• NotoSansJP-Bold: 巨大見出し専用（font-weight: 700 相当）
• NotoSansJP-Regular: 本文・サブ見出し用（font-weight: 400 相当）
• NotoSansJP-Medium: ナビゲーション・ラベル用（font-weight: 500 相当）

3.2 欧文フォント

• GTPressuraMono (GT Pressura Mono): ブランドモノスペース。ラベル・CTA テキストに使用。Adobe Fonts ライセンス
  • ※ 代替フォント: "Roboto Mono" または "IBM Plex Mono" で近似可能

3.3 font-family 指定

css/* 見出し（巨大タイポ） */
font-family: "NotoSansJP-Bold", "Noto Sans JP", sans-serif;
font-weight: 700;

/* 本文・サブ見出し */
font-family: "NotoSansJP-Regular", "Noto Sans JP", sans-serif;
font-weight: 400;

/* ナビ・ラベル */
font-family: "NotoSansJP-Medium", "Noto Sans JP", sans-serif;
font-weight: 500;

/* モノスペース（ブランドラベル） */
font-family: "GTPressuraMono", "Roboto Mono", "IBM Plex Mono", monospace;
font-weight: 400;

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

• 実サイトは @font-face で個別ファミリ名を定義しているため、通常の Noto Sans JP をフォールバックに置く
• GTPressuraMono は Adobe Fonts 依存。ライセンスがない環境では Roboto Mono で代替

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

3.5 行間・字間

• 巨大見出しの行間 (line-height): 1.2（120px / 100px）
• セクション見出しの行間: 1.37（48px / 35px）
• 説明文の行間: 1.5（42px / 28px）
• 巨大見出しの字間 (letter-spacing): -3px（負のトラッキングで詰める）
• その他の字間: normal

ガイドライン:

• 巨大タイポは負の letter-spacing で文字を詰め、インパクトを出す
• body の font-size: 10px は極小。実際のコンテンツはコンポーネント単位でサイズ指定
• 日本語説明文は 28px / lh: 1.5 で十分な可読性を確保

3.6 禁則処理・改行ルール

css/* 推奨設定（明示的な指定は確認できず、一般的な設定を推奨） */
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;

3.7 OpenType 機能

cssfont-feature-settings: "palt" 0; /* body では palt 無効（normal） */

• 実サイトでは body に font-feature-settings: normal を適用
• 巨大見出しでの palt 利用は未確認。-3px の letter-spacing で字詰めを実現

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary (Accept / CTA)

• Background: #0000d5
• Text: #ffffff
• Border Radius: 5px
• Font Size: 14px（推定）
• Font Weight: 400

Nav Button

• Background: transparent
• Text: #000000
• Font Family: NotoSansJP-Medium
• Font Size: 14px
• Font Weight: 400

Skip Link

• Background: #000000
• Text: #ffffff
• Font Family: NotoSansJP-Medium
• Font Size: 16px

Links

CTA Link (mono)

• Color: #0000d5
• Font Family: GTPressuraMono
• Font Size: 14px
• Text: "Contact us" 等

Footer Link

• Color: #949799 (通常) / #000000 (ホバー時推定)
• Font Size: 14px

Cards

• 明示的なカードコンポーネントの定義なし
• セクション単位でフルスクリーンレイアウトを採用

Inputs

• フォームの詳細仕様は抽出データに含まれず

5. Layout Principles

Spacing Scale

※ セクション間はフルスクリーン / 大きな余白で構成。具体的な数値トークンは未定義

Container

• Max Width: フルスクリーン基調（明示的な max-width は未確認）
• Padding (horizontal): セクションによりコンテンツ幅を制御

Grid

• Columns: 明示なし（セクション単位のシングルカラムが基調）
• Gutter: 明示なし

6. Depth & Elevation

※ Droga5 のデザインはフラット基調。明示的な shadow トークンは確認できず

7. Do's and Don'ts

Do（推奨）

• 巨大な見出し（100px クラス）で visual impact を出す
• letter-spacing: -3px で見出しを詰めてインパクトを強調する
• 公式5色（white / blue / black / orange / grays）に絞ってハイコントラストを保つ
• Orange (#D05005) は差し色として限定的に使う（広面積には使わない）
• GTPressuraMono をラベルや CTA に限定して使い、ブランド感を出す
• フォントは @font-face 名で指定する場合は必ず汎用フォールバックを含める

Don't（禁止）

• body の font-size: 10px をそのまま本文に使わない（コンポーネントで必ず上書き）
• GTPressuraMono を本文に使わない（ラベル専用）
• 公式パレット外の色（パステル系・追加アクセント）を勝手に持ち込まない
• Orange を本文や広面積背景に使わない（あくまでアクセント）
• CTA Blue (#0000D5) を本文テキストに使わない（リンク・CTA 専用）
• 3つの Noto Sans JP ウェイトを混同しない（それぞれ独立した @font-face 名）

8. Responsive Behavior

Breakpoints

※ 詳細なブレークポイント値は抽出データに含まれず

タッチターゲット

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

フォントサイズの調整

• モバイルでは巨大見出し 100px を 40-60px 程度に縮小することを推奨
• 説明文 28px は 18-20px 程度に縮小

9. Agent Prompt Guide

クイックリファレンス

# Brand Palette (Accenture Song 101 / April 2022)
White:        #FFFFFF
Blue (CTA):   #0000D5
Black:        #000000
Orange:       #D05005   ← アクセント。限定使用
Gray Light:   #D5D5D5   ← ボーダー
Gray Mid:     #959595   ← 補足テキスト
Gray Dark:    #555555   ← サブテキスト

# Typography
Font (Display): "Noto Sans JP", sans-serif / 100px / 700 / ls: -3px
Font (Body):    "Noto Sans JP", sans-serif / 28px / 400
Font (Mono):    "Roboto Mono", monospace / 14px / 400
Body Base Size: 10px (override per component)

プロンプト例

Droga5 のデザインシステムに従って、サービス紹介ページを作成してください。
- カラー: 公式5色（white / blue #0000D5 / black / orange #D05005 / grays）のみ使用
- ヒーロー見出し: "Noto Sans JP" 700 / 100px / line-height: 1.2 / letter-spacing: -3px / color: #000
- 説明文: "Noto Sans JP" 400 / 28px / line-height: 1.5 / color: #555555
- セクションラベル: "Roboto Mono" 400 / 14px / color: #959595 / 英字大文字
- CTAボタン: background: #0000D5 / color: #FFFFFF / border-radius: 5px
- アクセント: #D05005 を差し色として限定的に使用（広面積には使わない）
- 背景: #FFFFFF / テキスト: #000000 / ボーダー: #D5D5D5

GTPressuraMono 代替について

実サイトでは Adobe Fonts ライセンスの GT Pressura Mono を使用している。ライセンスがない環境では以下で代替:

1. Roboto Mono (Google Fonts) — 推奨。ジオメトリック系モノスペースで近い雰囲気
2. IBM Plex Mono (Google Fonts) — もう少し温かみのある代替