KIRIN DESIGN.md

KIRIN（https://www.kirin.co.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。 キリングループのコーポレートサイト。ビール・飲料・乳製品を含む総合飲料メーカー。

1. Visual Theme & Atmosphere

• デザイン方針: 日本を代表する飲料メーカーのコーポレートサイト。KIRIN Red（#f00000） を全面に展開し、pill 型ボタンとウォームクリーム背景で温かみと親しみやすさを表現。情報量の多い商品ポータルでありながら、clean でモダンな印象を維持する企業サイト
• 密度: コンテンツ重視のポータル型。商品情報・キャンペーン・コラム・IR情報等を多層的に配置。セクションごとに背景色を切り替えてリズムを作る
• キーワード: KIRIN Red、pill CTA、Roboto ファースト、ウォームクリーム、年齢確認、飲料ブランド
• 特徴: Roboto（Google Fonts） を先頭に配した欧文ファーストの font-family。日本の消費財メーカーとしては珍しい設計で、Noto Sans JP を和文フォールバックに配置。ボタンは border-radius 92〜1440px の pill 型 で統一。2つの赤 #f00000（ブライトレッド） と #e6001e（ディープレッド） を使い分ける。palt 非適用、letter-spacing も normal で、装飾を排したシステマティックな日本語タイポグラフィ

2. Color Palette & Roles

Primary（ブランドカラー）

KIRIN のカラーパレットは2つの赤を軸にした、力強くも温かみのある構成。

