Subsequence (サブシーケンス) DESIGN.md

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

対象サイト: https://subsequence.tv/ Subsequence（サブシーケンス）は visvim が発行するインディペンデントなカルチャー／クラフト マガジン。 温かいクリーム色（オフホワイト）の下地に純黒のテキストを組み、記事カテゴリーごとにパステルのチップ色を割り当てる、 収集家めいた静かなエディトリアル。日英バイリンガルの誌面設計。 実測はブランドサイト トップ / 記事一覧に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 紙のようなクリーム色（#f7f7e8）を下地に、純黒のテキストと極細の罫で組む、ゆったりとしたエディトリアル。写真と余白を主役に据え、UI は装飾を削ぎ落とす。記事カテゴリーにパステルのチップ色を1色ずつ割り当てる「多色のインデックス」がブランドの署名
• 密度: 低密度。小さめの文字（13〜17px 基調）を広い行間で置き、面ではなく余白と罫、そして淡いチップ色で領域を分ける
• キーワード: クリーム地 / エディトリアル / バイリンガル / クラフト / パステル インデックス / スロー
• 形状言語: 面・タグ・入力欄はほぼ角ゼロ（border-radius: 0〜2px）。カテゴリータグは 1px の黒罫で囲むアウトライン型、または淡いパステルの面塗り。丸みや影で飾らず、直線と罫で端正に見せる
• 書体の性格: 欧文はニュートラルなグロテスク（"Winden"、Regular / Medium / SemiBold）で見出し・ラベルを据える。和文はシステム系のゴシック（→ 仕様上は Noto Sans JP）。字間は開かず（normal）、palt も off。文字を小さく・行間を広く取り、収集家めいた静けさを演出する

2. Color Palette & Roles

Base（下地）

