AIはガイドラインに沿ったデザインを可能にするのか 現時点での可否を検証してみた

AIはガイドラインに沿ったデザインを可能にするのか 現時点での可否を検証してみた
  • X
  • Facebook
  • note
  • hatena
  • Pocket

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

 今回は、プロダクトデザインにおいて重要な要素である「デザインガイドライン」と「AI」をテーマに検証・考察していきます。

デザインにガイドラインや制約が必要な理由

 そもそも、なぜデザインにガイドラインや制約が不可欠なのでしょうか。その理由として挙げられるのは「ユーザービリティの一貫性」「開発・生産性の向上や効率化」などです。

 ガイドに準拠した一貫したインターフェースはユーザーの操作性を妨げず、学習を容易にすることでユーザーの達成したいゴールへ導くことを手助けします。開発者としての利点は、開発生産性の向上が大きいでしょう。開発者は迅速に作業を進めることができるため、改善のサイクルを素早く回したり、開発内で起きるコミュニケーションを円滑にすることが可能です。

 これらは「デザインガイドライン」「デザインシステム」といった媒体を通じて提供されています。詳しくは、デジタル庁 デザインシステムのドキュメントなどを参考にしてみてください。

 このようなガイドラインは、機械的にチェックできる部分を除き、これまでは人の手で使いやすさや一貫性の確認を行ってきました。しかし、生成AIでこれらのチェックも可能といった言説も出てきています。生成AIには、ガイドラインの準拠や、ルールに従ったUI生成などにまで期待が寄せられていることが確認できましたが、実際に可能なのでしょうか。

 今回はこの点を深掘りしていきたいと思います。

デザインシステムとAIの未来

 「Generative AI for Design Systems」という記事では、生成AIがデザインシステムの管理にどのように革命をもたらすかについて言及しており、そのなかで大きく5つのトピックを取りあげています。(※注意:この記事ではFabrixというデザインシステムが紹介されているパートも多いですが、ここではとくに触れないものとします)

  1. Design Pattern Recognition:デザインパターン認識
  2. Intelligent Design Suggestions:インテリジェント・デザインの提案
  3. Design Feedback and Critique:デザインのフィードバックと批評
  4. Anomaly Detection and Error Prevention:異常検知とエラー防止
  5. Style Guide Generation:スタイルガイド作成

 これらがすべて実現できれば、ルールに従ったデザインをAI自身が提案したり、データにもとづいた検証が容易になるはず。ここからは、この5つそれぞれの可能性を探っていきます。

1.Design Pattern Recognition:デザインパターン認識

 まず、「デザインパターン」という言葉は建築の文脈で使用されることもありますが、ここではソフトウェア開発におけるものとしています。なおWikipediaでは次のように書かれています。

ソフトウェア開発におけるデザインパターンまたは設計パターン(英: design pattern)とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。パターン(pattern)とは、型紙(かたがみ)やひな形を意味する。

 AIを介して機械的にパターンを提示することで、AIは学習したデータをもとに、特定のデザイン要素やパターンを認識することができます。たとえば、特定のユーザーアクションや、もっとも要件に適しているデザインパターンを特定することが可能です。

 しかし、学習させるパターンデータと一口に言っても多くのデータが必要です。画面をそもそも認識させるためのスクリーンショットやモックアップ画像、適切な導線かを判断するためのユーザーインタラクションデータ、レイアウトと階層情報といったものです。

 残念ながら2023年9月時点では、これらの学習すべてを済ませている万能なLLMモデルは存在しないかと思います。独力で作る必要があるのです。(そして汎用的なモデルを作るには莫大なコストがかかります)

 また、各プロダクトや企業ごとに独自のUIを使っているケースもあるため、特殊な場合は専用の学習済みデータが必要になります。現段階では、個別の学習パターンをいちから作らなければなりません。

部分的だが、foduucom/web-form-ui-field-detectionのように、すでにフォームUIの検知を学習したモデルはある。
部分的だが、このようにすでにフォームUIの検知を学習したモデルはある。(出典:Hugging Face
GPT-4の画像入力を受けてテキスト化した機能プレビュー。現段階ではこの機能は完全に実装されてはいないが、現在ChatGPT Plusでは「Advanced data analysis」という機能で限定的に画像を認識することは可能。(出典:Open AI)
GPT-4の画像入力を受けてテキスト化した機能プレビュー。現段階ではこの機能は完全に実装されてはいないが、ChatGPT Plusでは「Advanced data analysis」として限定的に画像を認識することは可能。(出典:Open AI

補足

この記事を執筆して校正に入ってから新たな機能、「GPT-4V」が公開されました。これは待望の機能で、ユーザーが提供した画像入力を解析するようChatGPT(GPT-4)に指示することが可能です。Xの投稿を見る限りでは、UIインターフェースの認識をある程度できているようです。まだ触れていないため検証が必要ではありますが、UIのパターン認識に新たな可能性が生まれるかもしれません。

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