cotogoto（コトゴト） DESIGN.md

cotogoto 公式オンラインストア（https://www.cotogoto.jp/）のデザイン仕様書。 東京・高円寺の日本の手仕事の暮らし道具店。「暮らしのなかの、ひとつひとつ。」をコンセプトに、せいろ・おろし金・花ふきん等のキッチン雑貨・生活道具を厳選して扱う。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体ベースの文芸的・エディトリアルな佇まい。手仕事の温度感を Shippori Mincho（しっぽり明朝）と生成り色で表現する
• 密度: ゆったり。商品ひとつひとつを丁寧に見せる工芸カタログ型。余白で呼吸を取る
• キーワード: 明朝体、生成り、手仕事、文芸、端正、高円寺
• 特徴: サイト全体が明朝体（Shippori Mincho）で組まれている——日本の Web サービスとしてきわめて珍しい。ゴシック体は一切使わず、本文・見出し・ナビすべてが serif。ウェイト 500-600 の中肉が主体で、細すぎず太すぎない、筆圧を感じる組版。配色は白 #ffffff と生成り #f8f6ed の 2 面に #333333 のテキストだけ——ほぼモノクロームで、唯一の色彩は星評価の #ffbf00（山吹色）のみ。ボタンは border-radius: 3px の控えめな角丸と 1px の細い罫線で、手仕事の繊細さを UI に写している

2. Color Palette & Roles

Primary（ブランドカラー — 無彩色＋生成りの 2 色構成）

