Claude Codeの見た目カスタマイズ|テーマ・カラー・ステータスラインの設定方法

  • 1970年1月1日
  • 最終更新: 2026年4月25日
この記事の結論

Claude Codeは /config コマンドでテーマ・ステータスライン・通知音・Markdown表示・差分表示を細かくカスタマイズでき、ターミナルの配色設定と組み合わせることで長時間作業に耐える快適な開発環境を構築できます。全設定項目と推奨設定を解説します。

ブログ目次

記事の内容を、そのまま実務に落とし込みたい方向け

HubSpot導入、AI活用、CRM整備、業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。


Claude Codeは /config コマンドでテーマ・ステータスライン・通知音・Markdown表示・差分表示を細かくカスタマイズでき、ターミナルの配色設定と組み合わせることで長時間作業に耐える快適な開発環境を構築できます。全設定項目と推奨設定を解説します。

「1日中Claude Codeを触っているのに、デフォルトの見た目のままで目が疲れる」「今使っているモデルや残りトークン数をいちいち確認するのが面倒」——Claude Codeを日常的に使っているエンジニアなら、些細だが積み重なるストレスとして感じている部分ではないでしょうか。

Claude Codeは /config コマンドを通じて、テーマ・ステータスライン・通知音・Markdown表示・差分表示形式など、見た目と情報表示の多くを細かくカスタマイズできます。設定はグローバルまたはプロジェクト単位で保存され、ターミナルアプリ側のフォント・配色(Solarized Dark、Tokyo Night等)と組み合わせることで、長時間作業に耐える快適な環境を構築できます。

本記事では、Claude CodeのUIカスタマイズ項目の全体像から、テーマの切り替え、ステータスラインの情報表示、ターミナルとの連携設定、そしてチーム全体で統一した設定を共有する方法までを解説します。


この記事でわかること

Claude Codeの見た目を自分好みにカスタマイズして、長時間の開発作業でも快適に使い続けるための設定方法を解説します。テーマ切り替えからステータスラインの情報表示まで、実用的なカスタマイズを紹介します。

  • Claude Codeで変更できるUIカスタマイズ項目の全体像がわかる — テーマの切り替え、ステータスラインの情報表示、出力フォーマットの調整などが可能です。
  • テーマ(ダーク・ライト)の切り替え方法を理解できる — ダークテーマは長時間の作業に適しています。黒背景に明るい文字色で表示されるため、暗い環境での視認性が高く、目への負担を軽減します。
  • ステータスラインに表示する情報をカスタマイズする手順がわかる — ステータスラインは、ClaudeCodeの画面下部に表示される情報バーです。
  • ターミナルのフォント・配色と組み合わせた最適な設定を構築できる — ClaudeCodeの見た目は、ターミナルアプリの設定とも密接に関連します。
  • チーム全体で統一した見た目設定を共有する方法を学べる

対象読者: Claude Codeを日常的に使っているエンジニアで、作業環境をより快適に整えたい方


Claude CodeのUIカスタマイズとは

Claude CodeのUIカスタマイズとは、ターミナル上で動作するClaude Codeの表示設定を変更し、自分の作業スタイルに最適化することです。テーマの切り替え、ステータスラインの情報表示、出力フォーマットの調整などが可能です。

Claude Codeは /config コマンドでほとんどの表示設定を変更できます。設定はグローバル(全プロジェクト共通)またはプロジェクト単位で保存され、次回起動時にも自動的に適用されます。

カスタマイズ項目 設定コマンド 説明
テーマ /config set theme ダーク/ライト/システム連動
ステータスライン /config set status モデル名・トークン数等の表示
通知音 /config set notifications タスク完了時のサウンド通知
出力の折り返し /config set wordwrap 長い行の折り返し表示
Markdown表示 /config set renderMarkdown Markdownのリッチ表示のON/OFF
差分表示 /config set diffEnabled ファイル変更時の差分表示形式
言語 /config set preferredLanguage 応答言語の指定

テーマの切り替え

ダークテーマ

/config set theme dark

ダークテーマは長時間の作業に適しています。黒背景に明るい文字色で表示されるため、暗い環境での視認性が高く、目への負担を軽減します。夜間の作業やモニターの輝度を下げている環境で推奨します。

ライトテーマ

/config set theme light

ライトテーマは白背景にダーク文字色で表示されます。明るいオフィス環境や、日中の作業で見やすい設定です。

システム連動

/config set theme system

OSのダークモード設定に自動で追従します。macOSの「外観モード: 自動」と組み合わせることで、時間帯に応じてテーマが自動切り替えになります。


ステータスラインのカスタマイズ

ステータスラインは、Claude Codeの画面下部に表示される情報バーです。現在のモデル名、トークン使用量、セッション情報などを表示できます。

表示項目の設定

/config set status enabled

ステータスラインには以下の情報が表示されます。

表示項目 内容 活用場面
モデル名 使用中のClaude モデル 複数モデルを使い分ける際に確認
トークン数 現在のコンテキスト使用量 /compact のタイミング判断
セッション時間 セッション開始からの経過時間 長時間作業の区切り判断
プロジェクト名 現在の作業ディレクトリ 複数プロジェクトの切り替え確認

特に「トークン数」の表示は実務上重要です。コンテキストウィンドウの消費状況をリアルタイムで把握できるため、/compact を実行するタイミングを適切に判断できます。コンテキスト管理の詳細は「Claude Codeの/compactコマンド解説」を参照してください。


ターミナル環境との組み合わせ

Claude Codeの見た目は、ターミナルアプリの設定とも密接に関連します。ターミナル側の設定を調整することで、より快適な作業環境を構築できます。

フォント設定

