要約
Claude CodeがWeb上で動作するようになり、PCだけでなくスマートフォンやタブレットからも本格的なコード開発が可能になった。本記事では、実際にリンクカード機能の実装を題材にClaude Code Webの使用感を検証し、CLIとのセッション引き継ぎ（テレポート）機能についても解説する。
対象読者: Claude Codeを日常的に使っているエンジニア、外出先でもコード修正やプルリクエストを出したい開発者
この記事を読むことで得られるメリット
この記事を読むことで以下のことが分かる:
- Claude Code Web版の起動方法と基本的な使い方
- 実際の機能開発（リンクカード実装）を通じたWeb版の実力
- CLI版との使用感の違いと共通点
- セッション引き継ぎ（テレポート）機能の活用方法
- Web版が特に向いているユースケース
この記事を読むのにかかる時間
約8分
環境
- Claude Code Web版
- GitHub（リポジトリ連携）
- microCMS（記事入稿）
Claude Code Web版とは
Claude Code Web版は、これまでCLI（コマンドライン）でのみ利用可能だったClaude Codeを、ブラウザ上で動作させる機能である。Claude DesktopやClaude AIのWebインターフェースから起動でき、スマートフォンやタブレットからもアクセスできる。
CLI版と同じく、GitHubリポジトリに接続してソースコードの読み取り・編集・コミットが可能であり、エージェントとしての動作もCLI版と変わらない。
Claude Code Web版の起動方法
起動手順は以下のとおりである。
- Claude Desktop、Claude AI（Webブラウザ）、またはスマートフォンのClaudeアプリを開く
- 画面上の「Code」ボタンを押す
- 別ウィンドウでClaude Code Webが起動する
- 接続するGitHubリポジトリを選択する
- チャット欄に指示内容を入力して開発を開始する
リポジトリの選択が完了すれば、CLI版と同様にチャットベースで指示を出すことができる。
実践：リンクカード機能の実装
開発の背景
今回の検証では、技術ブログの記事詳細ページにおけるリンクの表示改善を題材にした。従来はURLがテキストリンクとして表示されるだけだったが、これをリッチなカード形式（タイトル、サムネイル画像、ファビコン、サイト名を含む）に変更する機能を実装した。
技術的な要件
記事の入稿はmicroCMSで行っており、以下のような構造でリンクカードを実現する必要があった。
- URLの文字列をリンク要素（
<a>タグ）として設置 - リンク要素にカスタムクラス「リンクカード」を適用
- microCMSの仕様により、カスタムクラスを当てると
<span>タグで囲まれる - 最終的に
<span>タグ内の<a>タグに対してCSSを適用してリッチな見た目を実現
リンクカードの表示要素
要素 | 配置 |
|---|---|
サムネイル画像 | 左側 |
サイト名 | 右側上部 |
ページタイトル | 右側中央 |
ファビコン | サイト名の横 |
Claude Code Webへの指示内容
指示としては以下のような内容を入力した。
- 記事詳細のリンク文字列をリッチなカード形式にする
- リンクカードにはタイトル、サムネイル画像、ファビコン、サイト名を表示する
- 左側にサムネイル画像、右側にサイト名とタイトルを配置する
- レイアウトもいい感じに整える
開発の流れ
Claude Code Webに指示を出すと、CLI版と同じようにエージェントが動作を開始した。具体的には以下のステップで進行した。
- コードベースの検索 - リポジトリのソースコードを解読し、プロジェクト構造を把握
- 計画の立案 - リンクからメタデータを取得するAPIの必要性、リンクカードコンポーネントの作成など、手順を整理
- 段階的な実装 - 計画に沿って一つずつタスクを実行
- 動作確認 - 実装結果の検証
この動作はCLI版と全く同じであり、Web版だからといって機能が制限されるようなことはなかった。
開発結果
何回かの指示のやり取りを経て、当初想定していたリッチなリンクカードを完成させることができた。簡単な修正やUI改善程度であれば、Web版からスマートフォンで対応できるレベルである。
セッション引き継ぎ（テレポート）機能
Claude Code Web版の特筆すべき機能として、セッションの引き継ぎがある。Web上でのやり取りをそのままローカルPCのCLI上で継続できる仕組みである。
引き継ぎの手順
- Web版の画面上で「Open in CLI」ボタンを押す
- セッションIDが表示される
- ローカルのターミナルで以下のコマンドを実行する
claude --teleport-session <セッションID>
- Web版でのやり取りの経緯がすべて引き継がれ、続きからCLI上で対話できる
テレポートの活用シーン
この機能により、以下のようなワークフローが実現する。
- 外出先でWeb版から開発を開始 → 帰宅後にCLI版で続きを実施
- スマホで簡単な修正指示を出す → PCで詳細な確認・調整を行う
- タブレットでプロトタイプを作成 → デスクトップで本格的なテストを実行
Web版とCLI版のシームレスな連携は、開発ワークフローの柔軟性を大幅に向上させる。
CLI版との比較
共通点
- エージェントとしての動作は完全に同一
- コードベースの読み取り・編集・コミットが可能
- 計画立案→段階的実装→検証のフローは変わらない
- GitHubリポジトリとの連携
Web版の利点
- ✅ スマートフォン・タブレットからアクセス可能
- ✅ CLIの環境構築が不要
- ✅ 出先での簡単な修正やプルリクエストに対応
- ✅ セッション引き継ぎでCLI版とシームレスに連携
Web版の制約
- ❌ CLI版と比べてターミナル操作の自由度は限定的
- ❌ 大規模なリファクタリングにはCLI版のほうが適している
- ❌ ローカル環境のツール（Docker、データベースなど）との連携はCLI版が有利
Web版が特に向いているユースケース
Claude Code Web版が真価を発揮するのは、以下のようなケースである。
バックエンドのソースコード修正
バックエンドのコード修正は、自動テストとの相性が良い。テスト駆動開発（TDD）を導入しているプロジェクトであれば、テストが品質を担保してくれるため、スマートフォンからでも安全にプルリクエストを出すことができる。
軽微なバグ修正・設定変更
1〜2ファイル程度の修正で済むバグ修正や設定値の変更は、Web版から手軽に対応できる。わざわざPCを開くほどではない修正を、移動中やちょっとした空き時間に処理できる。
プルリクエストの作成
コード修正からプルリクエストの作成まで一気通貫でWeb版から実行できるため、レビュー待ちの時間を有効活用できる。
まとめ
- Claude CodeがWeb上で動作するようになり、スマートフォンやタブレットからも本格的なコード開発が可能になった
- CLI版との使用感の違いはなく、エージェントとしての動作は完全に同一である
- セッション引き継ぎ（テレポート）機能により、Web版で始めた開発をCLI版で継続できる
- バックエンドの修正やテスト駆動開発との組み合わせが特に相性が良い
- 出先での軽微な修正やプルリクエスト作成など、開発ワークフローの柔軟性が大幅に向上する
