HITACHI（日立製作所） DESIGN.md

日立製作所（https://www.hitachi.co.jp/）のデザイン仕様書。 実サイトの CSS Custom Properties および computed style に基づく。 抽出日: 2026-05-23

1. Visual Theme & Atmosphere

• デザイン方針: コーポレート・権威的・構造的。グローバルな総合テクノロジー企業として信頼性と堅牢さを視覚的に訴求するデザイン。白とグレーの清潔な基盤の上に、日立レッド（#cc0000）をシグネチャーアクセントとして配置
• 密度: 情報整理型。コーポレートサイトとしてニュース・事業紹介・IRなど多岐にわたるコンテンツを整然と区分けしつつ、適度な余白で視認性を確保
• キーワード: 権威的、堅牢、クリーン、構造的、グローバル
• 特徴: 自社ブランドフォント「Hitachi Sans」を使用。純黒ではなく #0c0c0c を基調テキスト色とし、グレースケール5段階（--color-supportive-grey-1 〜 5）で情報階層を表現。CTA・アクセントにはすべて日立レッド #cc0000 を一貫して使用

2. Color Palette & Roles

Primary（ブランドカラー）

• Hitachi Red (#cc0000): CSS 変数 --primary-color。CTA ボタン、バッジ、インタラクティブテキストリンク等に使用。日立のコーポレートアイデンティティカラー
• Brand Red (#fa000f): CSS 変数 --brand-color。ロゴ・ブランドマーク等に使用される、よりビビッドな赤

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

• Black (#0c0c0c): --color-black。本文テキスト
• Supportive Grey 1 (#f4f4f4): --color-supportive-grey-1。セクション背景、カード面
• Supportive Grey 2 (#d9d9d9): --color-supportive-grey-2。フッター背景、区切り線
• Supportive Grey 3 (#b3b3b3): --color-supportive-grey-3。補助的な区切り
• Supportive Grey 4 (#737373): --color-supportive-grey-4。セカンダリテキスト、キャプション
• Supportive Grey 5 (#4d4d4d): --color-supportive-grey-5。強調テキスト、オーバーレイ
• White (#ffffff): --color-white。ページ背景、テキスト反転色

Surface & Background

• Background (#ffffff): ページ背景
• Surface Primary (#f4f4f4): ナビゲーション、カード、セクション背景
• Surface Footer (#d9d9d9): フッター背景
• Surface Dark (#0c0c0c): ダーク要素（ヘッダー最上部等）
• Surface Skip (#333333): スキップナビゲーション

3. Typography Rules

3.1 和文フォント

ゴシック体:

• Hitachi Sans（自社ブランドフォント、プロプライエタリ）
• Noto Sans JP（フォールバック）
• Yu Gothic UI（Windows フォールバック）

3.2 欧文フォント

• サンセリフ: Hitachi Sans（欧文グリフ内蔵）、Noto Sans（フォールバック）
• 等幅: 指定なし（システムデフォルト）

3.3 font-family 指定

css/* グローバル */
font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans", sans-serif;

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

• 自社ブランドフォント Hitachi Sans を最優先で指定。欧文・和文両グリフを持つカスタムフォント
• Noto Sans JP → Yu Gothic UI の順で和文フォールバック
• Noto Sans で欧文をカバーし、最後に generic family
• Hitachi Sans はドメインライセンスのため、preview.html では Google Fonts の Noto Sans JP で代替

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

以下は DevTools の computed style による実測値（2026-05-23 取得）

3.5 行間・字間

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

• 本文 (body): 24px (16px × 1.5)
• ヒーローテキスト: 67.5px (45px × 1.5)
• 見出し H2/H3: 40px / 35px (×1.25) — 見出しはタイトに
• ティーザー H2: 30px (20px × 1.5)
• ナビゲーション: 21px (14px × 1.5)
• フッター: 18px (12px × 1.5)

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

• 全要素: normal — 日立サイトは letter-spacing を一切調整していない

ガイドライン:

• 全階層で letter-spacing: normal。字詰め調整は行わない
• 見出しの行間は 1.25 とタイト。本文・ナビは 1.5 で統一
• ヒーローテキストは 45px / 700 の大きく太い文字で存在感を出す

3.6 禁則処理・改行ルール

css/* 標準的な禁則設定 */
word-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

css/* 全要素で palt 不使用 — 実測確認済 */
font-feature-settings: normal;

• palt: 不使用。日立サイトはプロポーショナル字詰めを適用していない
• kern: フォント内蔵のカーニングに依存（明示的な指定なし）
• Hitachi Sans がブランドフォントとして字間設計済みのため、追加の字詰めは不要と推測

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA

• Background: #cc0000（日立レッド）
• Text: #ffffff
• Border: 1px solid #cc0000
• Border Radius: 2px（ほぼ直角、シャープな印象）
• Font Size: 16px
• Font Weight: 600
• Padding: 12px 10px

Search Button

• Background: #cc0000
• Text: #ffffff
• Border Radius: 0px（完全な直角）
• Padding: 9px 6px

Back to Top

• Background: #cc0000
• Text: #ffffff
• Font Weight: 500

テキストリンク（インタラクティブ）

• Color: #cc0000（日立レッドをリンク色としても使用）

Inputs

検索入力（ヘッダー）

• Background: #ffffff
• Border: 1px solid transparent
• Border Radius: 0px
• Font Size: 16px
• Padding: 6px 12px

検索入力（丸型）

• Border: 1px solid #707070
• Border Radius: 50px（pill 型）
• Padding: 6px 35px 6px 15px

Navigation

• Background: #f4f4f4
• テキスト色: #0c0c0c
• リンク Weight: 500
• メガメニューサブ見出し Weight: 600

Cards

• Background: #ffffff または #f4f4f4
• テキスト色: #0c0c0c
• ボーダー: #d9d9d9 または透明

Footer

• Background: #d9d9d9
• テキスト色: #0c0c0c
• Font Size: 12px
• Font Weight: 400

5. Layout Principles

Spacing

• コーポレートサイトとして適度なセクション間余白を確保
• ヒーローエリアは大きなビジュアルとテキストオーバーレイで構成
• カードグリッドは均等な gap で整列

Container

• Max Width: ワイドレイアウト（フルウィドスのセクション + 中央コンテンツ制約）
• コンテンツエリア: 約 1200px（中央寄せ）

Grid

• ニュース・カードセクション: 3〜4カラムのグリッド
• Gutter: 均等

6. Depth & Elevation

• 日立のコーポレートサイトはフラットデザインを基調とし、エレベーションの使用は最小限
• ボーダーとグレースケール背景色の差で情報階層を表現する手法を採用
• 過度なドロップシャドウは使用しない

7. Do's and Don'ts

Do（推奨）

• CTA・アクセントには必ず日立レッド #cc0000 を使う。これがブランドの視覚的な統一要素
• テキスト色は #0c0c0c を使い、純粋な #000000 を避ける
• グレースケール 5 段階（#f4f4f4 → #d9d9d9 → #b3b3b3 → #737373 → #4d4d4d）で情報階層を表現する
• ボタンの角は 0px 〜 2px のシャープな形状を維持する（コーポレートの信頼感）
• font-family には必ず Hitachi Sans → Noto Sans JP → Yu Gothic UI のフォールバックチェーンを指定する
• 見出しは weight 600、本文は weight 400 で明確な太さのコントラストをつける
• ヒーロー・ブランディングエリアは 700 のボールド白テキストで力強さを出す
• letter-spacing と font-feature-settings は normal を維持する

Don't（禁止）

• 日立レッド以外の赤（#ff0000 等）をブランドカラーとして使わない。#cc0000 が正式な --primary-color
• ボタンに大きな角丸（8px 以上）を適用しない（日立のUIはシャープ・直線的なデザイン）
• letter-spacing や palt を追加しない（日立サイトは字詰め調整を一切行っていない）
• グレースケール以外の中間色（ベージュ、ブルーグレー等）を背景に使わない
• --brand-color (#fa000f) を CTA ボタンに使わない（これはロゴ・マーク専用。CTA は --primary-color #cc0000）
• フッターの背景色を白にしない（#d9d9d9 でコンテンツエリアと明確に区分する）

8. Responsive Behavior

Breakpoints

タッチターゲット

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

フォントサイズの調整

• モバイルでは見出しサイズをデスクトップの 70〜80% 程度に縮小
• 本文は 14〜16px を維持
• ヒーローテキストはモバイルで大幅に縮小（45px → 24〜28px 程度）

9. Agent Prompt Guide

クイックリファレンス

Primary Color (CTA): #cc0000 (Hitachi Red, --primary-color)
Brand Color (Logo): #fa000f (--brand-color)
Text Primary: #0c0c0c (--color-black)
Text Secondary: #737373 (--color-supportive-grey-4)
Background: #ffffff (--color-white)
Surface: #f4f4f4 (--color-supportive-grey-1)
Footer Background: #d9d9d9 (--color-supportive-grey-2)
Border: #d9d9d9 (--color-supportive-grey-2)

Font: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans", sans-serif
Body Size: 16px / weight 400 / line-height: 1.5
Heading: weight 600 / line-height: 1.25
Hero: 45px / weight 700 / line-height: 1.5
Letter Spacing: normal (全要素)
font-feature-settings: normal (palt 不使用)
Button Radius: 0–2px

プロンプト例

日立のデザインシステムに従って、ニュース一覧ページを作成してください。
- フォント: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans", sans-serif
- テキスト色: #0c0c0c（純粋な黒は使わない）
- セカンダリテキスト: #737373
- 背景: #ffffff、セクション背景: #f4f4f4
- フッター背景: #d9d9d9
- CTA ボタン: bg #cc0000, text #ffffff, radius 2px, weight 600
- 見出し: weight 600, line-height 1.25
- 本文: 16px, weight 400, line-height 1.5
- letter-spacing: normal（字詰め調整なし）
- font-feature-settings: normal（palt 不使用）
- カード: 白背景またはグレー背景、フラットデザイン、シャドウは最小限