graf（グラフ） DESIGN.md

graf / decorative mode no.3 design products Inc.（https://www.graf-d3.com/）のデザイン仕様書。 大阪を拠点とするクリエイティブ・コレクティブ。家具・プロダクト・食・デザイン・建築を横断して活動する。 実サイトの computed style 実測（2026-06-23 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ミニマルで余白の多い、ギャラリーのような editorial デザイン。白地に黒のワードマーク／ナビを基調に、手描き風のイラストレーションと極細ウェイト（100〜300）のタイポグラフィを組み合わせ、静かで作家性のあるトーンを作る
• graf について: graf（decorative mode no.3 design products Inc.）は大阪の老舗クリエイティブ・コレクティブ。家具・プロダクト・食・デザイン・建築までを横断的に手がけるため、サイトもジャンルを問わない「作品集／ポートフォリオ」的な構成になっている
• 密度: 余白を多くとり、コンテンツを詰め込まない。本文の line-height は 1.5〜2.0 と非常に広い。極細ウェイトのラベルと大胆な太字見出しのコントラストで階層を作る
• キーワード: ミニマル、アート／ギャラリー、極細ウェイト、余白、モノクローム＋チャコール、作家性、editorial
• 特徴:
  • 欧文は Inter、和文は Noto Sans JP、約物（句読点・括弧）は YakuHanJPs（半角化）で処理する
  • ウェイトを表現的に使い分ける: 繊細なラベル・本文には ultralight（100 / 200 / 300）、大型見出しには bold（700）まで。極細ウェイトの多用が graf のシグネチャー
  • 基本はモノクローム: 白地に黒（#1f1f1f / #000000）。"Who we are" 等のフィーチャーセクションはダークチャコール（#1f1f1f / #2f2f2f / #3f3f3f）に反転し、薄いグレー（#f1f1f1 / #bcbcbc）のテキストを乗せる
  • クリーム #fffbeb が唯一の暖色アクセント。柔らかいパネル／ハイライトとして少量だけ使う
  • CTA・ボタンは極端にミニマル。ベタ塗りの目立つ CTA はほぼ無く、黒テキストリンク・極細の枠線・ごく薄いチップが基本。抑制（restraint）そのものがアイデンティティ
  • ダークモード非対応（実測時点。ただしダークセクションが構造的に存在する）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。基本はモノクローム（白地に黒、フィーチャーは反転）。

Brand / Core

