HASAMI PORCELAIN DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 取得日: 2026-05-08 / 出典: https://www.hasami-porcelain.com/

1. Visual Theme & Atmosphere

• デザイン方針: 極限のミニマリズム。タイポグラフィのみでブランドの世界観を構築する建築的アプローチ。装飾要素・カラー・ボタン・シャドウは一切使用しない
• 密度: 極めて低い。余白を贅沢に使い、写真とテキストだけで構成するデジタルルックブック型
• キーワード: モノクローム、建築的、コンデンスド、静謐、プロダクトファースト
• デザイナー: 篠本拓宏（HASAMI PORCELAIN のモジュラー食器シリーズをデザイン）
• サイトの性格: ポートフォリオ/カタログ型。ECやSaaSではなく、ブランドの世界観を伝えるショーケース

2. Color Palette & Roles

完全なモノクロームパレット。ブランドカラー・アクセントカラーは存在しない。

Primary（ブランドカラー）

• Primary (#000000): 純黒。テキスト・ナビゲーション・すべてのUI要素に使用。ブランドカラーそのものが黒
• Primary Dark: 該当なし（黒より暗い色は存在しない）

Semantic（意味的な色）

該当なし。エラー・警告・成功などのセマンティックカラーはサイト上に存在しない（静的カタログサイトのため）

Neutral（ニュートラル）

• Text Primary (#000000): 全テキスト。純黒のみ使用
• Text Secondary: 該当なし（テキストの濃淡による階層分けを行わない）
• Border: 該当なし（visible なボーダーは使用しない）
• Background (#ffffff): ページ背景。純白
• Surface (#ffffff): カード等の面。背景と同色

3. Typography Rules

3.1 和文フォント

• ゴシック体: 太ゴB101（モリサワ）— TypeSquare Webフォントサービス経由で配信。日本語の太ゴシック書体で、力強くも端正な印象
• フォールバック: 游ゴシック体, YuGothic, 游ゴシック, Yu Gothic, メイリオ, sans-serif

3.2 欧文フォント

• サンセリフ（コンデンスド）: UniversLTStd-BoldCn — Adrian Frutiger 設計のスイスモダニズム書体。Bold Condensed バリアントで、凝縮された力強さと端正さを両立
• Google Fonts 代替: Roboto Condensed（700 weight）— Univers Bold Condensed に近い凝縮感を再現

3.3 font-family 指定

css/* 見出し・ナビゲーション（欧文優先） */
font-family: "UniversLTStd-BoldCn", "太ゴB101", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

/* 本文（TypeSquare Webフォント） */
font-family: "太ゴB101", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

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

• 欧文は Univers Bold Condensed を先に指定し、日本語グリフのみ太ゴB101にフォールバック
• 太ゴB101 は TypeSquare 経由の Webフォント。ドメインライセンスのため preview.html では表示不可
• Univers BoldCn も Adobe Fonts / ライセンス制のため、Google Fonts では Roboto Condensed 700 で代替
• 太ゴB101 の代替は Noto Sans JP 700（モリサワ系ではないが、ウェイトと字面が近い）

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

重要: すべてのウェイトが 400 だが、UniversLTStd-BoldCn はフォントファミリー名自体が Bold Condensed バリアントを指定しているため、実際のレンダリングは太い凝縮体になる

3.5 行間・字間

• 本文の行間 (line-height): 2.0（日本語本文。十分な読みやすさを確保）
• 見出しの行間: 1.8（サイト全体でほぼ統一されたリズム）
• ナビサブの行間: 1.42（サブナビゲーションのみやや詰まる）
• 本文の字間 (letter-spacing): 0.03em（日本語本文。控えめなトラッキング）
• 見出しの字間: 0.07em（欧文見出し。広めのトラッキングで建築的な印象）
• コピーライトの字間: 0.1em（最も広いトラッキング。サイト下部の小さなテキスト）

特徴:

• サイト全体で line-height: 1.8 がほぼ統一値として使われている（本文の 2.0 とナビサブの 1.42 を除く）
• letter-spacing は全テキストに適用されている（0.03em〜0.1em）。字間ゼロのテキストは存在しない
• この広いトラッキングがサイト全体の「建築的な静けさ」を生み出している

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

css/* palt の明示的な適用は確認されていない */
/* Univers Bold Condensed は元々コンデンスド書体のためカーニング調整は不要 */
font-feature-settings: normal;

• palt: 未適用。太ゴB101 はプロポーショナル字詰めなしで使用
• kern: Univers Bold Condensed は元々タイトなスペーシングのため追加カーニング不要

3.8 縦書き

該当なし

4. Component Stylings

Buttons

該当なし。サイト上にボタンコンポーネントは存在しない。ナビゲーションはすべてテキストリンクで構成

Text Links（テキストリンク — 事実上の唯一のインタラクティブ要素）

• Color: #000000
• Font: UniversLTStd-BoldCn / 太ゴB101
• Text Decoration: none（下線なし）
• Hover: 不明（computed style からは取得不可）

Inputs

該当なし。フォーム要素は確認されていない

Cards

該当なし。カードコンポーネントは存在しない。コンテンツは写真とテキストの直接配置

5. Layout Principles

Spacing Scale

明示的なスペーシングトークンは存在しない。余白は写真と文字のバランスで決定される、感覚的・建築的なアプローチ

Container

• Max Width: 不明（フルブリード写真とテキストが混在）
• 全体的に寛大な余白を使用

Grid

• Columns: 不明（従来のグリッドシステムではなく、写真中心のレイアウト）
• 写真は大きくフルブリードに近い表示、テキストは控えめに配置

6. Depth & Elevation

完全にフラットなデザイン。エレベーション・シャドウ・グラデーションは存在しない。奥行きは写真の明暗のみで表現

7. Do's and Don'ts

Do（推奨）

• 色は黒と白のみを使用する。グレーも含めない
• letter-spacing をすべてのテキストに適用する（0.03em〜0.1em）
• line-height は 1.8 を基本値とする
• 余白を惜しまず使い、写真に語らせる
• テキストは最小限にとどめ、情報密度を低く保つ
• 見出しにはコンデンスド書体を使い、凝縮感と緊張感を出す

Don't（禁止）

• カラーを追加しない。アクセントカラーも含め、一切の色彩を使わない
• ボタンコンポーネントを作らない。インタラクションはテキストリンクのみ
• シャドウ・グラデーション・ボーダーを使わない
• テキストの weight を変えない。Univers BoldCn + weight: 400 の組み合わせを守る
• テキストを詰め込まない。1画面に多くの情報を載せない
• 装飾的な要素（アイコン・バッジ・タグ等）を追加しない

8. Responsive Behavior

Breakpoints

具体的なブレイクポイント値は抽出データから確認されていない。以下は一般的な推定：

タッチターゲット

• テキストリンクのみのため、リンク周辺に十分なパディングを確保する

フォントサイズの調整

• Hero Title 26px は小さめのため、モバイルでも大きな縮小は不要
• 基本テキスト 12–13px はモバイルでは 14px 程度に拡大を推奨

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #000000 (黒のみ)
Text Color: #000000
Background: #ffffff
Heading Font: "UniversLTStd-BoldCn", "太ゴB101", "游ゴシック体", "YuGothic", sans-serif
Body Font: "太ゴB101", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif
Body Size: 13px
Line Height: 1.8 (統一値) / 2.0 (本文)
Letter Spacing: 0.03em–0.07em (全テキスト)
Buttons: なし（テキストリンクのみ）
Shadows: なし
Border: なし

プロンプト例

HASAMI PORCELAIN のデザインシステムに従って、商品カタログページを作成してください。
- カラー: 黒(#000000)と白(#ffffff)のみ。グレーも使わない
- 見出しフォント: Roboto Condensed 700（Univers BoldCn 代替）
- 本文フォント: Noto Sans JP（太ゴB101 代替）
- 全テキストに letter-spacing: 0.07em（見出し）/ 0.03em（本文）を適用
- line-height: 1.8 を基本に、本文は 2.0
- ボタンは使用しない。リンクはテキストリンクのみ
- シャドウ・ボーダー・装飾要素は一切使わない
- 余白を贅沢に使い、写真を大きく配置する