こちらの記事は、2023 年 7 月 6 日に開催された Config 2023 Recap in Goodpatch で発表した内容です。

本題は「前置き」から始まりますので、私のことをご存知の方はそちらからお読みください。

自己紹介

はじめましての方ははじめまして！株式会社グッドパッチの金谷と申します。UIデザイナーとしてデザインパートナー事業、いわゆるクライアントワークの事業を担当しております。

今回は、生成AIセッションの振り返りと、私の考察と実践について話せればと思います。

執筆記事

個人的にアツかった細かいアップデート

アイスブレイク的に、今回のアップデートの中でも個人的にアツかったものを。SpaceBetween をダブルクリックでできるようになったことは、長年待っておりましたのでありがたいです。笑

Variables V1を色々触ってみて

対して、まだまだ研究が必要そうだと感じたアップデートはVariables V1です。

これまでは Spacing や Radius をセマンティックトークンまで定義して、そのように実装してもらっても、Figma のデザインファイル上ではトークンとして表現されませんでした。 実際のトークンの階層設計がFigmaでも宣言できるようになったことが本当に嬉しいなと感じます。

まだベストプラクティスを見つけられていないな、と感じる内容としては、ModeやCollectionの設計です。コンポーネントの状態などをModeに依存させることになった時、これまでVariantsだけ見ていればよかったのに急に考えることが増える。依存関係が増えて、自分の変更がどこまで影響があるのかわからなくなるためです。今後V2, 3以降で研究していければと考えています。

前置き

私のパートでは、今回発表されたアップデートには深く触れません。Figmaの生成AIに対する姿勢の表明が行われたセッション、今後公開される生成AIの新機能の予告を一緒に振り返りながら、私の生成AIに対する視点を話せたらと思います。

こちらに載せているよりも多くのスピーカーが、今回の Config では AI について語っていました。

今日、私が生成AIについて話そうと思った理由としては、私は現地で生成AIに関するFigmaのセッションに納得し、どうしようもなく楽しみになってしまったためです。Figmaが取る姿勢やクリエイターへの敬意の表現に、節々にFigmaらしさを感じました！

告白と注意

ここで告白と注意なのですが…。

まず、私はAIの学術的な専門家でもありません。
そして実は、私はAIの大ファンではありません。
なぜなら、私たちの仕事が軽んじられる可能性、その生成結果がどこからやって来たのか、どこから派生したのかを正しく認識できない可能性がまだ存在するためです。

私は、今後のソフトウェアデザインへの取り組み方を再考するための歴史のプロセスにたまたま参加して変化を目の当たりにしているに過ぎません。

私の中には諦めと興奮が共存しています。過渡期にいる人間であるという興奮です。今日お伝えしたことが、みなさんの職場で生成AIに関する一つのヒントとして役立つことを願っています。

では実際に、セッションを振り返っていきましょう。

振り返りと私の視点

「AIとデザインの未来について」Noah Levin - VP of Design, Figma

Figmaデザイントップのノア・レヴィン氏の「AIとデザインの未来について」セッションを振り返りましょう。なお、セッション内容のすべてを振り返るのではなく、重要だと感じた点を共有しています。

まず、これまでのデザインは独立した最小単位のコンポーネントを用いていた一方、これからのデザインはユースケースに応じたパターンを用い、コンテキストを与えることでUIのパターンを提案できるようになる、という未来を述べていました。

そして、Diagramの買収が発表されました。特にDiagram社の Genius は、ユーザーがFigma上でデザインする操作を学習することで何をデザインしているかを理解し、デザインシステムのコンポーネントを使用して自動でUIの提案を行うツールです。

今後公開される機能

予告としては、下記がデモと共に発表されました。では、実際に動画とともに見てみましょう。11:55~13:20までをLTでは共有しました、開始時間を指定しているリンクはこちら。https://youtu.be/bslH4Mv1ZHA?t=715

• Brainstorm

  • FigJamでの付箋要約

• Design

  • UIパターンの提案

  • 画像からカラースタイル設計

  • コンポーネントの状態ごとのVariantsを生成

  • プロンプトによるUI設計

  • 自動レイヤー命名

