BAYCREW'S STORE（ベイクルーズストア） DESIGN.md

BAYCREW'S STORE（https://baycrews.jp/）のデザイン仕様書。 日本最大級のマルチブランドファッションリテーラー。JOURNAL STANDARD、IENA、Deuxieme Classe、Spick and Span、EDIFICE、SLOBE IENA 等を擁するベイクルーズグループの公式EC。 実サイトの computed style 実測（2026-06-10 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白背景にモノクロームのテキスト、最小限の UI クロームで商品写真を主役にする徹底的に引き算されたファッション EC。装飾的な要素を排し、プロダクトビジュアルとブランド名だけで世界観を構築する
• 密度: 12px ベースの小さな文字で高密度な商品一覧を実現。行間は 1.67〜1.83 で日本語としては標準的だが、文字サイズが小さいため視覚的にはコンパクト
• キーワード: モノクローム、ミニマル、プロダクトファースト、ユーティリタリアン、ファッション EC
• 特徴:
  • 見出しを含む全テキストが weight 400（Regular） という極めて珍しい設計。太字を一切使わず、サイズと色だけで階層を表現する
  • ブランドカラーは存在感を抑え、シアンブルー #00a6dd をアクティブ状態のインジケーターやリンクの一部にだけ使用
  • フォントスタックは "Hiragino Kaku Gothic Pro", Meiryo, sans-serif のわずか2フォント＋generic。最短クラスの実用的なフォールバック
  • OpenType 機能（palt）は一切不使用。letter-spacing も一部見出しの 1.2px を除きほぼ normal
  • 全体のグレースケールは #000 / #333 / #555 / #666 / #999 / #ccc / #f0f0f0 / #fff の8段階。16進数で切りの良い値に統一されている
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Accent Cyan (#00a6dd): ブランドアクセント。アクティブページャードット、情報タイトルリンク、WOMEN/MEN タブのアクティブ状態に使用。ページ全体で唯一の有彩色

Neutral — モノクロームスケール

CTA / Interactive

• Pager Dot (Active): 背景 #00a6dd / border-radius 3px / font Arial 10.2px / weight 700 — サイト内で唯一 bold を使う要素
• Pager Dot (Inactive): 背景 #999999 / border-radius 3px
• Gender Toggle (Active): 文字色 #00a6dd / 14px / weight 400
• Gender Toggle (Inactive): 文字色 #999999 / 14px / weight 400
• Search Submit: 背景 #333333 / 文字 #ffffff / border-radius 0px
• Footer Link: 背景 #ffffff / border 1px solid #cccccc / border-radius 0px

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

実サイトのトップページにはエラー/成功色の表出が見られない。EC 向けに推奨する補完値:

• Danger / Sale: #cc0000 — セール価格、エラー
• Success: #2d8c3c — 在庫あり、完了
• Warning: #cc8800 — 残りわずか、注意

3. Typography Rules

3.1 和文フォント

• ゴシック体: Hiragino Kaku Gothic Pro（ヒラギノ角ゴ Pro） を最優先。ProN（JIS2004字形）ではなく Pro（JIS90字形）を指定
• フォールバック: Meiryo（Windows）→ sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• 専用の欧文書体は持たない。ヒラギノ角ゴ Pro 内蔵の欧文グリフがそのまま使用される
• ページャードットのみ Arial を明示指定（10.2px / 700）

3.3 font-family 指定

css/* 全体（唯一のフォントスタック） */
font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;

/* ページャードット（例外） */
font-family: Arial, sans-serif;

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

• わずか2フォント＋generic という最短構成。macOS ではヒラギノ、Windows では Meiryo にフォールバック
• 最近のサイトで見られる "Hiragino Sans" ではなく、レガシーな "Hiragino Kaku Gothic Pro" を指定。サイトの歴史を反映
• ProN（JIS2004字形）ではなく Pro（JIS90字形）を指定している点に注意

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

特筆点: weight 400 がサイト全体に適用されており、h1〜h2 を含むすべてのテキスト要素が Regular。太字による視覚的強調を一切行わない設計思想。

3.5 行間・字間

• 本文の行間 (line-height): 22px / 12px = 1.83（日本語として標準的。文字サイズが小さいため実際の行間は狭い）
• 見出しの行間: 1.375〜2.39（要素による。大きめの line-height は垂直方向の余白として機能）
• 本文の字間 (letter-spacing): normal（明示的な字間指定なし）
• 見出しの字間: 一部の日本語見出しで 1.2px（≈ 0.075em at 16px） の letter-spacing を適用。英語見出しは normal

ガイドライン:

• 本文 12px は日本語 EC としてはコンパクト。モバイル表示では 14px 以上への拡大を検討
• 全体的に letter-spacing は抑制的。和文のプロポーショナル字詰めも不使用

3.6 禁則処理・改行ルール

css/* 実測に基づく設定 */
word-wrap: break-word;
overflow-wrap: break-word;

特段の禁則処理指定は確認されず、ブラウザのデフォルト動作に委ねている。

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt: 不使用。プロポーショナル字詰めは一切適用しない
• kern: 不使用
• EC サイトとして、装飾的なタイポグラフィ制御よりも安定した表示を優先する設計

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

Buttons

Search Submit

• Background: #333333
• Text: #ffffff
• Padding: 0
• Border Radius: 0px
• Font Size: 12px
• Font Weight: 400

Footer Service Link

• Background: #ffffff
• Text: #333333
• Border: 1px solid #cccccc
• Border Radius: 0px
• Padding: 実測なし
• Font Size: 12px

Gender Toggle (Active)

• Background: transparent
• Text: #00a6dd
• Font Size: 14px
• Font Weight: 400

Gender Toggle (Inactive)

• Background: transparent
• Text: #999999
• Font Size: 14px
• Font Weight: 400

Pager Dots

• Active: bg #00a6dd / radius 3px / font Arial 10.2px / weight 700
• Inactive: bg #999999 / radius 3px

Inputs

• Background: #ffffff
• Border: 実測なし（簡素なスタイル）
• Font Size: 12px
• Font Weight: 400
• Line Height: 26px
• Padding: 0 5px

Cards（商品カード）

ベイクルーズの商品カードは極めてシンプル:

• Background: #ffffff
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 構造: 商品画像 → ブランド名（12px / #000）→ 商品名（12px / #000）→ 価格（12px / #000）

5. Layout Principles

Spacing Scale

サイト全体で体系的なスペーシングトークンは確認されず、個別の値が使用されている。実測から推定されるスケール:

Container

• Max Width: 960px（推定。ファッション EC 標準）
• Padding (horizontal): 0〜16px

Grid

• 商品一覧: 4カラムグリッド（デスクトップ）
• Gutter: 16〜24px

6. Depth & Elevation

注: サイト全体がフラットデザインで、影の使用は極めて限定的。Level 0 が支配的。

7. Do's and Don'ts

Do（推奨）

• 商品写真を最大のデザイン要素として扱い、UI クロームは最小限にする
• テキストは weight 400 で統一し、サイズと色だけで視覚的階層を作る
• グレースケールは #000 / #333 / #555 / #666 / #999 / #ccc / #f0f0f0 / #fff の8段階を守る
• アクセントカラー #00a6dd はアクティブ状態とリンクのみに使用し、過度に使わない
• フォントスタックは "Hiragino Kaku Gothic Pro", Meiryo, sans-serif を正確に記述する（ProN ではなく Pro）
• border-radius は 0px を基本とし、角丸は使わない（ページャードットの 3px のみ例外）

Don't（禁止）

• font-weight を 400 以外に変更しない（ページャードットの Arial 700 のみ例外）
• 有彩色を #00a6dd 以外に追加しない（ブランドの世界観が壊れる）
• 派手なボタンスタイル（pill、グラデーション、影付き）を使わない
• カードに border-radius や box-shadow を追加しない（フラットを維持）
• OpenType 機能（palt、kern）を有効にしない
• フォントサイズを 12px 未満にしない（可読性の限界）
• letter-spacing を広くとりすぎない（元のデザインの詰まった印象を損なう）

8. Responsive Behavior

Breakpoints

タッチターゲット

• WOMEN/MEN タブ: 14px / line-height 28px — モバイルではタッチターゲットとして小さい可能性あり
• 最小サイズ目標: 44px x 44px（WCAG 基準）

フォントサイズの調整

• ベースサイズ 12px はデスクトップ向け。モバイルでは 14px 以上への拡大を推奨
• 見出しはデスクトップと同等（weight の変化がないため、サイズでの差別化が重要）

9. Agent Prompt Guide

クイックリファレンス

Accent Color: #00a6dd
Text Color: #000000
Text Muted: #999999
Text Sub: #666666
Background: #ffffff
Surface Footer: #f0f0f0
Border: #cccccc
Font: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif
Body Size: 12px
Body Weight: 400 (all text)
Line Height: 1.83
Letter Spacing: normal
Border Radius: 0px
palt: off

プロンプト例

ベイクルーズストアのデザインシステムに従って、商品一覧ページを作成してください。
- フォント: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif
- 全テキストの font-weight は 400（見出しも含む）
- 本文サイズ: 12px / line-height: 1.83
- 文字色: #000000（本文）、#999999（補助）、#666666（ラベル）
- アクセント色: #00a6dd（アクティブ状態のみ）
- 背景: #ffffff / フッター背景: #f0f0f0
- ボーダー: #cccccc
- border-radius: 0px（角丸なし）
- 商品カード: 画像 + ブランド名 + 商品名 + 価格、影なし、枠線なし
- 商品一覧: 4カラムグリッド