Claude Code ガイド

Appearance

原文（日本語に翻訳） ​

display:none によってノードが非表示になった際に ink2 モードで視覚的なアーティファクトが発生する問題を修正

原文（英語） ​

Fixed visual artifacts in ink2 mode when nodes become hidden via display:none

概要 ​

Claude Code v2.1.6 では、ink2 レンダリングエンジンの表示問題が修正されました。以前のバージョンでは、UI コンポーネントが display:none で非表示にされた際に、画面上に視覚的なゴミ（アーティファクト）が残ってしまう問題がありました。この修正により、要素の表示/非表示が正確に処理され、クリーンな UI が維持されるようになりました。

基本的な使い方 ​

この修正は自動的に適用され、ユーザー側での設定変更は不要です。

正常な UI レンダリング:

  1. Claude Code の UI 要素が動的に表示/非表示される
  2. 非表示になった要素は完全に消える
  3. 画面上に視覚的なゴミが残らない

実践例 ​

修正前の問題（v2.1.5以前） ​

UI 要素が非表示になった後も視覚的なゴミが残る:

┌─────────────────────────────────┐
│ Claude Code                     │
├─────────────────────────────────┤
│ > How can I help you?           │
│                                 │
│ [Loading indicator...]          │ ← 本来は非表示
│ ████████                        │ ← 視覚的なゴミ
│ ░░░░░░░░                        │ ← アーティファクト
│                                 │
│ Type your message...            │
└─────────────────────────────────┘

# ローディングが終わってもゴミが残る

特に以下の場合に顕著:

  • プログレスバーやスピナーの非表示後
  • モーダルダイアログを閉じた後
  • 通知メッセージが消えた後
  • ポップアップメニューを閉じた後

修正後の動作（v2.1.6以降） ​

v2.1.6 では、要素が完全に消えてクリーンな表示:

┌─────────────────────────────────┐
│ Claude Code                     │
├─────────────────────────────────┤
│ > How can I help you?           │
│                                 │
│                                 │ ← クリーン
│                                 │ ← アーティファクトなし
│                                 │
│                                 │
│ Type your message...            │
└─────────────────────────────────┘

# 非表示要素は完全に消える

ローディングインジケーターの表示/非表示 ​

コマンド実行時のローディング表示:

bash
# コマンドを実行
/doctor

# ローディング中
[●●●○○○] Checking system...

# v2.1.5 以前: ローディングが終わっても
# [○○○○○○] ← ゴミが残る

# v2.1.6 以降: 完全に消える
# （クリーンな画面）

モーダルダイアログの表示 ​

設定ダイアログの表示/非表示:

bash
# /config を実行
╔════════════════════════════╗
║ Configuration              ║
║                            ║
║ Model: claude-sonnet-4     ║
║ Theme: dark                ║
║                            ║
║ [Save] [Cancel]            ║
╚════════════════════════════╝

# Esc を押してダイアログを閉じる

# v2.1.5 以前:
# ╚════════ ← 枠線の一部が残る

# v2.1.6 以降:
# （完全にクリーン）

通知メッセージの自動消去 ​

一時的な通知メッセージ:

# ファイル保存時
┌─────────────────────────┐
│ ✓ File saved            │
└─────────────────────────┘

# 3秒後に自動的に消える

# v2.1.5 以前:
# └───── ← 一部が残る

# v2.1.6 以降:
# （完全に消える）

プログレスバーの更新 ​

ファイル処理時のプログレスバー:

# 処理中
Processing files...
[████████░░░░░░░░] 50%

# 完了時
Processing files...
[████████████████] 100%

# 処理完了後、プログレスバーが消える

# v2.1.5 以前:
# [░░░░░░░░░░░░░░░░] ← ゴミが残る

# v2.1.6 以降:
# （完全に消える）

オートコンプリートメニュー ​

@ オートコンプリートの表示/非表示:

# @ を入力
@
┌─────────────────────┐
│ 📄 src/app.ts       │
│ 📄 src/utils.ts     │
│ 📁 tests/           │
└─────────────────────┘

# Esc でキャンセル

# v2.1.5 以前:
# └───── ← 枠線が残る

# v2.1.6 以降:
# （完全に消える）

コンテキストメニュー ​

右クリックメニュー（対応している場合）:

# メニュー表示
┌─────────────┐
│ Copy        │
│ Paste       │
│ Clear       │
└─────────────┘

# クリック後

# v2.1.5 以前:
# │ ← 縦線が残る

# v2.1.6 以降:
# （クリーン）

複数要素の同時非表示 ​

複数の UI 要素が同時に消える場合:

# 複雑な UI 状態
┌─────────────────────────────────┐
│ [Notification] File saved       │
│ [Progress] ████████ 80%         │
│ [Dialog] Processing...          │
└─────────────────────────────────┘

# 全て完了

# v2.1.5 以前:
# ████ [D ← 複数のゴミが残る

# v2.1.6 以降:
# （完全にクリーン）

注意点 ​

  • この修正は Claude Code v2.1.6 で導入されました
  • ink2 レンダリングエンジンを使用する環境でのみ関連します
  • display:none による要素の非表示が正しく処理されるようになりました
  • 視覚的なアーティファクトが完全に除去され、よりクリーンな UI になります
  • 端末エミュレータによっては、画面の再描画が必要な場合があります
  • この問題は主に動的に表示/非表示を切り替える UI 要素で発生していました
  • 修正により、長時間使用時の画面の乱れも軽減されます

関連情報 ​