三菱商事（Mitsubishi Corporation） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-25 / 対象: https://www.mitsubishicorp.com/jp/ja/, /jp/ja/about/message/

1. Visual Theme & Atmosphere

• デザイン方針: 角丸ゼロ・影ほぼゼロ・黒と白だけ。 面は黒 #000000、文字は白、罫線は 1px。装飾を全部落として、字間と余白だけで格をつくる
• 密度: 低い。本文 16px に対してコンテンツ幅は 1200px、左右の余白は 120px。1 画面に詰め込まない
• キーワード: たづがね角ゴシック、Neue Helvetica、角丸ゼロ、字間 0.1em、設計幅トークン

このサイトの核心は4つある。

1. 欧文と和文を Monotype で一式そろえ、FONTPLUS で配信している。 欧文 Neue Helvetica、和文 たづがね角ゴシック（Tazugane Gothic）。どちらも fonts.fontplus.dev から来る（トップで フォントファイル要求 30 件・全部 FONTPLUS）。たづがねは Helvetica/Frutiger 系の欧文に合わせて設計された和文なので、この 2 つは偶然の組み合わせではなく設計上のペア
2. 使えるウェイトは 200 / 400 / 500 の 3 本だけで、太字が存在しない。 実測で font-weight: 100・200・300 は全部同じ面（200）、500・600・700・900 も全部同じ面（500）に解決する。実サイトの 50px 見出しは font-weight: 300 と書いてあるが、描画されるのは 200
3. palt を 1 要素も使わず、字間は要素ごとに em で当てる。 CSS 全文に palt / halt は 0 件。代わりに本文 0.03em・ナビ 0.08em・見出し 0.1em と、役割ごとに違う字間を持たせている
4. --base-unit: 10px と「設計幅における 1px」トークンで寸法を組む。 --mc--quantity--of-design--horizontal--dt: 0.0520833333vw（= 100vw / 1920）のように、設計幅 1920 / 1440 / 768 / 375px それぞれの 1px に相当する vw 値を変数に持っている

ヒーローの what comes to mind? は DOM に存在しない。 全画面の <video>（1440×720・blob 配信）に焼き込まれた文字で、DOM 側を全走査しても該当テキストは出てこない。ここを Web フォントで実装しない。

2. Color Palette & Roles

Primary（ブランドカラー）

赤は「ほぼ使わない」のが実装の実態。 ロゴ以外でブランド赤が面になるのは右下の戻るボタン 1 つだけ。赤を CTA に広げると別のサイトになる。

Neutral（ニュートラル）

