Sumitomo Forestry (住友林業) DESIGN.md

住友林業（https://sfc.jp/）のデザイン仕様書。 実サイトの computed style に基づく。住友林業は住宅・建築・木材・再生可能エネルギー事業を展開する総合企業。 明朝体（ディスプレイ）・ゴシック体（本文）・Roboto（英語見出し）の3書体を使い分ける、自然と品格を表現したデザインシステム。

1. Visual Theme & Atmosphere

• デザイン方針: 自然素材（木・森林）に根差したブランドアイデンティティを、フォレストグリーンと明朝体で表現。企業としての格式と、木のぬくもりを両立させたコーポレートサイト
• 密度: ゆったりとした余白。ヒーロービジュアル、大きな写真、スライド形式のカードを多用するメディアリッチなレイアウト
• キーワード: 自然、品格、信頼、伝統、サステナブル
• 特徴: 3つの書体ボイスを持つ — 英語見出し（Roboto）、和文ディスプレイ（游明朝体）、本文（游ゴシック体）。フォレストグリーン #008d54 をブランドカラーとして全体に展開

2. Color Palette & Roles

Primary（ブランドカラー — フォレストグリーン系）

• Forest Green (#008d54): メインブランドカラー。ナビゲーション項目、アウトラインボタンのテキスト・ボーダーに使用
• CTA Green (#00664b): CTAボタンの背景色。Primary より暗く、コントラスト比が高い
• Nav Green (#007b4a): 言語ナビゲーション等の背景色
• Active Green (#00623b): 言語アクティブ状態。最も暗いグリーン
• Soft Green (rgba(143,173,161,0.8)): 半透明グリーン。装飾的なオーバーレイ

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト。純粋な黒を使用
• Text White (#ffffff): 白テキスト。グリーン背景上、ヒーローキービジュアル上
• Border Light (#cbcbcb): 装飾的なボーダー・区切り線
• Divider (#dcdcdd): セクション区切り線
• Background (#ffffff): ページ背景
• Section BG (#f0f0f0): セクション背景（建築、サステナビリティ等）
• Section BG Alt (#eeeeee): IR、サステナビリティセクション背景
• Footer BG (#f2f2f2): フッター背景

3. Typography Rules

3.1 和文フォント

ゴシック体（本文）:

• 游ゴシック体 / YuGothic（macOS）
• 游ゴシック / Yu Gothic（Windows）
• メイリオ（Windows フォールバック）
• ヒラギノ角ゴ ProN（macOS フォールバック）

明朝体（ディスプレイ・ヒーロー）:

• 游明朝体 / Yu Mincho / YuMincho（クロスプラットフォーム）
• ヒラギノ明朝 Pro（macOS）
• MS P明朝 / MS PMincho（Windows レガシー）

preview.html での代替: 游ゴシック体 → Noto Sans JP、游明朝体 → Noto Serif JP（Google Fonts）。実サイトは游書体を使用

3.2 欧文フォント

• サンセリフ（見出し）: Roboto — 英語セクション見出し専用
• サンセリフ（本文内）: 游ゴシック体のフォールバックチェーン内で対応

3.3 font-family 指定

css/* 本文（ゴシック体） */
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
  "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

/* ディスプレイ（明朝体） */
font-family: "游明朝体", "Yu Mincho", YuMincho,
  "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
  "MS P明朝", "MS PMincho", sans-serif;

/* 英語見出し */
font-family: Roboto, sans-serif;

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

• ゴシック体: 游ゴシック体を先頭に、macOS → Windows → generic の順
• 明朝体: 游明朝体を先頭に、ヒラギノ明朝 → MS P明朝の順。最終は sans-serif（原文ママ）
• 英語見出し: Roboto 単体 + generic fallback

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

computed style による実測値

3.5 行間・字間

行間 (line-height) — 実測値:

• 本文 (body): 22.5px (15px × 1.5)
• 本文 alt: 19.5px (15px × 1.3) — 密なレイアウト
• ヒーロータイトル (h1 明朝体): 67.5px (45px × 1.5)
• セクション見出し JP (h2 明朝体): 57.8px (34px × 1.7) — 明朝体見出しはゆったり
• セクション見出し EN (h2 Roboto): 52px (40px × 1.3)
• サブセクション (h2 ゴシック体): 38.4px (32px × 1.2)
• フッターカテゴリ: 36px (18px × 2.0)

字間 (letter-spacing) — 実測値:

• 本文: normal
• ヒーロータイトル: 1.5px (= 0.033em)
• セクション見出し EN: 1.5px (= 0.0375em)
• セクション見出し JP: 1.7px (= 0.05em)
• サブセクション: 2px (= 0.0625em)
• Menu ラベル: 0.7px (= 0.058em)
• More ボタン: 0.9px (= 0.05em)

ガイドライン:

• 見出しには letter-spacing を指定するが、本文には適用しない
• 明朝体見出しは line-height 1.5〜1.7 でゆったり組む
• ゴシック体サブセクションは line-height 1.2 とタイトめ

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

css/* palt は使用していない — 実測で確認 */
font-feature-settings: normal;

• palt: 不使用。游ゴシック体・游明朝体ともにプロポーショナル字詰めは適用されていない
• 見出しの字間調整は letter-spacing で個別に制御

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（グリーン背景）

• Background: #00664b
• Text: #ffffff
• Padding: 8px 63px 8px 45px（アロー付きで左右非対称）
• Border Radius: 5px
• Font Size: 18px
• Font Weight: 400

Large CTA（情報ページ用）

• Background: #00664b
• Text: #ffffff
• Padding: 15px 0px（幅いっぱい）
• Border Radius: 5px
• Font Size: 22px
• Font Weight: 400

Outline Button（グリーンボーダー）

• Background: #ffffff
• Text: #008d54
• Border: 1px solid #008d54
• Padding: 12px 0px
• Border Radius: 0px（角丸なし）
• Font Size: 16px
• Font Weight: 700

More Button（英語）

• Background: #ffffff
• Text: #000000
• Border Radius: 0px
• Padding: 12px 0px
• Font: Roboto 18px weight 400
• Letter Spacing: 0.9px (0.05em)

Cards

ESG スライドカード

• Background: #ffffff
• Padding: 23px 20px
• Shadow: なし（フラット）

Navigation

• ナビ項目の背景: #008d54（Forest Green）
• 言語ナビ: #007b4a
• 言語アクティブ: #00623b
• テキスト: #ffffff
• Font Size: 16px / Weight: 700

5. Layout Principles

Container

• Max Width: 推定 1100〜1200px（コーポレートサイト標準）

Spacing

• ヒーローエリア: 大きなキービジュアルを全幅で配置
• セクション間: 大きめの余白でゆったり区切る
• カード内: 23px 20px（ESGカード実測値）

Grid

• トップページ: スライド形式のカルーセル + 2〜3カラムグリッド
• セクション背景で区切り: #f0f0f0, #eeeeee, #f2f2f2 を使い分け

6. Depth & Elevation

• サイト全体でフラットなデザインを基調とし、影の使用は控えめ
• ボーダー（#cbcbcb, #dcdcdd）による区切りが主

7. Do's and Don'ts

Do（推奨）

• 3つの書体ボイスを正しく使い分ける: 英語見出し → Roboto、和文ディスプレイ → 明朝体、本文 → ゴシック体
• CTAボタンは #00664b（CTA Green）を使う。ブランドカラー #008d54 よりも暗い専用色
• 見出しには letter-spacing を適度に指定する（0.033em〜0.0625em）
• セクション背景にはニュートラルグレー（#f0f0f0, #eeeeee）を使い、コンテンツを区切る
• ボタンのフォントウェイトは用途で使い分ける: CTA → 400（ゆったり）、アウトライン → 700（力強く）

Don't（禁止）

• ブランドカラー #008d54 をCTAボタンの背景に使わない（実サイトでは #00664b を使用）
• 明朝体を本文テキストに使わない（ディスプレイ・ヒーロー専用）
• Roboto を和文テキストに混ぜない（英語見出し専用）
• ボタンに大きな border-radius を使わない（pill ではない。CTA は 5px、アウトラインは 0px）
• palt を適用しない（実サイトでは不使用）
• フッター以外の要素に #f2f2f2 を使わない（フッター専用色）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• モバイルではヒーロータイトルを 28〜32px に縮小
• セクション見出し EN を 28〜32px に縮小
• 本文サイズ 15px は維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #008d54（Forest Green）
CTA Background: #00664b（CTA Green）
Nav Green: #007b4a
Active Green: #00623b
Text Primary: #000000
Text White: #ffffff
Background: #ffffff
Section BG: #f0f0f0
Footer BG: #f2f2f2
Border: #cbcbcb
Divider: #dcdcdd

Gothic Font: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
  "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Mincho Font: "游明朝体", "Yu Mincho", YuMincho,
  "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
  "MS P明朝", "MS PMincho", sans-serif
English Font: Roboto, sans-serif

Body: 15px / weight: 400 / line-height: 1.5 / letter-spacing: normal
Hero Title: 明朝体 45px / weight: 700 / line-height: 1.5 / letter-spacing: 0.033em
Section EN: Roboto 40px / weight: 700 / line-height: 1.3 / letter-spacing: 0.0375em
Section JP: 明朝体 34px / weight: 700 / line-height: 1.7 / letter-spacing: 0.05em
palt: 不使用

プロンプト例

住友林業のデザインに従って、事業紹介ページを作成してください。
- ゴシック体: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
    "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
- 明朝体（見出し）: "游明朝体", "Yu Mincho", YuMincho,
    "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", sans-serif
- 英語見出し: Roboto, sans-serif
- テキスト色: #000000
- ブランドカラー: #008d54（ナビ、ボーダー）
- CTAボタン: 背景 #00664b、白テキスト、radius 5px
- アウトラインボタン: ボーダー #008d54、テキスト #008d54、radius 0px
- 本文: 15px, line-height: 1.5, letter-spacing: normal
- 見出し（明朝体）: letter-spacing: 0.05em
- 英語見出し: Roboto, letter-spacing: 0.0375em
- palt: 不使用
- セクション背景: #f0f0f0 / #eeeeee