DESIGN SYSTEM

三菱地所のデザインシステム

Our Palette

カラーパレット

Brand
Brand Red
#DC000C
CTA・検索・強調
Brand Red Dark
#D7000F
プレス時
Black
#000000
本文・見出し
White
#FFFFFF
ページ背景
Backgrounds
Hero Bg
#F7F6F6
ページタイトル帯
Info Card Bg
#F2F1EC
情報カード(ベージュ)
Subtle Bg
#EFEFEF
二次ボタン・タグ
Text
Text Primary
#000000
本文
Text Sub
#404040
控えめな本文
Text Tertiary
#757575
補助・キャプション
Text Meta
#999999
メタ・ラベル
Text Disabled
#C9C9C9
無効状態
Beige Accent
#9F9889
リード文専用
Tag (Category)
Tag Green
#4DA262
カテゴリ識別
Tag Blue
#4A94BD
カテゴリ識別

Typography

タイポグラフィ階層

TOPICS
Century Gothic / 58px / 700 / lh: normal / ls: normal大型英字見出し
NEWS
Century Gothic / 46px / 700 / lh: normal英字セクション見出し
SUSTAINABILITY
Century Gothic / 40px / 700 / lh: normal英字セクション見出し(中)
三菱地所のニュースリリース
Noto Sans JP / 34px / 700 / lh: 47.6px (×1.4)ページタイトル H1
時代に合わせた、まちづくりの実績。
Noto Sans JP / 28px / 700 / lh: 39.2px (×1.4)セクション見出し H2
トップメッセージ
Noto Sans JP / 24px / 700 / lh: 33.6px (×1.4)サブセクション見出し
超長期視点でのまちづくりと時代を先取りするDNA
Noto Sans JP / 22px / 700 / lh: 30.8px / color: #9F9889リード・特徴コピー
オフィス事業
Noto Sans JP / 18px / 700 / lh: 25.2px (×1.4)事業一覧カードタイトル
三菱地所グループは、丸の内を「日本のビジネス街にする」という想いから始まり、長期視点に立ったまちづくりを続けてきました。本文は line-height 32px (×2.0) と広めに取り、コーポレート系の安定した可読性を確保しています。
Noto Sans JP / 16px / 400 / lh: 32px (×2.0)本文(広め)
カード内テキスト等の場合は line-height 25.6px (×1.6) と少し詰めて使用するパターンも観測されました。
Noto Sans JP / 16px / 400 / lh: 25.6px (×1.6)本文(詰め)
Our Business
Century Gothic / 24px / 400 / color: #999英字エイブロウ
HOME > NEWS > PRESS RELEASE
Century Gothic / 12px / 400 / color: #404040パンくず・メタ

Article Sample

記事・コーポレートコンテンツの組版

「三菱地所と次にいこう。」新TVCM放映開始のお知らせ

人を、想う力。街を、想う力。三菱地所グループは、丸の内エリアを中心としたまちづくりで蓄積した知見を、次の時代の都市づくりへ広げていきます。

三菱地所株式会社(本社:東京都千代田区、執行役社長:中島篤)は、コーポレートメッセージ「人を、想う力。街を、想う力。」のもと、新たなTVCMを2026年4月25日(金)より全国で順次放映いたします。

本TVCMのねらい

本CMでは、三菱地所グループが取り組むまちづくりを、そこに集う人々の視点から描きました。建物そのものではなく、街を支える人とその想いに焦点を当て、コーポレートメッセージの核を伝えます。

放映期間: 2026年4月25日(金) 〜 2026年6月30日(月)
放映地域: 全国エリア
媒体: 民放各局・BS各局

三菱地所グループのまちづくり

三菱地所グループは、丸の内・大手町・有楽町エリアを中心に、約100年にわたるまちづくりを続けてきました。オフィス、商業、住宅、ホテル、空港、物流など、多様な領域で価値を提供しています。

本リリースに関するお問い合わせは、三菱地所株式会社 広報部までお願いいたします。


Display Headlines

大型英字見出しのショーケース

TOPICS

最新のトピックをお届けします。

NEWS

最新のニュースリリースをご覧ください。

SUSTAINABILITY

持続可能な社会の実現に向けた取り組み。


Buttons

ボタンスタイル

CTA Pill
bg: #DC000C / radius: 50px
Search
bg: #DC000C / radius: 32px / 22px
Filter Tag
bg: #EFEFEF / radius: 0
Clear (text)
color: #DC000C
Modal Close
radius: 50%

Cards

ニュースカード

PRESS RELEASE
2026.04.25

「三菱地所と次にいこう。」新TVCM放映開始

コーポレートメッセージのもと、新たなTVCMを全国で順次放映いたします。

SUSTAINABILITY
2026.04.18

丸の内エリアの脱炭素化に向けた取り組み

2030年までのカーボンニュートラル達成に向けた施策を発表。

OFFICE
2026.04.10

常盤橋プロジェクト 新オフィスタワー竣工

東京駅前再開発の中核となる新タワーが完成しました。

事業領域グリッド

OFFICE

オフィス事業

SHOPPING

商業施設事業

RESIDENTIAL

住宅事業

HOTEL

ホテル事業

AIRPORT

空港事業

LOGISTIC

物流施設事業


Forms

フォーム

フルネームをご記入ください
フォーカスされた状態(border: 赤)
半角数字でご入力ください

Elevation

奥行き表現

三菱地所のサイトは基本フラット。box-shadow は使わず、色面の差(背景トーン)と境界線で奥行きを表現します。

FLAT
border 1px
TONAL (Beige)
bg #F2F1EC
TONAL (Subtle)
bg #EFEFEF

Layout

レイアウト原則

HEADER: 固定 / 高さ約 110px / bg #FFFFFF / 横並び nav + 右端の赤いピル CTA
PAGE TITLE BAR: bg #F7F6F6 / H1 Noto Sans JP 34px 700 / 大きめの上下余白
CONTENT: 中央寄せ / max-width 約 1200px / 両端余白あり / セクション間の縦余白 80px+
GRID: 2-4 カラムカードグリッド / ブレークポイントで段組み変化

Font Note

フォントの注記

実サイトはグローバル領域で Century Gothic を先頭に置く独特な構成です。Century Gothic は macOS / Windows に標準搭載されているシステムフォントですが、Linux 系(puppeteer の headless Chrome を含む)には未搭載のことが多いため、このプレビューでは Jost(Google Fonts)を Century Gothic の代替として後段に置いています。

和文は Noto Sans JP を Google Fonts から weight 400 / 500 / 700 で読み込んでいます。実サイトでは下層ページで Noto Sans JP 先頭、ヘッダー・ナビ・トップ大型英字見出しで Century Gothic 先頭 と stack を切り替えています。

letter-spacing は全要素 normal、font-feature-settings も normal。和文の字詰め(palt)は使用せず、ベタ組で組まれています。和文見出しの行間は font-size × 1.4、本文は × 1.6〜2.0 が基本ルール。