ライゾマティクス（Rhizomatiks） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-08 / 対象: https://rhizomatiks.com/, /work/

1. Visual Theme & Atmosphere

Perfume や ELEVENPLAY の舞台演出、大規模インスタレーションで知られるクリエイティブ集団 （運営: 株式会社アブストラクトエンジン）。作品はレーザーとモーショングラフィックスで 極彩色だが、サイトそのものは白地・グレースケール・全文セリフ体という完全な引き算でできている。

• デザイン方針: 白地に明朝／セリフ1本。UI に彩色を持たず、作品画像だけが色を持つ
• 密度: 低い。1156px の版面に画像を並べ、テキストは最小限
• キーワード: 全文セリフ、palt グローバル適用、グレースケール、角丸ゼロ、影ゼロ

このサイトの特徴的な癖（他サイトと違う点）

1. 和文が明朝（Noto Serif JP）、欧文がセリフ（Libre Baskerville）。 テック系のクリエイティブスタジオでゴシック／サンセリフを一切使わない。 ナビ・ボタン・キャプションまですべてセリフ
2. font-feature-settings: "palt" が html に指定され、全要素に継承される。 明朝の詰め組みでサイト全体が締まる
3. 和欧混植のときだけ 'Libre Baskerville','Noto Serif JP', serif と 欧文を先頭に置いたチェーンを使う。欧文単体は Libre Baskerville、 和文単体は Noto Serif JP と、要素ごとに3種のチェーンを打ち分ける
4. body の line-height が 1。行送りは読ませる要素に個別指定する設計で、 本文は 15px→30px（2.0）と大きく開く
5. UI に有彩色が1つもない。#000 / #333 / #666 / #999 / #C4C4C4 / #E5E5E5 / #F0F0F0 / #F8F8F8 / #F9F9F9 / #fff のグレースケールだけ
6. ボタンが実質1種類。「View More」の枠線ボックス（1px solid #C4C4C4）のみ。 塗りボタンを持たない
7. ブレークポイントが 860px の1本だけ。中間サイズを刻まない
8. box-shadow の宣言が CSS 全体で 0 件
9. サムネイルのホバーが scale(1.03) ＋ brightness(125%) の2段。 filter のトランジションに will-change を付けて明るく持ち上げる
10. フッターだけが黒ベタ #000000。サイト内で唯一の暗い面

2. Color Palette & Roles

Base

