三井物産（MITSUI & CO.） DESIGN.md

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

実測日: 2026-10-26 / 対象: https://www.mitsui.com/jp/ja/, /jp/ja/company/outline/profile/index.html

1. Visual Theme & Atmosphere

• デザイン方針: 無彩色だけで組んだ総合商社のコーポレート。全画面の映像ヒーローに欧文1行を置き、以降はほぼグレースケールで情報を積む
• 密度: 中。本文 14.7px / 行間比 1.24 と詰まり気味で、1画面あたりの情報量は多い
• キーワード: 静謐、無彩色、幾何学的サンセリフ、詰め組み

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

1. 自社専用書体 MitsuiandCoSans を Regular / Bold の 2 ファミリーで持ち、font-weight では太さが一切変わらない。 @font-face に font-weight 宣言が無いため、100〜900 のどれを要求しても同じ1本が返る（実測: 欧文 Handgloves Typography の幅が 9 ウェイトとも 478.41px。Bold ファミリーも 9 ウェイトとも 485.48px）。合成太字すら起きない
2. 欧文は太さ1本、和文は4段。 和文は受け皿の Noto Sans JP に落ちるので 400 / 500 / 600 / 700 が効く（実測 435.7 / 450.67 / 461.73 / 468.89 / 476.05px。800・900 は 700 と同値＝上限）。同じ1行の中で、欧文と和文でウェイトの自由度が違う
3. 詰めは palt だけで行い、letter-spacing は触らない。 font-feature-settings: "palt" が可視 423 要素中 415 要素（98%）。一方 letter-spacing は 363 要素が normal。実測で palt は約 14% 詰まる（同一書体・同一文字列で normal 540px → palt 463.09px）
4. 和文用と欧文用で font-family スタックを使い分ける。 "Noto Sans JP" を含むスタックが 352 要素、抜いたスタックが 57 要素（ヒーローの 360° business innovation や JP / EN など欧文だけの要素）
5. トップと下層で別世代のテンプレートが同居している。 html の font-size がトップ 10px / 下層 14px（834px 以下で 15px）、クラス名が megaMenu_overlay / megaMenu2027_overlay、自社書体の配信パスも /assets/font/ / /common/fonts/ と分かれる

2. Color Palette & Roles

無彩色だけで構成される。彩度のある色はブランドカラーとしては使われていない。

Primary（ブランドカラー）

