阪急阪神不動産（Hankyu Hanshin Properties） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: palt を body に1回書いて全画面を詰める。 阪急のマルーン寄りの紫（#7f0073）からピンク（#c32381）へのグラデーションが唯一の強い色で、それ以外は白と灰で組む
• 密度: 低め。12px の小さい文字を大量に並べるメガメニュー型のナビと、ゆったりした 30px の明朝ヘッドラインが同居する
• キーワード: palt 1175 要素、紫→ピンクのグラデーション、事業色6色、明朝は見出しだけ、root 10px

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

1. font-feature-settings: "palt" を body に1行だけ書き、1175 要素へ継承させている（html は normal、body が "palt"）。抽出器が数えた可視テキストでもトップ 531 要素 / 下層 258 要素。このサイトの和文の詰まり方は letter-spacing ではなく palt で作られている
2. palt の上に、さらに小さい正の letter-spacing を重ねる。 ナビ 15px に 0.6px（= 0.04em）、ヘッドライン 30px に 1.8px（= 0.06em）、リンク 14px に 0.84px（= 0.06em）。詰めてから、わずかに空け直すという二段構え
3. 明朝（Noto Serif JP）は見出しだけ。 トップのヒーロー見出し 30px が 13 要素、下層のページタイトル 42px が 1 要素。本文は全部ゴシック。@font-face は 200〜900 の 8 ウェイト宣言されているが、loaded は 500 の1本だけ
4. 事業カテゴリに6色のバッジ色を持つ。 #4ea075（サステナビリティ）/ #347885（ロジスティクス）/ #8ca546（開発事業）/ #6da5ad（DX）/ #c76fa3（エリアマネジメント）/ #868e98（その他）。いずれも 11px / radius 2px の小さなタグ

CSS Custom Properties は 2 ページとも 0 個。 設計トークンは存在しない。 縦組みは 0 要素。

weight 700 の要素はすべて OneTrust（CMP）のもの（プライバシー設定センター 全てのCookieを受け入れる Clear Apply ot-cat-header など）。サイト本体のウェイトは 300 / 400 / 500 の3段だけで、下層ページには 700 が 1 要素も無い。interactive に出てくる 14.4px / weight 700 のボタンも CMP なので、コンポーネント仕様として採用しない。

2. Color Palette & Roles

Primary（ブランドカラー）

グラデーションは 90deg（左→右）で、停止位置は 0% と 100%。 角度も停止位置も丸めない。

事業カテゴリ色（バッジ）

いずれも 11px / 文字白 / border-radius: 2px / weight 400 / line-height 1.55。6色セットで1つの体系なので、1色だけ足したり引いたりしない。

Neutral（ニュートラル）

