terminal-ui-design

デザイン性の高い、独創的で本番品質のターミナルユーザーインターフェースを作成します。CLI ツール、TUI アプリケーション、ターミナルベースのインターフェースを構築するときに、このスキルを使用してください。ありきたりなターミナルの見た目を避け、創造的で洗練されたコードを生成します。

デザインの検討

コーディングの前に、背景を理解し、大胆な美的方向性を決めてください。

1- 目的：このインターフェースはどんな問題を解決しますか？誰が使いますか？ワークフローはどのようなものですか？ 2- トーン：極端な方向性を選びます。ハッカー／サイバーパンク、レトロコンピューティング（80〜90年代）、ミニマリストな禅、マキシマリストなダッシュボード、シンセウェイヴ・ネオン、モノクローム・ブルータリズム、企業向けメインフレーム、遊び心のある／風変わりな雰囲気、マトリックス風、スチームパンク・ターミナル、ヴェイパーウェイヴ、ミリタリー／戦術的、アールデコ、紙テープを思わせる懐かしさ 3- 制約：技術要件（Python Rich、Go bubbletea、Rust ratatui、Node.js blessed/ink、純粋な ANSI エスケープコード、ncurses） 4- 差別化：このインターフェースを忘れられないものにするのは何ですか？このターミナル体験で、誰もが覚えているものは何ですか？

明確なコンセプトの方向性を選び、精密に表現してください。情報が密集したダッシュボードも、禅のように一点に集中するインターフェースも有効です。重要なのは強さではなく、意図があることです。

枠線と罫線

美的方向性に合う枠線スタイルを選んでください。

• 罫線（細）：┌─┐│└┘ — すっきり、モダン
• 罫線（二重）：╔═╗║╚╝ — 大胆、格式高い、レトロなメインフレーム
• 角丸：╭─╮│╰╯ — 柔らかい、親しみやすい、モダン
• 罫線（太）：┏━┓┃┗┛ — 力強い、工業的
• 破線／点線：┄┆ — 軽やか、風通しがよい、カジュアル
• ASCII のみ：+-+| — レトロ、幅広い互換性
• ブロック文字：█▀▄▌▐ — 厚みがある、大胆、ブルータリズム
• 独自の Unicode：◢◣◤◥、●○◐◑、▲▼◀▶などの記号を組み合わせて、独自の枠を作ります

単純な罫線の枠をデフォルトにするのは避けてください。非対称の枠、二重に太いヘッダー、◆、◈、✦、⬡のような装飾的な角を検討してください。

色とテーマ

一貫性のあるパレットを使ってください。ターミナルの色の使い方：

• ANSI 16色：定番で、幅広く使えます。デフォルトの赤／緑／青にとどまらず、個性的な組み合わせを工夫します
• 256色：豊かなパレット。カラーグラデーションや、微妙な背景の変化を使います
• トゥルーカラー（24ビット）：全スペクトル。グラデーションテキストや滑らかな色の変化を使います
• モノクローム：明るさの違い（暗め、標準、太字、反転）を使った単色。制約を生かしたエレガントな表現です

次のような方法で雰囲気を作ります。

• セクションに背景色のブロックを使う
• ブロック文字░▒▓█でグラデーションを作る
• 意味に応じて色を使い分ける（ただし、赤＝悪い、緑＝良いというありがちな表現は避けます）
• 強調に反転表示を使う
• 補足情報には暗めのテキスト、主要な情報には太字を使う

パレットの例（独自に考案してください）：

• サイバーパンク：ホットピンク #ff00ff、エレクトリックシアン #00ffff、背景はディープパープル #1a0a2e
• アンバーターミナル：黒地に #ffb000。ビンテージCRTを思わせる配色
• Nord風：暗い青灰色を背景に、涼しげな青と落ち着いた緑
• ホットドッグスタンド：意図的にけばけばしい黄色／赤（遊び心や皮肉のあるUI向け）

タイポグラフィとテキストのスタイル

ターミナルはタイポグラフィがすべてです。細部までこだわりましょう。

