← 見本帳の目次へ

No. 31

ターミナル Terminal Mono

man page と README の様式美をそのままLPにする無彩色・等幅の静かなブルータリズム。装飾を足さず、目次・定義順の見出し・素のtable・反転ハイライトだけで信頼を作る。強調は色でなく反転のみ。開発者向けCLI/OSS/API/インフラ監視に。

ターミナルのスクリーンショット

デモを開く

仕様

typographymono
color-strategymonochrome
densitybalanced
layoutsingle-column
ornamentbrutalist
motionstatic
moodtrust / serene
industrysaas-tech / corporate
架空企業架空・ログ追尾/監視CLI「kansatsu」
license商用利用可・改変可・クレジット不要

検証記録

検

verified_at: 2026-07-11

公式パイプライン検証（Claude Code / sonnet subagent）: 別セッションのagentに DESIGN.md + tokens.css のみを渡し、別業種＝決済API『hakaru pay』で再生成（verification/payment-api）。初回・r2で「セクション区切りの2px太罫線」「FAQの罫線区切り」が薄罫線＋余白に退行する再現漏れを検出→DESIGN.md改稿2回（§9に必須CSSスニペット追加・§4/§5を禁止形に強化・§8に禁止事項追加）→r3で合格（tokens全hex一致・文書構造完全踏襲・2px太罫線/1px罫線/反転ハイライト/カーソル明滅1箇所まで再現、tier-A 🔴0/🟡0）。合格後、検証審査員の推奨に基づきプロンプト行の位置・モバイルtable挙動・フッター実務情報の3点をDESIGN.mdに明確化（テイスト変更なし）。補助検証: 制作側も別業種=DBマイグレーションCLI『migsafe』で独自再現を実施（verification/repro-dbcli-migsafe）

DESIGN.md

DESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/terminal-mono/DESIGN.md

# DESIGN.md — ターミナル / terminal-mono

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）
>
> **前提**: 以下のテイスト規則は、常に有効なHTML5文書（DOCTYPE宣言・`<html lang="ja">`・
> `<head>`・`<meta charset="UTF-8">`・`<body>` を備えた文書）の内側に適用するものとする。
> 文書骨格そのものの仕様は §9.0 を参照。

## 1. コンセプト

manページとREADMEの様式美をそのままLPにする。装飾を一切足さず、書体と組版・罫線だけで
信頼を作る「静かなブルータリズム」。色を使わない代わりに、構造の誠実さ（目次・定義された
見出し順・素のtable）そのものが説得力になる。動かない。カーソルの明滅だけが唯一の生命線。

**キーワード**: 静粛 / 等幅 / 文書 / 無彩色 / 誠実
**この見た目が向く場面**: 開発者向けツール・OSS/CLI製品・API・インフラ監視・技術文書が製品そのものである業種

## 2. タイポグラフィ

- 見出し・コード・UI要素: IBM Plex Mono / ウェイト 400（本文コード）・500（見出し・ラベル）。
  **見出しも等幅で組む。**「## 」「### 」「$ 」をリテラルな文字として見出し・コマンド行の
  プレフィックスに使う（man page / README の様式をそのまま型組みにする）
- 和文本文: IBM Plex Sans JP / ウェイト 400 のみ（本文に太字の和文書体を使わない。
  強調は等幅の `code` 表現かボールド 500 の英数字で行う）
- 本文: 15px / 行間 1.9 / 字間 0（等幅の間隔をそのまま活かす。字間調整をしない）
- 見出しスケール: セクション見出し（## プレフィックス）18px・weight 500 / サブ見出し
  （### プレフィックス）15px・weight 500 / 表・ラベル 13px。**特大見出しを作らない**
  （最大でも18px。大きさでなく構造の順序で階層を作る）
- 特記: 数値・コマンド・パス・バージョン番号は必ず IBM Plex Mono で組む。
  和文と英数字が混在する行では和文が IBM Plex Sans JP・英数字が IBM Plex Mono に
  自動で分かれるフォントスタックを組む

## 3. カラー

