Fujitsu (富士通) DESIGN.md

Fujitsu（https://www.fujitsu.com/jp/）のデザイン仕様書。 実サイトの computed style および CSS Custom Properties（145変数）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: テクノロジー企業としての先進性と信頼感を両立。大胆な赤とグラデーションを使った力強いビジュアルと、整然としたグリッドレイアウト
• 密度: 情報密度が高い。ニュース、事例、ソリューション等の多様なコンテンツを構造的に配置
• キーワード: 先進的、力強い、信頼、テクノロジー、グラデーション
• 特徴: 独自コーポレートフォント「FujitsuInfinityPro」を使用。赤 #ea0000 を基調に、青 #2400b0 、グリーン #008224 のマルチカラーグラデーションで各事業領域を色分け

2. Color Palette & Roles

Primary（ブランドカラー）

• Fujitsu Red (#ea0000): 主要 CTA、ブランドアクセント。--color-red
• Deep Blue (#2400b0): テクノロジー領域。--background-color-blue
• Vivid Blue (#0048ff): アクセシビリティフォーカス色

Gradients（グラデーション — CSS Custom Properties）

• H1B: #ea0000 → #d80084（赤→マゼンタ）
• H2B: #ea0000 → #ff8000（赤→オレンジ）
• H3B: #2400b0 → #0c7fd5（紫→ブルー）
• H4B: #008224 → #00a470（グリーン系、推定）

Semantic（意味的な色）

• Danger / Error: --color-red (#ea0000)
• Error Background: --background-color-red (#fde5e5)

Neutral（ニュートラル — CSS Custom Properties）

• Text Primary (#000000): 本文テキスト。--color-black
• Text Dark Gray (#333333): 強調テキスト。--color-gray-1
• Text Mid Gray (#5f5f5f): 補足テキスト。--color-gray-6
• Text Light Gray (#696969): メタ情報
• Background White (#ffffff): ページ背景。--background-color-white
• Background Light (#f3f3f3): セクション背景
• Background Gray (#efefef): カード背景。--background-color-gray-4
• Surface Dark (#3c3c3c): ダーク面。--background-color-gray-1
• Surface Mid (#6d6e70): ミッド面。--background-color-gray-2
• Border Light (#dcdcdc): 区切り線。--color-gray-7
• Border Mid (#e8e8e8): 標準ボーダー。--color-gray-2
• Border Gray5 (#c6c6c0): --color-gray-5
• Footer Dark (#27455c): フッター背景（rgb(39, 69, 92)）

3. Typography Rules

3.1 和文フォント

コーポレートフォント:

• FujitsuInfinityPro — 独自の Web フォント。和欧兼用

フォールバック（和文）:

• メイリオ / Meiryo（Windows）
• ＭＳ Ｐゴシック（Windows レガシー）
• ヒラギノ角ゴシック系（macOS）

3.2 欧文フォント

• FujitsuInfinityPro: 欧文も含むコーポレートフォント
• Arial: フォールバック

3.3 font-family 指定

css/* 全要素共通 */
font-family: FujitsuInfinityPro, Arial, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;

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

• FujitsuInfinityPro を最優先。和欧両方のグリフを含むコーポレートフォント
• Arial を早い段階でフォールバックに置き、FujitsuInfinityPro がない環境でも欧文の品質を確保
• 和文はメイリオ→ＭＳ Ｐゴシック→ヒラギノの順

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

3.5 行間・字間

• 本文の行間 (line-height): 1.7（15px → 25.5px）
• 見出しの行間: 1.25〜1.7（見出しレベルにより変動）
• 本文の字間 (letter-spacing): normal（0）
• 見出しの字間: normal（0）

ガイドライン:

• line-height: 1.7 は全体で統一。日本語コーポレートサイトとして標準的な値
• letter-spacing はグローバルに normal。font-feature-settings も normal

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

• font-feature-settings は全要素 normal
• FujitsuInfinityPro のカーニング情報に依存

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（Red）

• Background: #ea0000
• Text: #ffffff
• Border: none
• Padding: 推定 12px 24px
• Border Radius: 0px（シャープエッジ）
• Font Size: 14px
• Font Weight: 700

Secondary CTA（Blue）

• Background: #2400b0
• Text: #ffffff
• Border: none
• Padding: 推定 12px 24px
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 700

Outline（Ghost）

• Background: transparent
• Text: #ffffff
• Border: 推定 1px solid white
• Padding: 推定 12px 24px
• Border Radius: 30px
• Font Size: 14px

Accessibility Button

• Background: #ffffff
• Text: #000000
• Border: 2px solid #0038ff
• Border Radius: 8px

Cards

Event / Article Card

• Background: #ffffff または #efefef
• Border: none
• Border Radius: 0px（シャープエッジが基本）
• Shadow: none

Inputs

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

5. Layout Principles

Spacing Scale

Container

• Max Width: 推定 1200px
• セクション背景: 全幅（#f3f3f3 と #ffffff の交互）

Grid

• ニュース / 事例: 3カラムグリッド
• ソリューション: 2カラム

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

• Fujitsu Red #ea0000 を主要 CTA に使用する
• グラデーション（赤→マゼンタ、赤→オレンジ、青→ブルー）で事業領域を色分けする
• ボタンはシャープエッジ（border-radius: 0）を基本とする
• セクション背景は #ffffff と #f3f3f3 を交互に使って区切る
• FujitsuInfinityPro をベースフォントとして指定する

Don't（禁止）

• ブランドカラーの赤を薄めた色（ピンク系）を安易に使わない（グラデーションで遷移させる）
• ボタンに大きな角丸を付けない（pill 型は使わない）
• 複数のグラデーション方向を混在させない（水平方向で統一）
• テキストに直接グラデーションを適用しない（背景面にのみ適用）
• letter-spacing や palt を追加しない（コーポレートフォントのメトリクスに依存）

8. Responsive Behavior

Breakpoints

タッチターゲット

• ボタン: 推定 44px 以上（アクセシビリティ重視）
• アクセシビリティツールバー常駐

フォントサイズの調整

• Display 見出し: 60px → モバイルで 24〜28px 推定
• 本文: 15px を維持

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #ea0000 (Fujitsu Red)
Secondary Color: #2400b0 (Deep Blue)
Text Color: #000000
Background: #ffffff / #f3f3f3 (alternating sections)
Font: FujitsuInfinityPro, Arial, メイリオ, Meiryo, sans-serif
Body Size: 15px
Line Height: 1.7
Button Style: sharp edge (0px radius), solid fill

プロンプト例

Fujitsu のデザインシステムに従って、ソリューション紹介ページを作成してください。
- ブランドカラー: #ea0000 の赤を CTA に使用
- グラデーション: 赤→オレンジ (#ea0000 → #ff8000) をヒーローに
- フォント: FujitsuInfinityPro（フォールバック: Arial, メイリオ）
- ボタン: シャープエッジ（radius 0px）、赤ベタ塗り
- セクション背景: #ffffff と #f3f3f3 を交互に
- 行間: line-height 1.7