- 投稿日：2026/04/20
- 更新日：2026/04/21
スマホからClaude Designでサイトをリデザインした話 の続きです。単体でも読めます。
スマホ遠隔操作でどこまでできるか？
第3弾のClaude Designがサイト丸ごとデザインなら、こちらは既に持っているCanvaを操作する話📱
クロコで、Canva操作をやってみました。
※この記事のサムネもクロコと一緒に作成🔰
Node.jsのインストールが前提ですが（Canvaとの橋渡し役のパッケージが使うため）、今回やることは「クロコにお願いするだけ」です。
こんな感じで進めました
実家のお母さん（クロコ）に、Canvaの合鍵を渡しておくイメージ。
一度渡しておけば、次からは「お母さん、Canvaからサムネ取って」で通じます✨
・STEP1：Node.jsが入ってるか確認
・STEP2：クロコに「使えるようにして」と頼む
・STEP3：再起動してブラウザで許可する
これだけで、スマホから「Canvaでサムネ作って」が通じるようになる。
🧭 そもそもCanva MCPって何？
MCP（えむしーぴー）＝ AIとツールをつなぐ規格のこと。
Canvaが公式に提供している仕組みで、Claude Codeに繋ぐと、チャットでCanvaを操作できるようになります。
「実家のお母さんに、Canvaの合鍵を渡しておく」みたいなもの。
🔰 動作確認した環境
・Mac：MacBook Air
・スマホ：iPhone
・Claude Code（クロコ）：Macにインストール済み（第1弾で環境構築）
・Canva：有料会員
・プラン：Claude.aiのMaxプラン（Pro以上で動作します）
※Canvaは有料会員で検証しました。無料プランでもMCP接続自体は可能ですが、今回使ったサムネ生成など一部機能は有料会員でのみ動作します。
🏃♀️ 結論だけ知りたい人へ
やったこと、3行だけ。
1. Node.jsが入ってるか確認した
2. クロコに「Claude CodeでCanvaを使えるようにして」と言った
3. 再起動→ブラウザで許可した→繋がった
ここから先は「なんで？どうやって？」が気になる人向けです。
🌉 STEP1 Node.jsが入ってるか確認する
クロコ（Claude Code）を起動して、こう打つ：
▼▼▼ここから▼▼
node --version
▲▲ここまで▲▲
→ 成功：v18以上の数字が表示される
※数字が出ない場合は、クロコにこう頼むだけ：
▼▼▼ここから▼▼
Node.jsを入れて
▲▲ここまで▲▲
あとはクロコが案内してくれます。
💡 ワンポイント：Node.jsって何？
Node.js（のーど・じぇーえす）＝ パソコンでJavaScriptを動かす仕組み。
「裏で動かすエンジン」みたいなもの。
今回はCanvaとの橋渡し役のパッケージが使うので必要です。
↓
🤝 STEP2 クロコに「使えるようにして」と伝える
Claude Code（クロコ）を開いて、こう言うだけ：
▼▼▼ここから▼▼
Claude CodeでCanvaを使えるようにしたい
▲▲ここまで▲▲
あとはクロコが設定ファイル（~/.claude/settings.json）に追記してくれる。
自分でファイルを触る必要なし。
→ 成功：「設定ファイルに追加しました。再起動してください」とクロコが返す
💡 ワンポイント：クロコが書いた3行の中身（気になる人だけ）
クロコが ~/.claude/settings.json に追加したのはこれ：
要するに「ClaudeとCanvaをつなぐ橋を設定した」だけ。
意味が分からなくて大丈夫。クロコが全部やってくれます。
🔁 STEP3 再起動する
Claude Codeを一度終了：
▼▼▼ここから▼▼
/exit
▲▲ここまで▲▲
もう一度起動：
▼▼▼ここから▼▼
claude
▲▲ここまで▲▲
ターミナル自体は閉じなくてOK。
起動すると、ブラウザが自動で開いて「Claude.aiにCanvaへのアクセスを許可しますか？」という画面が出ます。「許可」を1回押すだけ。以降はずっと自動。
→ 成功：クロコに「Canvaのデザイン一覧見せて」と言うと、一覧が出てくる
※Claude.aiアプリのConnectors設定は不要です。Claude CodeのMCP設定は独立して動きます。
🎨 実際にできたこと
・「デザイン一覧を見せて」→ 全部出てきた
・「YouTubeサムネイルを生成して」→ 4案出てきた
・「案4を保存して」→ アカウントに保存された
・「Episode1の文字を消して」→ 削除された
・「テキストをもう少し上に移動して」→ 移動した
・「保存して」→ 保存完了
全部チャットの文章で完結✨
⏱️ やったこと・費用
・Node.js確認（一瞬）
・クロコにお願い→設定完了（数分）
・再起動＋ログイン（すぐ）
・サムネ生成〜編集〜保存（のんびりやって10分くらい）
・追加費用：0円
🛠 ちなみに私の環境
自宅のMacにClaude Codeを入れています。
Tailscaleで自宅のネットワークに繋いで、Termiusで遠隔操作。
実家のお母さん（クロコ）に、電話して「Canvaからサムネ取って」と頼んでいるイメージ📱
詳しくは第1弾で説明しています。
この環境があったから、Macをさわらずにもスマホ1台で完結できました。
サムネの確認や調整は普段使いのWindowsでクロコと一緒にやりました。
📸 実際の作業フロー
iPhoneでクロコにサムネ作成を依頼→4案提案された
案1（AIの初期出力だと日本語が少し崩れることも）
案2
案3
案4
案4を選択→自分のWindowsパソコンでCanvaを編集
クロコにチェックを依頼→クロコが右下の文字をクイッと修正
↓
ノウハウ記事はWindowsで書いているので、Windowsからダウンロード。
サムネ完成✨
🎁 まとめ
クロコに「使えるようにして」と言って、再起動して、ブラウザで許可。それだけ。
Canvaが、スマホ遠隔操作で動かせるようになりました。
スマホ1台で完結。
子守でゴロゴロしながらでも、
待ち時間の合間でも、
「ちょっとサムネ作って」が通じます✨
ーーー
シリーズ1本目：スマホだけで Claude Code を操作する方法
シリーズ2本目：コードが読めない私のAIに「いつものやつ」が通じた7つの仕組み
シリーズ3本目：スマホからClaude Designでサイトをリデザインした話
シリーズ4本目：クロコが書いてくれた3行で、CanvaがClaude Codeから操作できるようになった
