設定ファイルを書くだけ！ Claude Codeの見た目を自分好みに変えよう

Claude Code

設定ファイルを書くだけ！ Claude Codeの見た目を自分好みに変えよう

【これを読むと何ができるようになる？】

毎日使うツールだからこそ、見た目は大切ですよね。この記事の手順を試すと、まるでスマートフォンの壁紙を変えるように、Claude Codeの文字や背景の色をあなたのお気に入りの組み合わせに自由に変えられます。目に優しい色合いにしたり、好きな色で気分を上げたりして、もっと快適にClaude Codeを使えるようになりますよ。

準備するもの

  • Claude Code（バージョン2.1.118以降）がパソコンにインストールされていること。
  • メモ帳やVisual Studio Codeなど、文字を入力してファイルを保存できるアプリ（テキストエディタ）。

手順（ステップごとに丁寧に）

ステップ1：操作の窓口「ターミナル」を開く

まず、パソコンに命令を出すための黒い画面（ターミナルやコマンドプロンプト）を開きます。これは、コマンドという特別な言葉を使ってパソコンを直接操作するためのものです。

  • Macの場合：「Launchpad」の中から「ターミナル」というアプリを探して開きます。
  • Windowsの場合：スタートメニューで「PowerShell」または「コマンドプロンプト」と検索して開きます。

ステップ2：テーマ設定を入れておくための箱（フォルダ）を作る

次に、これから作る「色の設計図」を入れておくための専用フォルダを用意します。決まった場所に置くことで、Claude Codeが設計図を見つけられるようになります。

先ほど開いたターミナルに、以下の文字をコピー＆ペーストしてEnterキーを押してください。

mkdir -p ~/.claude/themes

このコマンドは、「`~/.claude`というフォルダの中に`themes`という名前のフォルダを作ってください」という命令です。もし途中のフォルダがなくても、自動で全部作ってくれるので便利です。何もメッセージが表示されなければ成功の合図です。

ステップ3：「色の設計図」（設定ファイル）を作る

いよいよ、どんな色にするかを指定するファイルを作ります。ここでは例として「my-favorite.json」という名前のファイルを作ってみましょう。

  1. まず、設定ファイルを置くフォルダを開きます。
    • Macの場合：Finderを開き、メニューの「移動」→「フォルダへ移動」を選び、~/.claude/themesと入力して開きます。
    • Windowsの場合：エクスプローラーのアドレスバーに%USERPROFILE%\.claude\themesと入力してEnterキーを押します。
    （もし.claudeフォルダが見えない場合は、隠しファイルを表示する設定にしてみてください）
  2. 開いたフォルダの中で、新しいテキストファイルを作り、ファイル名を「my-favorite.json」として保存します。
  3. そのファイルを開き、以下の内容をそのままコピー＆ペーストして保存します。これは、カッコや記号を使って設定を書くためのメモ書き（JSON形式）のようなものです。
 { "name": "My Favorite", "colors": { "primary": "#88aaff", "secondary": "#dddddd", "background": "#222233", "text": "#ffffff", "highlight": "#aaddff", "error": "#ff8888" } }

#88aaffのような部分は色の指定です。primaryは枠線、backgroundは背景、textは文字の色、というように、それぞれの場所の色を決めています。色コードはインターネットで「カラーピッカー」と検索すると好きな色を探せますよ。

ステップ4：作ったテーマをClaude Codeに適用する

最後に、作った設計図をClaude Codeに読み込ませます。Claude Codeを起動（またはすでに開いている場合）して、以下のコマンドを入力し、Enterキーを押してください。

/theme my-favorite

このコマンドは、「my-favoriteという名前のテーマに変更してください」という命令です。ファイル名の「.json」は付けずに指定するのがポイントです。

Claude Codeの画面全体の色が、先ほど設定ファイルに書いた色にパッと変われば成功です！

うまくいかないときは

  • 「Theme ‘my-favorite’ not found.」と表示される場合：
    ファイルの置き場所や名前が間違っているかもしれません。ステップ3で開いた~/.claude/themes/フォルダの中に、「my-favorite.json」という名前のファイルが正しく保存されているか、もう一度確認してみましょう。大文字と小文字も区別されます。
  • 色が変わらない、またはエラーメッセージが出る場合：
    設定ファイルの中身の書き方が間違っている可能性があります。コピー＆ペーストした内容を見直して、{ }や" "、,（カンマ）などが抜けていないか確認してください。特に、最後の行の}の前にカンマが入っていないか注意しましょう。
  • .claudeフォルダが見つからない場合：
    このフォルダは「隠しフォルダ」になっていることがあります。MacではFinderでCommand + Shift + .（ピリオド）を押すと表示/非表示を切り替えられます。Windowsではエクスプローラーの「表示」タブで「隠しファイル」にチェックを入れると表示されます。

もっと活用するには

基本の使い方がわかったら、もっと楽しんでみましょう。

  • 複数のテーマを使い分ける：
    「work-time.json」や「relax-time.json」のように、色々な設定ファイルをthemesフォルダに作っておけば、/theme work-timeのようにコマンド一つで気分に合わせて見た目をサッと切り替えられます。
  • 他の人のテーマを試してみる：
    インターネットで「Claude Code theme」などと検索すると、他の人が作った素敵なテーマ設定ファイルが見つかることがあります。それをダウンロードして同じフォルダに入れれば、あなたのClaude Codeでも使えるようになりますよ。

※Claude Codeは継続的にアップデートされます。最新情報は公式ドキュメントをご確認ください。

情報源：@cc_lab_jp のポストをもとに編集部が解説記事として構成しました。

コメント

タイトルとURLをコピーしました