• ASCII アートのヘッダー：figlet風のバナー、独自の文字形、Unicode アートを使います
• 文字の太さ：太字、暗め、標準を使い分けて、視覚的な階層を作ります
• テキストの装飾：下線、取り消し線、斜体（対応している場合）を使います
• 文字間隔：ヘッダーにスペースを入れて、文字間隔を表現します。例：H E A D E R
• 大文字／小文字：ヘッダーはすべて大文字、本文は小文字、強調には大文字／小文字を混ぜます
• Unicode 記号：→ • ◆ ★ ⚡ λ ∴ ≡ ⌘を使ってテキストを豊かにします
• 独自の箇条書き記号：-を▸ ◉ ✓ ⬢ ›やテーマに合った記号に置き換えます

ASCII アートのスタイル： ブロック： ███████╗██╗██╗ ███████╗ スラント： /___ / / // / / ____/ スモール： ╔═╗┌─┐┌─┐ ミニマル： [ HEADER ]

レイアウトと空間構成

単一カラムの出力にとらわれないでください。

• パネルとウィンドウ：境界線を使って、明確に区分された領域を作成します
• カラム：慎重に間隔を調整し、情報を横に並べます
• テーブル：データを意味のある形で揃え、Unicode の罫線文字を使います
• 余白：パネル内に十分なパディングを設け、セクション間にもゆとりを持たせます
• 情報密度：用途に合わせます。ダッシュボードは情報量を多くし、ウィザードはすっきりさせます
• 階層：主要コンテンツ、補足情報、クロームを視覚的に明確に区別します
• 非対称性：中央からずらしたタイトル、重み付けしたレイアウト、意外性のある配置を取り入れます

モーションとアニメーション

ターミナルは動的なコンテンツに対応しています。

• スピナー：基本的な |/- にとどめません。点字パターン ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏、ドット ⣾⣽⣻⢿⡿⣟⣯⣷、カスタムシーケンスを使います
• プログレスバー：▓░、█▒、[=====> ]、または ◐◓◑◒ のような独創的な代替表現を使います
• タイピング効果：演出として、テキストを1文字ずつ表示します
• トランジション：ワイプ効果や、色の強さを変えながらフェードイン／フェードアウトさせます
• ライブ更新：データのストリーミングやリアルタイムのチャートを表示します

データ表示

• スパークライン：インラインのミニチャートに ▁▂▃▄▅▆▇█ を使います
• 棒グラフ：ブロック文字を使った横棒グラフ
• テーブル：列幅を適切に調整し、行ごとに色を交互に変え、数値を揃えます
• ツリー：階層構造に ├── └── │ を使います
• ステータスインジケーター：● 緑、○ 空、◐ 部分的、✓ 完了、✗ 失敗
• ゲージ：パーセンテージを添えた [████████░░]

装飾要素

• 乱雑にならない範囲で個性を加えます。
• 区切り線：───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
• セクションマーカー：▶ SECTION、[ SECTION ]、─── SECTION ───、◆ SECTION
• 背景テクスチャ：· ∙ ░ のような薄い文字を使ったパターン
• アイコン：利用できる場合は Nerd Font のアイコン： 󰊢

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

次のような、ありきたりなターミナルの見た目は絶対に使わないでください。

• 書式設定のないプレーンテキストの出力
• 意図したパレットを使わないデフォルトの色
• 装飾のない基本的な [INFO]、[ERROR] のプレフィックス
• 単純な ---- の区切り線
• 構造化されていないテキストの塊
• 個性のない汎用的なプログレスバー
• 退屈なヘルプテキストの書式
• 一貫性のない余白や位置揃え

ライブラリのクイックリファレンス Python：Rich、Textual Go：Bubbletea、Lipgloss Rust：Ratatui Node.js：Ink、Blessed

ANSI エスケープコード： \x1b[1m 太字 \x1b[3m 斜体 \x1b[4m 下線 \x1b[31m 赤の前景色 \x1b[38;2;R;G;Bm トゥルーカラー \x1b[2J 画面をクリア

ターミナルは、独自の制約と可能性を備えたキャンバスです。単にテキストを出力するのではなく、体験を作り上げましょう。

実装の複雑さを、目指す美的ビジョンに合わせます。情報量の多い監視ダッシュボードには、精巧なパネルやライブ更新が必要です。ミニマルな CLI には、抑制、正確さ、完璧な位置揃えが求められます。ビジョンを巧みに実現することで、エレガンスが生まれます。