• Background (#f7f7e8): ページ全体の下地。紙を思わせる温かいクリーム／オフホワイト（rgb(247,247,232)）。body の実測背景で、誌面全体を支配する。html は #ffffff だが、見える地色はこのクリーム。この下地こそがブランドの決定的な特徴
• Surface (#ffffff): 画像枠・モーダルなど、下地から一段持ち上げる面。純白
• Ink Black (#000000): 見出し・本文・罫・タグ罫の基調色。純黒

Category Chips（カテゴリー チップ = ブランドの署名多色）

記事カテゴリーごとに1色のパステルを割り当てる。低彩度で下地のクリームとなじみ、インデックスとして機能する。

• Olive (#e7e5b5): rgb(231,229,181)。例 "Discovery"
• Powder Blue (#d2e3ea): rgb(210,227,234)。例 "Getaway"
• Sage Green (#cce1d0): rgb(204,225,208)。例 "Artisan"
• Dusty Pink (#eed3d9): rgb(238,211,217)。例 "Event"
• Warm Gray (#cbc9c5): rgb(203,201,197)。汎用ラベル・補助面
• Peach (#fcdfb7): rgb(252,223,183)。特集・強調カテゴリー

Text（文字色）

• Text Primary (#000000): 見出し・本文。純黒
• Text Muted (#555555): 注釈・補足・言語スイッチ等の小テキスト（純黒からわずかに退けたグレー）

色に関する設計思想

• 基調は「温かいクリーム下地 #f7f7e8」「純黒の文字と罫 #000000」「白の面 #ffffff」の3色
• カテゴリー チップのパステルは、彩度を上げず下地のクリームとなじむトーンで統一する。原色・ビビッドは使わない
• 多色はあくまで「記事の分類インデックス」。1記事＝1チップ色の対応を崩さず、面全体をパステルで塗り潰さない
• ブランドの世界観は「クリーム地の静けさ」と「パステルの控えめな彩り」の対比で作る

3. Typography Rules

3.1 和文フォント

• ゴシック体: 実サイトは和文専用フォントを宣言しておらず、システムスタックで描画される。仕様としては Noto Sans JP を基本に、system-ui → -apple-system（ヒラギノ角ゴ）にフォールバック
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ（見出し・ラベル・本文）: Winden（ニュートラルなグロテスク。Regular / Medium / SemiBold の3カット。実測ではいずれも weight 400 を返すが、字面は Regular / Medium / SemiBold として使い分けられている）。ロゴ・欧文見出し・ナビラベル・本文に使う
• セリフ / 等幅: 使用しない。入力欄などは "Helvetica Neue" へフォールバック

代替フォントの注記: Winden は Web ライセンスフォントのため、ローカル・preview.html では表示できない。

• Winden → Inter（ニュートラルなグロテスクで印象が近い）で代替
• 和文は Noto Sans JP を Google Fonts で直接読み込む
• preview.html のインラインおよび Typography セクションのフォント指定もすべて代替フォントに揃える

3.3 font-family 指定

css/* 本文・UI（和文） */
font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;

/* 欧文見出し・ナビラベル・本文 */
font-family: "Winden", "Helvetica Neue", Arial, sans-serif;

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

• 和文 UI は Noto Sans JP を先頭に、OS のシステムフォントへフォールバック
• 欧文の見出し・ラベル・本文は Winden を独立して指定し、Latin グリフを Winden で拾う
• ウェイトは Regular（≒400）中心。見出しは Medium / SemiBold カットで差をつける。階層はサイズで作る

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

3.5 行間・字間

• 本文の行間 (line-height): 2.0（14px 本文で 28px）。日本語の可読性のため、収集家めいた誌面らしくかなり広めに取る
• 記事タイトルの行間: 1.5
• 欧文大見出しの行間: 1.3（64px で 83.2px）
• 字間 (letter-spacing): 全体を通して normal。開かない・詰めない

ガイドライン:

• 和文本文は 14px と小さめだが、line-height: 2.0 を確保して大きく空けて読ませる
• 字間は開かないのがこのブランドの流儀。階層はサイズとウェイト カットで作る
• 欧文大見出しは 64px と大胆に取り、下地の余白とのコントラストで見せる

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• 実測では font-feature-settings: normal、letter-spacing: normal。palt は使わず、和文の詰めも行わない
• 広い行間（2.0）と normal 字間で、ゆったりした余白感を作る設計

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

面・タグ・入力欄はほぼ角ゼロ（border-radius: 0〜2px）。カテゴリータグは 1px 黒罫のアウトライン、またはパステルの淡い面塗り。

Buttons / Tags

Category Tag（アウトライン）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 0–2px
• Padding: 3px 5px（極小）
• Font: 13px / weight 400 / letter-spacing normal
• 例: カテゴリーラベル、言語スイッチ「EN / JP」

Category Tag（パステル面塗り）

• Background: カテゴリー チップ色（Olive #e7e5b5 / Powder Blue #d2e3ea / Sage Green #cce1d0 / Dusty Pink #eed3d9 / Peach #fcdfb7 / Warm Gray #cbc9c5）
• Text: #000000
• Border: なし、または 1px solid #000000
• Border Radius: 0–2px
• Padding: 3px 8px
• 例: "Discovery" / "Getaway" / "Artisan" / "Event"

Primary（面塗り・黒）

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Border Radius: 0–2px
• Padding: 8px 16px
• 例: 主要 CTA（購読・購入導線）

Inputs

• Background: #ffffff
• Border: 1px solid #000000（細い黒罫）
• Border (focus): 1px solid #000000（罫を維持し、下線を濃くする）
• Border Radius: 0–2px
• Padding: 8px 12px
• Font Size: 14–16px
• フォールバックは "Helvetica Neue"

Cards

• Background: #ffffff（または下地のクリームのまま）
• Border: なし、または 1px solid #000000 の細罫
• Border Radius: 0–2px
• Shadow: なし（フラット）
• 記事カードは大判写真＋カテゴリー チップ（パステル）＋タイトル（日英）＋短いメタの最小構成。角ゼロで端正に

5. Layout Principles

Spacing Philosophy

クリームの余白を広く取り、大判の記事写真を主役に据える。要素は角ゼロの細罫とパステルのチップでゆるやかに区切り、密度を上げすぎない。誌面らしい非対称なグリッドも許容する。

Spacing Scale（推定）

Container

• Max Width: 1280px（キービジュアル・記事写真はフルブリード可）
• Padding (horizontal): 24–40px

Grid

• Columns: 12（記事一覧は 2〜3 カラム）
• Gutter: 24–40px
• 写真をゆったり配置し、日英のキャプションを短く小さく添える

6. Depth & Elevation

• 影はほぼ使わない。奥行きは「余白」「写真」「細罫」「パステルのチップ」で表現する

7. Do's and Don'ts

Do（推奨）

• 下地は温かいクリーム #f7f7e8、文字と罫は純黒 #000000、面は白 #ffffff の3色を基調にする
• カテゴリーごとにパステルのチップ色を1色ずつ割り当てる（Olive #e7e5b5 / Powder Blue #d2e3ea / Sage Green #cce1d0 / Dusty Pink #eed3d9 / Peach #fcdfb7 / Warm Gray #cbc9c5）
• 面・タグ・入力欄は border-radius: 0〜2px のほぼ角ゼロにする
• カテゴリータグは 1px 黒罫のアウトライン、または淡いパステル面塗りにする
• 字間は normal、palt も off。和文本文は 14px でも line-height: 2.0 を確保する
• 欧文は Winden（→ Inter 代替）、和文は Noto Sans JP で組む。日英を併記する誌面設計を意識する

Don't（禁止）

• 彩度の高い色・原色を面で使わない（カテゴリー色は低彩度パステルに限定）
• 1記事に複数のチップ色を混ぜたり、面全体をパステルで塗り潰したりしない
• 角丸・強い影を付けない（フラット・ほぼ角ゼロが基調）
• 和文本文の line-height を 2.0 未満に大きく詰めない
• 字間を開けたり palt で詰めたりしない（normal を守る）
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• 本文は 14px 基調。モバイルでも 13px 未満に落とさず line-height 2.0 を保つ
• 欧文大見出し（64px）はモバイルで 36〜44px に縮小。字間 normal は維持する

9. Agent Prompt Guide

クイックリファレンス

Background:    #f7f7e8（温かいクリーム）
Surface:       #ffffff
Ink / 罫/CTA:  #000000
Chip Olive:    #e7e5b5（Discovery）
Chip Blue:     #d2e3ea（Getaway）
Chip Sage:     #cce1d0（Artisan）
Chip Pink:     #eed3d9（Event）
Chip Warm:     #cbc9c5
Chip Peach:    #fcdfb7
Font(JP):      "Noto Sans JP", system-ui, -apple-system, sans-serif
Font(EN):      "Winden", "Helvetica Neue", Arial, sans-serif（→ Inter 代替）
Display:       64px / line-height 1.3
Body Size:     14px
Line Height:   2.0（和文本文）
Letter Spacing: normal（全体）
palt:          off
Radius:        0–2px（全要素）
Tag(罫):       transparent / #000 / 1px solid #000 / radius 0–2px / padding 3px 5px
Tag(面):       パステル chip 色 / #000 / radius 0–2px / padding 3px 8px
Card:          radius 0–2px / shadow なし

プロンプト例

Subsequence のデザインシステムに従って、バイリンガルのカルチャー マガジンの記事一覧セクションを作成してください。
- 下地: #f7f7e8（温かいクリーム）、面: #ffffff、文字と罫: #000000
- フォント（和文）: "Noto Sans JP", system-ui, -apple-system, sans-serif
- フォント（欧文）: "Winden"（→ Inter 代替）, "Helvetica Neue", Arial, sans-serif
- 本文 14px / line-height 2.0、字間は normal、palt off
- すべての面・タグ・入力欄は border-radius 0〜2px
- 記事カードは大判写真＋カテゴリー チップ（パステル1色）＋日英タイトルの最小構成、影なし・ほぼ角ゼロ
- カテゴリー色: Discovery=#e7e5b5 / Getaway=#d2e3ea / Artisan=#cce1d0 / Event=#eed3d9
- カテゴリー色は1記事1色。低彩度パステルに限定し、面全体を塗り潰さない

Web ライセンスフォントが使えない環境での代替指針

• 欧文 Winden → Inter（ニュートラルなグロテスク）
• 和文は Noto Sans JP を Google Fonts で直接利用可
• 代替でも「温かいクリーム下地・純黒の文字と細罫・ほぼ角ゼロのフラットな面・大判写真・低彩度パステルのカテゴリー チップ・広い行間（2.0）・字間 normal」を守れば世界観は再現できる