DRAFT（ドラフト） DESIGN.md

DRAFT（ドラフト / https://www.draft.co.jp/）のデザイン仕様書。 宮田識が率いるブランディング／デザイン会社。CIBONE、D-BROS などのプロダクトや、数多くの企業ブランディングを手がける制作会社のコーポレートサイト。 最大の特徴は 黒（#000000）のフルスクリーン・ヒーローと白（#ffffff）の作品グリッドという徹底したモノクロームの対比、高コントラストなディスプレイ・セリフ（PPEiko）の英字見出し と グロテスク・サンセリフ（Graphik）＋游ゴシック Pr6N の和欧混植、そして border-radius: 25px の "破線（dashed）pill" カテゴリーフィルター という、極めてミニマルでギャラリー的な構成。 実サイトの computed style 実測（2026-06-29 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 黒と白だけで構成する、ギャラリーのようなミニマリズム。トップのファーストビューは黒一色（#000000）のフルスクリーンに白の英字ディスプレイ見出しを置き、スクロールすると白地（#ffffff）の作品グリッドが続く。色で語らず、作品（写真）と余白とタイポグラフィで語る、制作会社らしい禁欲的な編集設計
• DRAFT について: 宮田識デザイン事務所として 1978 年創業。広告・ブランディング・空間・プロダクト（D-BROS）・店舗（CIBONE）など領域横断で「ブランド」をつくる会社。サイト自体が作品ポートフォリオであり、UI は作品を引き立てる「額縁」に徹する
• 密度: 低〜中密度。大きな余白、フルブリードの作品サムネイル、最小限の文字。情報を詰め込まず、1 つ 1 つの作品にスペースを与える
• キーワード: モノクローム、黒ヒーロー／白グリッド、ギャラリー、ハイコントラスト・セリフ（PPEiko）、Graphik、游ゴシック Pr6N、dashed pill フィルター、余白、editorial
• 特徴:
  • ヒーローは黒一色 #000000・テキストは白 #ffffff。section.p-top-fv とその中の .cover 群がビューポート上部をフルに黒で覆う（実測 viewportTopByArea / 12 点サンプルすべて黒）
  • 本文・作品グリッド領域は白 #ffffff（html / body 実測）。グレーの面（#efefef、出現 count 18）を補助サーフェス（プロジェクト一覧ブロック等）に使う
  • 見出しは 2 系統。英字ディスプレイは PPEiko-Light（ハイコントラストなセリフ、weight 300、palt）。和文・英字本文は Graphik ＋ 游ゴシック Pr6N（MFW-YuGoPr6N）の混植、本文ベースは ヒラギノ角ゴ ProN
  • font-feature-settings: "palt" は Graphik / PPEiko / 游ゴシック系の要素に適用。一方、ベースの ヒラギノ角ゴ ProN（body / a / li）は normal（palt なし）。palt はグローバルではなく書体・要素ごとに使い分けられている
  • CTA・カテゴリーフィルターは 破線（1px dashed #000000）の pill 形状（radius 25px）。塗りを持たない、線だけの上品なボタンが DRAFT の象徴的 UI
  • リンクは下線アニメーション（js-underlineBtn / js-simpleLine-hover）が基本。塗りボタンはほぼ使わない

2. Color Palette & Roles

実サイトの computed style 実測値。基調は黒（ヒーロー）と白（コンテンツ）の徹底したモノクローム。すべて hex 表記。

Brand / Core