Claude Codeで表示されるコードやテキストのフォントは、ターミナルアプリ側で設定します。

ターミナルアプリ フォント設定場所
macOS Terminal 環境設定 → プロファイル → フォント
iTerm2 Preferences → Profiles → Text → Font
Windows Terminal 設定 → プロファイル → 外観 → フォントフェイス
VS Code統合ターミナル 設定 → Terminal › Integrated: Font Family

プログラミング用等幅フォント(JetBrains Mono、Fira Code、Source Code Pro等)を設定すると、コードの可読性が向上します。日本語を扱う場合は、日本語グリフを含むフォント(PlemolJP、HackGen等)を推奨します。

配色(カラースキーム)

ターミナルの配色はClaude Codeの出力色に影響します。Claude Codeのダークテーマと相性の良いターミナル配色を紹介します。

  • Solarized Dark: コントラストが控えめで長時間作業に適している
  • One Dark Pro: VS Codeの人気テーマと統一感を出せる
  • Tokyo Night: 日本語テキストとの相性が良いモダンな配色
  • Catppuccin Mocha: 暖色系のアクセントで視認性と快適さを両立

画面分割

ターミナルの画面分割機能を使えば、Claude Codeとファイルエディタを同時に表示できます。tmuxやiTerm2の画面分割を活用することで、Claude Codeの出力を見ながらファイルを確認するワークフローが構築できます。


実務での活用パターン

パターン1: 長時間作業用の目に優しい設定

大量の記事制作やデータ分析など、長時間Claude Codeを使う場面では、目への負担を最小限にする設定が重要です。こうしたAI活用に関心のある方は、経営データの可視化コンテンツマーケティングの効率化の詳細もあわせてご覧ください。

/config set theme dark
/config set renderMarkdown true

加えて、ターミナル側で以下を調整します。

  • フォントサイズ: 14〜16pt(小さすぎると目が疲れる)
  • 行間: 1.2〜1.4倍(詰まりすぎない程度に)
  • 背景透過度: 0%(透過は見にくくなるため非推奨)

パターン2: プレゼン・画面共有用の高視認性設定

クライアントへの画面共有やプレゼンでClaude Codeを見せる場面では、視認性を最優先にした設定に切り替えます。

/config set theme light
  • フォントサイズ: 18〜20pt(遠くからでも読めるサイズ)
  • ライトテーマ + 白背景(プロジェクターでの視認性が高い)
  • ターミナルを全画面表示にして余計な情報を排除

パターン3: チーム統一設定の共有

チームでClaude Codeを使う場合、プロジェクトのCLAUDE.mdに推奨設定を記載しておくと、メンバー間で作業環境が統一されます。

# チーム推奨Claude Code設定

## 初回セットアップ

以下のコマンドを実行して環境を統一してください:

/config set theme dark
/config set preferredLanguage ja
/config set renderMarkdown true
/config set notifications enabled

関連コマンドとの組み合わせ

/config でグローバル設定を管理

UIカスタマイズ以外にも、/config コマンドではパーミッション設定・モデル選択・プロンプトキャッシュなど多くの設定が可能です。全設定項目は「Claude Codeチートシート」をご覧ください。

CLAUDE.mdでプロジェクト固有の設定を定義

プロジェクトごとに異なる設定が必要な場合は、CLAUDE.mdに設定を記述します。詳細は「CLAUDE.mdの書き方パターン集」を参照してください。

/config で設定の確認

設定変更後に表示がおかしくなった場合は、/config コマンドで現在の設定状態を確認できます。設定値を初期状態に戻したい場合は /config reset が利用できます。


あわせて読みたい


まとめ

Claude Codeの見た目カスタマイズは、テーマ切り替え・ステータスライン設定・ターミナル環境との組み合わせの3つのレイヤーで構成されます。長時間の作業ではダークテーマと目に優しいフォント設定で疲労を軽減し、プレゼン時にはライトテーマで視認性を高めるなど、場面に応じた切り替えが効果的です

押さえておきたいポイントは以下の通りです。

  • ステータスラインのトークン数表示はコンテキスト管理の実用的な判断材料になります
  • チームでの利用時はCLAUDE.mdに推奨設定を記載し、環境の統一を図りましょう
  • *Claude Codeの全コマンド一覧はClaude Codeチートシートをご覧ください
  • AI活用の全体像はAI活用完全ガイドで解説しています

よくある質問(FAQ)

Q1. テーマを変更してもターミナルの背景色が変わらないのはなぜですか?

Claude Codeのテーマ設定はClaude Code内部の配色(テキストカラー・ハイライト色等)を制御しますが、ターミナル自体の背景色はターミナルアプリ側の設定で管理されます。Claude Codeのダークテーマとターミナルの背景色を揃えるには、ターミナルアプリのプロファイル設定も合わせて変更してください。

Q2. 設定をリセットして初期状態に戻す方法はありますか?

/config reset コマンドで全設定を初期状態にリセットできます。個別の項目だけリセットしたい場合は、/config set {項目名} default で初期値に戻せます。

Q3. VS Code統合ターミナルでClaude Codeを使う場合、特別な設定は必要ですか?

VS Code統合ターミナルでも追加設定なしで動作します。ただし、VS Code側のテーマとClaude Codeのテーマが競合する場合があるため、Claude Codeのテーマを system に設定し、VS Codeのテーマに追従させるのが最もシンプルな運用です。


株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化(ERP/CRM/SFA/MAの導入)」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、無料のお問い合わせページより、お気軽にご連絡くださいませ。

関連キーワード:

サービス資料を無料DL

著者情報

7-1

今枝 拓海 / Takumi Imaeda

株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。
HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。