• Text Primary (#000000): 見出し・本文。可視 20 要素。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 黒面・メガメニュー上のテキスト（可視 170 要素。ナビが開いている状態の計測のため最多）
• Text Secondary (#333333): グローバルナビの項目（可視 11 要素）
• Text Muted (#666666) / (#999999): 言語切替の非選択、Social media ラベル
• Border (#d5d5d5): カードの枠・区切り線（最多の罫線色）
• Border Strong (#000000): 1px 黒罫。タブ・ボタンの枠
• Surface Gray (#efefef): メガメニューの開閉ボタン面（可視 32 要素）
• Surface Light (#f7f7f8): ピックアップ セクションの面
• Surface Lighter (#f2f1f1)
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）

計測に出る #d52484（ピンク）・#151b17・#3860be は Video.js のプレイヤー UI。 サンプル文字列が 0:05 1x, selected Filter Icon なので判別できる。ブランド色ではないので採用しない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: たづがね角ゴシック（Tazugane Gothic）。Monotype。FONTPLUS 配信。ウェイトは 200 / 400 / 500 の 3 本だけ
• 明朝体: 下層ページに --mc--str--of-font-family-name--serif（游明朝）が宣言されているが、実測 可視 1 要素（経営戦略2027 のラベル 1 つ）。実質使っていない
• Noto Sans JP はスタックの 3 番目。トップページではフォント要求 0 件、下層ページで fonts.gstatic.com から 5 件だけ読まれる。CSS 全文の @font-face 461 件はほぼ Noto Sans JP の unicode-range 分割なので、件数を「読み込んでいる証拠」にしない

3.2 欧文フォント

• サンセリフ: Neue Helvetica（Monotype・FONTPLUS 配信）。ウェイトは 200 / 400 / 500 の 3 本だけ
• 和文より先頭に置かれているので、欧文は必ず Neue Helvetica が取る

3.3 font-family 指定

css/* 変数 1 本にスタック全体を入れている（--mc--str--of-font-family-name--basic） */
font-family:
  "Neue Helvetica",        /* 欧文。先頭なので欧文は必ずこれ */
  "Tazugane Gothic",       /* 和文。たづがね角ゴシック */
  "Noto Sans JP",          /* 受け皿。Google Fonts から unicode-range で部分読み */
  "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "游ゴシック",
  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  "Osaka Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic",
  sans-serif;

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

• 欧文を先頭に置く構成。和文書体に含まれる欧文グリフではなく、Neue Helvetica の欧文を使わせるため
• 游ゴシックは Medium を Regular より前に置く順（Windows 対策）になっている
• "Osaka Meiryo" は実サイトの誤り。 Osaka と メイリオは別の書体で、この名前のフォントは存在しない。正しくは Osaka, メイリオ と 2 つに分ける

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

ルートは html { font-size: var(--mc--size--of-font--for-root, 16px) }、body { font-size: 0.625rem } = 10px。 サイズは px 直書きではなく rem で持つ。

font-weight は 3 段しかない。 @font-face は 200 / 400 / 500 のみ。実測（同一ページで幅を比較）: 100・200・300 → 全部 200 の面 ／ 400 → 400 の面 ／ 500・600・700・900 → 全部 500 の面。 font-weight: 700 と書いても太字にはならず、Medium が出る。 合成太字も起きない。

3.5 行間・字間

• 本文の行間: 1.8（16px → 28.8px）。可視 33 要素
• 中間の行間: 1.6（最多 62 要素）/ 1.5（41 要素）
• 見出しの行間: 1.28〜1.52（50px → 64px、42px → 64px）
• 本文の字間: 0.03em（16px で 0.48px）。可視 73〜76 要素で最多
• ナビの字間: 0.08em（16px で 1.28px）
• 見出しの字間: 0.1em（28px→2.8px / 34px→3.4px / 50px→5px）。下層の h1 だけ 0.12em

字間は「継承」ではなく「各要素が em で持つ」設計。 判定根拠: サイズが違う要素で px 値が比例して変わっている（16px→0.48px、24px→0.72px、34px→3.4px）。body に 1 回書いて継承させる書き方ではない。

cssbody { letter-spacing: normal; }   /* body は normal。継承させない */
.text   { font-size: 1rem;   letter-spacing: 0.03em; line-height: 1.8; }
.nav    { font-size: 1rem;   letter-spacing: 0.08em; }
.heading{ font-size: 3.125rem; letter-spacing: 0.1em; line-height: 1.28; font-weight: 300; }

line-height は body に無単位 1 が入っている。 body { font-size: 10px } に対して computed line-height が 10px、かつ両ページとも行間比 1 未満が 1 件も出ない（14px の子要素が 14px の行送りになる）ので、絶対値 px ではなく無単位。 本文ブロックには必ず line-height を宣言すること。 宣言を忘れると 1 が降りてきて行が潰れる。

3.6 禁則処理・改行ルール

cssbody { word-break: normal; }   /* 実測。break-all でも auto-phrase でもない */

body の word-break は normal（7 幅すべてで確認）。日本語の標準的な禁則処理がそのまま働く。 word-break: break-all を足すと熟語の途中で折れてしまうので入れない。

3.7 OpenType 機能

css/* 実サイトは font-feature-settings を一切書いていない */
font-feature-settings: normal;

• palt / halt は CSS 全文で 0 件、実測も 0 要素。 字詰めは一切していない
• 約物は詰めずにそのまま。代わりに letter-spacing を正の値で足して、ゆったりした字面をつくっている
• palt を後から足さない。 正の字間と併用すると設計意図（空ける）と逆の処理が混ざる

3.8 縦書き

実測 writing-mode: vertical-rl は 0 要素。縦組みは使わない。

4. Component Stylings

Buttons

Primary（選択中のタブ・一覧ボタン）

• Background: #000000
• Text: #ffffff
• Padding: 10px 20px
• Border Radius: 0
• Font Size: 20px
• Font Weight: 500
• Letter Spacing: 2px（0.1em）

Secondary（非選択のタブ）

• Background: #ffffff
• Text: #000000
• Padding: 10px 20px
• Border Radius: 0
• Font Size / Weight / Letter Spacing: Primary と同じ

Outlined（黒面・写真の上のリンク）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 0 0 0 20px（左だけ空けて罫線と文字を離す）
• Border Radius: 0
• Font Size: 20px / Weight 400 / Letter Spacing 0.48px

Scroll-to-top（唯一の丸い要素）

• Background: rgba(162, 32, 65, 0.8)
• Border Radius: 1440px（＝完全な円）
• Font Size: 10px

Cards

• Background: #ffffff
• Border: 1px solid #d5d5d5
• Border Radius: 0
• Shadow: なし

Inputs

• Background: transparent
• Border: なし（0px none）。下線も枠も持たず、アイコンとプレースホルダだけ
• Border Radius: 0
• Padding: 4px 28px 4px 36px（左 36px はアイコン分）
• Font Size: 14px

角丸はサイト全体で 0。 例外は ページ上部へ（完全な円）と、アイコン用の 50% 円 17 要素だけ。 カードやボタンに border-radius: 4px などを足さない。

5. Layout Principles

Spacing Scale

--base-unit: 10px を基準に calc(n * var(--base-unit)) で書く。実サイトの表のセルは padding: calc(1.3 * var(--base-unit)) calc(1.6 * var(--base-unit)) のように書かれている。

Container

css--width-contents: min(1200px, calc(100vw - 120px), 100%);

• Max Width: 1200px
• Padding (horizontal): 120px（最多。セクションによって 70px / 60px も使う）

Grid

• Columns: 3〜4（メガメニュー・ニュースカード）
• Gutter: 12px（最多）、セクション間は 24px / 32px

設計幅トークン（このサイト特有）

css--mc--quantity--of-design--horizontal--dt: 0.0520833333vw;  /* = 100vw / 1920 */
--mc--quantity--of-design--horizontal--lt: 0.0694444444vw;  /* = 100vw / 1440 */
--mc--quantity--of-design--horizontal--tb: 0.1302083333vw;  /* = 100vw /  768 */
--mc--quantity--of-design--horizontal--sp: 0.2666666667vw;  /* = 100vw /  375 */

「設計幅における 1px」を vw で持つ変数。 calc(240 * var(--mc--quantity--of-design--horizontal--lt)) と書けば、 1440px 設計のカンプ上の 240px がそのまま画面幅に追従する。分母がそのまま設計幅なので、 この 4 つの数字から デスクトップ 1920 / ラップトップ 1440 / タブレット 768 / モバイル 375px の 4 段設計だと読める。

6. Depth & Elevation

影は実質ゼロ。 計測に出るもう 1 つ（rgba(0,0,0,0.2) 0 0 18px）は Cookie バナー由来なので採用しない。 面の区別は影ではなく 1px の罫線（#d5d5d5 / #000000）でつける。

7. Do's and Don'ts

Do（推奨）

• 欧文を font-family の先頭に置く（"Neue Helvetica", "Tazugane Gothic", …）
• font-weight は 200 / 400 / 500 の 3 段だけを使う
• 字間は要素ごとに em で当てる（本文 0.03em / ナビ 0.08em / 見出し 0.1em）
• 本文の line-height は 1.8。中間要素は 1.6 / 1.5
• 寸法は --base-unit: 10px の倍数で書く
• 面の区切りは 1px の罫線でつける
• 本文ブロックには必ず line-height を宣言する（body の無単位 1 が降りてくるため）

Don't（禁止）

• font-weight: 700 を書かない。 500 の面が出るだけで太くならない（合成太字も起きない）
• font-weight: 300 を「Light」のつもりで書かない。 実際に出るのは 200
• border-radius を足さない。 このサイトは角丸ゼロ。円が許されるのは戻るボタンとアイコンだけ
• box-shadow でカードを浮かせない。 罫線で区切る
• font-feature-settings: "palt" を足さない。 正の字間と設計が衝突する
• ブランド赤（#a22041）を CTA の面に広げない。 実装では戻るボタン 1 つだけ
• ヒーローの what comes to mind? をテキストで組まない。 動画に焼き込まれた文字
• word-break: break-all を足さない（実測 normal）
• "Osaka Meiryo" という 1 つの名前で書かない（Osaka, メイリオ が正しい）

8. Responsive Behavior

Breakpoints

768 / 767px の境目で 2.05 倍に跳ぶ。 実測 html: 768px → 16px / 767px → 32.7253px。 body も 10px → 20.4533px。これは壊れているのではなく、モバイル側だけ 375px 設計のレイアウトを画面幅へ比例拡大する作り。 規定の計測幅（1440 / 1200 / 834 / 375px）だけで測ると 834px も 375px も 16px なので完全に固定に見える。必ず 768 / 767px を測る。

実測値（html / body / h1 / 本文 p）:

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。実サイトのボタンは padding: 10px 20px + 20px 文字で約 48px

フォントサイズの調整

• 下層ページの h1: デスクトップ 42px → モバイル(375px) 28px（67%）
• 本文: 16px → 15px。モバイルでもほぼ落とさない

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #000000（面）
Brand Red:     #a22041（戻るボタンのみ）
Text Color:    #000000 / #333333
Link Color:    #0f2350
Border:        #d5d5d5
Background:    #ffffff
Font: "Neue Helvetica", "Tazugane Gothic", "Noto Sans JP", sans-serif
Weights: 200 / 400 / 500 のみ（700 は使えない）
Body Size: 16px
Line Height: 1.8
Letter Spacing: 0.03em（本文）/ 0.1em（見出し）
Border Radius: 0

プロンプト例

三菱商事のデザインシステムに従って、ニュース一覧ページを作成してください。
- フォント: "Neue Helvetica", "Tazugane Gothic", "Noto Sans JP", sans-serif
- ウェイトは 200 / 400 / 500 のみ。700 は使わない（Medium しか出ない）
- 見出し 50px / weight 300 / letter-spacing 0.1em / line-height 1.28
- 本文 16px / letter-spacing 0.03em / line-height 1.8
- border-radius は 0。カードは 1px solid #d5d5d5 の罫線で区切る
- 選択中のタブは #000000 の面に白文字、padding 10px 20px、letter-spacing 2px
- box-shadow は使わない
- コンテナは max-width 1200px、左右 padding 120px