• Build

  • コードを生成

  • 既存のコード参照を発見

考察

テンション上がりますよね。今、最も世界でUIデザインやデザインシステムをためこんでいるのはFigma。そのFigmaが生成AIで提案してくれるならば
ワークフローは大きく変化するはずです！

ここでFigmaの生成AIに対する姿勢や機能をふまえた上での、3点の考察をシェアできればと思います。

第一に、ビジュアルコラボレーションするためのコミュニティの中心に存在する道具としてのFigmaをしっかり崩さなかった点です。素晴らしいと感じました。

第二に、基本的に提案による効率化をもたらすものでした。「ただこれAIで生成できます！」ではなく、特にこれまで人の手間がかかっていた部分を代わりにやってくれるような機能を見せてくれました。

第三に、具体的なUI設計を行う他ツールとの比較をしてみると、やはりFigmaが強いです。Uizard (Autodesigner) によるUI設計、FramerによるWebデザインは精度が低い / まだUI設計の提案はできないためです。

今回のアップデートは生成AIの精度向上へつながっていく

提案されるUIパターンのコンポーネントが参照するライブラリは、各々のプロダクトのデザインシステムやVariables、生成されたコードになります。すなわち、コンポーネントの命名やVariablesの精度がAIが生成するUIパターンの精度に直結すると言えるのではないのでしょうか。

また、このようなことから、今回のVariables、DevMode、PrototypingアップデートはすべてAI機能へとつながっていくことが考えられます。DevModeによって生成されるコードを学習していき、UI生成にも影響を与えると考えられるためです。

一方で

さて、先ほど述べたように今回のFigmaの発表では、全体として作業の効率化を図るための機能がほとんどでした。作業スピードを上げ、別のことに時間を割くことができる、というロジックです。

一方で、生成AIの台頭は「誰が創造性を所有しているのか？」という問いを考えるきっかけをもたらしました。少なからずデザインに携わる皆さんには「自分しかひらめけないものはなく、全てがAIで代替可能なのではないか」という不安があるのではないでしょうか。私もそれを考える日があります。

そして、「創造性」については次のセッションの中でも話されていました。

「生成AIとの創造的なせめぎ合い」Ovetta Patrice Sampson – Director of UX Machine Learning, Google

先ほどのセッションの次に、GoogleのUX機械学習ディレクターであるオベッタ・パトリス・サンプソンによる、「生成AIとの創造的なせめぎ合い」のセッションがありました。

簡単に要約すると、創造性とイノベーションがどのように起こるかについての科学的研究に基づく理解を歴史上の出来事や偉人を取り上げて、生成AIは人間に取って代わることはないと述べていました。

デザインに最適な道具は紙とペン。大変同意です。なんだかんだ、雑多な紙に色々描いている時のスケッチが最後まで生きていたりしますよね。

ここでは、世界の三大発明であるグーテンベルグを例に取り、発明したラスカルの破天荒な性格や外部環境の観察から来たひらめき、リスクをとって冒険する精神の重要さについて述べていました。

人間とコンピュータの共生によって、今までに見たことがないものを作り上げる未来は、とってもワクワクします！

いちデザイナーとしての懸念

素晴らしい未来を語ってもらえた後に水を差すようですが、「実際のところ、本当に創造的なことに時間を割ける未来がやってくるのか？」と私は思ってしまうタイミングがあります。

生成AIによってUIデザインの効率化が進むからといって、自動的にその時間をより創造的であったり戦略策定であったり領域を染み出すことができるとは限りません。イコールではないと思いますし、デザイナーは能動的に動く必要があります。

• ジェネレーティブAIまでで十分なアウトプットが求められる現場だとしたら？

• UIデザイン製造マシーンの操作者にはなってしまう悪夢が訪れるとしたら？

• 創造的な仕事がしたいのは私たちだけで、周囲がそれを求めていない現場があるのでは？

あまりにも悲観的かもしれませんが、時代や道具が変化する中で自分自身が変化しない限りは、この悪夢が現実になるリスクがあると思っています。一人ひとりのデザイナーが自分に合った形で少しずつ考え始められたらと私は
考えています。

