Zoff（ゾフ） DESIGN.md

Zoff（https://www.zoff.co.jp/）のデザイン仕様書。 「メガネが関わるすべてのことに、もっとワクワクを。」をビジョンに掲げるアイウェアブランド。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: Helvetica Neue を欧文先頭に、ヒラギノ角ゴ ProN を和文フォールバックとするクリーンなシステムフォント構成。ナビゲーションラベルに Open Sans weight 600、レンズ説明等の一部見出しに Noto Sans JP を併用する三層構成
• 密度: 本文 15-16px / line-height 1.6 / letter-spacing normal。商品グリッドと読みやすさを両立するコンパクトな組版
• キーワード: Zoff Blue #4998db、pill ボタン、白ベースのクリーン EC、Open Sans ナビ、欧文先頭フォントスタック
• 特徴:
  • ページ背景は純白 #ffffff。商品に集中させるミニマルな白地
  • ブランドカラーは Zoff Blue #4998db。店舗検索ボタン、バッジカウンター、リンク色 #2199e1 に一貫して使用
  • ボタンは pill 形状（radius 40px〜1440px） が基本。EC サイトとしては珍しい大胆な丸みが Zoff のアイデンティティ
  • "もっと見る" ボタンは白背景 + 黒ボーダーのピル（outlined pill）。ブランドカラーではなくニュートラル
  • セール・LP バナーには #e60012（鮮紅） を使用。ブランドブルーとの二色で緩急をつける
  • フォントスタックが欧文先頭（"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo）。ブランド書体は持たずシステムフォントで統一
  • letter-spacing は全体 normal。palt も不使用。きわめてプレーンな組版
  • ナビゲーションラベルに Open Sans weight 600 を採用。カテゴリ名の視認性を欧文フォントで担保

2. Color Palette & Roles

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

Brand

