tui-visual-design

TUI のビジュアルデザインと美しい仕上げ

ターミナル UI を、単に機能するだけでなく、意図が感じられ、洗練され、読みやすく、本番環境にふさわしい見た目にしたい場合に、このスキルを使用してください。優れた TUI デザインとは、厳しいターミナルの制約のもとで、セル、テキスト、余白、色、罫線、グリフ、リズム、動きを巧みに扱うことです。

デザインの基本原則

1. まず情報設計から始めます。 ユーザーが最初に注目すべきもの、次に重要なもの、要求されるまで隠しておけるものを決めます。
2. セル単位でデザインします。 見た目に関するあらゆる判断で、固定幅の文字セルを消費します。パディング、罫線、スクロールバー、アイコンには、それだけのスペースを割く価値が必要です。
3. 装飾の種類を絞り、一貫して使います。 洗練された TUI では通常、罫線の表現、余白の尺度、見出しの体系、意味に応じた色の役割をそれぞれ一つに統一します。
4. 落ち着いたデフォルトを優先します。 強い色、太い罫線、反転表示、アニメーション、アイコンは、あらゆる要素を飾るのではなく、状態の変化や操作を強調するために使います。
5. 表示が制限された場合も意図したデザインにします。 あらゆるビジュアルデザインは、色なし、ASCII、狭い幅、ライトテーマ、リモート SSH、スクリーンリーダーに配慮したモードでも機能する必要があります。

視覚的な階層と構成

階層は、配置、余白、グループ化、テキストラベル、整列、太さ、色の順に作ります。階層全体を色だけで表現しないでください。

• メインのタスクや現在の選択項目は、最も強い視覚的な拠り所となる位置に置きます。一覧性を重視する場合は左上に、モーダルやランディング画面の場合に限り中央に配置します。
• 全周の罫線は重要な領域にのみ使います。二次的なグループ化には、余白や控えめな区切り線を使います。
• 0、1、2、4 セルなどの余白の尺度を使います。場当たり的なパディングは、TUI を即興で作ったように見せます。
• フォームや空の状態にはゆとりを持たせます。ダッシュボードには情報を密に配置しつつ、関連する指標をまとめ、グループ間には余白を設けます。
• プログレッシブディスクロージャーを活用します。折りたたみ可能なセクション、詳細ペイン、コマンドパレット、ヘルプオーバーレイによって、デフォルト画面を落ち着いた状態に保てます。

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

ターミナル内のアプリでは実際のフォントを使えませんが、それでもタイポグラフィの体系は構築できます。

• 見出しには階層を設けます。タイトル、セクションラベル、フィールドラベル、ヒント、ステータスを使い分けます。大文字・小文字の使い方や句読点は予測しやすいものにします。
• 太字は見出し、選択中のラベル、重要な値に使うのが最適です。暗い表示は任意のヒントに限り、必須のテキストには使いません。
• 斜体の表示はターミナルによって異なるため、控えめに使います。下線はリンクやフォーカスを示します。取り消し線が役立つ場面は限られています。点滅はレガシー互換性の表示を除いて避け、注目を引く目的では決して使いません。
• ラベルは左揃え、数値は右揃え、表のテキストは左揃えにし、単位は一貫した位置に配置します。操作項目は操作順に並べます。
• 意図を持って省略します。ID は一意性を保ち、ファイル拡張子を残し、必要に応じてパスの先頭と末尾を表示します。フォーカス時や詳細表示では全文を確認できるようにします。
• 文章は単語の区切りで折り返し、コード、ログ、構造化された出力のインデントを維持します。

罫線、ボックス、コンテナー

罫線は句読点のようなものです。ボックスが多すぎると視覚的なノイズになります。