• Text Primary (#333333): 本文・ナビ（トップ 65 要素 / 下層 48 要素で最多）
• Text Sub (#3f464e): セクション見出し・News などの欧文ラベル（トップ 21 / 下層 11 要素）
• Text Muted (#868e98): パンくず（下層 4 要素）。バッジの「その他」と同じ値
• Text on Dark (#ffffff): グラデーション面の上（23 要素）
• Text Light (#555555): 補助テキスト
• Dark Surface (#27455c): フッター（可視 6 面）
• Border / Divider (#d0d5dd): ページャの番号面（6 要素）
• Surface (#f8f8f8) / #f3f3f3 / #f2f2f2: 淡い面の3段
• Subpage Gradient (linear-gradient(#f6f4f1 0%, #d3d0c9 100%)): 下層ヒーローの背景（div::before.top_message_wrap_back、589,995px²）。ベージュ〜グレーの縦グラデーションで、トップの紫とは別系統
• Background (#ffffff): ページ背景（pageBackground.resolved / 根拠 body）

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文・既定）: Noto Sans JP（Google Fonts）。トップ 93 要素 / 下層 58 要素
• 明朝体（見出しのみ）: Noto Serif JP。トップ 13 要素（ヒーロー見出し 30px）/ 下層 1 要素（ページタイトル 42px）
• フォント取得: fonts.gstatic.com へ 61 件。document.fonts で loaded なのは Noto Sans JP 400 / 500、Noto Serif JP 500、Inter 400、Cormorant Infant 300 の5本だけ。残り（Noto Sans JP の 100/200/300/600/700/800/900、Noto Serif JP の 200/300/400/600/700/900）は宣言のみで描画されていない

3.2 欧文フォント

• サンセリフ: Inter（weight 400）。English と日付 2026.10.07（トップ 8 / 下層 4 要素）
• セリフ: Cormorant Infant（weight 300）。News Business Pick up のセクション見出し 60px（5 要素）。この1ウェイトしか読み込んでいないので、太くしない

3.3 font-family 指定

css/* 本文・ナビ（実サイトの宣言をそのまま） */
font-family: "Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

/* 見出し（明朝） */
font-family: "Noto Serif JP";

/* バッジ・一部ラベル */
font-family: "Noto Sans JP";

/* 欧文 */
font-family: Inter;              /* 日付・English */
font-family: "Cormorant Infant"; /* セクション見出し 60px */

フォールバックの考え方 — 実サイトはこうだが、正しくはこう:

• 游ゴシックの並び順が逆。 実サイトは 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium" の順で、Windows では2番目の YuGothic（Regular）に当たり、Medium に到達しない＝細く出る。Noto Sans JP が先頭にあり実際に loaded しているので実害は出ていないが、Web フォントが落ちた瞬間に Windows だけ細くなる。新規実装では Medium を Regular より前に置く:

  cssfont-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic,
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;

• ヒラギノは Pro を指定している（ProN ではない）。 Pro と ProN は別物（ProN は JIS2004 字形）。実サイトに合わせるなら Pro、字形を今風にするなら ProN。どちらを選んだか決めて統一する
• "Noto Serif JP" と "Noto Sans JP" にフォールバックが無い（1語だけ）。 Web フォントが落ちるとブラウザ既定にそのまま落ちる。, serif / , sans-serif を足す

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

html { font-size: 10px }（= 62.5%）、body { font-size: 15px; line-height: 22.5px }。どちらも 1440 / 1200 / 834 / 768 / 767 / 375px で完全に固定（流体化していない）。 rem の px 換算は 1rem = 10px。ナビの 14.4px は 1.44rem。

• weight は 300 / 400 / 500 の3段だけ（トップ 73 / 47 / 5 要素）。700 は OneTrust のみ。サイト本体では使わない
• 300 を使うのは Cormorant Infant（欧文セリフ 60px）だけ。和文に 300 は当てていない

3.5 行間・字間

• 本文の行間は 1.5（body { line-height: 22.5px } = 15px × 1.5）。px の絶対値で宣言されているが、トップ 65 要素 / 下層 39 要素が比率 1.50 で出ているので、各ブロックが自分で 1.5 を宣言し直している。新規実装では無単位の 1.5 で書く
• 見出しの行間: ヒーロー見出し 1.6 / ページタイトル 1.2 / ナビ 1.47 / 欧文 Display 1.2
• 下層のリードだけ 1.86（2 要素）とゆったり組む
• 字間は palt が主役、letter-spacing は補助。
  • 既定は normal（トップ 76 要素 / 下層 49 要素で最多）
  • 空けるのは 0.02em / 0.04em / 0.06em の3段:
    • 0.06em → 明朝の見出し（30px → 1.8px、42px → 2.52px）とリンク（14px → 0.84px）
    • 0.04em → ナビ（15px → 0.6px）、事業名（12px → 0.48px）
    • 0.02em → キャプション（13px → 0.26px）、日付（14px → 0.28px）
  • em で各要素に宣言している（サイズに比例して px が変わる）。継承させていない

3.6 禁則処理・改行ルール

css/* 実サイトは body に word-break / overflow-wrap を指定していない（computed: normal） */
word-break: normal;
overflow-wrap: anywhere;   /* 推奨 */
line-break: strict;        /* 推奨 */

• word-break: auto-phrase は使っていない
• ヒーロー見出しは HTML 側で全角スペースを入れて改行位置を作っている（商業施設やオフィスなど 魅力あふれるまちづくり）。<br> ではなくスペース区切りなので、幅によって折り返し位置が変わる

3.7 OpenType 機能

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

これがこのサイトの字詰めの本体。 body に1行書くだけで 1175 要素（DOM 全走査）に継承されている。html は normal のままなので、宣言位置は body。

• palt はプロポーショナルメトリクス。約物（「」、。）や仮名が文字ごとに詰まる。全体を一律に詰める letter-spacing とは別物
• palt の上に正の letter-spacing を重ねている（3.5 節）。詰めてから 0.02〜0.06em 空け直すことで、約物だけ詰まって仮名は適度に開いた組みになる。どちらか片方だけ真似すると別物になる
• kern / tnum / halt は使っていない

3.8 縦書き

該当なし（writing-mode: vertical-* は 2 ページとも 0 要素）。

4. Component Stylings

Buttons

Text Link Pill（ニュースリリース一覧を見る / 事業紹介一覧を見る）

• Background: transparent
• Text: #7f0073 / 14px / weight 400 / line-height 1.5 / letter-spacing 0.06em
• Border Radius: 100px（ピル）

Hero Panel（グラデーションのテキストパネル）

• Background: linear-gradient(90deg, #7f0073 0%, #c32381 100%)
• Text: #ffffff / Noto Serif JP 30px / 400 / line-height 1.6 / letter-spacing 0.06em
• Border Radius: 7px
• Box Shadow: rgba(0, 0, 0, 0.1) 0 3px 30px 0

Pager

• Background: #d0d5dd（非選択）
• Border Radius: 10px

OneTrust の 全てのCookieを受け入れる / Apply / Clear（14.4px / weight 700 / 背景 #7f0073）はコンポーネント仕様に含めない。 CMP がブランド色で塗られているだけで、サイト本体に weight 700 のボタンは存在しない。

Badges

• 6色の事業カテゴリ（2章）: 11px / 白 / border-radius: 2px / line-height 1.55
• 採用区分（新卒 キャリア）: border-radius: 5px / 12px / letter-spacing 0.064em

Cards

• Background: #ffffff / #f8f8f8
• Border Radius: 5px（標準）/ 7px（ヒーローパネル）/ 3px（小）/ 1px（ENGLISH）
• Shadow: rgba(0, 0, 0, 0.1) 0 3px 30px 0（サイト全体で 1種・6要素のみ）

角丸は 1 / 2 / 3 / 5 / 7 / 10 / 100px の7種あるが、使用の中心は 5px（10 要素）。 100px はテキストリンクのピルだけ。

Inputs

トップのキーワード検索欄が1つあるのみ。専用の枠色・radius は検出されず、実装が必要なら card と同じ 5px に合わせる。

5. Layout Principles

Container

Spacing Scale

明示的なトークンは無い。角丸・影と同様、1160px のコンテナと 470px のカード幅が設計の基準。 display: grid の gap は検出されず（gaps: []）、flex と margin で組んでいる。

6. Depth & Elevation

サイト全体で影は1種類しかない。 blur が 30px と大きく offset が 3px と小さい、広く薄く落とす影。0 2px 4px のような一般的な値に置き換えない。

7. Do's and Don'ts

Do（推奨）

• body { font-feature-settings: "palt" } を1行書いて全体に継承させる
• その上に letter-spacing を 0.02em / 0.04em / 0.06em の3段で足す（em で各要素に宣言）
• 明朝（Noto Serif JP）は見出しだけに使い、本文はゴシックにする
• weight は 300 / 400 / 500 の3段に収める
• 事業カテゴリのバッジは6色セットで使う
• 影は rgba(0, 0, 0, 0.1) 0 3px 30px 0 の1種だけ
• グラデーションは linear-gradient(90deg, #7f0073 0%, #c32381 100%) をそのまま写す
• rem は 1rem = 10px で換算する（html { font-size: 62.5% }）

Don't（禁止）

• weight 700 を使わない。 実サイトで 700 なのは OneTrust（CMP）の UI だけで、サイト本体には1要素も無い
• palt を外さない。 外すと和文の約物が間延びして、このサイトの詰まりが再現できない
• 逆に palt だけ当てて letter-spacing を 0 にしない。 実サイトは詰めてから 0.02〜0.06em 空け直している
• 游ゴシックのスタックを実サイトのままコピーしない（Medium が Regular の後ろにあり、Windows で細くなる）
• "Noto Serif JP" / "Noto Sans JP" を1語だけで書かない（, serif / , sans-serif を足す）
• Cormorant Infant を 300 より太くしない（読み込んでいるのは 300 のみ）
• html の font-size を 16px に戻さない（全ての rem が 1.6 倍になる）
• 影を増やさない

8. Responsive Behavior

Breakpoints

CSS に出現するメディアクエリ（実測・出現数順）:

• 主軸は 1024 / 768 / 480px の3段。 1440 / 1330 / 1240 / 1160 はコンテナ幅に合わせた微調整
• html / body の font-size はどのブレークポイントでも変わらない（10px / 15px 固定）。第一三共や三陽商会のような流体ルートの崖は存在しない（768px の前後 ±1px でも確認済み）

タッチターゲット

• テキストリンクのピル（14px / radius 100px）、事業バッジ（11px / radius 2px）、メガメニュー項目（12px）は 44px を下回る。モバイルでは上下 padding で高さを確保する

フォントサイズの調整

• サイズはブレークポイントをまたいで固定。 モバイルでの縮小はレイアウト側（カラム落ち）で吸収している

9. Agent Prompt Guide

クイックリファレンス

Hankyu Purple: #7f0073
Pink:          #c32381
Gradient:      linear-gradient(90deg, #7f0073 0%, #c32381 100%)
Business colors: #4ea075 サステナ / #347885 ロジ / #8ca546 開発 /
                 #6da5ad DX / #c76fa3 エリマネ / #868e98 その他
Text:        #333333
Text Sub:    #3f464e
Muted:       #868e98
Dark:        #27455c   (フッター)
Divider:     #d0d5dd
Surface:     #f8f8f8 / #f3f3f3 / #f2f2f2
Background:  #ffffff

Font (JP):     "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic,
               "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
Font (明朝):   "Noto Serif JP", serif   ← 見出しのみ / loaded は 500 の1本
Font (EN):     Inter               ← 日付・English
Font (EN serif): "Cormorant Infant"  ← 60px 見出し / weight 300 のみ

html: 10px (62.5%) 固定   body: 15px / line-height 1.5 固定
font-feature-settings: "palt"  ← body に1行。1175 要素へ継承
letter-spacing: normal 既定 + 0.02em / 0.04em / 0.06em の3段（em で各要素に）
weight: 300 / 400 / 500 の3段のみ（700 は使わない）
Border Radius: 5px 標準 / 7px パネル / 100px ピル / 2px バッジ
Shadow: rgba(0,0,0,0.1) 0 3px 30px 0  ← 1種のみ
Container: 1160px / Card: 470px
Breakpoints: 1024 / 768 / 480px

プロンプト例

阪急阪神不動産のデザインシステムに従って、事業紹介ページを作成してください。
- body に font-feature-settings: "palt" を1行書いて全体に継承させる
- その上で letter-spacing を 0.02em（キャプション）/ 0.04em（ナビ・事業名）/ 0.06em（明朝見出し・リンク）の3段で em 宣言する。本文は normal
- html は font-size: 62.5%（10px）、body は 15px / line-height 1.5
- 和文は "Noto Sans JP" 先頭、游ゴシックは Medium を Regular より前に置く
- 見出しだけ "Noto Serif JP" 30px / 400 / line-height 1.6 / letter-spacing 0.06em
- 英語のセクション見出しは "Cormorant Infant" 60px / weight 300 / line-height 1.2
- font-weight は 300 / 400 / 500 の3段だけ。700 は使わない
- ヒーローのテキストパネルは linear-gradient(90deg, #7f0073 0%, #c32381 100%) /
  白文字 / border-radius 7px / box-shadow rgba(0,0,0,0.1) 0 3px 30px 0
- 「一覧を見る」リンクは文字 #7f0073 / 14px / border-radius 100px
- 事業バッジは 11px / 白 / border-radius 2px、色は6色セット
  (#4ea075 #347885 #8ca546 #6da5ad #c76fa3 #868e98)
- カードは border-radius 5px、影はサイト全体で上記1種類のみ
- コンテナ 1160px、カード 470px、ブレークポイント 1024 / 768 / 480px
- 縦組みは使わない