無彩色のみ（monochrome）。彩度のある色を一切使わない。地は紙ではなく端末に寄せた
わずかに暖かい白、文字は墨に近い黒。コードブロックのみ地と文字を反転させる。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #faf9f7 | 70% |
| 背景（節替え・テーブル見出し行など） | #f2f0ec | — |
| テキスト（主・見出し共通） | #1b1a18 | 28% |
| テキスト（弱・補足） | #6b6862 | — |
| 罫線・境界 | #dcdad5 | — |
| コードブロック地（反転） | #1b1a18 | 2% |
| コードブロック文字（反転） | #faf9f7 | — |

- 配色ルール: アクセントカラーという概念そのものを持たない。強調は「反転」（地と文字を
  入れ替える）でのみ行う。反転はコードブロック・ボタンホバー・検知ログ行のハイライトの
  3用途に限定する
- 純白 #ffffff・純黒 #000000 を使わない。青・紫・緑・赤など彩度のある色を一切足さない
- リンクは色で区別しない。**下線のみ**で識別させる（下線は常時表示、ホバーで太さのみ変化可）

## 4. レイアウト・余白

- コンテンツ最大幅: 72ch（実装上は 720px 前後）/ 単一カラムの一本道。左右2カラム化・
  サイドバー・カード grid を作らない
- 文書構造を厳守する: ヘッダー（man page 風の書誌行）→ ヒーロー（実行例の再現）→
  目次 → NAME → SYNOPSIS → INSTALL → USAGE → OPTIONS → PRICING → FAQ → フッター
  （書誌行の再掲）。この順序を変えない
- フッターには書誌行の再掲に加えて、運営者名・連絡先（メールリンク）・ライセンスまたは
  利用規約の一文を、書誌行の下に罫線なしのテキストブロックとして必ず含める（架空企業
  でも実務ページとして成立させるため）
- セクション区切り: 2px の太罫線（`border-top: 2px solid`）または `────` 的な水平線で
  明確に区切る。余白だけで区切らない。この2px太罫線は本テイストが彩度を持たない代わりに
  構造の断定性で説得力を作る装置。1px細罫線やborder-bottomへの置き換え、余白のみでの
  区切りは不合格として扱う
- セクション間余白: 上下 64px 基準 / 要素間は 8px の倍数（8 / 16 / 24 / 32）
- グリッドの性格: グリッドを持たない。すべて縦積みの読み順。表だけが例外的に列を持つ
- ヒーローの構成: **中央寄せ見出しにしない。** 冒頭は左端そろえのプロンプト行
  `$ kansatsu tail --follow --alert=slack` と、その実行結果（反転地のターミナル
  出力ブロック。数行の出力＋強調行（検知結果／実行結果／成功レスポンス等）を反転
  ハイライト）の再現から始める。特大見出し・サブコピー・ボタン2つ・下に製品画像、
  という定型ヒーローを作らない
- プロンプト行 `$ ...` は、反転地のターミナル出力ブロックの**1行目としてブロック内に
  含める**。ブロックの外側に非反転色の別要素として重複表示しない（プロンプトとその
  実行結果は視覚的に同一の反転ブロックの中で完結させる）
- 幅が狭い場合もtableの行・列構造を崩さない。`.table-scroll`（横スクロールのみ）で
  対応し、`td` を縦積みの label:value 形式に変形する「カード化」レスポンシブ
  パターンは使わない（§8のカード禁止と抵触するため）

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: man page の書誌行を模す
  （`KANSATSU(1)　User Commands　KANSATSU(1)` のように左・中央・右の3分割テキスト）。
  これは装飾ではなく実際のナビとしては機能させず、直下の「目次」がナビを兼ねる。
  目次リンクは下線のみ・ホバーで反転せず下線が太くなるだけ
- 角丸: 0px（全要素直角）/ 影: 一切使わない（box-shadow 禁止）/ 境界線: 1px solid
  #dcdad5（セクション区切りのみ 2px）
