ITOCHU Corporation (itochu.co.jp) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 取得日: 2026-05-22 / 出典: https://www.itochu.co.jp/

1. Visual Theme & Atmosphere

• デザイン方針: 伝統的コーポレートサイト。白背景に濃紺ブルーのブランドカラーを配し、セリフ書体（PT Serif）の見出しで格調と信頼感を演出する
• 密度: 情報密度は中程度。ニュース・IR・事業紹介が整然と並ぶグリッドレイアウト
• キーワード: 格調、信頼、クラシカル、セリフコントラスト、濃紺ブルー

特徴:

• 見出しに PT Serif（欧文セリフ）を使用し、ゴシック体のボディとの書体コントラストで重厚感を出す
• CTAボタンは黒背景（#000000）で角丸なし（radius: 0px） — 日本の大手企業サイトとしては珍しい
• palt や letter-spacing によるプロポーショナル字詰めは使用していない
• CSS Custom Properties は使用されていない（クラシックなCSS設計）

2. Color Palette & Roles

Primary（ブランドカラー）

• ITOCHU Blue (#003da5): コーポレートブルー。ナビゲーション、フッターリンク、ラベル見出しに使用
• ITOCHU Blue Dark (#17448a): Cookie同意ボタン、Corporate Brandingバッジ
• Search Blue (#003391): 検索ボタン背景

Accent（アクセント）

• Link Blue (#0a5fbe): テキストリンク色
• New Badge Red (#f75e5e): NEWバッジ・注目表示
• Accent Cyan (#7dd7e3): 「適時開示」等の特殊ラベル

Neutral（ニュートラル）

• Text Primary (#444444): 本文テキスト
• Text Secondary (#555555): 補足テキスト
• Background (#ffffff): ページ背景（白）
• Section Gray (#eeeeee): NEWS・Topicsセクション背景
• Utility Gray (#f0f2f5): ユーティリティボタン背景
• Divider Gray (#6b7789): 事業セクション分割線・カテゴリラベル背景
• Dark Navy (#07112c): フッター背景

3. Typography Rules

3.1 和文フォント

• ゴシック体: メイリオ（Meiryo）、ヒラギノ角ゴ Pro W3（Hiragino Kaku Gothic Pro）
• Windows環境ではメイリオが優先、macOSではヒラギノ角ゴが使用される
• 明朝体は使用していない

preview.html の注記: メイリオはシステムフォントのためWebでの表示確認時に環境差が出る。preview.html では Google Fonts の Noto Sans JP をフォールバック先頭に追加して表示を安定させている

3.2 欧文フォント

• セリフ（見出し専用）: PT Serif (Google Fonts) — セクション見出し（h2）に使用。ゴシック体ボディとの書体コントラストが最大の特徴
• サンセリフ（ラベル専用）: Roboto (Google Fonts) — 「CONTENTS」等の英字ラベルに使用
• サンセリフ（本文内）: Myriad Pro, Myriad, Arial — font-family チェーン内で和文フォントの後に指定
• サンセリフ（言語切替）: Verdana — EN/CN 切替リンク用

3.3 font-family 指定

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

/* セクション見出し（h2 メイン） */
font-family: "PT Serif", serif;

/* 英字ラベル（CONTENTS 等） */
font-family: Roboto, sans-serif;

/* 言語切替 */
font-family: Verdana, sans-serif;

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

• 和文フォント（メイリオ / ヒラギノ角ゴ）を先頭に配置。日本語表示品質を最優先
• 欧文は Myriad Pro → Arial のフォールバック。Myriad Pro は Adobe 系環境向け
• 見出しのみ PT Serif でセリフ書体に切替。英数字の見出しに格調を与える

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

3.5 行間・字間

• 本文の行間 (line-height): 1.67（15px本文に対して25.05px）
• 見出しの行間: 1.2〜1.34（セリフ見出しは1.34とやや広め）
• 本文の字間 (letter-spacing): normal（字詰めなし）
• 見出しの字間: 0.1em（PT Serif見出し・Robotラベルで使用。2.6px / 26px = 0.1em）

ガイドライン:

• 本文は letter-spacing: normal で、字詰めを行っていない
• 見出し（特にセリフ体）には 0.1em の広めの字間を設定し、格調と可読性を確保
• line-height 1.67 は日本語本文として適切な行間

3.6 禁則処理・改行ルール

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

クラシックなコーポレートサイトのため、禁則処理は標準的な設定。

3.7 OpenType 機能

css/* font-feature-settings は使用されていない */
/* palt: なし — プロポーショナル字詰めは適用していない */

• palt は見出し・本文ともに使用していない
• メイリオ自体がプロポーショナルメトリクスを内包しているため、追加の字詰めは不要という設計方針

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（黒背景）

• Background: #000000
• Text: #ffffff
• Padding: 18px 8.8px 16px
• Border Radius: 0px（角丸なし — シャープな印象）
• Font Size: 15px
• Font Weight: 400
• 用途: 「一覧を見る」「事業紹介トップ」等の主要遷移

Outline（ブランドカラー）

• Background: transparent
• Text: #003da5
• Border: 1px solid #003da5
• Padding: 10px 28px 10px 58px（左にアイコンスペース）
• Border Radius: 0px
• 用途: 「公式facebookページ」等の外部リンク

Cookie同意

• Background: #17448a
• Text: #ffffff
• Padding: 8px 16px
• Border Radius: 4px
• Font Size: 14px
• Font Weight: 600
• 用途: Cookie同意バー内ボタン

Utility（グレー）

• Background: #f0f2f5
• Text: #555555
• Border: 1px solid #f0f2f5
• Padding: 8px 16px
• Border Radius: 0px
• 用途: 「ページ印刷」等のユーティリティ操作

Badge

Corporate Branding

• Background: #17448a
• Text: #ffffff
• Padding: 4.5px 7.5px
• Font Size: 15px
• Font Weight: 700

NEW バッジ

• Background: #f75e5e
• Text: #ffffff
• Font Size: 12px
• Font Weight: 700

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #003da5
• Border Radius: 0px
• Padding: 8px 12px
• Font Size: 15px
• Height: 40px

Cards

• Background: #ffffff
• Border: 1px solid #eeeeee
• Border Radius: 0px（角丸なし）
• Padding: 20px
• Shadow: なし（フラットデザイン。ホバー時に軽い影を追加する場合あり）

5. Layout Principles

Spacing Scale

Container

• Max Width: 1120px
• Padding (horizontal): 20px

Grid

• Columns: 可変（ニュースは2列、事業紹介は3列等）
• Gutter: 20px〜30px

6. Depth & Elevation

伊藤忠のサイトはフラットデザインが基本。影の使用は控えめで、区切りはボーダーや背景色の切り替えで表現する。

7. Do's and Don'ts

Do（推奨）

• セクション見出しには PT Serif を使い、本文ゴシック体との書体コントラストを維持する
• CTAボタンは 角丸なし（radius: 0px） の黒背景で統一する
• ブランドカラー #003da5 はリンク・ラベル・アウトラインボタンに限定し、背景面には #17448a を使う
• 見出しの letter-spacing は 0.1em を確保して格調を出す
• 本文の line-height は 1.67 を維持する
• ニュースリストの日付は 14px / 400 で控えめに表示する

Don't（禁止）

• 見出しに丸ゴシック（Rounded Gothic）や手書き風フォントを使わない
• CTAボタンに角丸（border-radius > 0）を適用しない（Cookie同意ボタンの4pxは例外）
• ブランドブルー #003da5 をページ背景色として使わない（背景は白が原則）
• palt（font-feature-settings）を適用しない — メイリオの標準字幅を維持する
• テキスト色に純粋な #000000 を使わない — 本文は #444444、補足は #555555
• PT Serif を本文テキストに使わない — 見出し専用

8. Responsive Behavior

Breakpoints

タッチターゲット

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

フォントサイズの調整

• モバイルでは本文 14〜15px、見出しはデスクトップの 70〜80% 程度に縮小
• PT Serif の見出しはモバイルで 20〜22px に調整

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #003da5
CTA Background: #000000
Text Color: #444444
Background: #ffffff
Section Background: #eeeeee
Body Font: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Myriad Pro", Myriad, Arial, sans-serif
Heading Font: "PT Serif", serif
Label Font: Roboto, sans-serif
Body Size: 15px
Line Height: 1.67
Heading Letter Spacing: 0.1em
Button Radius: 0px

プロンプト例

伊藤忠商事のデザインシステムに従って、事業紹介一覧ページを作成してください。
- ブランドカラー: #003da5
- 本文フォント: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", sans-serif
- 見出しフォント: "PT Serif", serif（太字 700、letter-spacing: 0.1em）
- 英字ラベル: Roboto, sans-serif（600、0.1em、色 #003da5）
- 本文: 15px / line-height: 1.67 / 色 #444444
- CTAボタン: 黒背景 #000、白文字、角丸なし
- カード: 白背景、ボーダー #eee、影なし
- セクション背景: #eeeeee