釜浅商店 (Kama-asa) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://www.kama-asa.co.jp/ 釜浅商店は東京・合羽橋の料理道具専門店（創業1908年）。「良理道具（りょうりどうぐ）」を掲げ、 包丁・鉄鍋・せいろ等を扱う。実測は EC トップおよび理念ページに基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 老舗の道具店らしい落ち着きと、モダンな EC の使いやすさを両立。料理道具の質感が伝わる写真主体
• 密度: 中密度。カテゴリカードとコンテンツ（読みもの）を整然と並べる編集型 EC
• キーワード: 実直 / 温かい / 手仕事 / 落ち着き / 端正
• 形状言語: 角丸を積極的に使う。ボタン・カードは border-radius 8〜16px、タグ・切替は 15〜30px の丸みやピル形
• 書体の性格: 見出しは Noto Sans JP を 字間広め（最大 0.2em） で organ的に組み、本文は游ゴシックで柔らかく読ませる。英字ラベルは大文字＋トラッキングで店構えの品位を出す

2. Color Palette & Roles

Primary（ブランドカラー）

• Charcoal (#383838): ブランドの基調色（rgb(56,56,56)）。文字色・プライマリボタン背景・フッター面に使う、墨のような濃グレー
• Warm Taupe (#a28f74): ブランドアクセント。レビュー星・「レビューを書く」ボタン等に使う、鉄と木を思わせる温かいトープ

Category Accent（カテゴリ識別色）

読みもの・カテゴリのラベルに使う低彩度の識別色。写真に馴染むよう彩度を抑えている。

• Sage (#dfe3e3): 包丁カテゴリ（rgb(223,227,227)）
• Cream (#eae4d2): 料理道具カテゴリ（rgb(234,228,210)）
• Sand (#f0e6d9): 特集・読みもの（rgb(240,230,217)）
• Slate Blue (#6c88ba): コンテンツ識別（rgb(108,136,186)）
• Navy (#2e4877): コンテンツ識別・見出し帯（rgb(46,72,119)）
• Copper (#c49166): コンテンツ識別（rgb(196,145,102)）

Neutral（ニュートラル）

• Text Primary (#383838): 見出し・本文（純黒ではない墨色）
• Text on Dark (#ffffff): 濃色面・写真上の文字
• Border (#e1e1e1): 区切り線・入力枠（rgb(225,225,225)）
• Border Darker (#afafaf): 強調したい区切り
• Background (#ffffff): ページ背景
• Surface (#efefef): カード・セカンダリボタン・パネルの面色（rgb(239,239,239)）

Semantic（意味的な色）

• Success (#2e9e7b): 在庫あり・完了（rgb(46,158,123)）
• In Stock (#3370bf): 在庫ステータス（rgb(51,112,191)）
• Danger / Sale (#e85f5f): エラー・セール・残りわずか（rgb(232,95,95)）

色に関する設計思想

• 基調は墨色 #383838 と白 #ffffff。純黒は使わず、道具の"用の美"に合う柔らかいコントラストにする
• 差し色はブランドの #a28f74（トープ）に集約し、その他はカテゴリ識別の低彩度色として控えめに使う

3. Typography Rules

3.1 和文フォント

• ゴシック体（見出し）: Noto Sans JP（実サイトでは "Noto Sans Japanese" 指定）。ウェイト 700 を字間広めで使う
• ゴシック体（本文）: 游ゴシック（YuGothic）→ ヒラギノ角ゴ ProN → ヒラギノ角ゴシック の順
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ: Helvetica Neue → Helvetica → Arial（和文フォント内の欧文で組まれる場合も多い）
• 等幅 / セリフ: 使用しない

代替フォントの注記: Noto Sans JP・游ゴシックはいずれも一般的に入手可能（Noto Sans JP は Google Fonts、游ゴシックは Mac/Windows 標準）。Adobe Fonts 依存はなく、preview.html でもほぼ忠実に再現できる。

3.3 font-family 指定

css/* 見出し（Noto Sans JP） */
font-family: "Noto Sans JP", "Noto Sans Japanese", sans-serif;

/* 本文（游ゴシック優先の和文スタック） */
font-family: YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Helvetica Neue", Helvetica, Arial, sans-serif;

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

• 和文優先。見出しは Noto Sans JP、本文は游ゴシックを先頭に置く
• 本文スタックは Mac（游ゴシック / ヒラギノ）と Windows（游ゴシック）双方をカバー
• 欧文は末尾の Helvetica Neue 系が拾う

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

3.5 行間・字間

• 本文の行間 (line-height): 1.8（16px 本文 / 29px）。読みものが多いため広めに取る
• 見出しの行間: 1.0〜1.23
• 本文の字間 (letter-spacing): normal
• 見出しの字間: 大見出しは 0.2em と大きく開き、店の品格を出す。中見出し・ラベルは 0.075〜0.083em

ガイドライン:

• 日本語見出しの letter-spacing を積極的に広げるのが釜浅らしさ（最大 0.2em）
• 本文は字間を詰めず、行間 1.8 でゆったり読ませる

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 実測では palt 不使用 */

• 実測では font-feature-settings: normal。字詰めは letter-spacing で明示的に制御している
• 見出しの間延びは letter-spacing で意図的に作っているため、palt で詰め直さないこと

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

Buttons

角丸を積極的に使うのが特徴。プライマリは墨色の塗り、セカンダリは淡グレー面。

Primary

• Background: #383838（charcoal）
• Text: #ffffff
• Padding: 2px 10px〜（サイズ可変）
• Border Radius: 15〜16px
• Font: Noto Sans JP

Secondary

• Background: #efefef
• Text: #383838
• Border: なし
• Border Radius: 8px

Pill（誘導リンク・タグ）

• Background: #ffffff / transparent
• Text: #383838 または #000000
• Border Radius: 30px（完全なピル）／ タグは 15px
• Padding: 0 35px 等、横に余裕を持たせる

Accent（レビュー系）

• Background: #a28f74（warm taupe）
• Text: #ffffff

Inputs

• Background: #ffffff
• Border: 1px solid #e1e1e1
• Border (focus): 1px solid #383838
• Border Radius: 8px
• Padding: 10px 14px
• Font Size: 15px

Cards

• Background: #ffffff / #efefef
• Border: なし（border-radius と余白で区切る）／必要時 1px solid #e1e1e1
• Border Radius: 8px（--block-border-radius-reduced）／ 大ブロックは 15px（--block-border-radius）
• Padding: 16–24px
• カテゴリカードは識別色の帯＋写真＋見出しで構成

5. Layout Principles

Spacing Scale（推定）

Container

• Max Width: 1280px
• Padding (horizontal): 16–24px

Grid

• Columns: 12（カテゴリカードは 2〜4 カラム）
• Gutter: 16–24px
• トップは「大判ビジュアル → カテゴリカード群 → 読みもの一覧」の縦積み構成

6. Depth & Elevation

• 影は控えめ。奥行きは border-radius と #efefef の面色で表現する

7. Do's and Don'ts

Do（推奨）

• 基調色は墨色 #383838 と白 #ffffff、アクセントは #a28f74（トープ）に集約する
• 大見出しは Noto Sans JP を letter-spacing: 0.2em まで開いて組む
• 本文は游ゴシックで line-height: 1.8、字間はニュートラル
• ボタン・カードは border-radius 8〜16px、誘導リンクはピル（30px）にする
• カテゴリは低彩度の識別色で色分けする

Don't（禁止）

• 純黒 #000000・彩度の高い原色をベタで使わない
• 大見出しに palt を掛けて字間を詰め直さない（意図した間延びを壊す）
• 本文の line-height を 1.5 未満にしない
• 角丸を全て 0 にしない（釜浅の柔らかさが失われる）
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

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

フォントサイズの調整

• モバイルでは大見出しの letter-spacing を 0.1em 程度に緩め、本文は 15–16px を維持
• カテゴリカードは 2 カラム → 1 カラムへ

9. Agent Prompt Guide

クイックリファレンス

Primary (charcoal): #383838
Accent (taupe):     #a28f74
Text:               #383838
Background:         #ffffff
Surface:            #efefef
Border:             #e1e1e1
Heading Font:       "Noto Sans JP", sans-serif
Body Font:          YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Body Size:          16px
Line Height:        1.8
Heading tracking:   letter-spacing 0.2em
Button radius:      8–16px（誘導リンクは 30px ピル）

プロンプト例

釜浅商店のデザインシステムに従って、料理道具のカテゴリ一覧を作成してください。
- 基調色: #383838（墨）と #ffffff、アクセント: #a28f74（トープ）
- 見出しは Noto Sans JP、letter-spacing 0.2em で大きく開く
- 本文は游ゴシック（YuGothic優先）、line-height 1.8
- カテゴリカードは border-radius 8px、識別色（sage #dfe3e3 / cream #eae4d2 等）の帯
- プライマリボタンは #383838 塗り・radius 16px、誘導リンクは 30px のピル