• モーダル、フォーカス中のパネル、主要な領域には全周の罫線を使います。
• ナビゲーションレール、アクティブなセクション、控えめなグループ化には、左側または下側だけの線を使います。
• 深くネストしたボックスは避けます。罫線で囲んだパネルの中では、余白、見出し、区切り線を優先します。
• プロダクトで使う罫線の種類を一つ選びます。プレーンな ASCII、細線、角丸、太線、二重線などです。階層を示す場合に限り、複数の種類を組み合わせます。
• 罫線の内側のパディングは、通常は水平方向に 1 セルです。パディングがないと窮屈になり、広すぎるとターミナルのスペースを無駄にします。
• 半ブロック文字や暗い背景を使った影や奥行きの表現は、管理された Truecolor ターミナルでは高級感を演出できますが、影なしでも表示できる代替手段が必要です。

カラーデザイン

生の色を使う前に、意味的な役割を定義してください：プライマリ、アクセント、成功、警告、エラー、情報、ミュート、選択中、フォーカス中、無効、境界線、背景、サーフェス。

• パレットは小さく保ちます。ほとんどの TUI では、アクセントカラーを1色と意味的な状態色があれば十分です。
• テーマを制御できるフルスクリーンアプリを構築する場合を除き、背景を広範囲に塗りつぶすのは避けます。多くのユーザーはターミナルの背景をカスタマイズしています。
• 暗い背景と明るい背景の両方に対応します。黄色、青、暗いグレー、彩度の低い色は、どちらかの背景で見づらくなることがよくあります。
• 256色モードと16色モードでは、意図的に色数を減らします。16色モードでは、不確かな RGB の想定に頼らず、名前付きのターミナルカラーを優先します。
• 色だけで意味を伝えないでください。赤いエラーには、Error のような語、アイコン、配置、または境界線を組み合わせます。
• グラデーションは、トゥルーカラーではバナー、チャート、プログレスバーに洗練された印象を加えられますが、色数が制限されるモードでは意味的な単色に置き換えます。

チャート、データの可視化、情報密度

ターミナルのチャートは、生の数値を読むよりも素早く答えを得られるものであるべきです。

• 横棒グラフが最も安全な形式です：左にラベル、右に値、中央にバーを配置します。
• スパークラインは傾向の把握に役立ちますが、正確な値には向きません。最小値、最大値、現在値をテキストで追加します。
• プログレスバーには、ラベル、パーセンテージまたは件数、未完了部分を示す明確な区別が必要です。
• テーブルには、配置、余白、安定した列順、明確なフォーカス行が必要です。しま模様の行は任意ですが、色なしモードでは行の区切り線の代わりにしてはいけません。
• ヒートマップには凡例とテキストによる代替表現が必要です。色の見え方やターミナルのパレットは環境によって異なるためです。
• ダッシュボードでは、健全性、処理量、レイテンシ、エラー、キュー、リソースなど、判断の目的ごとにグループ化します。スペースがあるからといって、すべてのセルを埋めないでください。

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

モーションは待機、進捗、遷移、または注意喚起を伝えるために使います。それ以外の場合はノイズになります。

• 終了時刻が分からない待機には低頻度のスピナーを使い、進捗が分かる場合は確定的なプログレスバーを使います。
• SSH、CI、ログ、視覚効果を抑える設定が有効な場合、または描画コストが高い場合は、アニメーションを一時停止するか簡素化します。
• 1秒間に3回を超える点滅は避けます。
• スライドやフェードなどの遷移は、ユーザーがコンテキストを維持するのに役立ちますが、中断可能で、処理コストが低くなければなりません。
• スムーズスクロールはローカルのターミナルでは魅力的ですが、リモート接続ではページ単位の移動のほうが適している場合があります。

アイコン、グリフ、装飾要素

グリフは、予測しやすく、任意で使える場合に、情報を素早く読み取るのに役立ちます。

• 成功、失敗、警告、情報、読み込みなど、ラベル付きのシンプルな状態記号を使います。
• Nerd Fonts や私用領域のグリフを必須にしないでください。--ascii またはシンプルなアイコンセットを用意します。
• 絵文字を整列したレイアウトで使う前に、幅と描画結果を確認します。
• 階層やナビゲーションには矢印やシェブロンを使いますが、重要な確認では誤解を招く記号を避けます。
• 装飾的なバナー、パーティクル、マスコットは、プレーン表示、狭い画面、CI、アクセシビリティの各モードでは非表示にします。

