Kalita (カリタ) DESIGN.md

Kalita 公式サイト (https://www.kalita.co.jp/) のデザイン仕様書。 1958年創業、横浜発のコーヒー機器総合メーカー。三つ穴ドリッパーに代表される「カリタ式」で知られる。 グレー #999999 のページ背景、シャープな直角コンポーネント、ゴーストボタンが特徴的な工業的デザイン。実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: インダストリアル・クラフツマンシップ。コーヒー器具メーカーとしての精密さ・道具感を、ミニマルなグレートーンと直線的なレイアウトで表現。派手さを排し、製品写真を主役にする設計
• 密度: 大判の製品写真を全幅で展開するショーケース型。テキスト情報は控えめで、余白と写真で語る構成
• キーワード: インダストリアル、グレートーン、シャープ、ミニマル、道具的精密さ
• 特徴: ページ背景がグレー #999999 という日本のブランドサイトとしては極めて珍しい配色。オリーブ/カーキ #a49e86 をアクセントに、border-radius: 0px を全コンポーネントに徹底。CTA はゴーストボタン（アウトラインのみ）で、塗りつぶしのプライマリ CTA を持たない。欧文には Questrial（ジオメトリック・サンセリフ）を使用し、道具としての精密さを演出

2. Color Palette & Roles

Primary (ブランドカラー)

• Olive / Khaki (#a49e86): ヘッダーユーティリティバー、サポートセクションの背景。唯一の有彩色アクセント。コーヒー豆・木材を連想させるアースカラー
• Page Gray (#999999): body 背景。工業製品のような無機質さを演出するブランドの基調色

Semantic (意味的な色)

• Error (#cc0000): フォームエラー（推定値。実サイトにフォームが少ないため標準値を採用）
• Warning (#cc8800): 警告・注意喚起（推定値）
• Success (#339933): 成功・完了（推定値）

Neutral (ニュートラル)

• Text Primary (#333333): 本文テキスト。純黒を避けたソフトな黒
• Text Secondary (#666666): 補足テキスト、説明文
• Text Tertiary (#888888): セクション見出し（トップページ）、ボーダー色と同系
• Text Light (#aaaaaa): フッターテキスト、コピーライト
• Text on Dark (#ffffff): ヒーロー・製品セクション上の白テキスト
• Border (#888888): "Read More" ボタンの枠線、区切り線
• Background Primary (#999999): ページ背景（body）
• Background Light (#eeeeee): ニュースセクション、ハンドドリップ案内の面色
• Background White (#ffffff): フッター、カードの背景
• Surface Warm (#eeece3): 検索入力欄の背景。わずかにクリーム寄りのウォームグレー
• Dark Overlay (rgba(0,0,0,0.2)): 製品写真オーバーレイ

Note: Kalita の配色はグレーのモノトーン + オリーブの2軸。鮮やかな原色は使わない。#a49e86 のオリーブ/カーキだけが有彩色のアクセントとして存在し、コーヒーの温もりを最小限に添える。

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: ヒラギノ角ゴ Pro W3 → メイリオ → ＭＳ Ｐゴシック。ヒラギノは "Pro"（ProN ではない）
• 明朝体: 使用なし

3.2 欧文フォント

• Questrial: Google Font のジオメトリック・サンセリフ。ヘッダーユーティリティ（"Go to Global site", "Online Shop"）、"Read More" CTA、フッター copyright に使用。道具的な精密さを表現
• フォールバック欧文: ヒラギノ角ゴ Pro W3 内蔵の欧文グリフ（明示的な欧文フォント指定なし）

3.3 font-family 指定

css/* 本文・見出し共通 — 和文ファースト */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

/* 欧文 CTA・ユーティリティ — Questrial を先頭に追加 */
font-family: Questrial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

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

• 和文フォントを先に指定する和文ファースト構成。ヒラギノ角ゴ Pro W3 の日本語名・英語名を両方記述して環境差を吸収
• Questrial は欧文テキスト（CTA、ユーティリティ、コピーライト）にのみ使用。和文本文には適用しない
• generic family は sans-serif で統一

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

Note: 見出しは weight 700、本文以下は weight 400 の2段階。ナビゲーション一部に weight 200（ライト）が使われている点が特徴的。

3.5 行間・字間

• 本文の行間 (line-height): 1.8（28.8px / 16px）。日本語として標準的なゆとり
• 見出しの行間: 1.0（line-height = font-size と同値）。見出しはタイトに詰める
• 本文の字間 (letter-spacing): normal（0）。字間調整なし
• 見出しの字間: 製品一覧ページの H1 のみ 2px（0.057em 相当）。それ以外は normal

ガイドライン:

• 見出しの line-height: 1.0 はかなりタイト。短い1行テキストを前提とした設計
• 字間は基本的に normal で、過度なトラッキングを避けるミニマルな方針
• "Read More" CTA の line-height: 3.875（62px / 16px）は、padding の代わりにテキストを垂直中央配置するためのテクニック

3.6 禁則処理・改行ルール

cssword-wrap: break-word;
overflow-wrap: break-word;

明示的な word-break や line-break の指定なし。ブラウザデフォルトに依存。

3.7 OpenType 機能

明示的な font-feature-settings の指定なし。

• palt: 未使用。字詰めなしでベタ組み
• kern: ブラウザデフォルトの auto に依存

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Ghost CTA (Read More)

• Background: transparent
• Text: #878787
• Border: 2px solid #888888
• Padding: 0（line-height: 62px で垂直中央配置）
• Border Radius: 0px
• Font: Questrial, 16px
• Font Weight: 400
• Hover: opacity 0.7（推定）

Outline (Footer / Dark BG)

• Background: transparent
• Text: #ffffff
• Border: 2px solid #ffffff
• Padding: 0（line-height: 87px で垂直中央配置）
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400

Utility (Header)

• Background: #a49e86
• Text: #ffffff
• Padding: 0px 12px
• Border Radius: 0px
• Font: Questrial, 12px
• Font Weight: 400
• Line Height: 34px（高さの代替指定）

Wave Series Label

• Background: transparent
• Text: #ffffff
• Border: 2px solid #ffffff
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400
• Line Height: 69px

Note: Kalita には塗りつぶしのプライマリ CTA がない。すべて ghost（アウトライン）ボタン。唯一の塗りつぶし要素はヘッダーのユーティリティリンク（#a49e86）で、これは CTA というよりナビゲーション要素。

Inputs

• Background: #eeece3（ウォームクリーム）
• Border: none（0px）
• Border Radius: 0px
• Font: Arial, 16px
• Line Height: 34px
• Focus Border: 推定 1px solid #a49e86

Cards

• Background: #ffffff または rgba(0,0,0,0.2) オーバーレイ
• Border: none
• Border Radius: 0px
• Padding: 可変
• Shadow: none（フラット）

Badges

明確なバッジコンポーネントなし。ラベルは <p> にボーダーで構成。

5. Layout Principles

Spacing Scale

Container

• Max Width: 960px（コンテンツ領域。製品写真は全幅可）
• Padding (horizontal): 20px

Grid

• 製品グリッド: フルスクリーン写真を中心とした1カラムメインビジュアル
• ニュース: 1カラムリスト
• フッター: 2カラム（ナビ + コーポレート情報）

6. Depth & Elevation

Note: Kalita のデザインは完全フラット。box-shadow を一切使わない。深度の表現は背景色の切り替え（#999999 → #eeeeee → #ffffff）と、写真オーバーレイ（rgba(0,0,0,0.2)）のみで行う。border-radius: 0px と合わせて、金属製のコーヒー器具のようなシャープで硬質な世界観を徹底。

7. Do's and Don'ts

Do (推奨)

• ページ背景は #999999 を維持する — Kalita のアイデンティティそのもの
• border-radius: 0px を徹底する — 角丸は一切使わない
• CTA はゴーストボタン（アウトライン）で統成する — 塗りつぶしボタンは避ける
• オリーブ #a49e86 はユーティリティ要素にのみ使う — 大面積やメイン CTA には使わない
• 欧文テキスト（CTA、ユーティリティ、コピーライト）には Questrial を適用する
• 製品写真を大きく使い、テキストは最小限にする
• 見出し line-height は 1.0 でタイトに詰める

Don't (禁止)

• ページ背景を白や淡色にしない — グレー #999999 が失われると世界観が崩壊する
• border-radius を 1px 以上にしない — 角丸はブランドの硬質さを壊す
• 塗りつぶしの CTA ボタンを作らない — Kalita は ghost button のみ
• 鮮やかな原色を使わない — モノトーン + オリーブの2軸を守る
• font-weight: 600 を使わない — 200, 400, 700 の3段階のみ
• 過度な影（box-shadow）を使わない — 完全フラットが原則
• Questrial を日本語テキストに適用しない — 和文はヒラギノ角ゴ Pro W3 を使う
• palt や letter-spacing を安易に追加しない — ベタ組みが基本

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px (WCAG 基準)
• ゴーストボタンは line-height でタップ領域を確保（62px〜87px）

フォントサイズの調整

• モバイルでは見出し 35px → 24px 程度に縮小
• 本文 16px は維持
• "Read More" の line-height を 62px → 48px 程度に縮小

9. Agent Prompt Guide

クイックリファレンス

Page Background: #999999
Olive Accent: #a49e86
Text Color: #333333
Text on Dark: #ffffff
Background Light: #eeeeee
Background White: #ffffff
Border: #888888
Body Font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif
English Font: Questrial, sans-serif
Body Size: 16px
Body Line Height: 1.8
Heading Weight: 700
Body Weight: 400
Border Radius: 0px (all elements)
CTA Style: ghost button (outline only, no fill)
Elevation: none (completely flat)

プロンプト例

Kalita のデザインシステムに従って、製品詳細ページを作成してください。
- ページ背景: #999999
- フォント: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
- 欧文 CTA: Questrial
- テキスト色: #333333（通常）, #ffffff（暗い背景上）
- border-radius: 0px を徹底（角丸なし）
- CTA は ghost button（border: 2px solid #888, 背景透明）
- ユーティリティ要素のアクセント: #a49e86
- 影は使わない（完全フラット）
- 製品写真を大きく使い、テキストは最小限に