Figma周辺のAIの現在と近未来
これはInfocom Advent Calendar 2023 6日目の記事です。
こんにちは、インフォコム UXteamのfurukuboです。2023年11月7日に、「Figma」からホワイトボードツール「FigJam」への「Figjam AI」搭載が発表されました。「FigJam」はオンライン上での情報共有や、コラボレーションが行えるツールです。わたしは「Miro」を使用することがほとんどですが、チームでのコラボレーションを３つのAI機能でサポートするとのことで遅まきながら利用してみました。併せて、「Figma」を中心としたAIを活用してできることの現在地とこれからについて考えてみたいと思います。
「FigJam AI」の３つの機能
1.テンプレート生成
「FigJam AI」にキーワードや決められたタグを指定すると、それに合わせたテンプレートを作成してくれます。ブレインストーミング、フローチャート、組織図などさまざまなテンプレートが秒で用意されるので、スムーズにプロジェクトを始動することができます。会社や組織によって、検討事項はさまざまなのでこのテンプレートを変更せずに始めるかはなかなか難しいところですが、「FigJam AI」に条件をつけることもできるのでカスタマイズもできそうです。
試しにペルソナと入力してみましたが、ペルソナを整理する際のテンプレートが作成されました。アンケート、インタビュー、観察、デモグラフィックデータ、行動、思考などのカテゴリでスペースが分けられていて、これがサクッとできるのはいいですね。観点のヌケモレなく、プロンプトで手軽にスタートできるというところが新しいです。
2.付箋の並べ替え
付箋をトピックスごとに分類して並べ替えてくれます。整理整頓やラベリングには地味に時間がかかるので、これはかなり嬉しい機能です。試しに、付箋を用意して並べ替えてみました。十二支、クリスマス関連、感情の形容詞、日常生活の行動、国名という取り留めないテキストを用意してバラバラに配置しました。
付箋の色は念の為、単色にしてから「Sort Stickies」を実行します。その際に付箋が重なっていると、関連があるとみなされて結果に影響があったので、付箋同士に関連性がない場合は付箋を離して配置しておくと良いです。
並べ替えしてみると思ってた通りの部分と、思ってたんと違うところがあります。感情、日常の行動というカテゴライズははかなり想定通りですが、「国名と動物」という項目にサンタクロースが混じっていたり、日常の行動に「龍」「牛」がいたりします。並べ替えでは初期状態で３つに分類するようになっているからなのかもしれません。試しに「国名と動物」カテゴリを再ソートしてみたものが下記の画像です。（再ソートができるのがいいですね）
「クリスマスの国」とは。 12月に入った為「 FigJam」さんもクリスマスモードになってしまったようです。「クリスマスの食べ物と装飾品」はカテゴリは良い感じです。「Miro」にも同様の機能がすでに実装されていますが、精度は似たりよったりです。現在は人間のほうが賢いようですが、まだベータ版なので、これから精度向上してくると本当に便利になるのでとても期待しています。こういった大量のふせんのグルーピングは頻繁に発生するので、自動化されることによる時短効果は大きいと感じます。一方で、人間ならでのは文脈を読んだグルーピングや、キーワードの意味をズラしたり拡張したりするあいまいで抽象度の高いグルーピングは苦手そうなので、人間が介在する価値が今後もありそうです。
3.付箋の要約
選択した付箋の内容を要約してくれます。試しに「30歳男性／東京都在住／特別養護老人ホームの施設長／従業員数1000人／各事業所の施設長がシフト作成する／勤怠管理は打刻機を使用／シフト作成はEXCELを使用／シフト作成を楽に行いたい」という情報を付箋に分けたもので要約してみました。
要約結果
Summarized with AI
シフト作成と勤怠管理の改善
シフト作成の効率化
• シフト作成を楽に行いたいという要望があります。
• EXCELを使用してシフト作成を行っていますが、もっと効率的な方法があるかもしれません。
勤怠管理の改善
• 勤怠管理は打刻機を使用していますが、より効果的な方法があるかもしれません。
施設長によるシフト作成
• 各事業所の施設長がシフト作成を行っています。
• 施設長によるシフト作成の方法や手法についても検討する必要があります。
従業員数と施設長の情報
• 特別養護老人ホームの施設長がシフト作成を行っています。
• 従業員数は1000人で、施設長は30歳の男性で東京都在住です。
Heads up: AI outputs can be misleading, or even flat-out wrong.
要約結果は付箋の横に表示されます。おおむね妥当な内容になっています。こういった要約はChatGPTのほうが利用頻度は高いですが、ディスカッションなどアウトプットの内容を付箋の細切れの情報から手軽に文章化してくれることが助かる状況は発生することがありそうです。
FigmaのAI
「Figma」本体でのAI搭載はまだのようですが、プラグインを通してAIを活用したデザインをサポート機能が利用できるようになっています。画像生成をしてくれる「Ando」や、何をデザインしているかを理解し、デザインの構成要素を使用してより良いデザインの提案を行ってくれる「GENIUS」などいくつかプラグインが登場しています。
その中で、「Chat2Design」はプロンプトで指示するだけで、「Figma」上にデザインを作成してくれます。試しにインスタグラムのように「Instagram風の写真モバイルアプリのリストビューをデザインしてください」と指示したところ下記のようになりました。
簡素なアウトプットでまだまだ荒削りですが、短い指示ですぐに生成してくれると思うと素晴らしいですね。文言の選択や表記の揺れで結果がブレるので、思ったようなアウトプットを出すためのプロンプトが重要でした。また、あまり細かい指示を出すをほぼ無視されるようです。
Figma / STUDIO連携
また、2023年11月1日 にはノーコードWeb制作プラットフォーム「STUDIO」が、「Figma」で作成したデザインデータを連携してWebサイトを公開できるプラグインをリリースしました。先ほど「Chat2Design」で生成されたフレームにフィラー画像を入れて、「STUDIO」に書き出してみました。
Figmaでコピーして、「STUDIO」に貼り付けるという簡単操作でデザインをノーコードツールに反映することができました。不完全ながらもUIデザインからHTML/CSSまでAIを活用して半自動で作成して公開ができるという可能性を感じます。
これからのデザイン
現在は、「AIでデザインのすべてを置き換える」ということはなく、いかにAIを活用してデザインプロセスを変革していくかを考える過渡期にあるかと思います。生成されたアウトプットをそのまま手直しなしで利用したり、商用に活用できる品質に到達するまでは、まだ時間がかかりるケースが多いと思います。
そのためAIを部分的に活用して業務に取り込んでいけるかどうかが重要になってきます。画像生成AIを利用した画像作成やフォトレタッチ、ChatGPTを使った要約、アイデアの壁打ちといった利用方法など、すでにプロセスに取り込んでいる方も多いかと思いますが、今後はますます多様なAIを活用した省力化、高品質化が進んでくると思います。
その先には、デザインプロセスやデザイナーの仕事内容の変革も予想されます。質の高いデザインがAIを通してローコストで作成できる時代になる中で、良いデザインそのもの（アウトプット）を作ることよりも、デザインを通してクライアントのビジネスプロセスやビジネスゴールに影響を与えられるかが差別化としてますます重要になると思います。デザイナーが担っている現在の業務のうちAIが代替していく部分は、今回Figma周辺のAI実装について見ていく中でも片鱗を感じることができました。何年～何十年先になるかわかりませんが、多岐にわたる社会の変化に備えてAIを味方につけながら、より良い「デザイン」の在り方を考えていきたいですね。
この記事が気に入ったらサポートをしてみませんか？