• Primary (#101010): 見出し・ロゴ・ナビゲーションの文字色（可視 42 要素）。純黒 #000000 ではなく、わずかに持ち上げた黒
• 面色としてのブランドカラーは存在しない。 CTA は面を持たず、下線とアイコンだけで示す（§4 参照）

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト（可視 99 要素で最多）
• Text Secondary (#555555): 日付・補足テキスト（可視 67 要素）
• Text Inverse (#fafafa): 写真・映像の上に置く白文字（可視 26 要素）。純白ではない
• Background (#f5f5f5): ページ背景（body）
• Surface (#eeeeee): ナビゲーションのドロップダウン面（20 要素）
• Surface Alt (#f2f2f2): 下層の定義リストの見出しセル（12 要素）
• Border (#e3e3e3): バッジの地・区切り線（8 要素）

実サイトはこうだが注意: uniqueBackgrounds には #27455c（濃紺）と #468254（緑）も出るが、どちらも可視テキストを持つ要素に当たっておらず、2 ページとも描画されていない。採用しないこと。 同様に #000a02 は CMP（OneTrust）のボタン色なので、サイトの設計色ではない。

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（Google Fonts。400 / 500 / 600 が loaded）
• 明朝体: 使用しない
• フォールバックは "Hiragino Kaku Gothic Pro", Meiryo, sans-serif

3.2 欧文フォント

• サンセリフ: MitsuiandCoSans-Regular / MitsuiandCoSans-Bold（自社配信の専用書体。幾何学的サンセリフ）
• 配信元は自社ドメイン（/assets/font/MitsuiandCoSans-Regular.woff2）。font-display: swap

3.3 font-family 指定

css/* 和文を含む要素（可視 352 要素） */
body {
  font-family: MitsuiandCoSans-Regular, "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-weight: 500;                    /* ← 400 ではなく 500 が既定 */
  font-feature-settings: "palt";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* 欧文だけの要素（可視 57 要素）— Noto Sans JP を抜く */
.heroCopy {
  font-family: MitsuiandCoSans-Regular, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

/* 太字 — font-weight ではなく font-family ごと差し替える（可視 12 要素） */
.title--bold {
  font-family: MitsuiandCoSans-Bold, "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-weight: 700;
}

@font-face は実サイトでは 3 件しかない（iconfont / MitsuiandCoSans-Regular / MitsuiandCoSans-Bold）。いずれも font-weight を宣言していない。

css@font-face {
  font-family: MitsuiandCoSans-Regular;
  src: url("/assets/font/MitsuiandCoSans-Regular.woff2") format("woff2");
  font-display: swap;
  /* font-weight の宣言が無い ＝ 100〜900 のどの要求にもこの 1 本が返る */
}

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

html { font-size: 62.5% } ＝ 10px（トップ）。rem は 10px 基準で読む。

ウェイトは実測 500 が 392/423 要素（93%）。400 は 14 要素、700 は 14 要素、600 は 3 要素。 700 を当てるときは必ず font-family を MitsuiandCoSans-Bold に差し替える（Regular のままでは欧文が 1px も太くならない）。

サイズは rem と vw を足した流体。デスクトップは max() で下限を切る。

css.footer_copy { font-size: calc(0.8rem + 2.13333vw); }              /* モバイル */
@media (min-width: 768px) {
  .footer_copy { font-size: max(1.2rem, 0.9rem + 0.6vw); }         /* デスクトップ */
}

この設計のため font-size に 14.7px 13.72px、border-radius に 0.96px 1.92px 2.88px 4.8px といった端数が出る。端数は丸めずそのまま写すこと。

3.5 行間・字間

• line-height: html に var(--line-height-base) ＝ 1.4、body に 140%。実測の行間比は 1.24（163 要素）/ 1.33（130 要素）/ 1.40（63 要素） の 3 段が主。見出しほど詰まる
• letter-spacing: normal が 363/423 要素。負の値（-0.294px 17 要素、-0.784px 7 要素など）はヒーローと一部の大見出しだけ
• 字間は em で配らない。 詰めは palt が担当し、letter-spacing は原則 normal のまま

3.6 禁則処理・改行ルール

• word-break は normal（7 幅すべてで確認）。日本語の禁則処理はブラウザ既定に任せる
• word-break: break-all も auto-phrase も使っていない

3.7 OpenType 機能

• font-feature-settings: "palt" が可視 423 要素中 415 要素（98%）
• 宣言位置は body ＋ コンポーネント単位の二重。body に 1 行書いたうえで、.footer_copy .globalMenuCard_title .headerMenu_title .homeInnovation_copy p など各コンポーネントが font-optical-sizing: auto; font-style: normal; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; の 4 点セットを再宣言する（ミックスインとして展開されている）
• palt 以外（tnum / halt / 縦組み系）は使っていない

3.8 縦書き

• 使用しない（writing-mode: vertical-rl は 2 ページとも 0 要素）

4. Component Stylings

Buttons

面色を持つボタンが存在しない。 サイト本体の導線はすべて、下線か円形アイコンで示すテキストリンク。

css/* 円形の矢印アイコン（border-radius: 50% が 35 要素） */
.linkIcon {
  width: 4.8rem; height: 4.8rem;
  border-radius: 50%;
  border: 1px solid #e3e3e3;
  background: transparent;
}

interactive に出る面色付きボタン（同意する / すべて拒否する / Apply / 設定を保存する）はすべて CMP（OneTrust）。サイトの設計として採用しないこと。

Badges / Chips

css.badge {
  background: #e3e3e3;
  color: #101010;
  font-size: 1.2rem;        /* 12px */
  padding: 4.8px 9.6px;
  border-radius: 1.92px;    /* 端数は vw 由来。丸めない */
}

Cards

css.card {
  background: #ffffff;
  border-radius: 4.8px;
  box-shadow: rgba(0, 0, 0, 0.04) 0 3px 7px 0;
}
.card--raised {
  box-shadow: rgba(0, 0, 0, 0.12) 0 3px 8px 0;   /* 可視 4 要素 */
}

写真・映像の上に置く白文字

CSS 変数はサイト全体で 3 個しかなく、うち 2 個がこれ。

css:root {
  --text-shadow-mobile:
    10px 10px 25px rgba(0, 0, 0, 0.99),
    -10px 10px 25px rgba(0, 0, 0, 0.99),
    -10px -10px 25px rgba(0, 0, 0, 0.99),
    10px -10px 25px rgba(0, 0, 0, 0.99);
  --text-shadow-mobile-icon-text:
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 3px rgba(0, 0, 0, 1),
    10px 10px 25px rgba(0, 0, 0, 1),
    -10px 10px 25px rgba(0, 0, 0, 1),
    -10px -10px 25px rgba(0, 0, 0, 1),
    10px -10px 25px rgba(0, 0, 0, 1);
}
.heroCopy { color: #fafafa; text-shadow: var(--text-shadow-mobile); }

4 方向に同じぼかしを重ねて、文字の周囲を均等に暗く落とすという作り。オーバーレイを敷かずに写真の明度変化へ耐えさせている。

5. Layout Principles

Spacing Scale

rem（10px 基準）と vw の併用。padding: 0.133333vw のような微小な vw も使う。

Container

• ページ背景 #f5f5f5 の上に #ffffff の面を重ねる
• ヒーローは全画面（1440×900 を覆う）。heroCovered: true なので、計測時の背景色をページの地色と取り違えないこと（地色は body の #f5f5f5）

Grid

• ニュースのサムネイルは 230×154px（3 列）

6. Depth & Elevation

影は 2 種類だけ。

border-radius は 50%（35 要素・円形アイコン）、4.8px、2.88px、1.92px、0.96px。px の端数は vw から算出された結果なので丸めない。

7. Do's and Don'ts

Do（推奨）

• 太字にするときは font-family を MitsuiandCoSans-Bold に差し替える。font-weight だけ上げても欧文は変わらない
• 欧文だけの要素では font-family から "Noto Sans JP" を抜く（57 要素がそうしている）
• font-feature-settings: "palt" を body に書いて継承させる
• letter-spacing は normal のままにする
• 本文のウェイトは 500（400 ではない）
• html { font-size: 62.5% } を前提に rem を 10px 基準で書く
• 写真の上の白文字には 4 方向の多重 text-shadow を使う

Don't（禁止）

• MitsuiandCoSans-Regular に font-weight: 700 を当てない。欧文は 1px も太くならず、和文だけが太る「ちぐはぐな太字」になる
• @font-face に font-weight を書き足さない。実サイトは意図的に省いており、ファミリー名で太さを切り替える設計
• letter-spacing を em で配らない（詰めは palt の仕事）
• border-radius や font-size の端数（0.96px 14.7px 13.72px）を整数に丸めない
• CMP（OneTrust）の面色 #000a02 や、可視 0 の #27455c / #468254 を設計色として使わない
• 彩度のある色をブランドカラーとして足さない（実サイトは無彩色のみ）

8. Responsive Behavior

Breakpoints

実測（7 幅）では html / body はページによって異なる。

• トップは 7 幅とも 10px / 13px で完全固定。流体なのは要素側（calc(rem + vw) と max()）
• 下層は 1024px と 834px の間で 14px → 15px に切り替わる。モバイルの方が大きい
• 主なブレークポイントは 768px（calc() と max() の切り替え）

フォントサイズの調整

要素側の式がそのまま応答するので、rem だけを書き換えない。calc(0.8rem + 2.13333vw) / max(1.2rem, 0.9rem + 0.6vw) のペアで書く。

9. Agent Prompt Guide

クイックリファレンス

書体:     MitsuiandCoSans-Regular / -Bold（自社専用・欧文）＋ Noto Sans JP（和文）
太さ:     本文 500。太字は font-family を -Bold に差し替える（font-weight では変わらない）
詰め:     font-feature-settings: "palt" を body に。letter-spacing は normal
色:       #101010（見出し）/ #333333（本文）/ #555555（補足）/ #fafafa（白文字）
背景:     #f5f5f5（ページ）/ #ffffff（面）/ #eeeeee（ドロップダウン）
行間:     1.24〜1.40。見出しほど詰める
ルート:   html { font-size: 62.5% } ＝ 10px（トップ）
CTA:      面色を持たない。円形アイコン（border-radius: 50%）＋テキスト
影:       rgba(0,0,0,0.12) 0 3px 8px / rgba(0,0,0,0.04) 0 3px 7px の 2 種のみ

プロンプト例

三井物産のコーポレートサイト風に、ニュース一覧のセクションを作ってください。 書体は欧文に幾何学的サンセリフ、和文に Noto Sans JP を重ねたスタックで、 font-feature-settings: "palt" を body に 1 回だけ書いて継承させてください。 letter-spacing は normal のままにしてください。 本文のウェイトは 500、太字は font-weight ではなく太字専用のファミリー名に差し替えてください。 色は無彩色のみ（見出し #101010 / 本文 #333333 / 補足 #555555 / 背景 #f5f5f5）。 CTA に面色は使わず、border-radius: 50% の円形アイコンとテキストで示してください。