私自身が実践する前進するためのアイデア

あくまで私自身の考えですが、例えば下記の3点です。

1. AIの仕事を探求すること

2. UIデザインの品質を高めるための軸足を鍛えること

3. バッドな体験をしたソフトウェアに対して、妄想し続けること

第一に、AIを探求することです。
例えば、会社全体で生成AIに関して学んだことを共有し合うslackチャンネルを作ったり、生成AIを活用したソフトウェアが登場したらまず触ってみること。新しいものが濁流のように流れていく昨今ですが、まずは触れてみることが最重要だと思います。

画像生成ツールでも、新しい機能がリリースされたら触ってみたり、パターンや背景に使えそうな素材を生成してみたり。

その結果、プロジェクトでのワークフローに組み込むことを考えられるのではないでしょうか。

1. プロジェクトに必要な中間成果物を洗い出す

2. どのツールでどんなデータが生成できるかを明らかにする

3. プロジェクトワークフローに組み込む

ワークフローにどう組み込むか、生成物をどうディレクションするかについて、自分のオリジナリティや武器をブレンドするのは創造性があり持続的だと私は考えています。脅威としすぎずに、生成AIの仕事を探求し、自分のものにして発展させられるかどうかなのではないでしょうか。

第二に、UIデザインの品質を高めるための軸足を鍛えることです。生成AIによって提案される成果物、Figmaで言うならばUIパターンをディレクションできる基礎力を鍛え続けておくことです。

私個人の考えでは、UIデザインの品質は直感性、柔軟性、一貫性、耐久性、拡張性で担保されると考えているのですが、各々の軸を元にUIデザインのスキルを磨いておくことが譲れない価値になるのだと思います。

生成AIツールと自分をブレンドする時のオリジナリティになるはずです。

第三に、デザイナーならではの視点として、バッドな体験をしたソフトウェアに対して、妄想してみることです。現在の生成AIツールは、不便なプロンプト主導のインターフェースです。ChatGPTやMidjourneyを触っていても、正直UIは厳しいと思うデザイナーが多いのではないでしょうか。

生成AIを活用したソフトウェアのデザインに対して、「ここがもっとこうなれば」「このプロダクトのPMは次にこんな機能を出すんじゃないか」などと妄想していくんです。

AIエージェントの体験としても、私の観測範囲では未だ正解が出ていません。明日から大きく変わっていくことは誰にでも難しいですが、少しずつ考えていくきっかけに今日のLTがなれば嬉しいと思っています。

終わりに

ここまで聞いていただきありがとうございました。

ConfigにおけるFigmaの生成AIに関するセッションのシェア、そして私自身のいちUIデザイナーとしての視点とヒントのアイデアを述べさせていただきました。何かのヒントになれば幸いです！

ご感想や、今後のイベントのお誘いや雑談等ぜひ声をかけていただければとっても嬉しいです！😊 今回の Config 2023 に現地参加した思い出なども、今後グッドパッチブログで発信予定ですので Twitter をフォローしていただけると嬉しいです。

スライドの Figma Community はこちらです！
【Config2023】Recap on the Generative AI Session: A Designer’s Sense of Crisis and Practice by Goodpatch 

他LT（発表順）

このイベントでの他登壇者の方の記事はこちらです！デモを交えた綿貫さんの発表、Sakitoさんによる鮮やかなデザインの段階の分解など、ぜひご覧ください。

参考

下記のセッションがAIを題材にされていましたので、もし気になった方がいらっしゃいましたらぜひご覧になってください。本日のLTでも、いくつかの部分を参考にさせていただいています。

• Designing for the evolving needs of society

  • 介護現場における対話型AIの活用（楽天の日本人の方が登壇）

• Emerging thoughts on AI assisted design

  • AIのベスト・プラクティスを解明するために

• Designing with AI: building the flagship GPT-4 language product

  • Duolingo Max のリリースまで

• AI and empowering creative careers

  • アドビ社の生成AIに関するセッション

• Figma Blogの生成AI記事

  • AI: The next chapter in design