terminal-ui-design

ターミナル UI のデザイン

意図を持った美しさで、個性的かつ本番品質のターミナルインターフェースを作成しましょう。テキストを表示するだけでなく、体験を作り上げましょう。

クイックスタート

コーディングを始める前に、大胆な美的方向性を選びましょう。

スタイル	雰囲気	色	枠線
サイバーパンク	ネオン、未来的	ホットピンク #ff00ff、シアン #00ffff、パープル #1a0a2e	ブロック █▀▄
アンバーターミナル	レトロな CRT	黒地に #ffb000	二重 ╔═╗
ミニマリスト禅	クリーン、集中できる	Nord パレット、寒色系ブルー	角丸 ╭─╮
レトロメインフレーム	企業的、フォーマル	黒地にグリーン	ASCII のみ +-+
シンセウェーブ	80 年代のノスタルジー	パープル、ピンクのグラデーション	太線 ┏━┓
モノクローム・ブルータリスト	無骨、大胆	単色＋強度	太線 ┏━┓

方向性を 1 つ選び、精密に仕上げましょう。

デザイン思考チェックリスト

質問	決めること
目的	どんな問題を解決しますか？誰が使いますか？どんなワークフローですか？
トーン	極端なスタイルを選びましょう：サイバーパンク、禅、レトロ、マキシマリスト、遊び心のあるスタイル
制約	Python Rich、Go bubbletea、Rust ratatui、ANSI コードのどれを使いますか？
差別化	何がこのデザインを忘れられないものにしますか？

ボックス描画と枠線

美的方向性に合った枠線を選びましょう。

Single:     ┌─────┐ │   └─────┘  Clean, modern
Double:     ╔═════╗ ║   ╚═════╝  Bold, formal, retro
Rounded:    ╭─────╮ │   ╰─────╯  Soft, friendly
Heavy:      ┏─────┓ ┃   ┗─────┛  Strong, industrial
Dashed:     ┄┄┄┄┄┄ ┆              Light, airy
ASCII:      +-----+ |   +-----+  Retro, universal
Block:      █▀▀▀▀█ ▄   ▀▀▀▀▀    Chunky, brutalist

プロのヒント：装飾的な角を使いましょう：◆ ◈ ✦ ⬡ ◢◣◤◥

色の使い方

手法	使用する場面	テクニック
ANSI 16 色	幅広い互換性が必要な場合	クラシックなパレットを使い、独自の組み合わせを作る
256 色	豊かな表現と移植性を両立したい場合	グラデーション、繊細な色の変化
トゥルーカラー	モダンなターミナル	全色域、滑らかな変化
モノクローム	洗練された制約	単色で強度を変える

雰囲気を作りましょう：

• セクションに背景色のブロックを使う
• グラデーションの塗りつぶし：░▒▓█
• 意味に基づいた色使い（「赤＝悪い」「緑＝良い」の陳腐な表現は避ける）
• 強調には反転表示を使う
• 二次情報は暗く、主要情報は太字にする

タイポグラフィ

ターミナルはタイポグラフィがすべてです。

テクニック	効果	例
ASCII アートの見出し	印象的な導入	figlet スタイルのバナー
文字の太さ	階層	太字、暗色、標準
装飾	強調	下線、斜体、取り消し線
文字間隔	見出し	H E A D E R
大文字・小文字	語り口	見出しはすべて大文字、本文は小文字
Unicode 記号	豊かな表現	→ • ◆ ★ ⚡ λ ∴ ≡ ⌘ ✓ ✗
カスタム箇条書き	個性	- の代わりに ▸ ◉ ✓ ⬢ › を使う

Block:    ███████╗██╗██╗     ███████╗
Slant:    /___  / / // /     / ____/
Small:    ╔═╗┌─┐┌─┐
Minimal:  [ HEADER ]

レイアウトと空間構成

単一カラムの出力から抜け出しましょう。

要素	用途
パネルとウィンドウ	枠線で区切られた独立した領域
カラム	情報を横並びに表示
テーブル	データを整列して表示し、Unicode の表用文字を使う
余白	十分なパディングでゆとりを持たせる
情報密度	目的に合わせる。ダッシュボードは高密度、ウィザードは低密度
階層	主要、二次、クロームを視覚的に区別する
非対称	中央からずらしたタイトル、重み付けしたレイアウト

動きとアニメーション

要素	例
スピナー	⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏、⣾⣽⣻⢿⡿⣟⣯⣷
プログレスバー	▓░、█▒、[=====> ]、◐◓◑◒
タイピング効果	文字を 1 つずつ表示
トランジション	ワイプ効果、色の強度を変えながらフェード
ライブ更新	データのストリーミング、リアルタイムチャート

データ表示

種類	テクニック
スパークライン	▁▂▃▄▅▆▇█ のインラインミニチャート
棒グラフ	ブロック文字を使った横棒グラフ
テーブル	適切なサイズ調整、行の交互色、数値の整列
ツリー	├── └── │ の階層表示
ステータス	● 緑、○ 空、◐ 一部完了、✓ 完了
ゲージ	パーセンテージ付きの [████████░░]

装飾要素

Dividers:   ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
Sections:   ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
Textures:   · ∙ ░ patterns for backgrounds
Icons:       (if Nerd Fonts available)

避けるべきアンチパターン

❌ 避ける	✅ 代わりに
書式のないプレーンテキスト	意図に沿ったスタイル付きの出力
デフォルトの色	統一感のあるカラーパレット
汎用的な [INFO] プレフィックス	アイコン付きのスタイル付きプレフィックス
単純な ---- 区切り線	───── ═════ のような Unicode 区切り線
文字の壁	構造化されたパネルとセクション
汎用的な進捗表示	独創的なスピナーとバー
単調なヘルプ	書式を整え、位置を揃えたヘルプテキスト
不揃いな余白	正確な位置揃え

ライブラリのクイックリファレンス

言語	ライブラリ
Python	Rich, Textual, curses, prompt_toolkit
Go	Bubbletea, Lipgloss
Rust	Ratatui
Node.js	Ink, Blessed, cliui
Pure	ANSI エスケープコード

ANSI エスケープコード

\x1b[1m       Bold
\x1b[3m       Italic
\x1b[4m       Underline
\x1b[31m      Red foreground
\x1b[38;2;R;G;Bm  True color (RGB)
\x1b[2J       Clear screen
\x1b[H        Cursor home

実装パターン

1. 美的スタイルを選ぶ（サイバーパンク、禅、レトロなど）
2. カラーパレットを定義する（2〜3 色と背景色）
3. 境界線のスタイルを選ぶ（シングル、ダブル、角丸、ブロック）
4. 再利用可能なコンポーネントを作る（パネル、テーブル、ステータス）
5. すべての出力に一貫して適用する

リソース

ファイル	読み込むタイミング
references/box-drawing.md	境界線の文字を参照する必要がある場合
references/ansi-codes.md	エスケープコードを参照する必要がある場合
references/color-palettes.md	定義済みのパレットが必要な場合

終了条件（コードで検証）

• 意図的な美的スタイルのある出力になっている（汎用的ではない）
• 全体を通して統一感のあるカラーパレットが使われている
• 境界線とタイポグラフィが選んだスタイルに合っている
• 書式のないプレーンテキストがない
• アンチパターンを避けている