• KIRIN Red (#f00000): メインのブランドカラー。CTA ボタン背景・アクセント見出し・注意文言に使用（rgb 240, 0, 0）。鮮明で力強い赤
• KIRIN Red Deep (#e6001e): フッター背景・ページトップボタン・ヘッダーアウトラインボタンに使用（rgb 230, 0, 30）。やや深みのある赤で構造的な用途

Text

• Text Primary (#333333): 本文テキスト（rgb 51, 51, 51）。純黒を避けたソフトなグレーブラック
• Text Nav / Heading (#222222): ナビゲーション・一部見出し（rgb 34, 34, 34）。本文より僅かに濃いダーク
• Text on Red (#ffffff): 赤背景上の白テキスト

Semantic

• Caution / Danger (#f00000): 注意書き・年齢確認の強調。ブランドレッドと同色で統一
• Link Blue (#367eb3): 標準リンクカラー（rgb 54, 126, 179）。商品カード・テキストリンク

Surface

• Background (#ffffff): ページ背景
• Background Warm (#faf9f5): セクション背景のウォームクリーム（rgb 250, 249, 245）。ピックアップ・キャンペーンエリア等に使用。飲料ブランドらしい温もり
• Background Gray (#f9f9f9): ニュートラルグレーのセクション背景（rgb 249, 249, 249）
• Footer (#e6001e): フッター背景。KIRIN Red Deep で強い存在感

Border & Overlay

• Border (#d3d3d4): 入力欄の枠線・セレクトボックスのボーダー（rgb 211, 211, 212）
• Carousel Overlay (rgba(74, 72, 71, 0.8)): カルーセルのオーバーレイ。ダーク半透明

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP — フォールバックチェーンの2番目に配置。Google Fonts で提供されるため環境非依存
• レガシーフォールバック: ヒラギノ角ゴ Pro W3（macOS）、メイリオ（Windows）、MS Pゴシック（旧Windows）

3.2 欧文フォント

• サンセリフ（プライマリ）: Roboto — フォールバックチェーンの先頭。Google Fonts。数字・英文の表示品質を優先する設計
• セリフ・等幅: 使用なし

3.3 font-family 指定

css/* 全テキスト共通 — Roboto ファーストの欧文優先スタック */
font-family: Roboto, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo,
  "MS Pゴシック", "MS PGothic", sans-serif;

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

• 先頭の Roboto で欧文・数字の表示品質を確保（Google Fonts でクロスプラットフォーム対応）
• Noto Sans JP で和文の統一的な表示を確保（同じく Google Fonts）
• ヒラギノ角ゴ → メイリオ → MS Pゴシック は macOS → Windows のレガシーフォールバック
• Roboto + Noto Sans JP はいずれも Google Fonts のため、preview.html で完全に再現可能

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

以下は computed style 実測値（2026-05-09 取得）

ウェイトの特徴:

• 見出し（H2・H3）とナビゲーションは weight: 700、本文・キャプションは weight: 400 の二段構成
• H1 のみ 400 で、赤色（#f00000）とサイズ（38px）で視覚的な強さを確保

3.5 行間・字間

• 本文の行間: line-height: 1.5（24px / 16px）— Roboto + Noto Sans JP の標準的な行間
• 本文（リード文）の行間: line-height: 1.5（30px / 20px）— リードも同比率
• 見出しの行間: line-height: 1.25（H2 44px → 55px / H3 24px → 30px）— コンパクトな見出し間隔
• 本文の字間: letter-spacing: normal（0）— カスタム字間なし
• 見出しの字間: letter-spacing: normal（0）— こちらもカスタム字間なし

ガイドライン:

• letter-spacing は全要素 normal。palt も非適用で、Roboto / Noto Sans JP のデフォルト字間をそのまま使う設計
• line-height は本文 1.5 / 見出し 1.25 の二段階構成
• 飲料メーカーの商品情報サイトとして、装飾を排したシステマティックな組版

3.6 禁則処理・改行ルール

css/* 推奨設定 */
overflow-wrap: break-word; /* 長いURL・商品コードの折り返し */

• 日本語固有の禁則処理は特別な設定なし。ブラウザデフォルトに従う
• 商品名・キャンペーン名には日本語と英語が混在するため、overflow-wrap の設定が重要

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt は非適用 */

• palt（プロポーショナル字詰め）: 非適用。Noto Sans JP のデフォルト字間をそのまま使用
• kern: ブラウザデフォルトに委ねる。Roboto は内蔵カーニングテーブルを持つため、font-feature-settings 指定なしでも適切なカーニングが効く
• 装飾的な字詰めを排し、可読性とメンテナンス性を優先する設計

3.8 縦書き

• 該当なし。KIRIN コーポレートサイトは横書きのみ

4. Component Stylings

Buttons

Primary CTA（pill 型・赤塗りつぶし）

KIRIN の CTA は KIRIN Red 塗りつぶし + 極端な pill 型 が基本。

• Background: #f00000
• Text: #ffffff
• Border: 1px solid #f00000
• Border Radius: 96px（pill 型）
• Padding: 10px 20px
• Font Size: 16px
• Font Weight: 400

Secondary（pill 型・アウトライン）

• Background: #ffffff
• Text: #f00000
• Border: 1px solid #f00000
• Border Radius: 92px（pill 型）
• Padding: 11px 20px

Header pill（小型・アウトライン）

• Background: transparent
• Text: #e6001e
• Border: 1px solid #e6001e
• Border Radius: 1440px（極端な pill 値）
• Padding: 5px 16px 6px
• Font Size: 14px
• Font Weight: 700

Page Top（円形）

• Background: #e6001e
• Border: 1px solid #e6001e
• Border Radius: 50%（完全な円形）

ボタンの考え方:

• すべてのボタンが pill 型（border-radius 92〜1440px） — KIRIN のデザインにおいて角丸やシャープエッジは存在しない
• Primary CTA は #f00000 塗りつぶし、Secondary は #f00000 アウトライン
• Header のアウトラインボタンのみ #e6001e（Deep Red） を使用
• pill 型は親しみやすさと押しやすさを兼ね備え、飲料ブランドの温かみに合致

Inputs

検索入力:

• Background: #ffffff
• Border: none
• Font Size: 16px
• Font Weight: 400

年齢確認入力:

• Background: #ffffff
• Border: 2px solid #f00000
• Font Size: 34px
• Font Weight: 400
• Text Color: #f00000

セレクトボックス:

• Background: #ffffff
• Border: 1px solid #d3d3d4
• Border Radius: 0px
• Padding: 8px 26px 8px 44px

Cards（商品カード）

• Background: #ffffff
• Padding: 18px 10px 20px
• Text Color: #367eb3（リンクブルー）
• Shadow: なし（フラット）
• 構成: 商品画像 + 商品名（リンクブルー）

Navigation

• Link Size: 16px
• Weight: 700
• Line Height: 1.75 (28px)
• Letter Spacing: normal
• Color: #222222
• Header Padding: 0 48px

Footer

• Background: #e6001e（KIRIN Red Deep）
• Text Color: #ffffff

5. Layout Principles

Spacing Scale

実測値に基づく推定:

Container

• Header Padding (horizontal): 48px
• セクション間の区切り: 背景色の切り替え（白 → クリーム → グレー）で視覚的に分離

Grid

• 商品グリッド: デスクトップで複数カラム
• セクションは全幅背景 + コンテンツ幅制約の二層構造

6. Depth & Elevation

KIRIN は背景色の切り替えとオーバーレイで階層を構成する。box-shadow は最小限。

• 背景色の3段（白 → クリーム/グレー → 赤）で面の階層を構成
• シャドウよりも背景色の温度差（ウォームクリーム #faf9f5 vs ニュートラルグレー #f9f9f9）でセクションの性格を表現

7. Do's and Don'ts

Do（推奨）

• フォントは Roboto → Noto Sans JP → レガシーフォールバック の順で完全なスタックを指定する
• CTA ボタンは pill 型（border-radius 92px 以上） にする
• Primary CTA は #f00000 塗りつぶし + 白テキスト にする
• 見出し（H2・H3）は font-weight: 700 を使い、本文（Body）は 400 を使う
• セクション背景は #ffffff、#faf9f5（ウォームクリーム）、#f9f9f9（グレー）を交互に使い、リズムを作る
• フッター背景は #e6001e（Deep Red） にする
• テキストリンクは #367eb3（リンクブルー） にする
• 本文の line-height は 1.5 を使う
• 見出しの line-height は 1.25 を使う
• letter-spacing は normal にする（カスタム字間は使わない）
• 年齢確認 UI を含む場合は #f00000 を強調色とし、入力欄に 2px solid #f00000 のボーダーを使う

Don't（禁止）

• 明朝体・セリフ系フォントを追加しない（ゴシック体サンセリフ構成がブランドの基本）
• ボタンに角丸（border-radius 8px 等）やシャープエッジ（0px）を使わない（pill 型で統一）
• CTA に #e6001e（Deep Red） を使わない（CTA は #f00000。#e6001e はフッター・構造要素用）
• テキストに #000000（純黒）を使わない（#333333 が本文の正値）
• palt（font-feature-settings: "palt"）を適用しない（normal がデフォルト設計）
• letter-spacing にカスタム値を設定しない（全要素 normal）
• ウォームクリーム背景 #faf9f5 を多用しすぎない（メリハリのため白セクションと交互に）
• フォント指定で Roboto を省略しない（欧文の表示品質に直結する）
• リンクテキストに赤（#f00000）を使わない（リンクは #367eb3 ブルー。赤はブランドカラー・CTA・注意書き用）

8. Responsive Behavior

Breakpoints

モバイル時の調整

• H2（44px）→ 28〜32px 程度に縮小
• ヘッダー横 padding（48px）→ 16px に縮小
• 商品グリッドは 1〜2カラムに折り返し
• pill 型ボタンの形状はモバイルでも維持
• フッターの赤背景 #e6001e はモバイルでも変更なし

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG基準）
• pill 型ボタンは padding 10px 20px + font-size 16px のため、実質的なタッチ領域は十分
• 年齢確認の入力欄（font-size 34px）はタッチ操作でも容易な大きさ

フォントサイズの調整

• モバイルでは本文 14〜16px、見出しはデスクトップの 70〜80% 程度に縮小
• Roboto / Noto Sans JP はいずれも Google Fonts のため、デバイス間で表示が安定

9. Agent Prompt Guide

クイックリファレンス

Brand: KIRIN（キリン）
Origin: キリングループ — ビール・飲料・乳製品を含む日本の総合飲料メーカー
KIRIN Red: #f00000（CTA・アクセント・注意書き）
KIRIN Red Deep: #e6001e（フッター・構造要素）
Link Blue: #367eb3
Text Primary: #333333
Text Nav: #222222
Background: #ffffff
Background Warm: #faf9f5
Background Gray: #f9f9f9
Footer: #e6001e
Border: #d3d3d4
Font: Roboto, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo,
      "MS Pゴシック", "MS PGothic", sans-serif
palt: 非適用（font-feature-settings: normal）
letter-spacing: normal（全要素）
Body: 16px / 400 / line-height 1.67
Body Lead: 20px / 400 / line-height 1.5
H2 Main: 44px / 700 / line-height 1.25
H2 Sub: 32px / 700 / line-height 1.25
H3: 24px / 700 / line-height 1.25
Caption: 14px / 400 / line-height 1.5
Nav: 16px / 700 / line-height 1.75
CTA Style: bg #f00000 / text #fff / radius 96px (pill) / padding 10px 20px / size 16px
Secondary CTA: bg #fff / text #f00000 / border 1px solid #f00000 / radius 92px (pill)
Button Shape: pill 型（92〜1440px radius）
Shadow: 背景色の切替で面の階層を表現

プロンプト例

KIRIN のデザインシステムに従って、商品一覧ページを作成してください。
- フォント: Roboto, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo,
    "MS Pゴシック", "MS PGothic", sans-serif
- font-feature-settings: normal（palt は非適用）
- letter-spacing: normal（カスタム字間なし）
- 本文: 16px / line-height: 1.67 / color: #333333
- H2: 44px / font-weight: 700 / line-height: 1.25
- H3: 24px / font-weight: 700 / line-height: 1.25
- CTA「商品を見る」: bg #f00000 / text #fff / border-radius: 96px (pill) / padding: 10px 20px
- Secondary CTA: bg #fff / text #f00000 / border: 1px solid #f00000 / border-radius: 92px (pill)
- 背景: セクションごとに #ffffff / #faf9f5 / #f9f9f9 を交互に使用
- フッター: bg #e6001e / text #fff
- リンクテキスト: #367eb3
- シャドウは使わず背景色の切り替えで面の階層を作る

字詰め・組版の重要ポイント

1. Roboto ファースト: 日本の消費財メーカーとして珍しい欧文ファーストの font-family。Roboto を省略するとナビゲーションや数字の表示品質が低下する。Roboto と Noto Sans JP はいずれも Google Fonts のため、Web フォント読み込みで環境差を吸収できる
2. 2つの赤の使い分け: #f00000（ブライトレッド）は CTA・アクセント・注意書き用。#e6001e（ディープレッド）はフッター・構造的な背景用。両方を混ぜずに役割で使い分ける
3. pill 型ボタンの一貫性: border-radius 92〜1440px の pill 型がすべてのインタラクティブ要素の基本。角丸（8px 等）やシャープエッジ（0px）は KIRIN のデザイン言語に存在しない
4. letter-spacing / palt ともに非適用: Roboto + Noto Sans JP のデフォルト字間をそのまま使う。字詰めの装飾を排したシステマティックな組版
5. ウォームクリーム背景（#faf9f5）: 飲料ブランドの温もりを表現する背景色。純白（#ffffff）やニュートラルグレー（#f9f9f9）と交互に使うことで、情報量の多いポータルにリズムを生む
6. 年齢確認 UI: アルコールブランドとして年齢確認が重要な UI パターン。入力欄は 34px / 2px solid #f00000 の大きく目立つ設計

取得日: 2026-05-09 出典: https://www.kirin.co.jp/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出