MCPとCLI、どっち
最近、Code to Figmaの検証作業をしていてずっとモヤモヤしていたことがあります。
TypeScriptを少し直して、Viteでサーバーを立ち上げて、Chrome MCPを起動して、ページを確認して、また戻って修正して——。
この繰り返しが、思っていた以上に時間を食っていました。
最初はそれが普通だと思っていたんです。「確認ってこういうものだよな」と。でもある日、Chrome MCPの起動を待ちながらふと思いました。
「これ、MCPじゃないといけない理由、あるかな？」
そこから少し調べてみたら、思ったよりシンプルな答えがありました。
この記事では、その気づきと試したことを書いていきます。
何が遅かったのか、整理してみる
作業フローはこうなります。
TypeScript修正
→ Viteでサーバー起動
→ Chrome MCP起動
→ ページ確認
→ また修正…
問題は「Chrome MCP起動」のステップです。
起動するたびに数秒〜十数秒待つ必要があり、接続が不安定なときはClaude Codeごと再起動することも。
さらに調べてみると、MCPにはトークンコストの問題もありました。
他の記事によると、MCPツールは数万トークンを消費するそうです。
スクリーンショットを1枚撮るだけなのに、それだけのコンテキストを使ってしまっていたわけです。
「ブラウザで確認したい」という目的に対して、MCPはちょっとオーバースペックだったんですね。
Playwright CLIを試してみた
試したのが、Playwright CLIです。
Playwright自体はテスト用のツールとして有名ですが、CLIからスクリーンショットを撮る機能もあります。
セットアップ
npm install -D playwright
npx playwright install chromium使い方
# ページ全体のスクショ
npx playwright screenshot http://localhost:5173 screenshot.png
# フルページ（スクロール込み）
npx playwright screenshot --full-page http://localhost:5173 full.png正直、最初は「え、これだけ？」と思いました。MCPの起動待ちに慣れていたので、コマンド一発でパッと撮れることに少し拍子抜けしたくらいです。
特定の要素だけ撮りたい場合は、短いスクリプトを書きます。
// element-shot.mjs
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('http://localhost:5173');
await page.locator('#component-preview').screenshot({ path: 'component.png' });
await browser.close();
node element-shot.mjsこれで、確認したいコンポーネントだけをピンポイントで切り出せます。
MCPとCLI、結局どう使い分けるか
MCPが向いているのは、クリックやフォーム入力などインタラクティブな操作が必要なときです。
一方、「見た目を確認したい」だけであれば、CLIで十分です。というよりCLIの方が速くて軽い。
ツールの適材適所を意識するようになった
今回の気づきを一言でまとめるとこうです。
「使えるツールが最適なツールとは限らない」
Chrome MCPは確かに便利です。
でも、スクリーンショットを撮るためだけに使うには、コストが高すぎました。
Playwright CLIは機能としてはシンプルですが、「確認ループを速くしたい」という目的にはぴったりでした。
MCPに限らず、新しいツールが出るたびについ使いたくなってしまうのですが、今回の経験で「本当にそれが必要か？」と一度立ち止まる習慣がつきそうです。
Code to Figmaのワークフローを改善したい方の参考になれば嬉しいです。
