Oisix ra daichi DESIGN.md

Oisix ra daichi（https://www.oisixradaichi.co.jp/）のデザイン仕様書。 食品宅配大手（Oisix、らでぃっしゅぼーや、大地を守る会の親会社）のコーポレートサイト。 Morisawa 明朝体の見出し + ヒラギノ角ゴシックの本文という、セリフ×サンセリフの混植が特徴。

1. Visual Theme & Atmosphere

• デザイン方針: 食と農業をテーマにした、信頼感と温かみを兼ね備えたコーポレートサイト。明朝体の見出しがエディトリアルな品格を与え、オリーブグリーンのブランドカラーが自然・食の安心感を表現
• 密度: ゆったりとした余白。大きなヒーローセクション、エディトリアル型のレイアウト
• キーワード: 自然、信頼、品格、エディトリアル、オリーブグリーン
• 特徴: 3つの異なるフォントファミリーを役割別に使い分ける。見出しは Ryumin 明朝体、本文はヒラギノ角ゴシック、英字ディスプレイは Century Schoolbook。ボタンは角丸なし（radius: 0px）のシャープなスタイル

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Green (#7B9437): メインのブランドカラー。CTA ボタン、リンク、ヒーローオーバーレイに使用
• Brand Green Light (#B5C474): セカンダリボタン（お問い合わせ等）
• Brand Green Footer (#76952F): フッター背景。ブランドグリーンのやや暗いバリエーション
• Hero Overlay (rgba(123, 148, 55, 0.8)): ヒーロー画像上の半透明オーバーレイ

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Nav (#595757): ナビゲーションリンク
• Badge Gray (#89888C): ニュースカテゴリバッジ（INFO、RELEASE）
• Badge Light Gray (#A7A7A7): NEWS ボタン
• Section BG (#F2F2F2): セクション背景（ライトグレー）
• Border (#DDDDDD): 区切り線、ボーダー
• Background (#FFFFFF): ページ背景（白）

3. Typography Rules

3.1 和文フォント

明朝体（見出し専用）:

• A-OTF Ryumin Pro M-KL（Morisawa ライセンスフォント）
• ヒラギノ明朝 Pro W3（macOS フォールバック）
• MS PMincho（Windows フォールバック）

ゴシック体（本文・ナビゲーション）:

• ヒラギノ角ゴ Pro W3（macOS）
• メイリオ / Meiryo（Windows）
• MS PGothic（レガシー Windows）

3.2 欧文フォント

• セリフ（ディスプレイ）: Century Schoolbook W01 Bd, Century, Georgia, Times New Roman
• サンセリフ（ナロー）: Arial W01 Narrow Bold, Arial Narrow, Arial, Helvetica
• サンセリフ（太字）: Arial W01 Black, Arial Black, Gadget
• 本文補助: Osaka（macOS レガシー）

3.3 font-family 指定

css/* 本文・ナビゲーション（ゴシック体） */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 見出し（明朝体） */
font-family: "A-OTF Ryumin Pro M-KL", "ヒラギノ明朝 Pro W3",
  "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;

/* 英字ディスプレイ（セリフ） */
font-family: CenturySchoolbookW01-Bd, Century, Georgia,
  "Times New Roman", Times, "A-OTF Ryumin Pro M-KL",
  "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
  "ＭＳ Ｐ明朝", "MS PMincho", serif;

/* 英字ディスプレイ（サンセリフ太字） */
font-family: "Arial W01 Black", "Arial Black", Gadget,
  "ヒラギノ角ゴ Pro W6", sans-serif;

/* 英字ラベル（ナロー） */
font-family: "Arial W01 Narrow Bold", "arial narrow",
  Arial, Helvetica, sans-serif;

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

• 見出しは Morisawa Ryumin を最優先し、OS 明朝体にフォールバック
• 本文はヒラギノ角ゴシック優先で、和文フォントが先頭
• 英字ディスプレイは Century Schoolbook → Ryumin 明朝と、欧文→和文の順
• 英字ナロー（カテゴリバッジ等）は Arial Narrow 系で統一

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

3.5 行間・字間

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

• 本文: 1.8（14px × 1.8 = 25.2px）
• ヒーロー本文: 1.8（20px × 1.8 = 36px）
• 見出し（明朝体）: 1.4（42px × 1.4 = 58.8px）
• ディスプレイ（英字）: 1.2（60px × 1.2 = 72px）
• フッター: 1.8（12px × 1.8 = 21.6px）

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

• 本文: normal（字間なし）
• 見出し: normal（字間なし）
• 英字セクション見出し "NEWS": 3px（= 0.15em）
• 英字ラベル "DETAIL": 4px（= 0.2em）
• バッジ "INFO": 1.89px（= 0.15em）

ガイドライン:

• 和文テキストは letter-spacing: normal で統一。palt も不使用
• 英字のディスプレイ要素のみワイドな letter-spacing を適用（0.15em--0.2em）
• 本文の line-height: 1.8 は日本語テキストの標準的な読みやすい行間

3.6 禁則処理・改行ルール

css/* グローバル設定 */
word-wrap: break-word;
overflow-wrap: break-word;

• 標準的な禁則処理を適用
• 特別な word-break や line-break の設定は確認されていない

3.7 OpenType 機能

css/* palt、kern 等の OpenType 機能は適用されていない */
font-feature-settings: normal;

• palt: 不使用。和文テキストにプロポーショナル字詰めは適用されていない
• kern: 不使用
• Morisawa Ryumin のデフォルトグリフメトリクスをそのまま使用

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（お買い物はこちら）

• Background: #7B9437（ブランドグリーン）
• Text: #FFFFFF
• Padding: 9px 0px 7px
• Border Radius: 0px（角丸なし、シャープエッジ）
• Font Size: 13px
• Font Weight: 700

Secondary（お問い合わせ）

• Background: #B5C474（ライトグリーン）
• Text: #FFFFFF
• Border Radius: 0px
• Font Size: 13px
• Font Weight: 700

NEWS Button

• Background: #A7A7A7（グレー）
• Text: #FFFFFF
• Border Radius: 0px

Navigation Tab

• Background: transparent
• Text: #333333
• Border Radius: 5px 5px 0px 0px（上部のみ角丸）
• Padding: 10px 12px
• Font Size: 15px
• Font Weight: 700

Badges

Category Badge（INFO, RELEASE）

• Background: #89888C
• Text: #FFFFFF
• Font: Arial W01 Narrow Bold
• Font Size: 12.6px
• Letter Spacing: 1.89px

Cards

• Background: #FFFFFF
• Border: 1px solid #DDDDDD
• Border Radius: 0px（角丸なし）
• Shadow: なし（フラットデザイン）

Inputs

• Background: #FFFFFF
• Border: 1px solid #DDDDDD
• Border Radius: 0px
• Padding: 8px 12px
• Font Size: 14px
• Font Family: ヒラギノ角ゴ系

5. Layout Principles

Spacing Scale

Container

• Max Width: 960px
• Padding (horizontal): 20px

Grid

• ニュース一覧: 1カラム
• ヒーロー: フルブリード + 中央寄せテキスト

6. Depth & Elevation

• サイト全体がフラットデザイン基調。影の使用は控えめ
• ボーダー（#DDDDDD）で区切りを表現するスタイル

7. Do's and Don'ts

Do（推奨）

• 見出しには Ryumin 明朝体（またはセリフ系フォールバック）を使い、本文にはゴシック体を使う
• ブランドグリーン #7B9437 を CTA の背景色として使う
• ボタンは border-radius: 0px のシャープエッジで統一する
• 英字ディスプレイには Century Schoolbook 系セリフを使い、ワイドな letter-spacing（0.15em 以上）を適用する
• 本文の行間は line-height: 1.8 を維持する
• テキスト色は #333333 を使う（純粋な #000000 は避ける）
• カテゴリバッジには Arial Narrow Bold + ワイド letter-spacing を使う

Don't（禁止）

• 見出しにゴシック体を使わない（エディトリアルな品格が失われる）
• ボタンに角丸（pill、radius: 8px 等）を付けない（シャープエッジが特徴）
• ブランドグリーン #7B9437 を本文テキスト色に使わない（白背景でコントラスト不足）
• letter-spacing や palt を和文テキストに適用しない（実サイトでは不使用）
• 明朝体を本文に使わない（見出し専用）
• フッター背景に #7B9437 を使わない（フッターは #76952F の別色）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは見出しをデスクトップの 60--70% に縮小（42px -> 28px 程度）
• 本文は 14px を維持
• ヒーロー本文は 16px に縮小

9. Agent Prompt Guide

クイックリファレンス

Brand Green: #7B9437
Brand Green Light: #B5C474
Footer Green: #76952F
Text Primary: #333333
Text Nav: #595757
Background: #FFFFFF
Section BG: #F2F2F2
Border: #DDDDDD
Badge Gray: #89888C

Serif Font (見出し): "A-OTF Ryumin Pro M-KL", "ヒラギノ明朝 Pro W3",
  "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif
Sans Font (本文): "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Display Font (EN): CenturySchoolbookW01-Bd, Century, Georgia,
  "Times New Roman", Times, serif

Body Size: 14px / line-height: 1.8 / letter-spacing: normal
Hero Heading: 42px / 700 / Ryumin 明朝
Button: radius 0px / sharp edge
palt: 不使用

プロンプト例

Oisix ra daichi のデザインに従って、ニュース一覧ページを作成してください。
- 見出しフォント: "A-OTF Ryumin Pro M-KL", "ヒラギノ明朝 Pro W3",
    "Hiragino Mincho Pro", serif（明朝体）
- 本文フォント: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    メイリオ, sans-serif
- テキスト色: #333333
- ブランドグリーン: #7B9437（CTA ボタン背景）
- ボタン: border-radius: 0px（シャープエッジ）
- 英字見出し: Century Schoolbook 系、letter-spacing: 0.15em
- カテゴリバッジ: #89888C、Arial Narrow Bold、letter-spacing: 1.89px
- 本文行間: line-height: 1.8
- palt: 不使用