<p data-line="1" class="code-line">Claude Codeをターミナル操作なしで使いたかったので、Claude Code UIを試してみました。備忘録として残します。</p>
<h2 id="claude-code-ui%E3%81%A8%E3%81%AF" data-line="3" class="code-line"><a class="header-anchor-link" href="#claude-code-ui%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Claude Code UIとは</h2>
<p data-line="5" class="code-line">Claude Code UIは、Claude Code用のブラウザベースGUIを提供するオープンソースプロジェクトです<sup class="footnote-ref"><a href="#fn-1aa7-1" id="fnref-1aa7-1">[1]</a></sup>。ターミナルでコマンドを打つ代わりに、Webブラウザから直感的にClaude Codeを操作できます。</p>
<h2 id="cli%E7%89%88%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" data-line="7" class="code-line"><a class="header-anchor-link" href="#cli%E7%89%88%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> CLI版との違い</h2>
<p data-line="9" class="code-line">Claude Code UIとCLI版の主な違いは以下の通りです。</p>
<table data-line="11" class="code-line">
<thead data-line="11" class="code-line">
<tr data-line="11" class="code-line">
<th>項目</th>
<th>CLI版</th>
<th>Claude Code UI</th>
</tr>
</thead>
<tbody data-line="13" class="code-line">
<tr data-line="13" class="code-line">
<td>操作方法</td>
<td>ターミナルでコマンド入力</td>
<td>ブラウザでGUI操作</td>
</tr>
<tr data-line="14" class="code-line">
<td>ファイル操作</td>
<td>コマンドで確認</td>
<td>ファイルエクスプローラーで視覚的に確認</td>
</tr>
<tr data-line="15" class="code-line">
<td>Git操作</td>
<td>git コマンド</td>
<td>ボタンでステージング・コミット</td>
</tr>
<tr data-line="16" class="code-line">
<td>学習コスト</td>
<td>ターミナル操作に慣れが必要</td>
<td>直感的に操作可能</td>
</tr>
</tbody>
</table>
<h2 id="gui%E6%93%8D%E4%BD%9C%E3%81%AE%E5%88%A9%E7%82%B9" data-line="18" class="code-line"><a class="header-anchor-link" href="#gui%E6%93%8D%E4%BD%9C%E3%81%AE%E5%88%A9%E7%82%B9" aria-hidden="true"></a> GUI操作の利点</h2>
<p data-line="20" class="code-line">Claude Code UIを使うメリットは以下の点です。</p>
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line"><strong>ファイルエクスプローラー</strong>：ディレクトリ構造を視覚的に把握できる</li>
<li data-line="23" class="code-line"><strong>構文ハイライト</strong>：コードが色分けされて読みやすい</li>
<li data-line="24" class="code-line"><strong>Git操作の簡略化</strong>：変更ファイルの確認やコミットがボタン操作で完結</li>
<li data-line="25" class="code-line"><strong>セッション管理</strong>：過去の会話を簡単に再開できる</li>
</ul>
<p data-line="27" class="code-line">特にスマホやタブレットから使う場合、キーボード入力が難しい環境でもGUI操作なら快適に作業できます。</p>
<h2 id="%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" data-line="29" class="code-line"><a class="header-anchor-link" href="#%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 主な機能</h2>
<p data-line="31" class="code-line">Claude Code UIには以下の機能があります。</p>
<ul data-line="33" class="code-line">
<li data-line="33" class="code-line"><strong>チャットインターフェース</strong>：Claude Codeとの対話をチャット形式で表示</li>
<li data-line="34" class="code-line"><strong>ファイルエクスプローラー</strong>：プロジェクト内のファイルを参照・編集</li>
<li data-line="35" class="code-line"><strong>ターミナル</strong>：必要に応じてブラウザ内でコマンド実行も可能</li>
<li data-line="36" class="code-line"><strong>Git操作</strong>：変更の確認、ステージング、コミットをGUIで操作</li>
</ul>
<h2 id="%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86" data-line="38" class="code-line"><a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86" aria-hidden="true"></a> セットアップ手順</h2>
<p data-line="40" class="code-line">ローカルPCにClaude Code UIをインストールする手順です。</p>
<p data-line="42" class="code-line">リポジトリをクローンします。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="44"><span class="token function">git</span> clone https://github.com/siteboon/claudecodeui.git
</code></pre></div><p data-line="48" class="code-line">クローンしたディレクトリに移動します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="50"><span class="token builtin class-name">cd</span> claudecodeui
</code></pre></div><p data-line="54" class="code-line">依存パッケージをインストールします。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="56"><span class="token function">npm</span> <span class="token function">install</span>
</code></pre></div><p data-line="60" class="code-line">開発サーバーを起動します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="62"><span class="token function">npm</span> run dev
</code></pre></div><p data-line="66" class="code-line">起動後、ブラウザで <code>http://localhost:3000</code> にアクセスすると使用できます。</p>
<h2 id="%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%8B%E3%82%89%E3%81%AE%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" data-line="68" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%8B%E3%82%89%E3%81%AE%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" aria-hidden="true"></a> スマホからのリモートアクセス</h2>
<p data-line="70" class="code-line">Claude Code UIはローカルPCで動作しますが、Cloudflare Tunnelを使えばスマホからもアクセスできます。スマホはキーボード操作が難しいため、GUI操作できるClaude Code UIとの相性が良いです。</p>
<p data-line="72" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/claude-code-ui-smartphone-setup" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h2 id="%E5%85%AC%E5%BC%8Fweb%E7%89%88%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" data-line="74" class="code-line"><a class="header-anchor-link" href="#%E5%85%AC%E5%BC%8Fweb%E7%89%88%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> 公式Web版との違い</h2>
<p data-line="76" class="code-line">Anthropicが提供する公式のClaude Code Web版もありますが、Claude Code UIとは別物です。</p>
<table data-line="78" class="code-line">
<thead data-line="78" class="code-line">
<tr data-line="78" class="code-line">
<th>項目</th>
<th>公式Web版</th>
<th>Claude Code UI</th>
</tr>
</thead>
<tbody data-line="80" class="code-line">
<tr data-line="80" class="code-line">
<td>提供元</td>
<td>Anthropic</td>
<td>コミュニティ（オープンソース）</td>
</tr>
<tr data-line="81" class="code-line">
<td>動作環境</td>
<td>クラウド</td>
<td>ローカルPC</td>
</tr>
<tr data-line="82" class="code-line">
<td>料金</td>
<td>Pro/Maxプラン必須</td>
<td>無料</td>
</tr>
<tr data-line="83" class="code-line">
<td>ローカルファイル</td>
<td>アクセス不可</td>
<td>アクセス可能</td>
</tr>
</tbody>
</table>
<p data-line="85" class="code-line">公式Web版はGitHubリポジトリ限定ですが、Claude Code UIならローカルのファイルを直接編集できます。</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-1aa7-1" class="footnote-item"><p data-line="87" class="code-line"><a href="https://github.com/siteboon/claudecodeui" target="_blank" rel="nofollow noopener noreferrer">GitHub - siteboon/claudecodeui</a> <a href="#fnref-1aa7-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Claude Code UIでターミナル不要のGUI操作を実現する