• Zoff Blue (#4998db): メインのブランドカラー。店舗検索ボタン、バッジ、アクセント全般に使用
• Link Blue (#2199e1): テキストリンク、テキストアクセント。Zoff Blue のやや明るいトーン

Semantic

• Sale Red (#e60012): LP バナー・セール情報。"対象商品へ" のトーストバナー等
• Danger（推奨）: #e60012（セールレッドと共用）
• Success（推奨）: #2e8b57
• Warning（推奨）: #d97a00

CTA / Buttons

• Primary CTA（Zoff Blue ピル）: 背景 #4998db / 文字 #ffffff / radius 40px（pill） / padding 10px 24px
• Secondary CTA（"もっと見る" outlined ピル）: 背景 #ffffff / 文字 #000000 / border 1px solid #000000 / radius 1440px（pill）
• LP Banner Toast（セールレッド）: 背景 #e60012 / 文字 #ffffff / radius 4px

Neutral

3. Typography Rules

3.1 和文フォント

• ゴシック体（主要）: ヒラギノ角ゴ ProN（Hiragino Kaku Gothic ProN）をフォールバック和文として使用
• サブ用途で Noto Sans JP を一部見出し（レンズ説明等）に使用
• Meiryo が最終フォールバック
• 明朝体は使用しない（全体ゴシック統一）

3.2 欧文フォント

• サンセリフ（本文）: Helvetica Neue を最優先、Arial がフォールバック
• サンセリフ（ナビ）: Open Sans weight 600 をナビゲーションラベルに使用
• 等幅フォントの明示指定なし

3.3 font-family 指定

実サイトの実測値:

css/* 本文・一般 UI（欧文先頭） */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

/* ナビゲーションラベル */
font-family: "Open Sans", sans-serif;

/* 一部見出し（レンズ説明等） */
font-family: "Noto Sans JP", sans-serif;

/* レンズセクション */
font-family: "Helvetica Neue";

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

• 欧文先頭の構成: Helvetica Neue → Arial → ヒラギノ角ゴ ProN → Meiryo → sans-serif
• Helvetica Neue を先頭に置き、欧文の表示品質を優先。和文はヒラギノ / Meiryo のシステムフォントに委ねる
• ナビラベルは Open Sans 単独指定で欧文表示に特化。日本語カテゴリ名はシステムフォントにフォールバック

代替フォント注記:

• Helvetica Neue はシステムフォント。Web プレビューでは Inter（Google Fonts、Helvetica に近い現代サンセリフ）が代替として適切
• Open Sans は Google Fonts で利用可能。そのまま使用できる
• Noto Sans JP も Google Fonts で利用可能。そのまま使用できる

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

実測値（トップページ、2026-05-22 取得）

3.5 行間・字間

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

• 本文 (15-16px): 1.6
• 見出し H1-H2 (28-40px): 1.0（タイトで引き締まった見出し）
• 商品名 / H3-H4 (15-20px): 1.2〜1.47
• 価格 (17px Bold): 1.29

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

• 全体: normal（明示的な letter-spacing なし）
• 例外: Open Sans カテゴリナビ: 1px（= 約 0.0625em）
• 例外: 価格表示: 0.5px（= 約 0.029em）

ガイドライン:

• Zoff は letter-spacing を意図的に normal のまま にしている。和欧混植でもプレーンな組版
• 見出しの line-height が 1.0 と非常にタイト。セクション見出しはコンパクトに収める設計
• 本文は 1.6 で日本語としては標準的な読みやすさを確保
• 価格だけ letter-spacing 0.5px を入れ、数字の可読性を高めている

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 商品名やブランド名は自然な折り返しが基本

3.7 OpenType 機能

css/* Zoff は OpenType 機能を明示的に使用していない */
font-feature-settings: normal;

• palt: 不使用。和文のプロポーショナル字詰めは適用しない
• kern: ブラウザデフォルト任せ
• フォントスタックが欧文先頭のため、和文固有の字詰め調整は行わない設計

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（Zoff Blue ピル） -- 店舗検索ボタン

• Background: #4998db
• Text: #ffffff
• Border: none
• Padding: 10px 24px
• Border Radius: 40px（pill）
• Font: Helvetica Neue, 15px, weight 500

Secondary CTA（"もっと見る" outlined ピル）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Padding: 10px 24px
• Border Radius: 1440px（pill）
• Font: Helvetica Neue, 15px, weight 400

Sale Banner CTA（セールレッド） -- "対象商品へ"

• Background: #e60012
• Text: #ffffff
• Border: none
• Padding: 8px 16px
• Border Radius: 4px
• Font: Helvetica Neue, 14px, weight 700

Badge Counter

• Background: #4998db
• Text: #ffffff
• Border Radius: 10px
• Font: 12px, weight 700
• Min Width: 20px

Inputs

Search Input（pill）

• Background: #ffffff
• Border: 1px solid #dddddd
• Border Radius: 40px（pill）
• Padding: 10px 20px
• Font: Helvetica Neue, 16px
• Focus Border: 1px solid #4998db

Standard Input

• Background: #ffffff
• Border: 1px solid #dddddd
• Border (focus): 1px solid #4998db
• Border Radius: 0（角丸なし）
• Padding: 10px 12px
• Font: Helvetica Neue, 16px

Product Card

• Background: #ffffff
• Border: なし（または 1px solid #f7f7f7）
• Border Radius: なし（0）
• Padding: 内容に応じて 12〜16px
• Title: 15px, weight 400
• Price: 17px, weight 700, letter-spacing 0.5px
• Code: 12px, weight 400, color #3d3d3d

Cards / Surfaces

• Surface 階層: #ffffff（背景）→ #f7f7f7（カードセクション）→ #f6f6f6（代替面）→ #dddddd（境界）
• Border: なしが基本、区切り線として #dddddd
• Border Radius: 0（角丸なしの直線的なカード）

Header / Nav

• Background: #ffffff
• Border Bottom: 1px solid #dddddd（または none）
• Padding: 0 24px
• Height: 60〜70px

Footer

• Background: #ffffff（透明 / 特別な背景色なし）
• Padding: 40px 24px
• Color: #000000 主体

5. Layout Principles

Spacing Scale（推奨 8px ベース）

Container

• Max Width: 1200px 程度
• Padding (horizontal): 24〜48px（PC）/ 16px（mobile）

Border Radius Scale

Grid

• 商品グリッドは 3〜4 カラム（PC）/ 2 カラム（mobile）
• Gutter: 16〜24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感はサーフェスの背景色差（#ffffff vs #f7f7f7）とボーダー（#dddddd）で表現
• フラットでミニマルな外観がZoffの基調

7. Do's and Don'ts

Do（推奨）

• フォントスタックは "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif を維持する（欧文先頭）
• ナビゲーションラベルは "Open Sans" weight 600 で組む
• ブランドカラーは #4998db（Zoff Blue） を一貫して使う。リンクは #2199e1
• ボタンは pill（radius 40px 以上） が Zoff のアイデンティティ。角丸の少ないボタンはセールバナーのみ
• 本文の line-height は 1.6 を維持する
• letter-spacing は normal を基本とし、例外は価格表示の 0.5px のみ
• 商品カードは 白背景・ボーダーなし・角丸なし でフラットに
• サーフェスは #f7f7f7 / #f6f6f6 の微差で面を分ける

Don't（禁止）

• ボタンに 角丸 4px や 8px を使わない -- Zoff のボタンは pill か 0 か。中途半端な角丸は避ける
• ブランドカラーに 紺や濃紺を使わない -- #4998db の明るいブルーが Zoff の押し
• 和文フォントを font-family の先頭に置かない -- Zoff は欧文先頭（Helvetica Neue が最優先）
• letter-spacing を 0.04em 以上に広げない -- Zoff はプレーンな normal で組む
• 本文に palt や kern を強制適用しない -- Zoff は OpenType 機能を意図的に使わない
• セールレッド #e60012 を 通常の CTA に使わない -- セール・プロモーション専用
• 商品カードに 大きな box-shadow を付けない -- フラットなサーフェス差で表現する

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• H1: 40px → 28px
• H2 セクション見出し: 28px → 20px
• 本文サイズは 15-16px を維持
• 左右 padding を 16px に縮小
• 商品グリッドは 4 カラム → 2 カラム
• pill ボタンのサイズは維持（タッチターゲット確保）

タッチターゲット

• 主要 CTA（pill）: padding 10px 24px で約 44px の高さを確保
• 検索ボタン: pill 形状で十分なタッチエリア
• 商品カード全体がタップターゲット

ダークモード

• 未確認。実測時点ではライトモードのみ

9. Agent Prompt Guide

クイックリファレンス

Zoff Blue: #4998db
Link Blue: #2199e1
Sale Red: #e60012

Text Primary: #000000
Text Secondary: #3d3d3d
Background: #ffffff
Surface: #f7f7f7
Border: #dddddd

Body Font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Nav Font: "Open Sans", sans-serif (weight 600)
Sub Heading Font: "Noto Sans JP", sans-serif

Sizes:
  H1: 40px / weight 400 / line-height 1.0
  H2: 28px / weight 400 / line-height 1.0
  H3: 18-20px / weight 500-700 / line-height 1.2-1.6
  Body: 15-16px / weight 400 / line-height 1.6
  Price: 17px / weight 700 / letter-spacing 0.5px
  Code/Caption: 12px / weight 400

Letter Spacing: normal (全体)
palt: 不使用
font-feature-settings: normal

Border Radius: 0（カード）/ 4px（セールCTA）/ 10px（バッジ）/ 40px+（pill ボタン）

プロンプト例

Zoff のデザインに従って、商品一覧ページを作成してください。
- 本文フォント: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
- ナビフォント: "Open Sans", sans-serif（weight 600）
- セクション見出し: 28px / weight 400 / line-height 1.0
- 本文: 15px / weight 400 / line-height 1.6 / letter-spacing normal
- 商品名: 15px / weight 400 / color #000000
- 価格: 17px / weight 700 / letter-spacing 0.5px / color #000000
- 型番: 12px / weight 400 / color #3d3d3d
- 主要 CTA: 背景 #4998db（Zoff Blue）/ 白文字 / radius 40px (pill) / padding 10px 24px
- セカンダリ "もっと見る": 白背景 / 黒文字 / border 1px solid #000 / radius 1440px (pill)
- セール CTA: 背景 #e60012 / 白文字 / radius 4px
- 商品カード: 白背景 / radius 0 / border なし / shadow なし
- セクション背景: #f7f7f7
- リンク色: #2199e1
- ボーダー: #dddddd
- palt / kern を適用しない（font-feature-settings: normal）
- ボタンは pill 形状が基本（角丸 4-8px の中途半端な丸みは使わない）