AIを迷宮入りさせない方法。Figmaコーディングで学んだ「手がかりの渡し方」

FigmaのMCPを繋いで、AIにデザインをコーディングさせる。ここまでは、以前の記事で手順を書きました。

今回はその続きです。実際にコーディングさせ、仕上がりを詰めていく過程で、「AIエージェントをどう使うと迷宮入りしないか」という、もう一段大事な気づきがありました。そして最後の最後で、接続そのものにも見落としがあったことに気づきました。

繋がっているつもりで、実は繋がっていなかった

最初にMCPの接続先を登録したとき、http://127.0.0.1:3845 というアドレスを使いました。Figmaデスクトップアプリの中でDev Mode MCP Serverという機能をオンにすると、自分のパソコンの中にサーバーが立ち上がる、という理解でいたためです。

ところが、このアドレスには一日中、何度確認しても接続できませんでした。作業自体は、並行して繋がっていた別の入り口（クラウド経由のFigmaコネクタ）を使って進めていました。そちらは問題なく動いていたので、コーディングや見比べ作業は最後まで支障なく終えられました。

引っかかったのは、記事を書くために接続の経緯を振り返っていたときです。改めてFigmaデスクトップアプリの案内画面を見ると、そこに書かれていた接続コマンドは http://127.0.0.1 ではなく、https://mcp.figma.com/mcp というアドレスでした。デスクトップアプリ経由の接続と言っても、実体はローカルではなくクラウドのサーバーだったのです。

最初に自己流で登録したアドレスは、そもそも実在しない入り口でした。正しいアドレスで登録し直し、認証を済ませると、あっさり繋がりました。

「繋がらない」と表示されても、代わりの入り口があれば作業自体は進められてしまいます。それで「まあ動いているからいいか」と済ませず、案内をもう一度読み直したことで、思い込みに気づけました。

お手本を渡してから、コード化を頼んだ

うちの教室では、生徒に「模範解答」というお手本のコードを渡しています。BEMという命名ルール、SCSSのネスト記法、3段階のレスポンシブ対応など、教室で教えているコーディングの規約がそのまま詰まったファイルです。

Figmaから取得したデザインをそのままコード化させると、AIは自分なりの書き方でコードを組みます。それはそれで動くのですが、教室の規約とは違うものになります。

そこで、コーディングを頼む前に、このお手本のフォルダをAIに読み込ませました。「今後コードを書くときはこのスタイルに合わせて」と伝えるだけです。

その状態でデザインをコード化させると、参照コードの取得、画像・アイコンのダウンロード、お手本に沿ったHTML・SCSSへの変換、ビルド、表示確認までを、まとめて自動で進めてくれました。

出来上がったものを見てみると、配色も余白もフォントも、Figmaのデザインとほぼ一致していました。「ほぼ」というのがポイントで、ここで終わらせなかったのが今回の本題です。

並べて見比べさせる、というもう一つの手がかり

「ほぼ一致」を目視で確認しただけでは、細かいズレに気づきにくいものです。そこで、コーディングしたページのスクリーンショットを、そのままFigmaファイルの中にアップロードしました。元デザインの隣に、実際にできあがった画面を並べて置く。これだけです。

やったことは単純でした。「Figmaに、コーディング結果のスクリーンショットを並べて見比べたい」とアイデアを伝えただけで、実際にアップロード・配置・サイズ調整までを行ったのはAI側です。

並べてみると、パッと見はほぼ同じでした。ですが、セクションごとに拡大して見比べていくと、2つのズレが見つかりました。

• 見出しのテキストが、Figmaでは1行分の高さのはずなのに、コーディング結果では2行分近い高さになっている
• お問い合わせパネルの説明文が、Figmaでは1行に近い幅で収まっているのに、コーディング結果では2行に折り返している

対症療法で終わりかけた

最初にやったのは、見つかった見た目のズレをそのまま埋める作業でした。

行間が広すぎるならline-heightを指定する。余白が間延びしているならグループ分けして間隔を詰める。どちらも該当箇所は改善しました。実際、パネル全体の高さはFigmaの想定値にかなり近づきました。

ただ、それでもまだ、見出しの改行位置とパネルの説明文の折り返しは、Figmaと微妙に違ったままでした。「だいたい直った」で止めるか、もう一段掘るか。ここでもう一度、並べて見比べる作業に戻りました。

本当の原因は、まったく別の場所にあった

改めてFigmaと並べて拡大し、フォントの実測値をブラウザ側で確認してみると、意外な事実が分かりました。Figmaが指定していたフォント（見出し用のFraunces、本文用のManrope）が、コーディングしたページには一切読み込まれていなかったのです。

CSS側ではfont-family: 'Fraunces', serif;と正しく指定していました。でも、そのフォントの実体（Webフォントファイル）を読み込むタグが、HTMLに入っていませんでした。指定した書体が読み込まれていないと、ブラウザは代わりのフォントで表示します。見た目が変わるだけでなく、文字ごとの幅も変わるため、同じテキスト・同じ横幅のボックスでも、折り返す位置がずれます。

見出しの改行位置も、パネルの説明文の折り返しも、原因はこれひとつでした。Google Fontsの読み込みタグをHTMLに1行足すと、個別に直そうとしていた2つのズレが、同時にきれいさっぱり解消しました。

AIを迷宮入りさせない、手がかりの渡し方

振り返って一番効いたのは、「差分をどう直すか」を人間が先回りして指示しなかったことでした。

もし私が「見出しの行間を詰めて」「パネルの余白をこう変えて」と1つずつ指示していたら、AIはその指示通りに直したはずです。実際、最初はそうやって対症療法止まりになりかけました。でも、そこで終わらせず「もう一度並べて見比べて」と促したことで、AI自身が新しい視点で原因を洗い出し、フォント未読み込みという、指示していなかった場所にたどり着きました。

AIエージェントを使っていて感じるのは、指示を細かく出せば出すほど良い結果になるわけではない、ということです。指示が細かすぎると、AIの視野もその指示の範囲に閉じてしまいます。表面のズレだけを直して、根っこの原因を素通りしてしまう。

必要なのは、答えを教えることではなく、AI自身が気づける手がかりを渡すことでした。今回で言えば「お手本を渡す」「並べて比較させる」という2つです。どちらも「これを直して」ではなく、「これを見て判断して」という渡し方です。

細かく指図しすぎるとAIを迷宮に誘導してしまうことがある一方、何のヒントも渡さなければAIはいつまでも同じところをぐるぐるします。ちょうどいい手がかりを、ちょうどいいタイミングで渡す。これが、AIエージェントを使いこなす側の底力なのだと思います。

おわりに

「接続テスト」のつもりで始めて、気づいたらランディングページ1枚分のコーディングと、仕上げの微調整、そしてAIとの向き合い方の気づきまで得ることになりました。おまけに、接続先のアドレスを最初から勘違いしていたことにも、最後の最後で気づきました。

Figmaを使っている方で、AIコーディングツールとの連携をまだ試していない方は、一度Dev Mode MCP Serverを有効にしてみることをおすすめします。案内画面に出てくる接続コマンドは、自己流で覚えず、そのままコピーして使うのが一番確実です。そして、コーディングが終わった後こそ、答えを教えるのではなく、比較できる材料を渡してみてください。思っていたより、その先まで自分で進んでくれます。