森ビル（Mori Building） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 色を持たない。 有彩色は「もっと見る」のリンク青1色だけで、UI はすべて**黒の不透明度（rgba(0,0,0,0.05) / 0.8）**で組む。写真と映像に色を全部預け、インターフェースは無彩色で退く
• 密度: 文字サイズが 10 / 12 / 14 / 16 / 18 / 21 / 24px の7段しかなく、最大でも 24px。巨大な見出しを使わずに、写真の面積で階層をつける建築的な設計
• キーワード: モノクローム、モリサワ、小さな文字、角丸3px、写真主役

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

1. 書体がすべてモリサワの Web フォント。 本文＝中ゴシックBBB Pr6 M、見出し・ラベル＝見出ゴ MB31 Pr6、欧文＝Univers Next Pro、そして特別な一言だけリュウミン Pr6 M（明朝）。4書体を役割で厳密に使い分けている
2. font-feature-settings: "palt" が body から全体に効いている（実測 537要素）。CSS 中の宣言はわずか3箇所で、継承でサイト全体に行き渡る
3. letter-spacing: -0.02em を body（14px）に一度だけ宣言し、computed -0.28px が全要素に継承される。子要素の font-size が何であっても -0.28px 固定（実測 566要素）

CSS Custom Properties は実質存在しない（3個のうち2個は Swiper の既定値）。設計はトークンではなく font s_21 w_b block-item round button-round のようなユーティリティ／BEM 風クラス名に載っている。

2. Color Palette & Roles

Primary（ブランドカラー）

このサイトにブランドカラーと呼べる有彩色は存在しない。 UI の「色」は黒と白の不透明度で作る。

Accent（唯一の有彩色）