- ボタン: 2px solid #1b1a18 の実線ボーダー矩形・地は #faf9f7・文字は #1b1a18。
  ホバーで地と文字を反転（#1b1a18 地・#faf9f7 文字）。0.08s のごく短い切り替えのみ
  （フェードを感じさせない即時反転に近い速さ）。角丸・影を付けない
- カード的要素: カードという概念を使わない。区切りは罫線（1px）のみ。FAQの質問文は
  h3として罫線区切りの縦積みにする（余白のみで間隔を作り罫線を省略することは不可）
- 表: 罫線をすべて表示する「素の table」（`border-collapse: collapse` +
  全セル 1px solid #dcdad5）。見出し行のみ背景 #f2f0ec。ゼブラ縞・角丸セル・
  影付きテーブルを作らない
- コードブロック・ターミナル出力: 地 #1b1a18・文字 #faf9f7・IBM Plex Mono・
  padding 20px前後・角丸0。検知行など強調したい1行のみ、その行だけ地と文字を
  再反転（地 #faf9f7・文字 #1b1a18）してハイライトする（less の検索ヒットの見え方に近い）
- フォーム要素: 本テイストでは問い合わせフォームを持たない（連絡はメール表記のテキスト
  リンクのみ）。フォームを使う場合は input の角丸0・1px 濃罫線・フォーカスで
  罫線が 2px に太くなるのみ（色を変えない）
- 画像の扱い: 写真を使わない。図が必要な場合は罫線と文字だけで構成した
  「疑似ターミナル / 疑似図表」に限定する
- アクセント色の適用範囲: 存在しない。強調は「反転」と「太字（500）」と「罫線の太さ」のみで行う

## 6. モーション

- 量: static。スクロール連動アニメ・フェードイン・パララックス・数字カウントアップを
  一切使わない
- 許される唯一の動き: ヒーローの行末に置く疑似カーソル（`█` または `_`）の明滅のみ
  （`opacity` を 0⇄1 に切り替える 1s step アニメーション、ページ内で1箇所だけ）。
  タイプライター風の文字送り（文字が1文字ずつ増えていく演出）は**禁止**。
  ログ本文・見出し・コピーは常に完成形で静止表示する
- 使わない動き: opacity/translate のスクロール出現、数字カウントアップ、カルーセル、
  マーキー、パララックス、タイプライターアニメーション全般

## 7. 写真・イラスト・図版

- 写真・イラストを一切使わない。図版が必要な場合は罫線・文字・空白だけで構成する
  （例: ディレクトリツリーを `├──` `└──` の罫線文字で表現する）
- アイコンは使わない。使う場面（例: 目次の「→」）は約物（矢印記号 U+2192 等）で足りる
  範囲に留める。絵文字・既製アイコンセット・自作SVGピクトグラムのいずれも使わない
  （このテイストは「文字だけで完結する」ことが誠実さの証であるため、他テイストの
  §5 で許容されるインラインSVGアイコンもここでは持たない）
- 見出し階層は `<h1 class="visually-hidden">`（ページ全体タイトル）を起点とし、
  `##` で表現するセクション見出し（h2）はその配下に位置づける。h1 を省略して
  h2 から書き始めない（§9.0 参照）

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / system-ui をデフォルトで使わない（IBM Plex Mono /
  IBM Plex Sans JP で組む。見出しも等幅を崩さない）
- グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow を使わない
- border-radius を使わない（常に 0）
- タイプライター風の文字送りアニメーションを使わない（カーソル明滅1箇所のみ許可という
  例外を、複数箇所への拡大や文字送り演出に広げない）
- 彩度のある色（青・紫・緑・赤・黄など）を一切追加しない。ダーク地＋ネオングロー
  （box-shadow による発光）を作らない。反転（地と文字の入れ替え）以外の強調手段を持ち込まない
- 絵文字・アイコンフォント・既製/自作を問わずアイコン画像を使わない（本テイストは
  文字と罫線のみで完結させる）
- 3カラムの角丸カード＋アイコン構成の機能紹介を作らない（カードという概念自体を使わない）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない
- 純白 #ffffff・純黒 #000000 を使わない
- セクション間・FAQ項目間を、1pxの薄い罫線や余白のみで区切り、--rule-thick
  （2px太罫線）を使わない設計にしない

