Whatever（ホワットエバー） DESIGN.md

Whatever Inc.（https://whatever.co/ja/）のデザイン仕様書。 川村真司らが率いる東京・ニューヨーク・台北・ベルリンのクリエイティブスタジオ。"Make whatever. Rules, whatever." を掲げ、広告・プロダクト・空間・映像を横断してつくる。 最大の特徴は、純白の地に純黒の Apercu Bold を極端に大きく置き（実測 151px = 10.5vw）、角丸も影も一切使わないこと。彩度は本文にはまったく無く、9 色の蛍光的なブランドカラーを 2 色ずつ組んだ oklab グラデーションとして、ノイズテクスチャ（noise.png）と重ねて帯・文字マスクにだけ現れる。 和文は Noto Sans JP。ただし和文リード文は font-weight: 700／line-height: 2.31 という、太くて行間が極端に広い組み方を採る。 実サイトの computed style 実測（2026-08-09 取得。日本語トップ＋Work 詳細ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白と黒とタイポグラフィだけの骨格に、グラデーションを差す。UI パーツは限りなく少なく、角丸ゼロ・影ゼロ・枠線は 1px のみ。情報の階層は文字サイズの極端なジャンプ（12px ⇄ 151px）で作る
• Whatever について: 「考えて作る」を掲げるクリエイティブスタジオ。サイト自体が作品のショーケースで、Work のサムネイルが主役。UI は徹底して黒子に徹する
• 密度: 低密度・全画面。max-width を持つコンテナがほぼ存在せず、要素は全幅にブリードする。1 セクション 1 メッセージ
• キーワード: 純白 #ffffff × 純黒 #000000、Apercu Bold の巨大見出し、10.5vw、radius 0、影ゼロ、9 色の蛍光グラデーション＋ノイズ、和文は Noto Sans JP Bold
• 特徴:
  • 欧文は Apercu、和文は Noto Sans JP。font-family: Apercu, "Noto Sans JP", sans-serif の 1 スタックを全要素で使い回し、欧文優先で並べる（欧文グリフは Apercu、和文は Noto Sans JP が受け持つ）
  • html { font-size: 10px } が rem の基準。--font-size-ja: 1.5rem（15px）／ --font-size-en: 1.7rem（17px）という 2 つだけの CSS 変数で言語別の本文サイズを持つ
  • 見出しは vw ベースの流体。ヒーローは 10.5vw（1440px 幅で 151.23px）、セクション見出しは約 2.64vw（38px）
  • 和文リード文は weight 700 / lh 2.31（27.5px → 63.45px）。太いのに行間が極端に広いという、和文としては珍しい組み方がブランドの声になっている
  • ブランドカラーは 9 色。#0d44fb #29ebfe #00c745 #89e82b #ffeb00 #ff9201 #ff2300 #fd1eba #a725fc。単色で使うことはほとんど無く、2 色を linear-gradient(to right in oklab, A, B) で繋ぎ、url("noise.png") を上に重ねる
  • in oklab の補間指定が肝。sRGB 補間では中間がくすむ色の組み合わせでも、oklab なら彩度を保ったまま繋がる
  • .grad-effect-base というクラスが見出しに付き、テキストマスクとしてグラデーションを流す演出に使う
  • 角丸は 0、影は 0、コンテナの max-width も無い。唯一の枠線がタグの 1px solid #b4b4b4

2. Color Palette & Roles

地は純白 #ffffff、文字は純黒 #000000。UI に単色のブランドカラーは現れず、すべてグラデーションの構成色として使われる。

Brand Spectrum（グラデーションの構成色・9 色）

• 9 色は色相環をほぼ均等に巡る。任意の 2 色を選んで繋ぐと成立するように設計されている
• 単色のベタ塗りとしては使わない。必ず 2 色のグラデーションにする

Gradient（実装）

