銀座 伊東屋（ITOYA） DESIGN.md

銀座 伊東屋（https://www.ito-ya.co.jp/）のデザイン仕様書。 1904年創業の老舗文房具専門店。銀座本店を中心に、上質な文房具とライフスタイル雑貨を取り扱う。 実サイトの computed style 実測（2026-05-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ダークヘッダー（#333333）＋ライトグレーボディ（#f0f0f0）の強いコントラストで、老舗の格式と清潔感を両立。ブランドレッド #c70b17 は差し色として控えめに使い、文房具店らしい落ち着きを保つ
• 密度: 本文 18px / line-height 1.8 と大きめ。カード型の商品一覧で視覚的に整理し、余白を広くとった回遊型レイアウト
• キーワード: 老舗の品格、建築的な直線（radius 0px）、欧文リードの知性、温かみのあるアース系副色、クリーンなグレースケール
• 特徴:
  • 欧文フォントに Open Sans をリードとして採用。1904年創業の老舗でありながら、グローバルな清潔感を意識した選択
  • 和文は游ゴシックを基本に、キャッチフレーズ等の大きなディスプレイテキストにはヒラギノ角ゴ ProN W3 を単独指定
  • ボタン・カードは一切角丸なし（border-radius: 0px）。銀座本店の建築を想起させるシャープで端正な印象
  • ブランドレッド #c70b17 はカートバッジやアクセントに限定使用。主要CTAは黒ベタ
  • 副色にウォームブラウン #a57658 とベージュ #decbac を持ち、文房具・革小物の温もりを表現
  • CSS Custom Properties を使わない伝統的なCSS構成
  • font-feature-settings の指定なし（palt 未適用）
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• ITOYA Red (#c70b17): 伊東屋のブランドレッド。カートバッジ、セール表示、ブランドアクセントに使用。主要CTAには使わない
• Warm Brown (#a57658): 革小物・プレミアム感の演出。セクション見出しの装飾やカテゴリアイコンに使用
• Warm Beige (#decbac): 紙・ナチュラル素材を連想させる面色。バナーやプロモーション領域の背景
• Green Accent (#73ba66): 在庫あり・新入荷等のポジティブな状態表示

CTA / Buttons

• Primary CTA: 背景 #000000 / 文字 #ffffff / radius 0px / font-weight 700 / font-size 16px
• Secondary CTA（Outline）: 背景 #ffffff / 文字 #000000 / border 1px solid #000000 / radius 0px / font-weight 700 / font-size 16px
• Clear: 背景 #ffffff / 文字 #000000 / border 1px solid #000000 / radius 0px

Neutral

Semantic（推奨値）

実サイトには明確なエラー／成功色のUI要素が確認できなかった。推奨補完値:

• Danger: #c70b17（Brand Red を流用）
• Success: #73ba66（Green Accent を流用）
• Warning: #d97706 程度のオレンジ

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（YuGothic）を基本とし、ヒラギノ角ゴ ProN W3 をフォールバック
• ディスプレイ専用: ヒラギノ角ゴ ProN W3 をキャッチフレーズ等の大きなテキストに単独使用（游ゴシックのフォールバックなし）
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Open Sans（Google Fonts）をリードフォントとして採用。本文・見出し問わず先頭に配置
• 英字のみのセクション見出しには Open Sans 単独指定（和文フォールバックなし）
• 純粋に欧文のみで構成されるテキスト（"NEW ARRIVAL" 等）も Open Sans

3.3 font-family 指定

css/* 本文・見出し（和欧混植） */
font-family: "Open Sans", 游ゴシック体, YuGothic, "游ゴシック Medium",
  "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック",
  "MS PGothic", sans-serif;

/* 英字見出し専用 */
font-family: "Open Sans", sans-serif;

/* ディスプレイ（キャッチフレーズ） */
font-family: "ヒラギノ角ゴ ProN W3";

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

• Open Sans を先頭に置くことで、欧文部分はすべて Open Sans のグリフで描画される（游ゴシックの欧文グリフは使われない）
• 和文は游ゴシック体 → YuGothic → Medium ウェイト指定 → ヒラギノ → メイリオ → MS P ゴシックの順で、Windows / macOS / 旧環境を広くカバー
• Windows の游ゴシック問題: 游ゴシック Medium / Yu Gothic Medium を挟むことで、Windows 環境での細すぎる表示を回避している
• キャッチフレーズのヒラギノ角ゴ ProN W3 単独指定は、macOS / iOS ユーザーに限定した演出（Windows では代替フォントにフォールバック）

代替フォント注記: Open Sans は Google Fonts で配信されており、ライセンス制限なし。游ゴシックはシステムフォントのため preview.html でも表示可能。ヒラギノ角ゴ ProN W3 は macOS / iOS のシステムフォントのため、Windows 環境では Noto Sans JP 等への代替が必要。

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

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

3.5 行間・字間

• 本文の行間 (line-height): 1.8。日本語本文としてはゆったりめで、商品説明文の可読性を重視
• 見出しの行間: 1.2（日本語セクション見出し）、1.4（英字見出し）、1.8（ディスプレイ / キャッチフレーズ）
• 本文の字間 (letter-spacing): normal（ゼロ）。palt 未適用のため、全角幅で均等に並ぶ
• 英字見出しの字間: 0.01em（わずかにトラッキング）

ガイドライン:

• 本文 18px は通常のWebサイトよりやや大きい。文房具カタログとして、文字そのものの美しさを見せる意図がある
• letter-spacing / palt ともに未適用。ベタ組みの端正さを活かしたデザイン
• 英字見出しの 0.01em は極めて控えめなトラッキングで、ほぼベタ組みと同等

3.6 禁則処理・改行ルール

css/* 実測（明示的な指定なし — ブラウザデフォルト） */
word-break: normal;
overflow-wrap: break-word;

サイト側で明示的な禁則処理の指定は確認できなかった。ブラウザデフォルトの禁則処理に依存。

3.7 OpenType 機能

css/* 指定なし */
font-feature-settings: normal;

• palt 未適用。全角文字は等幅で並ぶ
• kern も明示指定なし（Open Sans のカーニングはブラウザデフォルトで有効）
• 文房具店らしい「整った」印象を、ベタ組みで実現している

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

Buttons

Primary（黒ベタ）

• Background: #000000
• Text: #ffffff
• Padding: 12px 32px（推定）
• Border Radius: 0px（角丸なし）
• Font Size: 16px
• Font Weight: 700

Secondary（アウトライン）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Padding: 12px 32px（推定）
• Border Radius: 0px（角丸なし）
• Font Size: 16px
• Font Weight: 700

特徴: radius 0px の四角いボタンが伊東屋の統一意匠。pill ボタンは使わない。

Inputs

• Background: #ffffff
• Border: 1px solid #999999（推定）
• Border (focus): 1px solid #333333（推定）
• Border Radius: 0px
• Padding: 8px 12px
• Font Size: 16px

Cards

• Background: #ffffff
• Border: none
• Border Radius: 0px
• Padding: 0（画像上・テキスト下の構成）
• Shadow: なし（フラット）
• ホバー時: 微弱なシャドウ追加

Carousel Dots

• 形状: circle（border-radius: 50%）
• Border: 1px solid #333333
• アクティブ時: 塗りつぶし

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 20px

Grid

• 商品一覧: 3〜4カラムグリッド
• Gutter: 20px
• カード型レイアウトで画像→テキストの縦並び

6. Depth & Elevation

特徴: 基本はフラットデザイン。影はインタラクション時のフィードバックとして控えめに使う。

7. Do's and Don'ts

Do（推奨）

• ボタン・カードの角は border-radius: 0px を維持する（伊東屋の建築的アイデンティティ）
• 欧文は Open Sans を先頭に配置し、和文（游ゴシック）より優先する
• ブランドレッド #c70b17 はアクセントに限定し、面積を抑える
• 本文 18px / line-height 1.8 の大きめ設定を守る
• ダークヘッダー #333333 とライトグレーボディ #f0f0f0 のコントラストを保つ
• 商品画像はカード内に余白なくフルブリードで配置する
• ウォーム系の副色（#a57658, #decbac）でプレミアム感を演出する

Don't（禁止）

• ボタンやカードに border-radius をつけない（pill ボタンは伊東屋のデザイン言語にない）
• ブランドレッド #c70b17 をCTAボタンの背景色に使わない（CTAは黒ベタ）
• letter-spacing や palt を本文に適用しない（ベタ組みの端正さが崩れる）
• ヘッダーを白やグレーにしない（ダークヘッダーがブランドアイデンティティ）
• 本文サイズを 16px 以下にしない（18px の大きめ設定が意図的）
• #333333 を本文テキストに使わない（テキストは #000000、#333333 はヘッダー背景専用）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG基準）

フォントサイズの調整

• モバイルでは本文 16px、見出しはデスクトップの 70〜80% に縮小
• ディスプレイテキスト（キャッチ）は 24px 程度に

9. Agent Prompt Guide

クイックリファレンス

Brand Red: #c70b17（アクセント限定）
Primary CTA: bg #000000 / text #ffffff / radius 0px
Header BG: #333333
Content BG: #f0f0f0
Card Surface: #ffffff
Text Primary: #000000
Text Secondary: #999999
Font: "Open Sans", 游ゴシック体, YuGothic, ..., sans-serif
Body Size: 18px
Line Height: 1.8
Letter Spacing: normal（palt なし）
Border Radius: 0px（全コンポーネント共通）

プロンプト例

伊東屋のデザインシステムに従って、商品一覧ページを作成してください。
- ヘッダーは背景 #333333 にテキスト #ffffff
- ページ背景は #f0f0f0
- 商品カードは白 #ffffff、角丸なし（radius: 0px）
- CTAボタンは黒ベタ #000000、テキスト白、角丸なし
- フォントは "Open Sans" を先頭に、游ゴシック体をフォールバック
- 本文は 18px / line-height: 1.8
- ブランドレッド #c70b17 はセールバッジやカートアイコンにのみ使用
- 商品画像はカード幅いっぱいに配置