Portfolioはじめに
「パソコンの前にいないと作業できない」——これはもう過去の話かもしれません。Claude CodeとGitHubを連携しておくと、スマホやWebブラウザから音声入力で指示を出して、サイトを更新することも可能です。
この記事では、移動中やパソコンがない状況でも作業を進めるためのアイディアをご紹介します。
できることのイメージ
「ブログ記事を追加して」と指示
コードを生成してGitHubにプッシュ
プレビュー環境に自動反映
プレビューURLで表示をチェック
GitHubでPRをマージ、本番に反映
電車での移動中にスマホで内容を伝えて、目的地に到着する頃にはサイトにコンテンツが追加されている——そんな使い方ができます。
必要な準備
Claude Codeへのアクセス手段
スマホからClaude Codeを使う方法はいくつかあります。
| 方法 | 特徴 | 向いている人 |
|---|---|---|
| Claude.ai（Webアプリ） | ブラウザから利用可能 | 手軽に試したい人 |
| Claude Code Agent SDK | API経由でカスタム連携 | 開発者向け |
| GitHub Actionsとの連携 | PRコメントから実行 | 自動化したい人 |
最も手軽なのは、Claude.aiのWebアプリをスマホのブラウザで開く方法です。
GitHubとVercelの連携
事前にGitHubとVercelを連携しておくと、プッシュするだけでデプロイが走ります。詳しくは「GitHub × Vercel連携の設定」をご覧ください。
実際の使い方
例1: ブログ記事の追加
移動中に思いついたアイディアをブログ記事にしたい場合。
スマホで音声入力：
「ブログに新しい記事を追加してください。
タイトルは『在宅勤務で気づいた3つのこと』
内容は、
1つ目、通勤時間がなくなって生産性が上がった
2つ目、オンとオフの切り替えが難しい
3つ目、運動不足になりがち
これらを自然な文章で書いてください」
Claude Codeがマークダウンファイルを作成し、GitHubにプッシュ。Vercelがプレビュー環境にデプロイしてくれます。
例2: 文言の修正
「お問い合わせページの電話番号が間違っていた」と気づいた場合。
「contact.tsxのページにある電話番号を
03-1234-5678 に修正して、GitHubにプッシュしてください」
簡単な修正なら、すぐに対応できます。
例3: 新しいページの追加
「サービス紹介ページを追加したい」と思った場合。
「サービス紹介ページを新規作成してください。
見出しは『私たちのサービス』
内容は、コンサルティング、研修、導入支援の3つを紹介
それぞれ2〜3文で説明を書いて、
feature/services-page というブランチでGitHubにプッシュしてください」
音声入力のコツ
明確に指示する
音声入力では、句読点や改行が意図通りにならないことがあります。指示を明確にするために、以下を意識します。
- やりたいことを最初に言う: 「ブログ記事を追加して」「電話番号を修正して」
- 具体的な内容を伝える: タイトル、本文、ファイル名など
- ブランチ名やコミットメッセージも指定: 「feature/xxx というブランチで」
確認を依頼する
指示を出したあと、「実行する前に内容を確認させて」と伝えると、Claude Codeが何をするか説明してくれます。意図と違っていたら修正を依頼できます。
短い指示を積み重ねる
長い指示を一度に出すと、意図が伝わりにくいことがあります。短い指示を出して、確認しながら進めるのがおすすめです。
プレビュー確認と本番反映
スマホでプレビュー確認
VercelのダッシュボードやプレビューURLにスマホからアクセスして、実際の表示を確認できます。スマホでの見え方をチェックするのにも便利です。
GitHubでマージ
問題がなければ、GitHubのWebサイト（スマホブラウザ）からPRを作成してマージできます。
- GitHubにアクセス
- 該当リポジトリのPull requestsタブを開く
- New pull requestを作成
- Merge pull requestを実行
これで本番環境に反映されます。
注意点
複雑な作業には向かない
スマホでの操作は、簡単な追加や修正には向いていますが、複雑な機能実装には向きません。そういった作業は、パソコンの前で落ち着いて行うのがおすすめです。
確認は念入りに
音声入力は誤認識があり得ます。実行前に内容を確認し、プレビュー環境で表示を確認してからマージしましょう。
セキュリティへの配慮
公共の場所で音声入力する場合、機密情報を口に出さないよう注意が必要です。
活用シーン
- 移動中: 電車やバスの中でブログ記事を作成
- 外出先: カフェでちょっとした修正を依頼
- 思いついたとき: アイディアが浮かんだらすぐに指示
- 緊急対応: 誤字脱字や間違いに気づいたときにすぐ修正
まとめ
- スマホ + 音声入力でClaude Codeに指示できる
- GitHubにプッシュされれば自動でVercelがデプロイ
- プレビュー確認 → マージで本番反映
- 移動中や外出先でもサイト更新が可能
場所を選ばずに作業できるのは、AIコーディングの大きなメリットのひとつです。すべての作業をスマホでやる必要はありませんが、「ちょっとした更新ならスマホでもできる」と知っておくと、選択肢が広がります。