AIはどこに介在できる? デザインを実装につなぐAIの可能性を検証してみた

AIはどこに介在できる? デザインを実装につなぐAIの可能性を検証してみた
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 本連載のテーマは、ビジネスシーンに大きなインパクトを与えているAIとデザイナーのコラボレーション。デザイナーとして活躍する小木曽槙一さんが、AIとデザインの可能性を探るべく、実務に活かすことができる技術やツールを選定し、それらを検証していきます。今回は「デザインを実装につなぐAI」について解説します。

 「デザイン×AI――プロダクトデザイナーが検証するAIの可能性」連載ですが今回でもう5回目。こんにちはこんばんは、小木曽です。

 今回は、プロダクトデザインを実装する(コード化する)際、AIによってどのような恩恵を受けれるのか、どのようなパターンやサービスがあるのかを検証したいと思います。

デザインをコード化するプロセス

 Figmaなどのデザインツールで作るUIや画面は最終成果物ではなく、実際の製品を模した中間生成物です。ユーザーに利用してもらうサービスやプロダクトを作るうえで、デザインをコード化するプロセスはとても重要です。

 通常このステップでは、デザイナーとエンジニアによる綿密な連携が求められます。デザインの意図を正確にコードに反映させるためには、両者の間でのコミュニケーションが不可欠なのです。

 しかし近年、技術進歩によってこのプロセスを大幅な効率化が進み、自動化することも可能になってきました。

 従来のデザインからコードへの変換プロセスは、デザイナーが作成したモックアップやプロトタイプをもとに、エンジニアが手動でコードを書いていくものです。このプロセスでは、デザインの微細なニュアンスやアニメーションのタイミング、インタラクションの挙動などを正確に再現するため、デザイナーとエンジニアが連携を取りながら進めていかなければなりません。しかし、この方法は時間と労力がかかり、また人的なミスが生じる可能性もあります。

「Design to Code」を体現するFigmaが変えた世界

 近年、デザインとコーディングの間のギャップを埋めるツールが数多く登場していますが、なかでも「Design to code」を意識した機能を多く提供しているのがFigmaです。

 たとえばデザイン属性や状態を保存しておくことができる機能「Variables」は、Color、Number、Text、Boolean の値に対して名前をつけて管理することができます。また「Dev Mode」は、デザインから開発への移行をスムーズにする機能。デザインファイルのブラウザインスペクターのように、オブジェクトのサイズ、スペック、スタイルなどの詳細を確認することが可能です。

 また、iOS、Android はもちろん、 プラグインを使えばTailwind CSSや FlutterなどのUIコードをFigmaで確認したり出力したりすることもできます。従来のデザインツールでも同様の機能を提供していたものの、実用的なものが少なく、出力されたコードに手を加えないと使用できないことがほとんどでした。しかしFigmaはDev ModeやDev Modeにアドオンできるプラグインを使うことで高精度なコードを出力できるようになり、ほぼそのままプロダクションのコードとして使用できるまでに進化しています。

 なお、Figmaの Dev Modeの詳細は「Figma の Dev Mode で UI の確認を楽にする」などの記事を参考にしてみてください。

FigmaのDevモードでコードを出力している例。選択エリアをTailwindCSSのコードとして出力している。プラグインはTailwind React Code Generatorを使っている。
FigmaのDevモードでコードを出力している例。選択エリアをTailwind CSSのコードとして出力している。プラグインはTailwind React Code Generatorを使っている。

※この続きは、会員の方のみお読みいただけます(登録無料)。