AIを組み込んだデザイン・実装フロー標準化

デザインから実装までの接続は、AIコーディングツールを使えば短縮できる一方で、使い方が個人の経験や指示の工夫に依存しやすい。

特にAIコーディング未経験のデザイナーにとっては、Figmaをどの状態まで整えるか、何を入力として渡すか、どのような手順で実装するか、出力結果をどこに配置するか、どこまで人が確認するかが曖昧だと、再現性がない。

そこで、Figmaテンプレートを起点とした実装フローを標準化し、他のデザイナーでも利用できる状態を作るPoCを進めている。

• AIコーディングの使い方が個人のスキルに依存しやすい。
• Figma側のデータ構造や不要なガイドが、実装結果に影響する。
• 入力方法や指示内容が統一されていないと、出力品質が安定しない。
• 実装後の配置や確認方法まで含めたルールがない。
• AI未経験者でも再現できるようにするには、ツールだけでなく運用ルールが必要になる。
• 個人の成功パターンを、チームで再利用できる形へ変換する必要がある。

中心にあるのは「AIでコードを書くこと」ではなく、デザインから実装までの手順を誰でも再現できる状態にすることである。

• Figmaテンプレートを起点にし、入力側の状態を揃える。
• 実装前に、不要なガイドや補助要素を除いた状態のURLを使う。
• 実装時の入力方法・手順をルール化し、操作を個人の勘に依存させない。
• 実装後の配置先・確認方法まで含めて、フローとして定義する。
• 最終的には、AI未経験のデザイナーでも使える状態を目指す。

ツールを単体で作るのではなく、ツール、ルール、運用、教育まで含めた仕組みとして設計している。

ツール作成 Figmaテンプレートを起点に、一定の入力ルールでデザインから実装へ接続するための仕組みを作っている。まずは自分が使える状態までツールを構築し、社内リポジトリへ配置するところまでを第一段階としている。

ルール化 ツールそのものだけでなく、Figma側で何を準備するか、ガイド等をどの状態まで除くか、どのURLを渡すか、どの手順で実装するか、出力後に何を確認するかを、デザイナー向けの運用ルールとして整理している。

横展開 次段階では、AIコーディング未経験のデザイナーに実際に使ってもらい、手順が再現できるかを検証する。その上で、利用方法をレクチャーし、個人に依存しない運用へ広げることをPoC対象としている。

• Figmaテンプレートを起点とした、デザインから実装までのフローの骨格を設計している。
• ツール作成と社内リポジトリへの配置を、第一段階として進めている。
• AI未経験者でも使えるよう、入力・実装・確認のルール整理を進めている。
• 次段階として、他デザイナーによる利用検証とレクチャーを予定している。

• ツールの完成度向上と、デザイナー向け運用ルールの整理。
• AI未経験デザイナーによる利用検証と、詰まるポイントの洗い出し。
• レクチャー内容の整理。
• 個人のスキルに依存しない、再利用可能なフローへの改善。