css/* 実測される形。ノイズテクスチャを必ず重ねる */
background-image:
  url("/noise.png"),
  linear-gradient(to right in oklab, #0d44fb, #29ebfe);

/* 3 ストップ版（終端色を 2 回置いて後半をベタにする） */
background-image:
  url("/noise.png"),
  linear-gradient(to right in oklab, #ff2300, #ff9201, #ff9201);

• in oklab（oklab 補間）を必ず指定する。省略すると sRGB 補間になり、補色に近い組み合わせで中間がグレーに濁る
• 方向は to right が基本
• 終端色を 2 回書く 3 ストップ形が多用される。前半でグラデーション、後半をベタにして文字を載せやすくする
• ノイズは PNG のタイル。グラデーションのバンディングを潰し、印刷物のような質感を与える

Neutral（面・罫・文字）

• Background (#ffffff): ページ地色。純白
• Ink (#000000): テキスト・ボタンの面色。純黒を使う（軟らかい黒に逃げない）
• Inverse (#ffffff): 黒面の上のテキスト
• Border (#b4b4b4, rgb 180,180,180): カテゴリタグの 1px 枠。サイトで唯一の罫線色
• Meta Gray (#cccccc, rgb 204,204,204): 非活性の日付・言語切替（JA / EN / ZH）

Semantic（意味的な色）

• スタジオサイトのため意味色は持たない。展開する際の目安は以下
• Danger／Error: #ff2300（Red）
• Warning: #ff9201（Orange）
• Success: #00c745（Green）
• Info: #0d44fb（Blue）
• 意味色として使うときも、面はグラデーションではなく単色にして装飾と区別する

3. Typography Rules

Apercu, "Noto Sans JP", sans-serif の 1 スタックを全要素で使い回す。html の rem 基準が 10px であること、見出しが vw 基準の流体であること、和文リードが weight 700 / lh 2.31 であることが実装の要。

3.1 和文フォント

• ゴシック体: Noto Sans JP（Google Fonts）。読み込むのは 300 / 500 / 700 の 3 ウェイトのみ
• 明朝体は使わない
• 和文は常にスタックの 2 番目。先頭の Apercu が欧文グリフを取り、和文が Noto Sans JP に落ちる。この順序が和欧の見え方を決めている
• 300（本文）／ 500（カード見出し）／ 700（リード・大見出し・ボタン）の 3 段で使い分ける

3.2 欧文フォント

• サンセリフ: Apercu（Colophon Foundry）。幾何学とグロテスクの中間にある英国のサンセリフで、a g の字形が特徴的。ヒーローの 151px Bold はこの書体の骨格を見せるための組み
• セリフ・等幅は使わない
• preview.html での注記: Apercu は Colophon Foundry のライセンスフォントのため、ローカルの preview.html では表示できない。プレビューでは Google Fonts の Archivo（400/500/700） を代替に用いる。Archivo はグロテスク系で a の骨格と字幅が Apercu に近く、巨大サイズでの印象が最も揃う。実装時は必ず Apercu を読み込むこと

3.3 font-family 指定

css/* rem の基準（16px ではない） */
html { font-size: 10px; }

:root {
  --font-size-ja: 1.5rem;   /* 15px — 日本語本文 */
  --font-size-en: 1.7rem;   /* 17px — 英語本文 */
}

/* 全要素で共通の 1 スタック */
font-family: Apercu, "Noto Sans JP", sans-serif;

/* body の既定 */
font-size: 15px;
font-weight: 300;
line-height: 2.0;         /* 30px */
letter-spacing: normal;
color: #000000;
font-feature-settings: normal;   /* palt は使わない */

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

• 欧文を先頭に置く（Apercu → Noto Sans JP → sans-serif）。和文サイトとしては珍しい欧文優先型で、英語ロゴ・英語見出しが多いスタジオサイトの性格に合わせている
• 和文は必ず 2 番目に置き、sans-serif で締める
• 言語ごとに本文サイズを変える（日本語 15px / 英語 17px）。和文は字面が大きいので 2px 落とす、という考え方

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

• サイズのジャンプが極端（12px → 151px）。中間サイズをほとんど使わないことでコントラストを作っている
• 見出しは vw 基準の流体。1440px 幅での実測から逆算すると Hero が 10.5vw、セクション見出しが約 2.64vw
• font-weight: 200 が事例ページの本文に使われる。Apercu の Extra Light で、和文が混じらない英語ページでのみ成立する細さ

3.5 行間・字間

• 和文本文の行間 (line-height): 2.0（15px → 30px）
• 和文リードの行間: 2.31（27.5px → 63.45px）。サイトで最も広い。太い weight 700 に対して行間を極端に開くことで、圧を逃がしつつ 1 行 1 行を独立させる
• 欧文本文の行間: 1.76（17px → 30px）。和文と行送りの実寸（30px）を揃えている
• 見出しの行間: normal（Apercu の既定 ≒ 1.2）。ヒーロー・セクション見出しは締める
• 字間 (letter-spacing): 本文は normal。12px の小さなラベルだけ 0.12em と大きく開く。ボタンは 0.04em
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 和文と欧文で行送りの絶対値（30px）を揃える。サイズは違っても行のリズムが揃う
• 太い和文ほど行間を開く（weight 700 なら 2.3 前後）
• 小さいラベルは大きく開く（12px に 0.12em）。大きい見出しは開かない
• 12px と 151px のような極端なジャンプを恐れない。中間サイズで階層を埋めない

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• ヒーローの巨大見出しは手動で改行位置を決める（.line1 / .line2 のように行ごとに要素を分ける）。自動折り返しに任せない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。Noto Sans JP の等幅の字面をそのまま使い、詰めは行わない
• 字間の調整は letter-spacing で行う（開く方向のみ）
• 欧文の kern は Apercu 側の既定に任せる

3.8 縦書き

• 該当なし。UI・記事とも横組み

4. Component Stylings

Buttons

Primary（黒の矩形） — サイトで唯一のボタン形状

• Background: #000000
• Text: #ffffff
• Padding: 4px 6px 1px（ボタンの箱は幅 256px / 高さ 60〜80px を別途与える）
• Border Radius: 0px
• Border: なし
• Font: Apercu / 18px / weight 700 / ls 0.04em
• 例: 「Watch Reel」「Learn more」「All Works」
• ホバー: 面をブランドグラデーションに差し替える（url(noise.png), linear-gradient(to right in oklab, A, B)）

Tag（カテゴリタグ）

• Background: transparent
• Text: #000000
• Border: 1px solid #b4b4b4
• Padding: 9px 10px 7px
• Border Radius: 0px
• Font: Apercu / 12px / weight 300 / ls 0.12em
• 例: 「Branding」「Web / App」「Event / Installation」

Inputs

• Background: #ffffff
• Border: 1px solid #b4b4b4
• Border (focus): 1px solid #000000
• Border Radius: 0px
• Padding: 12px 14px
• Font: Apercu / 15px / weight 300 / lh 2.0
• Text Color: #000000 / Placeholder: #cccccc

Cards（Work サムネイル）

• Background: #ffffff
• Border: なし
• Border Radius: 0px（画像も角丸にしない）
• 構成: 画像 → 作品名（Apercu 28px / 700）→ 説明（Noto Sans JP 15px / 500）→ タグ（12px / 300 / ls 0.12em）
• Shadow: なし

Gradient Band / Gradient Text

• 帯: background-image: url("/noise.png"), linear-gradient(to right in oklab, A, B);
• 文字マスク: 同じ背景に background-clip: text; color: transparent; を掛ける（.grad-effect-base）
• 必ずノイズを重ねる。グラデーション単体では使わない

5. Layout Principles

Spacing Scale

rem 基準が 10px なので、余白は 10 の倍数で刻みやすい。

Container

• Max Width: なし。max-width を持つコンテナが実質存在せず、要素は全幅にブリードする
• 左右の padding だけで内容を寄せる（実測でおよそ 160px / 1440px 幅時 ≒ 11%）
• 読み物カラムは事例ページの本文ブロックで 600〜700px 程度

Grid

• Featured Works は 2 カラムの大きなサムネイル、Latest News は 1 カラムのリスト
• Gutter: 40px
• グリッドに合わせて見出しを縮めない。見出しは vw で伸び、グリッドを跨いで置かれる

6. Depth & Elevation

Whatever のサイトには box-shadow が存在しない。 奥行きは黒面・白地・グラデーション帯のコントラストだけで作る。

• 浮遊感が必要なときは影ではなく黒のベタ面を置く
• グラデーション帯は最前面のレイヤーとして扱い、その上には白文字のみを載せる
• ノイズテクスチャが唯一の「質感」。影の代わりにこれが平面に厚みを与える

7. Do's and Don'ts

Do（推奨）

• font-family: Apercu, "Noto Sans JP", sans-serif の 1 スタックを全要素で使い回す（欧文優先）
• html { font-size: 10px } を rem の基準にし、--font-size-ja: 1.5rem / --font-size-en: 1.7rem で言語別の本文サイズを持つ
• 見出しは vw 基準の流体にする（ヒーロー 10.5vw、セクション見出し 2.64vw）
• 和文リードは weight 700 / line-height 2.3 で組む。太くして行間を開く
• 和文（15px / lh 2.0）と欧文（17px / lh 1.76）で行送りの実寸 30px を揃える
• 12px のラベルは letter-spacing: 0.12em と大きく開く
• グラデーションは linear-gradient(to right in oklab, A, B) ＋ url(noise.png) の組でのみ使う
• 9 色のスペクトラムから 2 色を選んで繋ぐ。組み合わせは自由に変えてよい
• ボタンは黒ベタの矩形（radius 0）。ホバーでグラデーションに差し替える

Don't（禁止）

• 角丸を使わない（ボタン・カード・画像・入力欄すべて radius 0）
• box-shadow を使わない（サイト全体に影が存在しない）
• グラデーションを単色のベタ塗りに崩さない（9 色は必ず 2 色 1 組で使う）
• in oklab を省略しない（sRGB 補間だと補色寄りの組み合わせで中間が濁る）
• ノイズを外さない（グラデーション単体はこのブランドの見え方ではない）
• 和文を先頭にしたスタックにしない（欧文優先の並びが Apercu の字面を出すための条件）
• 中間サイズで階層を埋めない（12px と 151px の落差そのものが設計）
• palt を掛けない、本文の letter-spacing を詰めない
• 軟らかい黒（#222 等）に逃げない。テキストは純黒 #000000

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。黒ボタンは実測で 256 × 60〜80px あり十分
• 12px のタグは padding（9px 10px 7px）で高さ 30px 程度。モバイルでは縦 padding を 12px 以上に広げる

フォントサイズの調整

• 見出しは vw なので自動で縮む。ヒーロー 10.5vw は 375px 幅で約 39px になり、そのままで成立する
• 和文本文 15px / 欧文本文 17px は据え置く
• 和文リードは 27.5px（1.91vw）→ モバイルでは 18〜20px 程度。行間 2.3 は維持する
• 12px のラベルは縮めない（letter-spacing: 0.12em も維持）

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff   （純白）
Ink:            #000000   （純黒。軟らかい黒は使わない）
Border:         #b4b4b4   （タグの 1px 枠。サイト唯一の罫線色）
Meta Gray:      #cccccc   （非活性の日付・言語切替）
Spectrum:       #0d44fb #29ebfe #00c745 #89e82b #ffeb00 #ff9201 #ff2300 #fd1eba #a725fc
Gradient:       url("/noise.png"), linear-gradient(to right in oklab, A, B)
Font:           Apercu, "Noto Sans JP", sans-serif   ← 欧文優先の 1 スタック
rem Base:       html { font-size: 10px }   ← 16px ではない
--font-size-ja: 1.5rem (15px) / --font-size-en: 1.7rem (17px)
Body (JP):      15px / weight 300 / lh 2.0
Body (EN):      17px / weight 200 / lh 1.76   ← 行送りは和文と同じ 30px
Lead (JP):      約 1.91vw (27.5px) / weight 700 / lh 2.31
Hero:           10.5vw (1440px 幅で 151px) / weight 700
Section Head:   約 2.64vw (38px) / weight 700
Label:          12px / weight 300 / letter-spacing 0.12em
Button:         #000000 面 / #ffffff 文字 / 18px / weight 700 / ls 0.04em / radius 0
Radius:         0（すべて）
Shadow:         none（サイト全体に box-shadow が存在しない）
Container:      max-width なし（全幅ブリード。左右 padding のみ）

プロンプト例

Whatever のデザインシステムに従って、クリエイティブスタジオの制作実績ページを作成してください。
- html の font-size は 10px にして、--font-size-ja: 1.5rem / --font-size-en: 1.7rem を定義する
- 全要素の font-family は Apercu, "Noto Sans JP", sans-serif（無ければ Archivo で代替）。
  欧文を先頭に置く順序を崩さない
- 地は純白 #ffffff、文字は純黒 #000000。軟らかい黒は使わない
- ヒーロー見出しは font-size: 10.5vw / weight 700 で、改行位置は要素を分けて手動で決める
- セクション見出しは 2.64vw / weight 700
- 和文リードは 1.91vw / weight 700 / line-height 2.31（太くして行間を極端に開く）
- 和文本文 15px / weight 300 / lh 2.0、欧文本文 17px / weight 200 / lh 1.76
  （行送りの実寸をどちらも 30px に揃える）
- カテゴリタグは 12px / weight 300 / letter-spacing 0.12em / 1px solid #b4b4b4 / radius 0
- ボタンは黒ベタの矩形（背景 #000000、文字 #ffffff、18px / weight 700 / ls 0.04em、radius 0）。
  ホバーでブランドグラデーションに差し替える
- グラデーションは必ず
  background-image: url("/noise.png"), linear-gradient(to right in oklab, A, B);
  の形で書く。A / B は #0d44fb #29ebfe #00c745 #89e82b #ffeb00 #ff9201 #ff2300 #fd1eba #a725fc
  の 9 色から 2 色を選ぶ。in oklab とノイズは省略しない
- border-radius はすべて 0、box-shadow は一切使わない
- max-width のコンテナを作らず、左右 padding だけで内容を寄せる
- font-feature-settings は normal（palt は掛けない）