← 見本帳の目次へ

No. 47

ターミナル Terminal Mono

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

デモを開く

仕様

書体等幅書体
配色白黒・グレー
情報量標準
レイアウト1列の縦積み
装飾無骨で構造的
動き動きなし
雰囲気信頼・堅実 / 静か・穏やか
業種SaaS・IT / 企業サイト
架空企業架空・ログ追尾/監視CLI「kansatsu」
利用条件商用利用可・改変可・クレジット不要

このブランドのロゴ

ターミナルのロゴ

ロゴ画像をダウンロード ↗
生成指示・表示条件をダウンロード ↗

実際のロゴ生成指示を見る
# KANSATSU — ヘッダーロゴ

## 制作

2026-09-15 / built-in imagegen。既存サイトのロゴ画像は入力せず、架空ブランド向けに新規生成。

- 画像: `assets/logo.webp`（生成結果をWebPに圧縮、アルファ保持）
- 用途: トップページのヘッダー、または固定サイドのブランド表示
- 方向: command-line log analysis, original bracket eye symbol and bitmap inspired precise wordmark
- 表示: 最大 74 × 25px の枠内で縦横比を保持。スマートフォンでは幅と高さを縮小。
- ブランド名はalt属性に保持。リンクとナビゲーションは既存のまま。
- 同じ画像をデモHTMLに埋め込み、単一ファイルでも表示可能。
- 背景に応じたCSSフィルター: `none`。

## 実際の生成プロンプト

```text
Use case: logo-brand. Create one finished original website header logo for the fictional brand "KANSATSU". Art direction: command-line log analysis, original bracket eye symbol and bitmap inspired precise wordmark. Palette: black. Exact text only: "KANSATSU". Compose an integrated distinctive emblem and custom drawn lettering as ONE compact horizontal lockup, about 3:1 ratio, occupying almost the entire canvas with only 4 percent padding. Must remain legible at 160px wide. Truly transparent alpha background; no background rectangle, mockup, paper, scene, shadow, 3D, watermark, extra labels or logo variations. Clean high resolution flat artwork. Do not imitate any existing brand logo. For Japanese text preserve every character exactly.
```

## 運用

参考サイトのロゴ・商標を流用していない。生成物の商標調査・法的な類似性審査は未実施。

### サイズ調整

ヘッダーの占有面積を抑えるため、ロゴを 74 × 25px、モバイルを 68 × 23px に縮小。本文の見出しより控えめな大きさにする。

DESIGN.md

DESIGN.mdtokens.css

# 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;
}
```


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。