• Black (Hero) (#000000): ファーストビュー背景・反転面の基調色。section.p-top-fv / .cover がフルスクリーンを覆う。CSS 変数 --wp--preset--color--black。テキスト主色も黒
• White (Surface) (#ffffff): ページ背景・作品グリッド・フッターの地色（html / body 実測）。CSS 変数 --wp--preset--color--white。ヒーロー上のテキスト色でもある
• Teal Accent (#006790): ごく稀に現れるアクセント（rgb(0,103,144)、出現 count 1）。リンクホバー等のワンポイント。多用しない

Surface / Gray

Text

• Text Primary (#000000): 白地での本文・見出しの基本テキスト
• On Dark (#ffffff): 黒ヒーロー・反転面上のテキスト

Semantic

• DRAFT は制作会社のポートフォリオ型サイトのため、エラー／警告／成功などのセマンティックカラーは UI 上ほぼ使用されない。フォーム等で必要な場合は下記を推奨値とする
  • Error: #cf2e2e（WordPress プリセット --wp--preset--color--vivid-red）
  • Link / Info: #006790（上記 Teal Accent）

3. Typography Rules

実サイトは英字ディスプレイに PPEiko-Light（Pangram Pangram のハイコントラスト・セリフ）、和欧混植本文に Graphik ＋ 游ゴシック Pr6N（MFW-YuGoPr6N、モリサワ）、ベース本文に ヒラギノ角ゴ ProN を使う。 PPEiko / Graphik / 游ゴシック Pr6N は商用ライセンスのため preview.html では表示できない。代替は後述。

3.1 和文フォント

• ゴシック体（見出し・強調）: 游ゴシック Pr6N Medium / Bold（MFW-YuGoPr6N-Medium / MFW-YuGoPr6N-Bold、モリサワ）— Graphik とセットで指定される和欧混植チェーンの和文側
• ゴシック体（ベース本文）: ヒラギノ角ゴ ProN（"Hiragino Kaku Gothic ProN"）— body / リンク / リスト等の基本テキスト
• 明朝体: 使用しない（見出しのセリフ感は欧文 PPEiko が担う）

3.2 欧文フォント

• ディスプレイ・セリフ: PPEiko-Light（PPEiko-Light、weight 300）— 黒ヒーローの英字大見出し（"A Proposal for a New Yokohama Lifestyle" 等）。ハイコントラストなモダンセリフ
• 本文・ラベル サンセリフ: Graphik（GraphikMedium / GraphikSemibold）— 英字見出し・カテゴリーラベル・ボタンテキスト。Commercial Type の端正なグロテスク

3.3 font-family 指定

css/* ベース本文（実測 body） */
font-family: "Hiragino Kaku Gothic ProN";   /* 実サイトはこの単独指定。下記の堅牢なチェーン推奨 */
/* 推奨フォールバック */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
  "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;

/* 和欧混植 見出し・ラベル（実測 h3 / a / p） */
font-family: GraphikMedium, MFW-YuGoPr6N-Medium, sans-serif;   /* Medium */
font-family: GraphikSemibold, MFW-YuGoPr6N-Bold, sans-serif;   /* Semibold/Bold */

/* 英字ディスプレイ見出し（実測 h2 / span） */
font-family: PPEiko-Light, sans-serif;

• 混植の考え方: 英字を Graphik、和文を 游ゴシック Pr6N に振り分ける和欧混植。欧文を先に書き、和文グリフを後段の MFW-YuGoPr6N-* で受ける（欧文の表情を優先する制作会社らしい指定順）
• ベース本文は実サイトでは "Hiragino Kaku Gothic ProN" 単独指定だが、環境依存を避けるため上記の堅牢なフォールバックチェーンを推奨する

preview.html での代替フォント:

• PPEiko-Light（ハイコントラスト・モダンセリフ、weight 300）→ Playfair Display（高コントラストなディスプレイセリフ。weight 400/700 を使用）
• Graphik（端正なグロテスク・サンセリフ）→ Inter（同系統のニュートラルなグロテスク。weight 500/600）
• 游ゴシック Pr6N / ヒラギノ角ゴ ProN（和文）→ Zen Kaku Gothic New（字面の端正な和文ゴシック。weight 400/500/700）

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

• 実サイトは ウェイトを書体名で持つ（PPEiko-Light = 300、GraphikMedium / GraphikSemibold）。CSS の font-weight は 300〜400 に見えるが、視覚的な太さの差は 書体ファミリーの切り替えで作っている点に注意
• 見出しを大きな数値ウェイトで太らせず、サイズ・書体・余白で階層を作る。制作会社らしい抑制的なタイポグラフィ
• Display 見出しはレスポンシブで大きく拡大される（実測の 24px は縮小ビューポート時の値。デスクトップではより大きい）

3.5 行間・字間

• 本文の行間 (line-height): 1.0〜1.5。作品名 .ttl は約 1.25（20px / 16px）。短い見出しは行高＝サイズ（1.0）に詰める
• ディスプレイ見出しの行間: 約 1.5（36px / 24px）。大きな英字セリフをゆったり積む
• 本文の字間 (letter-spacing): 基本 normal。ベースのヒラギノ本文は字詰めしない
• ディスプレイ見出しの字間: 0.6px（24px 基準で ≈0.025em）。わずかに開けて上品に見せる

ガイドライン:

• 英字ディスプレイ（PPEiko）は letter-spacing を ≈0.025em とごく控えめに開け、palt を併用する
• 和文ベース本文（ヒラギノ）は letter-spacing: normal・palt なしのベタ組みが基準。詰めすぎない
• 行間は短い見出しで 1.0、複数行の本文・タイトルで 1.25〜1.5 を使い分ける

3.6 禁則処理・改行ルール

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

• 行頭禁止: ）」』】、。・：；？！
• 行末禁止: （「『【

3.7 OpenType 機能

css/* Graphik / PPEiko / 游ゴシック Pr6N 系の見出し・ラベル・ボタンに適用 */
font-feature-settings: "palt";

/* ベースのヒラギノ角ゴ ProN（body / a / li）は適用しない */
font-feature-settings: normal;

• 重要: DRAFT は palt を グローバルには適用していない。palt が効くのは Graphik / PPEiko / 游ゴシック Pr6N を使う見出し・タイトル・ラベル・ボタン。一方、ベースの "Hiragino Kaku Gothic ProN"（body / リンク / リスト）は normal（ベタ組み）。書体と要素ごとに使い分けるのが DRAFT 流
• 見出し・カテゴリーラベルなど短く密度を上げたい箇所で palt、長い本文ではベタ組み、という設計意図

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

Buttons

DRAFT の象徴は 塗りのない「破線（dashed）pill」。カテゴリーフィルターやリンクボタンに使う。塗りボタンはほぼ用いない。

Primary（破線 pill フィルター） — カテゴリーフィルター（"ALL" / "Architecture" / "Interior" 等）

• Background: transparent
• Text: #000000
• Border: 1px dashed #000000
• Padding: 16px 24px
• Border Radius: 25px（pill）
• Font: Graphik Medium / 16px / palt

On Dark（ヒーロー上・テキストリンク） — .l-viewbtn 等

• Background: transparent
• Text: #ffffff
• Border: なし（下線アニメーション js-underlineBtn）
• Font: ヒラギノ角ゴ ProN / 16px / 400

Text Link（白地・下線ホバー） — .all js-simpleLine-hover

• Background: transparent
• Text: #000000
• Border: なし（ホバーで下線がスライドイン）
• Font: Graphik Medium / 16px / palt（"See All Journal" 等）

注: 実サイトには明確な「塗りの primary CTA」が存在しない。塗りが必要な場合は 黒地（#000000）＋白文字（#ffffff） または 白地＋黒文字＋黒の dashed/solid 枠 を推奨。pill（radius 25px）を基本形状とする

Inputs

実サイトにフォーム要素の露出が少ないため、ブランドのトーンに合わせた推奨値。

• Background: #ffffff
• Border: 1px solid #000000（DRAFT は線を黒で引く。グレー枠より黒の細線が世界観に合う）
• Border (focus): 1px solid #000000 ＋ box-shadow: 0 0 0 2px rgba(0,0,0,0.12)
• Border Radius: 0px（角を立てるミニマル指向。pill にするならボタンに合わせ 25px）
• Padding: 12px 14px
• Font Size: 16px
• Font Family: ヒラギノ角ゴ ProN 系（本文チェーン）

Cards

作品サムネイルが主役。カードは枠線・影を持たず、写真＋最小限のテキストで構成する。

• Background: #ffffff
• Border: なし（または下罫 1px solid #efefef）
• Border Radius: 0px（写真は角を立てる。フルブリード気味に大きく見せる）
• Padding: テキスト部のみ（写真は full-bleed）
• 構成: 大きな作品写真 → カテゴリーラベル（Graphik 11px）→ 作品タイトル（Graphik Semibold 16px）の順
• ホバー: 写真に rgba(0,0,0,0.40) の暗幕＋「View」テキストをフェードイン（js-thumbhover）
• Shadow: 基本なし（Depth & Elevation 参照）

5. Layout Principles

Spacing Scale

WordPress プリセット（--wp--preset--spacing--*）を rem→px 換算（16px 基準）した値をベースに整理。

• フッターは padding: 180px 0 24px と、セクション間に大きな余白を取る。「余白で語る」DRAFT らしい設計

Container

• Max Width: 約 1280px（作品グリッドはより広く、フルブリード気味）
• Padding (horizontal): 24〜40px

Grid

• Columns: 作品グリッドは 2〜3 カラム
• Gutter: 16〜24px
• 大きな余白と full-bleed のサムネイルで、ギャラリーのように作品を並べる

6. Depth & Elevation

DRAFT は影をほぼ使わない。黒／白の面の対比と余白で奥行きを作るフラット設計。必要時のみ WordPress プリセットの shadow を流用できる。

• 原則は 影なし。影で立体を作るより、黒い面・白い面・余白で階層を表現する

7. Do's and Don'ts

Do（推奨）

• ファーストビューは黒一色 #000000 ＋白文字でギャラリーのように見せる
• コンテンツ領域は白 #ffffff を基調にし、補助面にだけグレー #efefef を使う
• 英字ディスプレイ見出しは PPEiko-Light（ハイコントラスト・セリフ、代替 Playfair Display）で組む
• 和欧混植は Graphik（英字）＋ 游ゴシック Pr6N（和文）、ベース本文はヒラギノ角ゴ ProN
• palt は見出し・ラベル・ボタン（Graphik / PPEiko 系）にのみ適用し、ベースのヒラギノ本文はベタ組み（normal）にする
• ボタン・フィルターは 塗りのない破線 pill（1px dashed #000000 / radius 25px） を基本にする
• 大きな余白を取り、作品写真を主役にする

Don't（禁止）

• カラフルなブランドカラーを足さない（黒・白・グレーのモノクロームが DRAFT の個性。Teal #006790 はごくワンポイントのみ）
• palt を全要素にグローバル適用しない（ベース本文＝ヒラギノはベタ組みが正）
• 見出しを極太ウェイトで主張させない（太さは書体ファミリーの切り替えで、控えめに）
• 塗りつぶしの派手な CTA を多用しない（線・下線アニメーション・dashed pill が基調）
• 角丸を多用しない（カード・入力は角を立てる。pill 形状はボタン／フィルターに限定）
• 和文フォントを 1 つだけ指定しない（必ずヒラギノ → 游ゴシック → メイリオのチェーンを書く）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。dashed pill は padding 16px 24px で十分な高さを確保

フォントサイズの調整

• 英字ディスプレイ見出しはデスクトップで大きく、モバイルで縮小する（実測 24px は縮小時の値）
• 和文本文はモバイルでも 14〜16px を保つ

9. Agent Prompt Guide

クイックリファレンス

Hero Background: #000000 (Black) / Text on Hero: #ffffff
Content Background: #ffffff (White) / Surface Gray: #efefef
Text Primary: #000000
Accent (sparingly): #006790 (Teal)
英字ディスプレイ Font: PPEiko-Light, sans-serif  /* 代替: "Playfair Display" weight 300/400 */
和欧混植 Font: GraphikMedium, MFW-YuGoPr6N-Medium, sans-serif  /* 代替: "Inter" + "Zen Kaku Gothic New" */
ベース本文 Font: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", sans-serif
Body Size: 16px / Line Height: 1.0–1.5 / Letter Spacing: normal（本文）, 0.025em（ディスプレイ）
OpenType: 見出し・ラベルに font-feature-settings: "palt" / ベース本文は normal
Button: 破線 pill — 1px dashed #000000 / radius 25px / padding 16px 24px / transparent
Radius: 0px (cards/inputs) / 25px (buttons・filters)

プロンプト例

DRAFT のデザインシステムに従って、デザイン会社の作品ポートフォリオページを作成してください。
- ファーストビューは黒一色 #000000 のフルスクリーン＋白文字。スクロール後のコンテンツは白地 #ffffff
- カラフルな色は足さない（モノクローム基調。Teal #006790 はごくワンポイントのみ）
- 英字大見出しは PPEiko-Light（ハイコントラスト・セリフ、代替 Playfair Display）で letter-spacing 0.025em / palt
- 和欧混植は Graphik（英字）＋ 游ゴシック Pr6N（和文）、ベース本文はヒラギノ角ゴ ProN（palt なし・ベタ組み）
- カテゴリーフィルター・ボタンは塗りのない破線 pill（1px dashed #000000 / radius 25px / padding 16px 24px）
- カードと入力欄は角を立てる（radius 0px）。影は使わず、余白と黒白の対比で階層を作る
- 作品写真を大きく主役にし、テキストは最小限。ホバーで rgba(0,0,0,0.4) の暗幕＋「View」を出す