## 9. 実装ノート

### 9.0 文書骨格（必須・省略不可）

このテイストのCSS/コンポーネント仕様（§1〜§8）を満たす以前に、常に完全なHTML5文書として
書き出すこと。DESIGN.md と tokens.css だけを渡されて生成する場合でも、以下を省略しない。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>…</title>
  <meta name="description" content="…">
  <!-- Google Fonts の preconnect / stylesheet はここ（§9 フォント読み込み参照） -->
  <style>…</style>
</head>
<body>
  <h1 class="visually-hidden">…（ページ全体を要約する非表示h1。§2の見出し規則とは別に、
  アクセシビリティ上の見出し階層の起点として必ず1つ置く）</h1>
  <!-- masthead / hero / toc / セクション群 -->
</body>
</html>
```

- `<meta charset="UTF-8">` は `<head>` の最初の子要素として置くこと。理由: 多くの静的
  ホスティングは HTTP レスポンスヘッダに charset を付与しない。`<meta charset="UTF-8">`
  を欠くと、配信環境によっては和文本文が windows-1252 等に誤判定され文字化けする。これは
  彩度ゼロ・罫線・反転で成立する「誠実さ」というコンセプト（§1）そのものを裏切る重大な
  破綻であるため、テイスト上のルール以前の必須条件として扱う。
- `<html lang="ja">`・`<title>`・`<meta name="viewport">` も同様に省略不可。これらを
  欠いたマークアップは、たとえ §2〜§8 のビジュアル仕様を完全に満たしていても
  「テイスト再現に失敗した」とみなす。
- `.visually-hidden` は `position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;` のような標準的な視覚的非表示（かつスクリーンリーダー読み上げ可）実装とする。
  `display: none` や `visibility: hidden` は読み上げされないため使わない。

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #faf9f7;
  --color-bg-alt: #f2f0ec;
  --color-text: #1b1a18;
  --color-text-weak: #6b6862;
  --color-text-dim: #a9a59c; /* 反転地の上での減光行（過去ログ・コメント行・プロンプト記号）専用 */
  --color-line: #dcdad5;
  --color-invert-bg: #1b1a18;
  --color-invert-text: #faf9f7;
  --font-mono: "IBM Plex Mono";
  --font-body: "IBM Plex Sans JP";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 720px;
  --rule-thick: 2px;
  --rule-thin: 1px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+JP:wght@400;500&display=swap`
- 本文の font-family は `var(--font-mono), var(--font-body), monospace` の順に指定する
  （英数字・記号は自動で IBM Plex Mono になり、和文だけ IBM Plex Sans JP に落ちる）
- 見出しは `## `／`### `／`$ ` のプレフィックスを `<span aria-hidden="true">` で
  くくり、実テキスト（見出し語）は装飾なしで続ける。スクリーンリーダーが記号を
  読み上げないようにしつつ、視覚的には man page の型組みを保つ
- カーソル明滅は `@keyframes blink { 50% { opacity: 0; } }` を `steps(1)` で
  1箇所のみに適用する。トランジションではなくステップ関数にして「明滅」に留め、
  フェードのニュアンスを持ち込まない
- 表は `border-collapse: collapse;` とし、`th, td { border: 1px solid var(--color-line); }`
  を全セルに適用する（縞模様・角丸を付けない）
- セクション区切り・FAQ区切りは以下のスニペットをそのまま使うこと（§4・§5・§8参照）。
  余白のみ・1px細罫線のみへの置き換えは不可。

```css
/* セクション区切り: 彩度の代わりに構造を担保する最重要要素。余白のみ・薄い罫線のみへの置き換え禁止 */
section {
  border-top: var(--rule-thick) solid var(--color-text);
}
section:first-of-type {
  border-top: none;
}
```

```css
/* FAQ区切り */
.faq-item {
  padding: 22px 0;
  border-bottom: var(--rule-thin) solid var(--color-line);
}
.faq-item:first-child {
  padding-top: 0;
}
.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
```