ZOJIRUSHI（象印マホービン） DESIGN.md

ZOJIRUSHI（https://www.zojirushi.co.jp/）のデザイン仕様書。 魔法瓶・炊飯器・ホットプレート等の家庭用品メーカー。タグライン「きょうを、だいじに。」 実サイトの computed style 実測（2026-05-31 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調にした清潔でゆとりある構成に、ブランドブルー #1d87d0 をアクセントとして配置。CTA は白ピル（#ffffff 背景 + #222222 文字）で控えめに仕上げ、ブルーはナビタブや装飾ラインなど「場の彩り」に使う。ライフスタイル家電ブランドらしい静かなエレガンス
• 密度: 本文の line-height は最大 2.0、ブランドコピーも 1.68 と非常にゆったり。見出しの letter-spacing は 0.05em と広めに取り、余白で呼吸する構成。情報密度よりもブランドの空気感を優先
• キーワード: 静謐、ライフスタイル家電、白ピル CTA、palt グローバル適用、Helvetica Neue 優先、ブランドブルーのアクセント使い
• 特徴:
  • 和文フォントの明示的な宣言がないという珍しい構成。"Helvetica Neue", Helvetica, Arial, sans-serif のみで、日本語はブラウザデフォルト（macOS ではヒラギノ角ゴ、Windows では游ゴシック）にフォールバック
  • font-feature-settings: "palt" がグローバル適用。すべてのテキストにプロポーショナル字詰めが効いており、見出しだけでなく本文も詰められている
  • ブランドカラー #1d87d0 は CTA には使わない。ナビのアクティブタブ、テキストアクセント、ラインなど装飾要素に限定。主要 CTA は白ピル #ffffff + ダーク文字 #222222 という控えめなスタイル
  • セクション見出しに英語ラベル（"TOPICS"、"PICK UP"）を大きく使う欧文演出
  • 本文コピーの letter-spacing が 0.12em と非常に広い箇所がある（ブランドステートメント系）
  • テキストカラーは #222222（濃いグレー）が主体で、純黒 #000000 は使わない
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Brand Blue (#1d87d0): ブランドのアクセントカラー。ナビのアクティブタブ背景、テキストリンクのホバー、装飾ライン。CTA には使わない（装飾・彩り用途）
• Link Blue (#0075c2): テキストリンク、商品カード内のリンクテキスト。Brand Blue よりやや濃い
• Warm Cream (#f9f6ed): オンラインストア導線などのプロモーション面背景。ウォームニュートラル

CTA / Buttons

• Primary CTA（白ピル）: 背景 #ffffff / 文字 #222222 / radius 999px（pill）/ padding 18.5px 50px 18.5px 30px / 16-17px / weight 400-500。"詳しくはこちら"、"商品情報はこちら" 等
• Ghost CTA: 背景 transparent / 文字 #000000 / radius 48px / padding 16px 80px。"もっと見る" 等
• Tab Active: 背景 #1d87d0 / 文字 #ffffff / radius 10px 10px 0 0（上角丸）/ 17px
• Tab Inactive: 背景 #cccccc / 文字 #ffffff / radius 10px 10px 0 0

Neutral

Semantic（実測未確認・推奨値）

• Danger: #cc3333 程度の落ち着いたレッド
• Success: #2e8b57 程度のナチュラルグリーン
• Warning: #cc8800 程度のウォームオレンジ

3. Typography Rules

3.1 和文フォント

• 明示的な宣言なし。font-family チェーンに和文フォントが含まれていない珍しい構成
• ブラウザのデフォルトにフォールバック:
  • macOS: ヒラギノ角ゴ ProN
  • Windows: 游ゴシック / メイリオ
  • Linux/Android: Noto Sans CJK JP
• 明朝体: 使用しない（サイト全体ゴシック系統一）

3.2 欧文フォント

• Helvetica Neue を最優先。Helvetica → Arial の順でフォールバック
• 欧文テキスト（セクション見出しの "TOPICS"、"PICK UP" 等）は Helvetica Neue のグリフで表示される
• 和文と欧文で異なるフォントが混植される構成（意図的な設計）

3.3 font-family 指定

css/* 全要素共通（body, h1〜h4, p, a, span, button, nav） */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

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

• Helvetica Neue を最優先し、欧文部分のタイポグラフィ品質を確保
• 和文フォントは意図的に未指定。OS のデフォルトゴシック体に委ねることで、各プラットフォームの最適な和文フォントが自動適用される
• この方針はライフスタイルブランドにおいて「特定の書体を押しつけない」デザイン哲学を反映

代替フォント注記: preview.html では日本語の表示一貫性のため Google Fonts の Noto Sans JP を追加している。実サイトでは OS デフォルトの和文フォントが使用される。

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

実測値（トップ／商品ページ、2026-05-31 取得）

3.5 行間・字間

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

• ブランドコピー (20.57px): 2.0（41.14px / 20.57px）-- 非常にゆったり。ブランドの空気感を演出
• ブランド声明 (19px): 1.68（32px / 19px）
• カテゴリ名 (20px): 1.7（34px / 20px）
• 記事本文 (17px): 1.5（25.5px / 17px）
• デフォルト本文 (14px): 1.5（21px / 14px）
• 見出し (35px): 1.0（35px / 35px）-- タイトに詰めてインパクトを出す
• 商品名 (24px): 1.3（31.2px / 24px）

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

• ブランドコピー: 0.12em（2.47px / 20.57px）-- 非常に広い。空気感の核心
• セクション見出し: 0.05em（1.75px / 35px）-- 広めのトラッキングで英字見出しに呼吸を
• 本文・カテゴリ名: 0.03em〜0.04em -- 日本語の可読性を上げる標準的な範囲
• CTA・ラベル: 0.02em〜0.04em
• デフォルト (body): normal（14px のデフォルト本文のみ）

ガイドライン:

• 象印のデザインは字間の広さで空気感をコントロールする。ブランドコピーは 0.12em、見出しは 0.05em、本文は 0.03-0.04em と段階的に詰めていく
• 行間もブランドコピーは 2.0 と極めてゆったり。記事本文でも 1.5 は確保する
• 英語セクション見出し（"TOPICS"）は line-height 1.0 + letter-spacing 0.05em で、タイトかつ呼吸のあるバランス

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: anywhere;
line-break: strict;

• ブランドコピーは <br> で改行位置を手動指定する場合がある
• ピル CTA は white-space: nowrap

3.7 OpenType 機能

css/* グローバル適用 -- 象印サイトの重要な特徴 */
font-feature-settings: "palt";

• palt（プロポーショナル字詰め）がグローバル適用。body レベルで全テキストに効いている
• 見出しだけでなく本文・CTA・ナビ・フッターまで、すべての日本語テキストにプロポーショナル幅が適用される
• これにより和文の字間が自然に詰まり、Helvetica Neue の欧文グリフとの混植時のリズムが整う
• letter-spacing との組み合わせで「palt で詰めてから letter-spacing で広げる」二段階の字間制御を実現

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（白ピル） -- "詳しくはこちら"、"商品情報はこちら"

• Background: #ffffff
• Text: #222222
• Padding: 18.5px 50px 18.5px 30px（左右非対称、右にゆとり）
• Border Radius: 999px（完全ピル）
• Font: "Helvetica Neue", 16-17px, weight 400-500
• Border: none（または 1px solid #cccccc の薄いボーダー）
• 注: ブランドブルーを CTA に使わない控えめなスタイルが象印の特徴

Ghost CTA -- "もっと見る"

• Background: transparent
• Text: #000000
• Padding: 16px 80px
• Border Radius: 48px
• Font: "Helvetica Neue", 16px, weight 400
• Border: 1px solid #cccccc

Tab（Active） -- "ニュースリリース"

• Background: #1d87d0（ブランドブルー）
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 10px 10px 0 0（上だけ角丸）
• Font: "Helvetica Neue", 17px, weight 500

Tab（Inactive） -- "お知らせ"

• Background: #cccccc
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 10px 10px 0 0
• Font: "Helvetica Neue", 17px, weight 400

Product Link Card -- 商品カード内テキストリンク

• Text: #0075c2（リンクブルー）
• Font: "Helvetica Neue", 14-16px, weight 400
• Border: none
• text-decoration: none（ホバー時 underline）

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #1d87d0
• Border Radius: 4px
• Padding: 12px 16px
• Font: "Helvetica Neue", 16px, weight 400
• Height: 44px

Cards / Surfaces

• Background: #ffffff（メイン）/ #f9f6ed（ウォームクリーム面）/ #f6f6f6（ライトグレー面）
• Border: 1px solid #f6f6f6 または border なし
• Border Radius: 10px（通常カード）/ 16px（大カード）
• Shadow: 基本フラット（box-shadow: none）、ホバーで軽い影

Header

• Background: #ffffff（::after 疑似要素で白背景）
• Border Bottom: なし
• Height: 60px 程度
• Position: sticky top: 0

Footer

• Background: #f6f6f6 または #ffffff
• Padding: 48px 24px

5. Layout Principles

Spacing Scale（8px グリッド推奨）

Container

• Max Width: 1200px 程度（推奨）
• Padding (horizontal): mobile 16px / desktop 72px（トピック見出しの padding-left 実測値）

Border Radius Scale

Grid

• 12 カラムグリッド（推奨）
• Gutter: 24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感はサーフェスの色分け（白 / #f6f6f6 / #f9f6ed）と余白で表現
• 影を使う場合は非常に控えめ（opacity 0.05〜0.10）

7. Do's and Don'ts

Do（推奨）

• font-feature-settings: "palt" をグローバル適用する（象印サイトの核心的な特徴）
• 欧文フォントは Helvetica Neue を最優先、和文は OS デフォルトにフォールバックさせる
• 主要 CTA は白ピル（#ffffff 背景 + #222222 文字 + radius 999px）で控えめに
• ブランドブルー #1d87d0 はタブ・ライン・テキストアクセントに限定して使う
• リンクテキストは #0075c2 を使う
• セクション見出しに英語ラベル（"TOPICS"、"PICK UP"）を大きく配置し、欧文の空気感を出す
• ブランドコピーは letter-spacing 0.12em + line-height 2.0 で最大限のゆとりを
• 本文コピーは letter-spacing 0.03-0.04em + line-height 1.5 で可読性を確保
• テキストカラーは #222222 を基本にする（純黒 #000000 より柔らかい）
• サーフェスに #f9f6ed（ウォームクリーム） や #f6f6f6（ライトグレー） を使い分ける

Don't（禁止）

• 主要 CTA にブランドブルー #1d87d0 を使わない -- 象印の CTA は白ピルが基本。ブルーは装飾用
• font-family に和文フォントを明示指定しない -- OS デフォルトに委ねるのが象印の方針
• font-feature-settings: "palt" を見出しだけに限定しない -- グローバル適用が正解
• 本文に line-height 1.5 未満を使わない（ブランドのゆとりが失われる）
• 純黒 #000000 をテキストに多用しない -- #222222 が象印のテキストカラー
• 角張った直角ボタン（border-radius 0）を使わない -- ピルまたは大角丸が基本
• 見出しの letter-spacing を 0 や負の値にしない -- 象印は常に正のトラッキング（0.03em〜0.05em）
• 冷たいブルーグレー（#6b7280、#9ca3af）を使わない -- 象印のグレーはニュートラル寄り

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• セクション H2: 35px -> 24-28px
• 商品タイトル: 24px -> 18-20px
• 本文サイズは 14-16px を維持
• ブランドコピーの letter-spacing は 0.12em -> 0.06em に縮小可
• ピル CTA のパディングを縮小（50px -> 28px）

タッチターゲット

• 主要 CTA: 高さ 48px 以上（padding + font-size + line-height）
• タブ: 高さ 44px 以上

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Blue (Accent): #1d87d0
Link Blue: #0075c2
Warm Cream Surface: #f9f6ed
Dark Text: #222222
Near Black: #1a1a1a
Light Gray Surface: #f6f6f6
Light Blue Tint: #dfeaf5
Tab Inactive: #cccccc
White: #ffffff

Font: "Helvetica Neue", Helvetica, Arial, sans-serif
（日本語は OS デフォルトフォールバック。preview 用代替: Noto Sans JP）
font-feature-settings: "palt"  ← グローバル適用

Body (Default): 14px / line-height 1.5 / weight 400 / letter-spacing normal
Body (Article): 17px / line-height 1.5 / weight 400 / letter-spacing 0.04em
Brand Copy: 20px / line-height 2.0 / weight 400 / letter-spacing 0.12em
Section H2: 35px / line-height 1.0 / weight 700 / letter-spacing 0.05em
Product Title: 24px / weight 700 / line-height 1.3 / letter-spacing 0.03em

Primary CTA: 白ピル / bg #fff / text #222 / radius 999px
Ghost CTA: 透明 / text #000 / border #ccc / radius 48px
Tab Active: bg #1d87d0 / text #fff / radius 10px 10px 0 0
Shadow: 基本 none。階層はサーフェスの色分けで表現

プロンプト例

象印マホービンのデザインに従って、商品カテゴリ一覧セクションを作成してください。
- フォント: "Helvetica Neue", Helvetica, Arial, sans-serif
- font-feature-settings: "palt"（グローバル適用）
- セクション見出し: 英語ラベル "PRODUCTS" / 35px / weight 700 / letter-spacing 0.05em / color #222222
- 商品タイトル: 24px / weight 700 / line-height 1.3 / letter-spacing 0.03em / color #1a1a1a
- 本文: 17px / weight 400 / line-height 1.5 / letter-spacing 0.04em / color #222222
- ブランドコピー: 20px / weight 400 / line-height 2.0 / letter-spacing 0.12em
- 主要 CTA: 背景 #ffffff（白）/ 文字 #222222 / border-radius 999px / padding 18px 50px 18px 30px — 控えめな白ピル
- ゴースト CTA: 背景 透明 / 文字 #000 / border 1px solid #cccccc / radius 48px
- ブランドブルー #1d87d0 はタブ・アクセントラインに限定（CTA には使わない）
- リンクテキスト: #0075c2
- カード背景: 白 #ffffff、プロモ面は #f9f6ed（ウォームクリーム）、一般面は #f6f6f6
- box-shadow は基本 none。立体感はサーフェスの色分けで表現
- テキストカラーは #222222 を基本。純黒 #000000 は使わない
- letter-spacing は常に正の値（0.03em 以上）