• Background (#ffffff): ページ地色（html に指定）
• Ink (#000000): 本文・リンク・見出し（h4）
• Heading Gray (#333333): h1 の色。純黒ではなく 51,51,51
• Text Sub (#666666): ナビ、「View More」の文字
• Text Muted (#999999): 日付、作品のクレジット、言語切替
• Text Faint (#7D7D7D) / (#888888) / (#959595) / (#C8C8C8): 補助テキスト

Neutral（罫・面）

• Border (#C4C4C4): 「View More」ボタンの罫。サイト唯一の枠線色
• Divider (#E5E5E5): リストの区切り
• Surface (#F0F0F0): 作品一覧の面（rgba(240,240,240,.5) の半透明でも使う）
• Surface Light (#F8F8F8) / (#F9F9F9): News / Release セクションの面
• Surface Faint (#EEEEEE): Links セクションの面

Dark

• Footer (#000000): フッターの地色。文字は #ffffff
• On Photo (#ffffff): スライダー上のキャプション

Accent

なし。 有彩色は作品画像の中だけ。UI には1色も置かない。

グレーの階調（#333 → #666 → #999 → #C4C4C4 → #E5E5E5 → #F0F0F0 → #F8F8F8）で
情報の強弱をつくる。色相を持ち込まない。

3. Typography Rules

3.1 和文フォント

Noto Serif JP（明朝）1本。 ゴシックを一切使わない。

• 本文・見出し・ナビ・すべて: 'Noto Serif JP', serif
• Google Fonts から wght@300;400;500;600;700;900 を読み込むが、 実際に使うのは 400（本文）と 600（h4） が中心

css@import url('//fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');

/* ローカルにあれば Noto Serif CJK JP を優先する */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal; font-weight: 400; font-display: swap;
  src: local("Noto Serif CJK JP"), local("Noto Serif JP");
}

3.2 欧文フォント

• Libre Baskerville（セリフ）: 見出し（h1）、ナビ、ボタン、日付、 作品タイトルの欧文。サンセリフを一切使わない

Baskerville はトランジショナル・ローマン体で、明朝と骨格の時代感が近い。 和文明朝と欧文セリフを揃えることで、和欧が混じっても声が変わらない。

3.3 font-family 指定

要素の中身によって3種類を打ち分ける。

css/* 1. グローバル既定（和文） */
html {
  background: #ffffff;
  color: #000000;
  font-family: 'Noto Serif JP', serif;
  font-feature-settings: "palt";      /* 全要素に継承 */
  -webkit-font-smoothing: antialiased;
}
body { line-height: 1; }              /* 既定は 1。読ませる要素に個別指定 */

/* 2. 欧文だけの要素（見出し・ナビ・ボタン・日付） */
.en { font-family: 'Libre Baskerville', serif; }

/* 3. 和欧が混じる要素（欧文を先頭に置く） */
.mixed { font-family: 'Libre Baskerville', 'Noto Serif JP', serif; }

/* フォーム部品にも明示 */
input[type="text"], input[type="email"], input[type="tel"], textarea {
  font-family: 'Noto Serif JP', serif;
  border: none; border-radius: 0; outline: none; background: none;
}

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

• Webフォント単独型。プラットフォームフォント（ヒラギノ明朝・游明朝）を チェーンに並べない。落ちる先は generic な serif だけ
• 混植チェーンは欧文が先頭（'Libre Baskerville','Noto Serif JP', serif）。 和文優先ではなく、欧文の字形を優先して和文で埋める
• 欧文単体の要素に和文を混ぜない

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

ウェイトは 400 が基本。600 を使うのは h4（「Projects」等の小見出し）だけ、 500 はスライダーのキャプションだけ。700 以上を使わない。

3.5 行間・字間

• body の既定は line-height: 1。行送りは読ませる要素に個別指定する
• 読ませる要素は 1.8〜2.0。本文 15px→27px（1.8）、リスト 15px→30px（2.0）
• 見出し・ナビ・ボタンは 1.23〜1.33。箱に収める要素は詰める
• letter-spacing はほぼ normal。開けるのは3箇所だけ:
  • リード（22px）→ 0.036em（0.8px）
  • 本文（15px）→ 0.021em（0.32px）
  • リスト（15px）→ 0.011em（0.16px）
• 明朝＋palt で既に詰まっているため、字間を大きく開けない

css/* 本文 — 明朝の読み物 */
.body-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 1.8;          /* 27px */
  letter-spacing: 0.021em;   /* 0.32px */
  text-align: justify;
}

/* セクション見出し — 欧文セリフ */
h1 {
  font-family: 'Libre Baskerville', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.23;         /* 32px */
  color: #333333;
}

/* 小見出し — 和文明朝の 600 */
h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 19.2px;
  font-weight: 600;
  line-height: 1;
}

3.6 禁則処理・改行ルール

• 写真上のキャプションは text-align: justify。作品名を写真幅いっぱいに両端揃え
• 「Rhizomatiks」「ELEVENPLAY」「Abstract Engine Co., Ltd.」は途中で折らない
• 作品名の欧文と和文が同じ行に並ぶことが多い （「tv asahi MUSIC STATION SUPER LIVE2025 Perfume」「角野隼斗 ピアノリサイタル "Klassik Arena"」）。 混植チェーン（欧文先頭）で欧文の字形を保つ
• 引用符は "…"（英文用の丸引用符）をそのまま使う。和文の 「」 に置き換えない

3.7 OpenType 機能

csshtml { font-feature-settings: "palt"; }

• html に指定して全要素に継承させる。サイト内で palt を切る要素は無い
• 明朝の仮名と約物が詰まることで、低密度の版面でも文字列が締まって見える
• letter-spacing をほとんど開けないのは、palt で既に詰め組みになっているため。 palt ＋ 大きめの letter-spacing を併用しない

3.8 縦書き

該当なし。全ページ横組み。

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

代替不要。 実サイトと同じ書体で完全に再現できる。

4. Component Stylings

Buttons

Outline Box（サイト唯一のボタン）

css.btn-view-more {
  display: block;
  width: 249px;
  background: transparent;
  color: #666666;
  border: 1px solid #C4C4C4;
  border-radius: 0;
  padding: 13px 0;
  font-family: 'Libre Baskerville', serif;
  font-size: 12px;
  line-height: 1.33;
  text-align: center;
}

用例: 「View More」

塗りボタンを持たない。 CTA は枠線1種類だけで、色でも面積でも優劣をつけない。 padding は上下 13px / 左右 0（幅を固定して中央揃え）。

Cards / Thumbnails（作品サムネイル）

• Border / Shadow: なし。角丸も無し
• Background: #F0F0F0（画像読み込み前のプレースホルダ面）
• 構成: 画像 → 作品名（欧文セリフ 14px）→ クレジット（12px / #999999）

ホバー（このサイトの数少ない動き）

css.listbox .img { transition: filter .6s ease; will-change: filter; }
.listbox:hover .img        { transform: scale(1.03); }
.listbox:hover .imgWrapper { filter: brightness(125%); }

拡大（1.03倍）と輝度アップ（125%）の2段。暗くするのではなく明るく持ち上げる。 @media (max-width: 860px) では transition: none / transform: none に落として無効化する。

Slider（トップのヒーロー）

• 画像上に作品名を白文字で置く（Libre Baskerville 15px / weight 500 / line-height: 2.0）
• キャプションの背景は linear-gradient(rgba(51,51,51,0) 0%, rgba(51,51,51,.15) 100%) — 黒ではなく #333333 の 15% を下から薄くかける
• ページネーションは小さな円（border-radius: 50%）

Navigation

ヘッダー

• 左: ロゴ（手書き風スクリプトの rhizomatiks・画像）
• 右: 「News / Work / Careers / Contact」（Libre Baskerville 13px / #666666） ＋ 言語切替「JP」（13px / #999999）＋ ハンバーガー
• 背景は白。境界線を引かない

フィルタ（Work 一覧）

• 「All / _Dance / _Installation / …」を横並び（14px / line-height: 1.8）
• 選択中は #333333、非選択は #999999。下線やボタン化をしない
• カテゴリ名の頭に _（アンダースコア）を付ける独特の表記

フッター

• 背景 #000000 / 文字 #ffffff / padding: 90px 0 60px （モバイルは 60px 0 40px、幅 max-width: 88%）
• サイト内で唯一の暗い面

Forms

cssinput[type="text"], input[type="email"], input[type="tel"], textarea {
  font-family: 'Noto Serif JP', serif;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  -webkit-appearance: none;
  resize: none;
}

入力欄の装飾を全部剥がす。枠も背景もパディングも持たない。 下線を引いて入力位置を示す（border-bottom: 1px solid #E5E5E5）。

Sections

• News / Release: #F9F9F9 の面
• Links: #EEEEEE の面
• Work 一覧: rgba(240, 240, 240, 0.5) の半透明面

セクションの区切りは面色の差だけ。罫線を引かない。

5. Layout Principles

Container

Layout Structure

• 1カラム中央寄せ。サイドバーを持たない
• トップは「フルブリードのスライダー → About → Projects/Shop/Repository → News / Release → Links → 黒いフッター」
• セクションの境界は面色（#F9F9F9 / #EEEEEE / #F0F0F0）で示す

Grid

• 作品サムネイル: 4カラム（1156px を等分）
• News / Release: 2カラム（日付 + タイトル）
• Projects / Shop / Repository: 3カラム

Spacing Scale

6. Depth & Elevation

影を1つも使わない。 階層は次の3つでつくる。

1. 面色の階調 — #ffffff → #F9F9F9 → #F8F8F8 → #F0F0F0 → #EEEEEE → #E5E5E5
2. 文字色の階調 — #000 → #333 → #666 → #999 → #C8C8C8
3. 黒いフッター — 唯一の反転面

ホバー時の brightness(125%) が、影の代わりに「浮き」を表現する唯一の手段。

7. Do's and Don'ts

Do（推奨）

• 和文は Noto Serif JP（明朝）、欧文は Libre Baskerville（セリフ）。 ゴシック／サンセリフを使わない
• html に font-feature-settings: "palt" を置いて全体に継承させる
• 和欧が混じる要素は 'Libre Baskerville','Noto Serif JP', serif（欧文が先頭）
• body の line-height は 1。読ませる要素だけ 1.8〜2.0 に開く
• letter-spacing は基本 normal。開けても 0.011〜0.036em の範囲に留める
• UI の色はグレースケールだけ（#000 / #333 / #666 / #999 / #C4C4C4 / #E5E5E5 / #F0F0F0 / #F8F8F8 / #F9F9F9 / #fff）
• CTA は枠線ボックス1種（1px solid #C4C4C4 / radius 0 / 12px / #666666）
• セクションの区切りは面色の差でつくる（罫線を引かない）
• サムネイルのホバーは scale(1.03) ＋ brightness(125%)（暗くせず明るくする）
• フッターだけ黒 #000000 に反転する
• 入力欄の枠・背景・パディングを剥がし、下線だけで示す

Don't（禁止）

• ゴシック体・サンセリフを使わない（全要素セリフ）
• 有彩色を UI に足さない（色は作品画像の中だけ）
• border-radius を矩形に付けない（円 50% のページネーションだけが例外）
• box-shadow を使わない
• 塗りボタンを作らない（CTA は枠線1種）
• font-weight: 700 以上を使わない（400 基本、600 は h4 のみ）
• palt と大きな letter-spacing を併用しない
• ナビの選択状態を下線やボタン化で示さない（文字色の濃淡で示す）
• 中間ブレークポイントを刻まない（860px の1本だけ）

8. Responsive Behavior

Breakpoints

中間サイズを刻まない。 768px でも 1024px でもなく 860px の1本で切り替える。

モバイルでの変化

• グローバルナビ → ハンバーガー ＋ ドロワー
• 作品サムネイル 4カラム → 2カラム
• コンテナ 1156px → max-width: 88%
• ホバー演出を無効化する（transition: none / transform: none / will-change: auto）。タッチ端末で拡大が残らないようにする
• フッターのパディング 90px 0 60px → 60px 0 40px
• palt と明朝は維持する（モバイルでも書体を切り替えない）

タッチターゲット

• 「View More」は幅 249px / 上下パディング 13px で高さ約 42px。 モバイルでは上下 15px に増やして 44px を確保する
• ナビ 13px は小さいので、モバイルのドロワーでは 16px 以上に上げる

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff
Ink:             #000000
Heading:         #333333（h1 は純黒ではない）
Text Sub:        #666666（ナビ・ボタン）
Text Muted:      #999999（日付・クレジット・言語切替）
Text Faint:      #7D7D7D / #888888 / #959595 / #C8C8C8
Border:          #C4C4C4（唯一の枠線色）
Divider:         #E5E5E5
Surface:         #F9F9F9 / #F8F8F8 / #F0F0F0 / #EEEEEE
Footer:          #000000（文字 #ffffff）
Accent:          なし（有彩色ゼロ）
JP Font:         'Noto Serif JP', serif（明朝）
EN Font:         'Libre Baskerville', serif（セリフ）
Mixed Font:      'Libre Baskerville', 'Noto Serif JP', serif（欧文が先頭）
Base Size:       15px（本文）/ 16px（html）
Line Height:     1（body 既定）/ 1.8〜2.0（読ませる要素）/ 1.23〜1.33（見出し・ナビ・ボタン）
Letter Spacing:  normal（基本）/ 0.036em（リード 22px）/ 0.021em（本文 15px）/ 0.011em（リスト）
Font Weight:     400（基本）/ 500（スライダーキャプション）/ 600（h4）。700 以上は使わない
Border Radius:   0px（矩形すべて）/ 50%（スライダーのページネーションだけ）
Shadow:          none（宣言ゼロ）
palt:            on（html に指定し全体へ継承）
Hover:           scale(1.03) + brightness(125%)（暗くせず明るくする）
Container:       1156px（標準）/ 1300px（ワイド）/ 1600px（最大）/ 88%（モバイル）
Breakpoint:      860px（1本だけ）

プロンプト例

ライゾマティクス（Rhizomatiks）のデザインシステムに従って、作品一覧ページを作成してください。
- 白地 #ffffff。UI に有彩色を一切使わない。色はグレースケールだけ
  (#000 / #333 / #666 / #999 / #C4C4C4 / #E5E5E5 / #F0F0F0 / #F8F8F8 / #F9F9F9)
- 書体はすべてセリフ。ゴシック・サンセリフを使わない
    和文: 'Noto Serif JP', serif
    欧文: 'Libre Baskerville', serif
    和欧混植: 'Libre Baskerville', 'Noto Serif JP', serif（欧文が先頭）
- html に font-feature-settings: "palt" を置き、全要素へ継承させる
- body の line-height は 1。読ませる要素だけ 1.8〜2.0 に開く
  （本文 15px→27px、リスト 15px→30px）
- letter-spacing は基本 normal。リード 22px だけ 0.036em、本文 15px は 0.021em
- font-weight は 400 が基本。h4 だけ 600、スライダーのキャプションだけ 500。700 は使わない
- セクション見出し（h1）は Libre Baskerville 26px / 400 / line-height 1.23 / color #333333
- CTA は枠線ボックス1種だけ:
  width 249px / transparent / 1px solid #C4C4C4 / border-radius 0 /
  padding 13px 0 / 12px / color #666666 / text-align center
  塗りボタンを作らない
- 作品サムネイルは枠なし・角丸なし・影なし。プレースホルダ面は #F0F0F0
  ホバーは transform: scale(1.03) と filter: brightness(125%) の2段（暗くしない）
- セクションの区切りは面色の差でつくる（#F9F9F9 / #EEEEEE / rgba(240,240,240,.5)）。罫線を引かない
- フィルタは「All / _Dance / _Installation」のようにカテゴリ名の頭に _ を付け、
  選択中 #333333 / 非選択 #999999 の文字色だけで状態を示す（下線・ボタン化をしない）
- 入力欄は border / background / padding をすべて剥がし、border-bottom: 1px solid #E5E5E5 だけで示す
- box-shadow は一切使わない。border-radius は 0（円 50% はスライダーのページネーションのみ）
- フッターだけ背景 #000000 / 文字 #ffffff、padding 90px 0 60px
- 版面は 1156px 中央寄せの1カラム。ブレークポイントは 860px の1本だけ
- モバイル（≤860px）ではホバー演出を transition: none / transform: none で無効化する