プロンプトとインタラクティブ要素

優れたプロンプトは、次の操作を分かりやすく示します。

• 入力に問題があった場合は、そのフィールドの近くに検証結果を表示し、修正方法を明確に示します。
• デフォルト値や破壊的な操作の影響は、色だけでなくテキストでも示します。
• 色なしモードでも認識できるフォーカス表示を使います：接頭記号、境界線の変更、ラベル、またはカーソル位置などです。
• 選択メニューの視覚的な表示を安定させます。ユーザーが移動している最中に選択肢を動かさないでください。
• 確認ダイアログは落ち着いたレイアウトと明確な操作ラベルを使い、破壊的な操作には安全なデフォルト値を設定します。
• 重要でない通知は短時間だけ表示します。継続的なエラーには、固定表示領域またはログパネルを用意します。

フレームワークのスタイル設定のデフォルト

• Ratatui: Layout の制約、Block の境界線、Paragraph の折り返し、Table の幅、意味に基づく Style を組み合わせます。サイズとカラーモードを固定してスナップショットを取得します。
• Textual: CSS クラス、コンポーネントのバリアント、テーマ変数、トランジションを慎重に使用し、カスタムウィジェットの見た目を組み込みウィジェットと統一します。
• Bubble Tea + Lip Gloss: スタイルを一元管理し、マージン、パディング、境界線を組み合わせ、幅の広い Unicode 文字を使って Width／Height の計算をテストします。
• Rich: Theme のロールを定義し、テーブル、パネル、進捗表示を一貫して使用します。出力が視覚的に重くなるまで、パネルを入れ子にするのは避けます。
• Ink: フレックスレイアウトを意図的に使用し、スタイルトークンを一元管理します。また、ターミナル幅の変化によって React コンポーネントツリーが再配置されることを念頭に置きます。
• Terminal.Gui: ビュークラスごとにカラースキームとフォーカススタイルを定義し、マウスとキーボードのフォーカスインジケーターが一致することを確認します。
• Spectre.Console: 控えめなテーマと色なしのフォールバックを用いて、マークアップ、テーブル、ツリー、区切り線、パネル、進捗表示を使用します。

視覚的なアンチパターン

• 意味に基づく体系のない虹色のパレット。
• すべてのウィジェットを太い境界線で囲む。
• 境界線やターミナルの端に押し込まれた小さなテキスト。
• 色だけでエラー、選択状態、警告を示す。
• 中央揃えのテーブルや数値。
• フォールバックのない Nerd Fonts のアイコン。
• データの変化よりも速く再描画するアニメーション付きダッシュボード。
• 120 カラムでしか機能しないデザイン。
• 明るいターミナルテーマ、NO_COLOR、TERM=dumb、TTY 以外の出力を考慮しない。

参考ファイル

• references/layout-typography.md - 視覚的階層、間隔、リズム、タイポグラフィ、配置、折り返し、切り詰め。
• references/color-design.md - 意味に基づくパレット、コントラスト、テーマへの適応、グラデーション、制約のあるカラーモード。
• references/borders-icons-prompts.md - 罫線、コンテナー、グリフ、アイコン、プロンプト、フォーム、ダイアログ、通知。
• references/charts-visualization.md - 棒グラフ、スパークライン、ゲージ、進捗表示、テーブル、ツリー、ヒートマップ、ダッシュボードの情報密度。
• references/animation-motion.md - スピナー、モーションデザイン、トランジション、スクロール、装飾効果、パフォーマンス上の制限。
• references/framework-styling.md - Ratatui、Textual、Bubble Tea/Lip Gloss、Rich、Ink、Terminal.Gui、Spectre.Console の視覚的なスタイル設定のレシピ。