クライアントから納品されたFigmaデザインを、v0・Locofy・Figma MakeといったAIの「デザインtoコード」ツールに実際にコーディングさせてみました。結論から言うと、PCサイズ1画面分の見た目を再現するだけなら、コーダーを1日拘束していた作業が数十分で終わります。ただし、スマホ表示に切り替えたときのレイアウト崩れだけは、結局自分の手で直すしかありませんでした。「速いから使えない」ではなく「どこまでを任せてどこからを自分でやるか」の線引きが分かった、という話です。

なぜ試したか ― 見積もりの時点で毎回悩む工数

Web制作の仕事をしていると、クライアントから届いたFigmaデザインを見た瞬間に「これ、コーディングだけで何時間かかるか」を頭の中で見積もる癖がつきます。特に厄介なのが、PCデザインは丁寧に作り込まれているのに、スマホ版のデザインが用意されていない、あるいは1〜2画面分しかない案件です。この場合、コーダーが「たぶんこう崩れるだろう」と想像しながらレスポンシブのCSSを書くことになり、地味に時間を食います。

ちょうど社内で「AIにコーディングを丸ごと任せられないか」という話が出たタイミングだったので、実際の案件（架空の想定として、企業のサービス紹介LP）で試してみることにしました。

正直、「デザインtoコードなんて所詮おもちゃでしょ」と思ってました。試すまでは。

試したツールと、それぞれの得意分野

今回は性質の異なる3つのツールを使い分けて試しました。

Locofy ― Figmaのレイヤー構造をそのままコードに

LocofyはFigmaのプラグインとして動作し、デザインのレイヤー名やAuto Layoutの設定をほぼそのままHTML/CSSやReactのコンポーネント構造に変換してくれます。Figma側でAuto Layoutがきちんと組まれているデザインほど、出力されるコードの精度が高いという特徴があり、逆に言えばAuto Layoutを使わず「見た目だけ」で配置されたデザインだと崩れやすくなります。

v0（Vercel） ― プロンプトやスクリーンショットからサクッと再現

v0はFigmaのデータを直接読むというより、画面のスクリーンショットやテキストの指示から近いレイアウトのReactコードを生成するタイプです。「だいたいこんな感じの見た目にしたい」というラフな段階の確認や、デザインが固まる前のプロトタイプ確認に向いています。

Figma Make ― テキスト指示でインタラクティブな試作を作る

Figma Makeは、Figma内のデザインフレームやテキストの指示から、動く試作（インタラクティブなReactアプリ）を生成する機能です。クライアントに「ボタンを押すとこう動きます」という体験そのものを見せたいときに使いました。

実際にやった手順

  1. クライアントから受け取ったFigmaファイルのうち、トップページのメインビジュアルからサービス紹介セクションまで（PCデザインのみ）をLocofyプラグインで選択
  2. 「React + Tailwind CSS」の出力形式を指定してコード生成
  3. 生成されたコードをローカル環境でNext.jsプロジェクトに取り込み、ブラウザでPC表示を確認
  4. 同じ画面をブラウザの幅を375px（スマホサイズ）まで縮めて確認
  5. 崩れた箇所をリストアップし、手作業でTailwindのレスポンシブクラス（sm: md:など）を追記

PC表示（4）までは、正直に言って驚くほどきれいに再現されました。フォントサイズ、余白、色、画像の配置比率まで、Figma上の数値とほぼ一致していて、目視での微調整はほぼ不要でした。

微妙だった点 ― レスポンシブは「賭け」になる

問題は5）のスマホ表示チェックからでした。今回のクライアントデザインは前述の通りPC版しか用意されておらず、Locofyが自動生成した「推定レスポンシブ」は次のような崩れ方をしていました。

  • 横並びの3カラムがそのまま3列で潰れて文字が読めない状態になる
  • 画像とテキストが左右に並ぶセクションで、画像だけが極端に縮小される
  • メインビジュアルの見出し文字が、スマホ幅で1文字だけ次の行に送られる（悪目立ちする改行）

**AIはPCデザインの「情報の配置」を理解して真似ることはできても、「スマホでどう見せたいか」という意図までは推測できません。**これはツールの精度の問題というより、そもそもスマホ版デザインが存在しない以上、AIにも人間にも「正解」が見えていない状態だったと言えます。結局、3カラムを縦積みに直し、画像とテキストの優先順位を決め、見出しの改行位置を手動で調整するのに、PC版のコーディングと同じくらいの時間がかかりました。

「速い」で浮いた時間が、そのままレスポンシブ調整に吸収された感覚でした。トータルの工数は正直そこまで変わらなかったです。

それでも「使う価値がある」と判断した理由

工数だけ見るとトントンに感じるかもしれませんが、それでも導入を続けようと思っています。理由は3つです。

  • 見積もり前の「試作確認」が一瞬でできる。クライアントに「こういう見た目で合ってますか」を見せるための試作コードを、契約前の段階で作れるようになった
  • PC版の実装ミスがゼロになった。数値の見間違いによる余白ズレなど、人間がやりがちな凡ミスがAI生成コードでは起きない
  • レスポンシブの「叩き台」としては使える。ゼロから書くよりは、崩れた状態からの修正の方が心理的にも作業量的にも楽

どんな案件なら任せていいか ― パターン別の判断基準

これまでの検証を踏まえて、社内では次のような基準で使い分けることにしました。

  • PC・スマホ両方のデザインが揃っている案件 → Locofyでの自動生成を採用し、微調整だけ人力。工数削減の効果が一番大きい
  • PCデザインしかない案件 → 自動生成はPC版のみに使い、レスポンシブは最初から人力で設計する前提にする(中途半端な自動レスポンシブを直す方が遠回りになるため)
  • 提案・プロトタイプ段階 → v0やFigma Makeでラフな試作を見せ、クライアントの反応を見てから本コーディングに入る

まとめ

  • AIのデザインtoコードツールは、PCデザインの見た目再現に関しては実用レベルに達している
  • ただしスマホ版デザインが存在しない案件のレスポンシブ対応は、AIに任せると余計な手戻りが発生しやすい
  • 次にやるべきアクションは、案件を受注する段階で「スマホデザインの有無」を確認し、ない場合はレスポンシブの設計方針を先に人間が決めてからコーディングに入ること
  • 工数が浮くのは「デザインが完成している案件」に限られると割り切ると、ツール選定で失敗しにくい