• Link Blue (#296acc): 「HILLS LIFE」の見出しと一部のリンクのみ。可視 8要素。CSS 全文でも 1 回しか出ない
• Pale Blue (rgba(162, 195, 245, 0.3)): 1要素のみのハイライト面

Neutral（ニュートラル）

• Text Primary (#000000): 本文。可視 422要素。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 可視 138要素
• Text Secondary (#515252): 「企業情報」見出し、英字ラベル（可視 6要素）
• Gray (#9fa0a0): 罫線・区切り（可視 4要素。CSS 全文で 23回）
• Gray Light (#e2e3e3): 下層ページの背景面（/business/ のページ背景）
• Background (#ffffff): ページ背景（実測 viewportTopBySample 12/12 で確定）

本文に #333333 を使わないこと。 実サイトは純黒 #000000。一般的な「日本語本文に純黒は避ける」定石とは逆で、これがこのブランドの硬質さを作っている。

3. Typography Rules

3.1 和文フォント

すべて Morisawa Fonts（MFW）の Web フォント。バリアブル（ウェイト軸 1–1000）で配信されている。

• ゴシック体（本文）: 中ゴシックBBB Pr6 M — MFW-GothicBBBPr6-Medium（実測 474要素）
• ゴシック体（見出し・ラベル）: 見出ゴ MB31 Pr6 — MFW-MidashiGoPr6-MB31（実測 69要素）
• 明朝体（特別な一言のみ）: リュウミン Pr6 M — MFW-RoHMinchoPro-Md（実測 3要素）。MFW-RoHMinchoPro-Lt（L）も宣言されているが未使用

3.2 欧文フォント

• サンセリフ: Univers Next Pro（UniversNextPro-Bold 23要素 / UniversNextPro-Regular 3要素）
• 「OUR STORY」「HILLS LIFE」「TOPICS」「Our Businesses」「JA / EN」「©Copyright」など、欧文はすべて Univers。和文書体の欧文グリフを使わない

3.3 font-family 指定 — 4本のスタックを役割で使い分ける

css/* (A) 本文・リンク・ナビ（既定） */
font-family: MFW-GothicBBBPr6-Medium, sans-serif;

/* (B) 見出し・ラベル・ボタン文言・カードタイトル */
font-family: MFW-MidashiGoPr6-MB31, sans-serif;

/* (C) 欧文（英字見出し・言語切替・コピーライト） */
font-family: UniversNextPro-Bold, sans-serif;
font-family: UniversNextPro-Regular, sans-serif;

/* (D) 明朝アクセント — 「森ビルの想い」のような標語のみ */
font-family: YakuHanMP, MFW-RoHMinchoPro-Md, serif;

/* 入力欄のみ OS 依存スタック */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;

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

• 和文・欧文を書体で分けず、役割で分ける。同じ「見出し」でも和文なら (B)、英字なら (C)
• (D) の先頭 YakuHanMP は約物半角用の従属フォント。（「』 などの括弧・句読点だけを半角幅で拾い、それ以外は後続のリュウミンに落ちる。明朝の標語を組むときはこの2段構成を必ず維持する
• Morisawa Fonts はドメインライセンスのため、ローカルの再現には代替書体が必要（下記 3.9 参照）

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

サイズは 10 / 12 / 14 / 16 / 18 / 21 / 24px の7段のみ。 font s_21 のようなユーティリティクラスで指定される。

ウェイトは実測で 400 / 600 / 700 の3段。既定は 400。 モリサワのバリアブルフォント（軸 1–1000）を使っているため、font-weight を指定しなくても書体そのものの太さ（中ゴ＝M、見出ゴ＝MB31）で階層がつく。「見出しだから bold」ではなく「見出しだから見出ゴ」という設計。

3.5 行間・字間 — このサイト最大の特徴

css/* body に一度だけ宣言される */
body {
  font-size: 14px;
  letter-spacing: -0.02em;        /* → computed: -0.28px */
  font-feature-settings: "palt";
}

-0.02em は body の 14px で -0.28px に解決され、その computed 値が全要素に継承される。 つまり:

大きい文字ほど相対的な詰めが弱くなる。 これは意図的というより CSS の継承（letter-spacing は em ではなく計算後の px が継承される）の帰結だが、実サイトの見た目はこの値なので、実装時も -0.28px を固定値で当てるのが正しい。子要素ごとに -0.02em を再宣言すると別物になる。

例外は2つだけ（どちらも「広げる」方向）:

• 明朝の標語（リュウミン 21px）: letter-spacing: 1.47px（= 0.07em）— ゆったり開く
• 欧文の小ラベル（Univers Regular 14px）: letter-spacing: 1.36px（≒ 0.097em）— トラッキングを効かせた英字

行間は 1.28 と 1.7 の2値に集約される。

• 1.28: 見出し・ラベル・カードタイトル（詰める）
• 1.7: 本文・英字見出し・ナビ（開く）
• 1.0: ナビ／フッターの「器」要素（14px で line-height: 14px）。中身の実テキストは 1.28 か 1.7 を持つ

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• カードタイトルは -webkit-line-clamp: 2 で2行に切り詰める（.line-clamp-2）
• 施設名「虎ノ門ヒルズ」「麻布台ヒルズ」は途中で折らない
• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssbody { font-feature-settings: "palt"; }

• palt が body から全体に継承される（実測 537要素）。このサイトは本文にも palt を効かせている
• ただし <button> など一部のフォーム要素は UA スタイルで normal に戻る（実測でも button 系は normal）。再宣言して揃える必要はない
• kern の明示指定はなし

3.8 縦書き

該当なし。全要素 horizontal-tb。

3.9 ローカル再現のための代替フォント

Morisawa Fonts はドメインライセンスのため、preview.html 等のローカル環境では表示されない。提供元の設計思想が近い書体で代替する。

4. Component Stylings

Buttons

角丸は 3px が基本。ピルは「タグ」だけに使う。

Filled（塗りボタン）

• Background: rgba(0, 0, 0, 0.8)
• Text: #ffffff
• Padding: 20px（大）/ 15px（標準）
• Border Radius: 3px
• Font: 16px / 700（大）または 14px / 400（標準）/ 見出ゴ
• Border: なし

Tonal（淡い面のボタン）

• Background: rgba(0, 0, 0, 0.05)
• Text: #000000
• Padding: 15px
• Border Radius: 3px（リスト内では 0px）
• Font: 14px / 400 / 中ゴ

Ghost（枠なし・面なしのナビボタン）

• Background: #ffffff
• Text: #000000
• Padding: 10px 30px
• Border Radius: 3px
• Font: 14px / 400

Circle Arrow（写真上の丸い矢印）

• Background: #ffffff
• Border Radius: 50%
• 直径 約72px、中央に > アイコン
• 写真セクションへの導線に使う。このサイトの主要な CTA 形式

Tags

• Background: #ffffff
• Text: #000000
• Border Radius: 100px（ピル）
• Padding: 9px 20px
• Font: 16px / 600 / 見出ゴ
• 例: 「受賞関連」「虎ノ門ヒルズ」（プレスリリースの絞り込み）

Cards

• Background: #ffffff または rgba(0, 0, 0, 0.05)
• Border Radius: 3px（box-round）/ 5px（画像コンテナ）
• Border: なし
• Shadow: 既定は none。浮かせる場合のみ 0 0 32px rgba(0,0,0,0.1)
• 写真の上に文字を載せる場合は下端にグラデーションのスクリムを敷く

Dropdown / Bottom Rounded

• Border Radius: 0px 0px 3px 3px（実測 8要素）— ヘッダーから降りてくるメニュー

Inputs

サイト内に一般的なフォームは検索欄のみ。

• Font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif（ここだけ OS 依存スタック）
• Font Size: 16px
• Text: #000000
• Letter Spacing: -0.28px（継承）

5. Layout Principles

Container

• Max Width: 1140px（実測で最頻出。/company/profile/ で12回）
• 本文カラム: 741px（記事・会社概要の読み物幅。実測40回）
• 全幅セクション: 1440px（viewport 幅いっぱい）
• 中間幅: 1240px / 1340px

本文を 741px に絞るのがこのサイトの読み物設計。 16px / line-height 1.7 で1行あたり約44文字になり、日本語の可読上限に収まる。

Border Radius Scale

Grid

• ニュース／プロジェクト一覧は 2〜4カラム。カード間の余白は 20px 前後
• 写真セクションは全幅（bleed）で、テキストは container 内に収める

Motion

css--moveUpRightValue: 5px;   /* ホバー時に右上へ 5px 動かす */

• 唯一の CSS 変数らしい変数。ホバーで要素が右上に 5px 滑るのがこのサイトのインタラクション

6. Depth & Elevation

影はほとんど使わない。 階層は写真の面積と rgba(0,0,0,0.05) の面で表現する。

0 0 32px は方向を持たない影。ドロップシャドウではなくアンビエントな光の回り込みとして使われている。下方向オフセットの影に置き換えないこと。

7. Do's and Don'ts

Do（推奨）

• UI の面は rgba(0,0,0,0.05) と rgba(0,0,0,0.8) で作る。 不透明色（#f5f5f5 等）に置き換えない — 写真の上に重ねたときの馴染み方が変わる
• 本文の文字色は #000000（純黒）
• letter-spacing: -0.28px を固定値で当てる（-0.02em を各要素で再宣言しない）
• font-feature-settings: "palt" を body に置いて全体に継承させる
• 書体は役割で切り替える: 本文＝中ゴ、見出し・ラベル＝見出ゴ、欧文＝Univers、標語＝リュウミン
• 明朝の標語だけは letter-spacing: 1.47px（0.07em）で開く
• 角丸は 3px。タグだけ 100px
• 本文カラムは 741px、コンテナは 1140px
• 行間は 1.28（見出し）と 1.7（本文）の2値に寄せる

Don't（禁止）

• 文字サイズを 7段（10/12/14/16/18/21/24px）から外さない。 32px や 40px の大見出しは存在しない
• 有彩色を増やさない。 青 #296acc 以外の色を UI に持ち込まない
• 見出しを font-weight: 700 で作らない。 太さではなく**書体（見出ゴ）**で見出しにする
• letter-spacing を em で各要素に再宣言しない。 大きい文字の詰めが強くなりすぎて実サイトと変わる
• ボタンに影を付けない
• 角丸を 8px 以上にしない（タグの 100px を除く）
• 欧文を和文書体（中ゴ・見出ゴ）の欧文グリフで組まない。英字は必ず Univers 系
• 明朝を本文に使わない。リュウミンは標語1行だけの特別な役

8. Responsive Behavior

Breakpoints

CSS の @media に現れる境界値は多いが、設計上の主要な区切りは次の5つ。

タッチターゲット

• 塗りボタン（14px / padding 15px）の実高は約 48px — 44px 基準を満たす
• ナビ項目（12px / line-height 20.4px）は SP では padding を足して 44px を確保する
• 丸矢印ボタンは直径 72px 前後で十分

フォントサイズの調整

• 本文 16px はモバイルでも維持する
• 見出しは 24px → 21px、21px → 18px と1段下げる（7段スケールの中で移動させ、中間値を作らない）
• 本文カラム 741px は SP では左右 20px 前後の余白を残して全幅に

9. Agent Prompt Guide

クイックリファレンス

Surface (light):   rgba(0, 0, 0, 0.05)
Surface (filled):  rgba(0, 0, 0, 0.8)
Glass:             rgba(255, 255, 255, 0.5)
Text:              #000000
Text Secondary:    #515252
Text on Dark:      #ffffff
Accent (link):     #296acc
Gray (rule):       #9fa0a0
Gray Light:        #e2e3e3
Background:        #ffffff

Font (body):       MFW-GothicBBBPr6-Medium, sans-serif   → 代替 Noto Sans JP 400
Font (heading):    MFW-MidashiGoPr6-MB31, sans-serif     → 代替 Noto Sans JP 700
Font (latin):      UniversNextPro-Bold, sans-serif       → 代替 Inter 700
Font (serif):      YakuHanMP, MFW-RoHMinchoPro-Md, serif → 代替 Shippori Mincho

Size Scale:        10 / 12 / 14 / 16 / 18 / 21 / 24px  (これ以外を作らない)
Body Size:         16px
Line Height:       1.7 (本文) / 1.28 (見出し・ラベル)
Letter Spacing:    -0.28px  (固定値。em で再宣言しない)
Font Feature:      "palt"   (body に置いて継承)
Radius:            3px (既定) / 100px (タグ) / 50% (丸)
Container:         1140px / 本文カラム 741px
Shadow:            0 0 32px rgba(0,0,0,0.1)  (使う場合のみ)

プロンプト例

森ビルのデザインシステムに従って、プレスリリース一覧のページを作成してください。

- body に letter-spacing: -0.28px と font-feature-settings: "palt" を置き、全体に継承させる
- 本文フォント: Noto Sans JP 400（実サイトは中ゴシックBBB Pr6 M の代替）
- 見出し・ラベル・ボタン文言: Noto Sans JP 700（実サイトは見出ゴ MB31 Pr6 の代替）
- 英字ラベル（PRESS RELEASE 等）: Inter 700
- ページタイトル: 24px / line-height 1.28
- カードタイトル: 18px / weight 600 / line-height 1.28 / 2行で line-clamp
- 日付: 18px / weight 400
- 本文: 16px / line-height 1.7 / color #000000
- カード: 背景 rgba(0,0,0,0.05)、border-radius 3px、影なし
- 絞り込みタグ: 背景 #ffffff、border-radius 100px、padding 9px 20px、16px/600
- 「もっと見る」ボタン: 背景 rgba(0,0,0,0.05)、border-radius 3px、padding 15px、14px
- 「一覧を見る」ボタン: 背景 rgba(0,0,0,0.8)、文字 #ffffff、border-radius 3px、padding 20px、16px/700
- ホバーで要素を右上に 5px 移動させる
- コンテナ 1140px、本文カラム 741px
- 有彩色は使わない（リンクの #296acc を除く）