こんにちは、くまじろうです。
前回はターミナルで使うClaude Codeを紹介しました。今日は「Claude Desktop内のCodeタブ」を紹介します。こちらはターミナルを開く必要がなく、Claude Desktopアプリから直接コード作業ができます。
目次
今日のゴール
Claude DesktopのCodeタブの画面構成を理解して、HTMLやCSSを簡単に修正できるようになります。
Claude DesktopのCodeタブとは？
Claude Desktopには「Claude」「Code」の2つのモードがあります。Codeタブは、Claude Codeの機能をDesktop上のGUI（画面操作）で使えるようにしたものです。
画面の見方
| エリア | 機能 |
|---|---|
| 左サイドバー | プロジェクト（フォルダ）とファイルの一覧 |
| 上部タブ | Claude/ Code の切り替え |
| メインエリア上部 | Claudeへの指示を入力する欄 |
| メインエリア下部 | Claudeの作業ログと完了メッセージ |
試してみる：HTMLの修正
（修正したいhtmlファイルをフォルダごとプロジェクトに追加してから）
「ナビゲーションバーの色を白から紺色に変えてください。
スマホでも崩れないようにしてください。」Claudeが自動的にCSSを修正して、変更箇所を報告してくれます。コードの知識がなくても日本語で指示を出すだけでOKです。
つまずきポイント
- 「Codeタブが見えない」：有料プランかどうかを確認。Claude Desktopを最新版に更新してください
- 「フォルダを追加できない」：Codeタブの左上「＋フォルダを追加」から作業フォルダをClaudeに渡します
- 「修正が反映されていない」：Claudeが修正したファイルはローカルに保存されます。ブラウザを再読み込みして確認しましょう
次回（第19回）はClaude Code Remote Controlを紹介します。外出先からスマホでPC上のClaudeに作業を指示できる研究プレビュー機能です。
コメント