🧩 はじめに｜Figma AIでWeb制作が変わる？その期待と現実
最近、Figma AIによるデザイン支援やコード自動生成が大きな注目を集めています。
「Figmaでコーディング作業も完結できるのでは？」という期待感から、AnimaやBuilder.ioといったFigma対応プラグインが次々に登場。SNSやブログでも「ノーコードでサイト制作できる時代が来た」と話題です。
ですが、実際の現場ではどうなのか？
「知識ゼロでも本当にWebサイトが作れるの？」「業務で使えるレベルなの？」
そんな疑問を持っている方も多いはずです。
私自身、実務でさまざまなツールを使いながら検証してきました。
本記事では、Figma AIとWebコーディング自動化の現状について、できること／できないことを整理してお伝えします。
🚀 今注目されているAIツール群とその狙い
ここでは、現在多くのWeb制作者が試している主要ツールを、次の3カテゴリで整理します
🧠 AIチャット・補完系
ChatGPT（GPT-4）
よく「コード生成ツール」として紹介されますが、私は補助的な解説用途に特化して活用しています。
たとえば、長く複雑なJavaScriptコードの流れを理解したいときに、コードを丸ごと投げて構造や目的を整理してもらうという使い方です。
すでに配置されているScriptコードが必要か不要か、という検証にはとても役立っています。
一方で、ゼロからコードを生成するのはあまり向いていません。
サンプルのコードを添付して、作りたいコードの仕様（ざっくりでOK）をプロンプト入力するまでは最低限必要です。
出力結果に関しても、自分自身である程度レビューできる事は言うまでもありません。
- ✅ 向いている：コードの理解補助、構造整理
- ❌ 向いていない：曖昧なプロンプトによるコード生成（→動かないことが多い）
GitHub Copilot
コード補完支援としては優秀で、特にHTML/CSSの繰り返し処理やよくあるUIパターンに強いです。
Copilot Chatで複数ファイルを参照しながらのレビューも可能ですが、曖昧なプロンプトに対しては、ほぼ確実に“動かないコード”が返ってきます。
Copilotの出力を活用するには、文法や構造の理解・レビュー力がまだまだ必要とされます。
このスキルがないままCopilot Chatの自動生成コードに頼ると、「自動生成で修正→動作しない」の堂々めぐりとなってしまいます。
ノーガードで鵜呑みにしてしまうと、大変危険です。
🛠 ビジュアル→コード変換系（Figmaプラグイン）
Anima・Figma to Code
AnimaやFigma to codeは、Figmaで作成したデザインデータからhtmlやcssコードが自動生成されるFigmaプラグイン。
デザインデータを選択すると、あっという間にコーディングが完了します。
革命的なツールだと感じたものの、仕上がりは今ひとつでした。
Figmaで作成したUIデザインから、HTML/CSSを別ファイルとして自動生成。出力結果は「たたき台」としては優秀ですが、そのまま使えるレベルではありません（特に業務用）
具体的な課題：
- display: flexが適切な場面でもinline-blockで記述されるケースがある
- 要素の構造が複雑になると、テキスト・画像の配置を誤認識
- ネーミング規則やセマンティクスも統一感に欠ける
Builder.io
Figmaと連携し、他のツールよりもやや高精度なHTML/CSS出力が可能です。
特にクラス設計やDOM構造の整合性は比較的整っており、ツールの中では好感触です。
ただし、「既存のHTMLを渡して、そこに対してCSSだけ自動生成する」といった高度なカスタマイズ支援は未対応。
ある程度の精度が出せる分、ノンコーダーが完全に使いこなすのは難しい印象です。
✅ 総評：「簡単だが精度が低い」vs「精度が高いが難しい」
どちらかに振れがちで、今は**“その中間点”を探る過渡期**です。
🧪 実際に「できたこと／できなかったこと」
ここでは、私の実務体験を元に、各種ツールで実現できた内容と、限界を感じた点を整理します。
|
項目 |
できること |
難しい・補足が必要 |
|
HTML/CSSの雛形作成 |
CopilotやChatGPTで可能 |
命名規則の統一、アクセシビリティの配慮は必要 |
|
繰り返しUI（カードなど） |
Copilotで高速に生成可能 |
表示崩れや細部調整は人力で |
|
Figma → HTML変換 |
AnimaやBuilder.ioである程度OK |
JS実装やパフォーマンス最適化には不向き |
|
完全自動化 |
× |
知識ゼロでの自動化は現時点では非現実的 |
🧭 結論｜“すべて任せる”時代ではないが、“脱・手書き”は始まっている
AIやFigmaプラグインでWeb制作の工程が変わり始めているのは事実です。
しかし、「ノーコードで全部解決」は幻想であり、“半自動化”と“補助的活用”が現実的な選択肢です。
今はむしろ、自分のスキルを加速させるためのAI活用が鍵です。
そして最後に、これだけは伝えたい。
「AIに仕事を奪われる」のではなく、
「AIを使いこなす人に、あなたの仕事が奪われる」
今こそ、AIと共に働くスキルを育てるべきタイミングです。
コメント