KURAND（クランド） DESIGN.md

KURAND（https://kurand.jp/）のデザイン仕様書。 500種以上のオリジナルクラフト酒を扱うオンライン酒屋。 実サイトの computed style 実測（2026-06-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 温かみのあるゴールド系アクセント + Noto Sans Japanese / Zen Kaku Gothic New のモダンな EC サイト。クラフト酒の世界観を「和の温もり」と「モダンな UI」のバランスで表現。カテゴリタグはピル型、CTA は角丸 8px
• 密度: 本文 15〜16px / line-height 1.5〜1.8 / 商品カードは画像主体でコンパクト。情報量は多いが余白で呼吸を確保
• キーワード: クラフト酒、温かみ、ゴールド、Zen Kaku Gothic New、Noto Sans Japanese、モダン EC、丸角、Tailwind CSS
• 特徴:
  • 見出し専用フォント「Zen Kaku Gothic New」 を使用。柔らかいゴシック体でクラフト感を演出
  • ゴールド系のブランドカラー（#8d6941 〜 #b79862）がタイトル・タグ・アクセントに一貫して使われる
  • CTA は角丸 8px。ピルではなく控えめな丸み
  • カテゴリナビはピル型（9999px） で白地に黒文字
  • 商品タグは小さな角丸（4px） でゴールド系背景
  • テキストカラーは純黒ではなく暖かいダークブラウン #2b281e

2. Color Palette & Roles

実サイトの computed style 実測値。Tailwind CSS カスタムクラスに基づく。

Brand

• Gold Dark (#8d6941): ブランドカラー。セクション見出し（text-text-info）
• Gold Medium (#b79862): アクセントカラー。年齢確認ボタン背景
• Gold Light (#a5814d): スライダードット・装飾

CTA / Buttons

• Primary CTA（黒ソリッド）: 背景 #111111 / 文字 #ffffff / radius 8px / padding 8px 24px / 12px / weight 700 / "ログイン/新規会員登録はこちら"
• Secondary CTA（白ソリッド）: 背景 #ffffff / 文字 #111111 / border 1px solid #111111 / radius 8px / padding 8px 24px / 12px / weight 700 / "お問い合わせ"
• Register CTA（ダークブラウン）: 背景 #2b281e / 文字 #ffffff / radius 4px / 16px / weight 400 / "登録する"
• Category Pill（白ピル）: 背景 #ffffff / 文字 #111111 / radius 9999px / 15px / weight 400
• Tag Badge（ゴールド）: 背景 #f7f5ef / 文字 #8d6941 / radius 4px / padding 3px 6px / 13px / weight 700 / "期間限定"

Neutral

Semantic

• Danger / Sold Out (#e81903): 在庫切れ表示・警告
• Warning: #b79862（ゴールドと共有）
• Success: #2d8a4e（推奨値）

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文）: Noto Sans Japanese（Google Fonts）
• ゴシック体（見出し）: Zen Kaku Gothic New（Google Fonts）—— セクションタイトルに使用

3.2 欧文フォント

• サンセリフ: Noto Sans Japanese 内の欧文グリフを使用（欧文専用フォント指定なし）

3.3 font-family 指定

css/* 本文・UI */
font-family: "Noto Sans Japanese", sans-serif;

/* セクション見出し */
font-family: "Zen Kaku Gothic New";

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

• Noto Sans Japanese はフォールバックに sans-serif のみ
• Zen Kaku Gothic New は単独指定（フォールバックなし）

代替フォント注記: "Noto Sans Japanese" は "Noto Sans JP" と同じ。Google Fonts からは Noto+Sans+JP で読み込む。Zen Kaku Gothic New も Google Fonts で利用可能。

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

実測値（kurand.jp、2026-06-06 取得）

3.5 行間・字間

• 本文の行間 (line-height): 1.5〜1.8（サイズに応じて。15px は 1.8、16px は 1.5）
• 見出しの行間: 1.5
• 本文の字間 (letter-spacing): normal（0）
• 見出しの字間: normal（0）

3.6 禁則処理・改行ルール

css/* Tailwind CSS デフォルト */
word-break: normal;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt 不使用 */

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（黒ソリッド）

• Background: #111111
• Text: #ffffff
• Padding: 8px 24px
• Border Radius: 8px
• Font Size: 12px
• Font Weight: 700

Secondary（白ソリッド）

• Background: #ffffff
• Text: #111111
• Border: 1px solid #111111
• Padding: 8px 24px
• Border Radius: 8px

Category Pill

• Background: #ffffff
• Text: #111111
• Border Radius: 9999px
• Padding: 8px 16px
• Font Size: 15px

Tag Badge

• Background: #f7f5ef
• Text: #8d6941
• Padding: 3px 6px
• Border Radius: 4px
• Font Size: 13px
• Font Weight: 700

Inputs

• Background: #ffffff
• Border: 1px solid #d0d7de
• Border (focus): 1px solid #111111
• Border Radius: 6px
• Padding: 8px 12px
• Font Size: 15px
• Line Height: 27px

Cards

• Background: #ffffff
• Border: none
• Border Radius: 4px
• Padding: 0px
• Shadow: none
• 商品画像は角丸なし、下にタイトル＋価格

5. Layout Principles

Spacing Scale

Tailwind CSS カスタムスケール:

Container

• Max Width: 1296px
• Padding (horizontal): 16px

Grid

• Columns: 2〜4（レスポンシブ）
• Gutter: 16px

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

• セクション見出しには Zen Kaku Gothic New 700 を使い、ゴールド色（#8d6941）にする
• CTA は角丸 8px で統一する
• カテゴリナビは ピル型（9999px） にする
• テキスト色には暖かいダークブラウン #2b281e を使う（純黒を避ける）
• タグ・バッジには金色系の背景 #f7f5ef + テキスト #8d6941 を使う

Don't（禁止）

• 本文に Zen Kaku Gothic New を使わない（見出し専用）
• 純黒 #000000 をテキスト色に使わない（#2b281e または #111111 を使う）
• ボタンの角丸を 9999px にしない（カテゴリピル以外は 8px）
• 寒色系のアクセントカラーを使わない（ブランドはゴールド/暖色系）
• 商品画像に角丸を付けない

8. Responsive Behavior

Breakpoints

Tailwind CSS ベース + カスタム:

タッチターゲット

• 最小サイズ: 44px x 44px

フォントサイズの調整

• モバイル: 本文 15px 維持、カード並びは 2 列から 1 列へ

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #8d6941 (gold dark), #b79862 (gold medium)
Text Color: #2b281e (main), #111111 (emphasis)
Background: #ffffff (main), #f6f6f6 (surface), #f9f5ed (warm)
Font Body: "Noto Sans Japanese", sans-serif
Font Heading: "Zen Kaku Gothic New"
Body Size: 15-16px
Line Height: 1.5-1.8
Button Radius: 8px
Tag Radius: 4px
Pill Radius: 9999px (category nav only)

プロンプト例

KURANDのデザインシステムに従って、商品一覧ページを作成してください。
- 背景: #ffffff（メイン）
- セクション見出し: Zen Kaku Gothic New / 22px / 700 / #8d6941
- 本文: "Noto Sans Japanese" / 15px / 400 / #2b281e
- CTA: #111111 bg / #ffffff text / border-radius 8px
- カテゴリピル: #ffffff bg / #111111 text / border-radius 9999px
- タグ: #f7f5ef bg / #8d6941 text / border-radius 4px / 13px / bold