• Text Black (#333333): 本文・見出し・ボタン枠の主役色。純黒ではなくやや柔らかい墨色
• Background White (#ffffff): ページ背景
• Kinari / 生成り (#f8f6ed): ブランドの面色。フッター、特集エリア、注目セクションの背景に多用。天然素材の未晒し布を想起させる

Surface（面色）

• Surface Kinari (#f8f6ed): 最頻出の面色（出現 10 回）。特集・おすすめ・フッター背景
• Surface Kinari Deep (#ede9db): フッター下部・濃い生成り面
• Surface Modal (#999999): モーダル確認ボタン背景

Text

• Text Primary (#333333): 本文・見出し
• Text Secondary (#777777): 補足テキスト・商品サブ情報
• Star Yellow (#ffbf00): レビュー星の山吹色。サイト内で唯一の色相を持つ要素

Semantic（推奨——実サイトには明示的な定義なし）

• Danger (#c0392b): エラー・削除（推奨値）
• Warning (#d97a00): 警告（推奨値）
• Success (#2e7d4f): 成功（推奨値）

Border

• Border (#333333): 入力欄・ボタン枠の主要ボーダー（テキスト色と同一）
• Border Light (#cccccc): 区切り線、薄い罫

Note: cotogoto の配色は「白・生成り・墨色」の 3 色だけで完結する。ブランドカラーとしての色相は存在せず、唯一の彩色は星評価の山吹色 #ffbf00 のみ。

3. Typography Rules

3.1 和文フォント

明朝体（サイト全体の基本書体）:

• Shippori Mincho（Google Fonts、しっぽり明朝）——最優先。築地体系に倣ったオールドスタイル明朝
• フォールバックは generic serif

特筆: cotogoto は本文・見出し・ナビゲーション・ボタンすべてを明朝体で統一している。日本の EC サイトでは極めて稀な設計。手仕事の道具を扱う店にふさわしい、書物のような品格を生んでいる

ゴシック体: 使用していない

3.2 欧文フォント

Shippori Mincho 内蔵の欧文グリフをそのまま使用。独立した欧文フォント指定はなし。

font-family 先頭の exclamation はアイコンフォント（カート・検索アイコン等）用で、テキスト描画には影響しない

3.3 font-family 指定

css/* サイト全体（本文・見出し・ナビ・ボタンすべて） */
font-family: exclamation, "Shippori Mincho", serif;

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

• exclamation はアイコンフォント。テキストには Shippori Mincho が適用される
• Shippori Mincho は Google Fonts で提供される無料の明朝体。築地体系のクラシックな字形
• 最終フォールバックは generic serif（游明朝やヒラギノ明朝が適用される）

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

3.5 行間・字間

• 本文の行間 (line-height): 1.4。明朝体は字面が小さめなので 1.4 でも可読性を確保できる
• 見出しの行間: normal 〜 1.3。Display H2 は normal（ブラウザデフォルト ≈ 1.2）、H3 Large は 1.3
• 小見出し・カード見出しの行間: 1.5
• 本文の字間 (letter-spacing): 0.04em（0.56px / 14px）。サイト全体でグローバルに適用
• Display H2 の字間: 0.08em（2.24px / 28px）。メジャー見出しだけ字間を広く取る

ガイドライン:

• 全体的に letter-spacing: 0.04em がベース（body に適用）
• 見出しの中でも Display H2 だけ 0.08em に広げ、堂々とした佇まいを作る
• line-height は明朝体の字面の小ささを考慮し、1.4 で十分な可読性

3.6 禁則処理・改行ルール

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

• 商品名（例: 「中村銅器製作所のおろし金」「工房アイザワのせいろ」）は意味の切れ目で折り返す
• 価格表記は折り返さない

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt は使わない。Shippori Mincho のベタ組みで通す
• 明朝体の等幅リズムを崩さないことが、書物のような品格につながる

3.8 縦書き

• 該当なし（横書き運用）

4. Component Stylings

Buttons

Link Box CTA（主要 CTA）

• Background: transparent
• Text: #333333
• Border: 1px solid #333333
• Border Radius: 3px
• Font Size: 16px / Weight 500
• Line Height: 48px（高さ固定）
• Letter Spacing: 0.04em
• 例: 「新商品一覧へ」「もっと見る」

Dark CTA（強調 CTA）

• Background: #000000
• Text: #ffffff
• Padding: 10px
• Border Radius: 3px
• Font Size: 12px / Weight 400
• 例: 「詳しく見る」

Modal Confirm（モーダル確認）

• Background: #999999
• Text: #ffffff
• Padding: 6px 0

Inputs

• Background: #ffffff
• Border: 1px solid #333333
• Border Radius: 3px
• Padding: 10px
• Font Size: 14px / Weight 500 / line-height 1.4 / letter-spacing 0.04em

Cards

• Background: #ffffff or #f8f6ed（生成り面上のカード）
• Border: なし（枠線を使わず、面色の差で区切る）
• Border Radius: 0px（カード自体は角丸なし）
• Padding: 商品画像 + テキストの密な構成
• Shadow: なし

Review Stars

• Color: #ffbf00（山吹色）
• サイト内で唯一の彩色要素

5. Layout Principles

Spacing Scale

Container

• Max Width: 約 960–1200px（商品グリッド領域）
• Padding (horizontal): 16〜24px

Grid

• 商品グリッド: 4 カラム（PC）/ 2 カラム（SP）
• ガッターは 16–24px
• 余白を多めに取り、商品写真の間に呼吸を確保

6. Depth & Elevation

cotogoto は box-shadow をほぼ使わない。階層は面色の差（#ffffff と #f8f6ed の 2 面）で表現する。影を使わないことで、紙の本や手書きのカタログのような質感を保つ。

7. Do's and Don'ts

Do（推奨）

• サイト全体を Shippori Mincho（明朝体） で統一する。ゴシック体は使わない
• font-family は exclamation, "Shippori Mincho", serif を指定する（exclamation はアイコンフォント）
• テキスト色は #333333（墨色）。純黒 #000000 ではなく、やや柔らかい黒
• 面色は #ffffff（白）と #f8f6ed（生成り）の 2 色で構成する
• ウェイトは本文 500、見出し 600 の 中肉 を基本とする
• letter-spacing: 0.04em をサイト全体のベースとし、Display H2 だけ 0.08em に広げる
• ボタン・入力欄は border-radius: 3px の 控えめな角丸 で統一する
• CTA は 1px solid #333333 の細い罫線で囲む「ボックスリンク」スタイル（line-height: 48px）
• font-feature-settings: normal（palt 不使用）——明朝体のベタ組みリズムを保つ
• 唯一の彩色は星評価 #ffbf00 のみ。それ以外に色相を持たせない
• 商品名・特集タイトルは明朝体 600 で、工芸品の品格を演出する

Don't（禁止）

• ゴシック体（Noto Sans JP、游ゴシック等）を使わない（cotogoto は明朝体オンリー）
• カラフルな色（赤・青・緑等）を使わない（白・生成り・墨色の 3 色構成）
• 大きな border-radius（pill 等）を使わない（最大 3px）
• 大きな box-shadow / drop-shadow を使わない（フラット原則）
• テキスト色に純黒 #000000 を本文に使わない（#333333 がブランドの墨色）
• font-weight 700 以上のボールド体を本文に使わない（500–600 の中肉が基本）
• palt 等の字詰め機能を使わない（明朝体のベタ組みが品格の源泉）
• letter-spacing を 0 にしない（0.04em のベースを維持する）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（ボックスリンク CTA は line-height 48px で確保）

フォントサイズの調整

• モバイル本文は 14px を維持
• Display H2 28px はモバイルで 22–24px に縮小
• Shippori Mincho は小サイズでも可読性が高い書体

9. Agent Prompt Guide

クイックリファレンス

Text Color: #333333 (墨色)
Text Sub: #777777
Background: #ffffff
Surface Kinari: #f8f6ed (生成り)
Surface Kinari Deep: #ede9db
Star Yellow: #ffbf00
Border: #333333
Font: exclamation, "Shippori Mincho", serif
Body: 14px / Weight 500 / line-height 1.4 / letter-spacing 0.04em
Heading: Weight 600
Display H2: 28px / letter-spacing 0.08em
Border Radius: 3px
Shadow: なし
font-feature-settings: normal (palt 不使用)

プロンプト例

cotogoto のデザインシステムに従って、キッチン雑貨の商品一覧ページを作成してください。
- フォント: exclamation, "Shippori Mincho", serif（サイト全体が明朝体）
- テキスト色: #333333（墨色）、サブ: #777777
- 背景: #ffffff、面色: #f8f6ed（生成り）
- 本文は 14px / weight 500 / line-height 1.4 / letter-spacing 0.04em
- 見出しは weight 600、Display H2 は 28px / letter-spacing 0.08em
- CTA ボタンは border 1px solid #333333 / radius 3px / line-height 48px のボックスリンクスタイル
- 強調 CTA は bg #000000 / text #ffffff / radius 3px / padding 10px / 12px
- 入力欄は border 1px solid #333333 / radius 3px / padding 10px
- 星評価は #ffbf00（サイト唯一の彩色）
- ゴシック体は使わない。ボールド（700+）も使わない
- box-shadow は使わず、白と生成りの面色差で階層を作る
- font-feature-settings: normal（palt 不使用、明朝体のベタ組み）