AIの進化により、以下のような技術が実務で使われるようになっています。

• コードの自動生成

• レイアウト生成

• UIやデザインアセットの抽出

たとえば、FigmaのデザインをもとにAnimaがHTML/CSS/Reactコードを生成する機能は、すでに実用レベルに達しています。これにより、初期コーディング作業の多くをAIが担うことが可能になりました。

しかし、実務では次のような課題も存在します。

• 生成コードの可読性や保守性が十分でない場合がある

• 設計意図やUXゴールを深く理解して反映することが難しい

• セキュリティやアクセシビリティの要件に対応できないケースがある

こうした課題から、AIと開発者が共存するためには、明確な役割分担を定義し、制作ワークフローに組み込むことが不可欠です。

AIを活用したコーディングでは、「AIは高速処理・大量生成、人間は意図の判断と品質保証」が基本原則です。ここでは、それぞれの得意領域を整理します。

AIが得意な領域

AIは以下のような作業を得意とします。

• パターン化されたコーディング作業
  Figmaからのレイアウト再現、冗長なCSS生成、コンポーネントの基本スケルトン生成など。特にFigmaとAnimaを組み合わせると、初期コーディング時間を大幅に短縮できます。

• 単純なバリエーション生成
  色違いやサイズ違い、レイアウト違いの複数案生成や、既存コードの置換・最適化など、機械的な処理が中心の作業に強みを発揮します。

• デザインの構造解析とアセット抽出
  レイヤー情報やテキスト情報の抽出、素材の最適化など、ルール化されやすい処理もAIが得意です。

人間が担うべき領域

一方で、以下の判断は人間が担う必要があります。

• プロダクト全体の意図を反映した設計判断
  どのコンポーネントを再利用するか、可変部分はどこにするか、拡張性のある設計にするかなど、プロダクトの目的やUXゴールに基づいた判断は、人間にしかできません。

• アクセシビリティとセキュリティ対応
  ARIA属性の適切な設定、セキュリティ要件の整理、バリデーション設計などはAIだけでは十分に対応できません。

• コード品質と保守性の保証
  冗長なコードの整理やチーム規約への適合、可読性や再利用性の確保など、最終的な品質は人間が担保する必要があります。

AIを活用したコーディングを前提に、FigmaとAnimaを中心としたワークフローを再設計することで、作業効率とコード品質を両立できます。

まず、Figmaでのデザイン工程では、Auto Layoutの適切な使用やレイヤー名の論理的な付与、コンポーネント化を徹底することで、Animaが読み取りやすい構造にすることが重要です。これにより、FigmaからAnimaへの変換精度が向上し、手戻りが減ります。

また、AIを活用してラフデザインを複数生成し、人間が方向性を決定する一次案生成も効率的です。コード生成においても、AIでベースを作成した後に人間が最適化する二段階構造を採用することで、過剰なスタイルや不十分なコンポーネント分割を修正できます。さらに、Figmaの更新に伴い生成コードとの差分をレビューして修正することで、常に設計意図に沿った品質を維持できます。

AI、コーダー、デザイナーが共存して制作を進めるためには、単にツールを使うだけではなく、情報共有やコミュニケーションの設計が欠かせません。AIは指示通りの作業は高速にこなせますが、設計意図やコンポーネント構造の背景を理解することはできません。そのため、チーム内で情報を明確に伝えることが、生成精度や作業効率の向上につながります。

特に次のポイントを押さえると効果的です。

• 必要なドキュメントの整備
  コンポーネント仕様書、アクセシビリティ要件、ブレイクポイント一覧、インタラクション設計書などを整備・共有することで、手戻りを減らし、チーム全体の効率を高められます。

• 管理体制の整備
  Gitブランチ運用、レビュー用PRテンプレート、Figma更新時の自動調整チェックリストなど、明確なプロセスを設けることで、AIの高速性を制御しながら品質を維持できます。

• 最終的な品質保証は人間が担当
  AIは高速処理や大量生成を得意としますが、意図や最終的な品質判断は人間が行う必要があります。

こうした情報共有と管理体制を組み合わせることで、AIと人間が互いの強みを活かしながら、効率的で高品質な制作プロセスを実現できます。

AIは非常に便利ですが、著作権・ライセンス、学習データ由来のバイアス、過剰な自動化によるスキル低下、セキュアコーディング意識の希薄化など、軽視するとプロジェクト全体に悪影響を与える可能性があります。AIが生成した成果物は必ず人間がレビューして、品質と安全性を確保する必要があります。

コーダーの役割分担とFigma・Animaのワークフローを最適化することで、制作の効率と品質は両立できます。
AIは高速な処理と大量生成を担い、人間は意図の判断と品質保証を担う。この役割を明確にすることで、制作プロセスはより高度で再現性の高いものになります。

私たちは、AIを活用したコーディングとFigma・Animaによる制作を組み合わせ、デザインから構築まで一括でご依頼いただけるチームです。

「AIを使った効率的な制作を任せたい」「Figmaデータから実装までまとめて依頼したい」といったご要望がありましたら、ぜひドコドアまでお気軽にお問い合わせください。

◎お問い合わせ・ご相談はこちら