• Text / Logo Primary (#1f1f1f): ワードマーク・ナビ・本文の主要テキスト（白地）
• Pure Black (#000000): アクセント・図版・最も強い見出し
• Background (Main) (#ffffff): ページ背景・メインキャンバス

Dark Feature Sections（反転セクション）

Light Text on Dark（反転セクションのテキスト）

Neutral

Overlays

• Light Chip / Overlay: rgba(255, 255, 255, 0.05) — ダーク背景上のナビチップ・カテゴリラベルの極薄背景
• Dark Overlay: rgba(0, 0, 0, 0.04) — 白地上のごく薄い面・hover の地

Semantic（推奨値）

実サイトには明確なエラー／成功色は確認されなかった。モノクロームのトーンを崩さない範囲で推奨する補完値:

• Danger: #c0392b（くすんだレッド。彩度を抑えてトーンに馴染ませる）
• Success: #3f3f3f または #1f1f1f（チェック等は色ではなくテキスト／アイコンで表現する）

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: Noto Sans JP（Google Fonts）。weight 100 / 300 / 400 / 500 / 700 を表現的に使う
• 明朝体: 使用しない（サイト全体ゴシック統一）
• 約物処理: YakuHanJPs（半角約物）でフォントチェーンの先頭に置き、句読点・括弧を半角詰めにする

3.2 欧文フォント

• サンセリフ（メイン）: Inter（Google Fonts）。ultralight 100 から bold 700 まで全域を使う
• Inter / Noto Sans JP はいずれも Google Fonts で配信されているため、preview.html でも実フォントを再現できる（代替フォント注記は不要）

3.3 font-family 指定

css/* 全テキスト共通 */
font-family: YakuHanJPs, Inter, "Noto Sans JP", sans-serif;

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

• 先頭の YakuHanJPs が約物（、。「」（）等）だけを半角でレンダリングする
• 欧文・数字は Inter、和文本体は Noto Sans JP が担う
• いずれも未読み込み時は sans-serif に落ちる

代替フォント注記は不要: Inter・Noto Sans JP は Google Fonts で配信されているため、preview.html では実フォントをそのまま読み込む。

https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap

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

実測値（トップページ、2026-06-23 取得）。極細（100）〜太字（700）の広いウェイトレンジが核心。

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (14.4px): 2.0（非常に広い）／ 詰めた場合 1.5
• 小ラベル (12.6px): 1.43〜1.5
• 見出し H2 (32.4px): 1.1（タイト）
• 見出し H3 (27px): 1.2
• 小見出し H3 (18px): 1.4

字間 (letter-spacing) — 実測:

• 全テキスト normal。Inter / Noto Sans JP のメトリクスにそのまま委ねる。トラッキングを加えない

ガイドライン:

• ウェイトでメリハリを作る: ラベル・リードは 100〜300 の極細、見出しは 700。サイズよりウェイト差で階層を表現する
• 本文の line-height は 1.5〜2.0 と広めを保つ（余白の多いトーンに合わせる）
• letter-spacing は触らず normal のまま（graf のミニマルさは字間ではなく余白で出す）

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: normal;
overflow-wrap: break-word;

• YakuHanJPs により約物が半角詰めになるので、句読点・括弧周りの不自然な空きが抑えられる
• 英字ラベル（"Furniture / Products" 等）は white-space: nowrap で改行させない

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 約物の詰めは YakuHanJPs フォント自体が担うため、palt の明示有効化は不要（実測でも未採用）
• Inter のメトリクスをそのまま活かす

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

graf の UI は極端に低彩度・低クローム。ベタ塗りの大きな CTA は存在しない。以下は実測値＋それに整合する推奨セット。

Buttons / CTA

Nav / Category Chip（実測） — "Furniture / Products" 等

• Background: rgba(255, 255, 255, 0.05)（ダーク背景上）
• Text: #f1f1f1（Inter / Noto stack）
• Border: なし（または 0px solid）
• Border Radius: 1.8px（≒2px、ほぼ角）
• Padding: 3.6px 9px
• Font: 12.6〜14.4px / weight 200〜300
• 極めて控えめ。ほぼ塗りのないチップ

Primary Text Link（白地・推奨）

• Background: transparent
• Text: #1f1f1f
• Border-bottom（hairline）: 1px solid #1f1f1f
• Padding: 0 0 2px
• Font: 14.4px / weight 400
• 黒テキスト＋極細アンダーラインが基本の「ボタン」

Solid Button（強調用・推奨） — 強調が必要なときだけ

• Background: #1f1f1f
• Text: #ffffff
• Border: なし
• Border Radius: 2px（ほぼ角）
• Padding: 10px 24px
• Font: 14.4px / weight 400〜500
• 多用しない。1 画面に 1 つ程度

Outline Button（推奨）

• Background: transparent
• Text: #1f1f1f
• Border: 1px solid #1f1f1f（hairline）
• Border Radius: 2px
• Padding: 10px 24px

要点: 実サイトは「ほぼ見えない／低クローム」なインタラクションを好む。派手なベタ塗り CTA は graf らしさを壊す。

Inputs

Text Input（推奨）

• Background: transparent または rgba(0,0,0,0.04)
• Border: なし／1px solid #1f1f1f（下線のみも可）
• Border Radius: 2px
• Padding: 8px 0（下線スタイル）/ 8px 12px（枠スタイル）
• Font: 14.4px / weight 300〜400

Cards / Surfaces

Work Card（推奨）

• Background: #ffffff（白地）
• Border: なし（影なし）
• 画像＋極細ラベルのみ。罫線・影で囲わず余白で区切る
• タイトル: 18px / weight 500、キャプション: 12.6px / weight 200 / #9c9c9c

Cream Panel

• Background: #fffbeb
• Padding: 40px
• Border Radius: なし／2px
• 唯一の暖色面。引用・ハイライト・特集に少量だけ使う

Feature Section（ダーク反転）

• Background: #1f1f1f（または #2f2f2f / #3f3f3f）
• 見出し: #bcbcbc / #f1f1f1、本文: #bcbcbc
• ナビチップ: rgba(255,255,255,0.05) 背景 + #f1f1f1 テキスト
• 白地セクションとのコントラストそのものが立体感（影は使わない）

5. Layout Principles

Spacing Scale（推奨 8px グリッド／余白多め）

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 20px / desktop 32〜48px
• 中央寄せのコンテンツと、左寄せ／非対称な配置を混在させる

Border Radius Scale

• graf はほぼ角（radius を立てない）。pill / 大きな丸みは使わない

Grid

• Columns: 推奨 12 カラム（実装は Flexbox / CSS Grid）
• Gutter: 24〜32px
• 画像・イラスト先行の非対称グリッド。余白を大胆にとる
• ワークカード: 3列（desktop）→ 2列（tablet）→ 1列（mobile）

6. Depth & Elevation

• graf は基本的に影を使わない（フラット）
• 立体感・奥行きは 白地 ↔ ダークチャコール（#1f1f1f〜#3f3f3f）のセクションコントラストと、クリーム #fffbeb のパネルで表現する
• どうしてもポップオーバー等で影が必要な場合のみ、ごく薄い 0 2px 8px rgba(0,0,0,0.08) を推奨（多用しない）

7. Do's and Don'ts

Do（推奨）

• フォントは YakuHanJPs, Inter, "Noto Sans JP", sans-serif のチェーンで統一する
• ウェイトでメリハリを作る: ラベル・リードは 100〜300 の極細、見出しは 700
• 本文の line-height は 1.5〜2.0 と広めを保ち、余白を大胆にとる
• 基本は白地に黒（#1f1f1f）。フィーチャーセクションはダークチャコールに反転し #f1f1f1 / #bcbcbc を乗せる
• 暖色は クリーム #fffbeb のみ、少量のパネル／ハイライトに使う
• ボタン・CTA は低クロームに保つ（黒テキストリンク・極細枠・薄いチップ）。強調が必要なときだけ #1f1f1f ソリッドを 1 つ
• radius は 0〜2px（ほぼ角）。立体感は影ではなくセクションコントラストで出す

Don't（禁止）

• letter-spacing を加えない（normal のまま。字間ではなく余白で間（ま）を作る）
• 派手なベタ塗りの大型 CTA を置かない（graf の抑制されたトーンを壊す）
• pill（大きな丸み）や強い角丸を使わない（radius は 0〜2px）
• 影を多用しない（基本フラット。奥行きは白／チャコールのコントラストで）
• クリーム以外の彩度の高い色を持ち込まない（モノクローム＋チャコールが基調）
• 本文に line-height: 1.4 以下を使わない（詰まりすぎて静謐さが失われる）
• 見出しを細いウェイトだけで済ませない（ラベルは細く、見出しは 700 でコントラストを作る）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Hero / H2: 32.4px → 24〜26px（weight 700 は維持）
• H3 (large): 27px → 20px
• 本文 14.4px・line-height 2.0 は維持（詰める場合のみ 1.6）
• ワークカード: 3列 → 2列 → 1列
• セクション間余白は XXL → XL に縮める

タッチターゲット

• テキストリンク: クリック領域 最小 44px 高さを確保
• ソリッド／アウトラインボタン: 高さ 40px 以上（padding 10px 24px）
• ナビチップ: 高さ 32px 以上

ダークモード

• 該当なし（実測時点で未対応。ただしダークフィーチャーセクションが構造的に存在する）

9. Agent Prompt Guide

クイックリファレンス

Text / Logo Primary: #1f1f1f
Pure Black: #000000
Background (Main): #ffffff

Dark Feature BG: #1f1f1f / #2f2f2f / #3f3f3f
Light on Dark (heading/link): #f1f1f1
Light on Dark (body): #bcbcbc
Mid Grey (sub): #9c9c9c
Cream Accent (panel): #fffbeb

Light Chip / Overlay: rgba(255,255,255,0.05)
Dark Overlay: rgba(0,0,0,0.04)

Font: YakuHanJPs, Inter, "Noto Sans JP", sans-serif
Google Fonts: Inter wght@100;200;300;400;500;600;700 / Noto Sans JP wght@100;300;400;500;700

Hero / Section H2: Inter 32.4px / weight 700 / line-height 1.1 / normal / #1f1f1f
H3 large: Inter 27px / weight 700 / line-height 1.2
H3 small: Inter 18px / weight 500-600 / line-height 1.4
Small Label (ultralight): Inter 12.6px / weight 200 / line-height 1.43
Body: 14.4px / weight 300-400 / line-height 2.0 (compact 1.5) / normal / #1f1f1f
Lead (ultralight): Inter 12.6px / weight 100 / #9c9c9c
letter-spacing: normal（全域）

Nav Chip: bg rgba(255,255,255,0.05) / text #f1f1f1 / radius 1.8px / padding 3.6px 9px
Primary action: 黒テキストリンク + hairline underline（低クローム）
Solid (強調用のみ): bg #1f1f1f / white / radius 2px / padding 10px 24px
Radius: 0-2px（ほぼ角・pill 禁止）
Shadow: none（基本フラット。奥行きは白/チャコールのコントラストで）

プロンプト例

graf（decorative mode no.3 design products Inc.）のデザインシステムに従って、
クリエイティブ・コレクティブの作品紹介セクションを作成してください。
- フォント: YakuHanJPs, Inter, "Noto Sans JP", sans-serif（Google Fonts の Inter + Noto Sans JP を読み込む）
- ウェイトを表現的に使う: ラベル・リードは weight 100〜300（極細）、見出しは weight 700
- セクション大見出し H2: Inter 32.4px / weight 700 / line-height 1.1 / letter-spacing normal / color #1f1f1f
- 小見出し H3: 18px / weight 500-600 / line-height 1.4
- 極小ラベル: 12.6px / weight 200（ultralight）/ color #9c9c9c
- 本文: 14.4px / weight 300-400 / line-height 2.0 / letter-spacing normal / color #1f1f1f
- 基本は白地（#ffffff）に黒（#1f1f1f）。"Who we are" などのフィーチャーセクションは
  ダークチャコール背景（#1f1f1f / #2f2f2f / #3f3f3f）に反転し、#f1f1f1 / #bcbcbc のテキストを乗せる
- 暖色アクセントはクリーム #fffbeb のみ。引用やハイライトに少量だけ使う
- ナビ／カテゴリラベルは低クロームのチップ（bg rgba(255,255,255,0.05) / radius 1.8px / padding 3.6px 9px）
- CTA は低クロームに保つ: 黒テキストリンク + 極細アンダーライン。強調が必要なときだけ #1f1f1f ソリッド（radius 2px）
- border-radius は 0〜2px（ほぼ角）。pill・大きな丸みは使わない
- letter-spacing は normal（字間を触らず、余白でリズムを作る）
- box-shadow は使わない（フラット。奥行きは白とチャコールのセクションコントラストで表現）
- 余白を大胆にとり、画像・イラスト先行の非対称グリッドで構成する