AIとUIデザイン デザインツールの変遷〜Config2025〜その先
こんにちは、Spinnersの元山@kudakurageです。
ここ数年は生成AIによって特にデジタル分野でいろいろなことが変わってきているわけでありますが、かくいう私もリサーチや頭出しなどに生成AIを利用したりしています。（個人的にはChatGPTよりGeminiほうがわずかに良いなと感じている）
個人研究でも画像や動画や3Dモデルの生成AIモデルをローカルマシンで動かして、クリエイティブへの応用の可能性を常に試しています。特に中国系の勢いはすごくて、画像は軽量で高品質なモデルがどんどん出ていますし、動画や3Dモデルは週次くらいペースで改良が進んでいるという状況です。
そんな中、Config 2025というFigmaというデザインツールのアップデートリリースイベントがGW明けに開催されました。
Figmaはデザイナーとして日常的に使っているツールであるだけに、Configで発表される内容には注意を払っています。
とは言え、ここ数年はそれほど期待もしていませんでした。もちろんまだまだこうなってほしいと思える部分はあったものの、UIデザインツールとしてはある程度成熟していましたし、Figma自身もデザイナー以外のユーザー獲得を重視しているといった雰囲気がありました。
今回はこれまでのUIデザインツールの変遷やConfig 2025の内容を振り返りつつ、次の1年で変わっていくであろう姿と今後のサービス自体の変化について妄想も絡めながら考えてみようと思います。
INDEXもつけたので好きなところから読んでください。
INDEX
デザインツールの変遷
グラフィックUIデザイン
ソフトウェアにおけるUIデザインの初期はグラフィックデザイン的な側面が強くありました。 Webデザインの延長線ということもありどのように見せるかが重要視されていたところもあるのかもしれません。
グラフィックデザイン的な文脈でAdobeのツールが主に使われ、Photoshopがメインのツールでありながら使い手の好みによってIllustratorが使われたり、Web開発とも相性の良いFireworksやDreamweaverといったツールを使う人もいたというところでしょうか。
iPhoneを皮切りにスマートフォンアプリケーションが隆興し始めた初期も、スキューモーフィズムが流行ったこともあり、グラフィックデザイン的な側面が今に比べて強かったように感じます。
そのためピクセルパーフェクトなスクリーンデザインを突き詰めやすいPhotoshopが使われることも多かったのかと思います。
アプリケーションUIデザイン
とはいえ、PhotoshopはUIデザインに適したツールであるとは到底思えませんでした。
アプリケーションは重く、1画面単位で作り込んでいくようなインターフェースは、たくさんの画面を動作する流れでみながら相互に考えていくUIデザインとは相性がよくありません。
その頃、スマートフォンアプリケーションのUIデザインもインタフェース自体は極力シンプルに控えめにし、コンテンツ自体が主体であるという考え方になってきたました。
それに合わせて、元々はベクターグラフィックツールとして開発されていたSketchはUIデザインツールとして強化され、アプリケーションデザイナーに支持されていきます。
ベクターグラフィックツールとして開発されていたこともあり、軽量で動作し、スマートフォンアプリケーションで特に重要なインタラクションや画面間の遷移といった部分も表現できるものでした。
また、マスターコンポーネントを作成して、それを複製して利用することで、後々のコンポーネントの修正を楽にしたり、より構造的な設計を作れる仕組みも今までにない点で良いところでした。
（私がPhotoshopでデザインをしていた時に似たようなことを実現しようと、Photoshopの外部ファイル参照という機能でコンポーネントを表現しようとしたことが懐かしい思い出です。とは言え修正しようとするたびに別のファイルを開く必要かあったり、呼び出すのも面倒だったりととても使えるものだとは思えなかったですが…）
エンジニアリングUIデザイン
Sketchには連携するサードパーティアプリケーションやデザインスタイルを簡単なコードとして表示できたりと、ソフトウェア開発におけるエンジニアとの連携も少し意識されたものではありました。 ですが、それが十分であったとは言えませんでした。
そんな頃、ソフトウェアデザインは異職種のコラボレーションを前提としたものだと定義して新たなUIデザインツールが生まれていくことになります。 その一つが今も多くの開発者に使われているFigmaです。
Figmaは元々WebGLなどのフロントエンドWeb技術をベースにブラウザ上で動くPhotoshopのようなグラフィックツールとして開発し始められたようですが、その後そのブラウザベースの強みを活かして複数人でリアルタイムに同時編集するUIデザインツールとして知れ渡っていきます。
それまでSketchが解決していたような点は全て網羅しつつ、それに加えてエンジニアやマネージャー、はたまたマーケターなどデザイナー以外の人とのコラボレーションの敷居を圧倒的に下げました。
SketchでUIデザインを編集したり閲覧するためには専用のアプリケーションを必要としていましたが、FigmaではURLにブラウザからアクセスするだけで誰でも閲覧できるようになったことから、アプリケーションを持たないデザイナー以外の人たちとのコミュニケーションがものすごく楽になったのです。
それまでといえば、周りの人に確認してもらうためにデザイナーが画面を画像として書き出して、場合によっては注釈コメントを付けたり、細かなマージンや色の指定を画面画像内に仕様書として落とし込んだ上で書き出して共有するということが多くありました。
しかしFigmaによって、誰もが簡単に直接UIデザインを見れるようになったことで、そういった作業が不要になったどころか、作業の途中でも気軽に意見を言ったりもらったりということが可能になりました。
Sketchにも一部あったサードパーティとの連携という部分では、APIを一般公開しプラグインやウィジェットの開発をしてもらうことで足りない部分を補ったり、コミュニティを醸成したりという活動を積極的に行いました。
その後もデザインシステムなどの時代の波をうまく捉えて取り込みつつ、デザイナー以外のユーザーにも積極的に使ってもらうような取り組みを行なっています。
とは言え、最近ではデザイナー以外のユーザーを取り込もうという施策ばかりが目に付き、デザイナーのクリエイティビティをサポートしようという部分が疎かになっていることも否めないように個人的には感じています。
もちろんデザインという作業はデザイナーだけによって行われるものではないのですが、本来デザイナーが強みとして発揮できる部分に集中させるための機能というのはまだまだ提供できるのではと感じます。
Config 2025
そんな中、日本時間5月8日の午前1時ごろから行われていたConfig 2025のキーノートがありました。
そこで紹介されたFigmaに関する発表内容について簡単に紹介しようと思います。
グリッドレイアウト
Auto layout just got more powerful with Grid
— Figma (@figma) May 7, 2025
→ Format in a gallery, card or bento layout
→ Items can span multiple cells#Config2025pic.twitter.com/VJSAF9Qvm3
オートレイアウトのオプションにグリッドレイアウトが追加されました。 フレーム内の縦横のグリッドの数やgapなどを自由に編集でき、隣り合った複数のグリッドをまたいだコンテンツ配置なども可能になっています。
Figma Sites
Introducing Figma Sites
— Figma (@figma) May 7, 2025
Take your designs straight to the web. With code and AI coming soon.
Source: us#Config2025 pic.twitter.com/S7Gc3cyvPJ
Figmaで作成したデザインをWebサイトとして直接公開できます。
バリアブルを用いてブレークポイントを設定し、ビューポートサイズに合わせたレイアウトを組むことでタブレットやモバイル向けの表示にも対応させることが可能です。
ボタンをホバーたときのエフェクトや文字をタイプライターの用に表示したり、ロゴをマーキー表示する等といったよくあるエフェクトアセットも用意されており、簡単にインタラクティブなサイトを作ることができます。
First look: CMS in Figma Sites
— Figma (@figma) May 7, 2025
Content management and editing–right within Figma. Coming soon. #Config2025 pic.twitter.com/WNxcUraCtS
また、Figma内にデータベースを備えたCMS機能も実装されており、ブログなどのページも作成可能。
さらに、コードレイヤーという機能を使ってさらに動的なインタラクションをプログラミングしてFigma Sites内で表現することも可能になります。
Figma Make
Your design is the prompt
— Figma (@figma) May 7, 2025
Bring your existing ideas to life with Figma Make#Config2025 pic.twitter.com/QTWpDORELw
Figmaで作ったアプリケーションなどのデザインを実際に動くものとして、AIがコードに書き換えてアウトプットし、動作イメージ確認などのプロトタイプなどを簡単にする機能です。
作成したデザインとともに、具体的にどのように動作するのかなどをチャットベースのテキストプロンプトで入力し、対話をしながらアプリケーションのプロトタイプを構築できるようにするものです。
Figma Sitesで登場したコードレイヤーとの連携も示唆されているように見えました。
Figma Buzz
JUST IN: Figma Buzz, a new and easy way to make brand assets at scale⁰#Config2025 pic.twitter.com/aJ3olWaYnZ
— Figma (@figma) May 7, 2025
オリジナルのレイアウトテンプレートを作成して、そこにCMS機能を組み合わせ、簡単にブランドアセットの作成ができる製品です。
どちらかというと、非デザイナー職向けにそういった作業ができるように支援するためのもののようです。
Figma Draw
Introducing Figma Draw
— Figma (@figma) May 7, 2025
New fills, effects, brushes, and more, now in your Figma Design toolkit#Config2025 pic.twitter.com/PD9JesVGLi
新しくさらに詳細なベクターグラフィックのための編集モードです。
今まで難しかった特殊なベクターデータの編集やパス上テキスト、テクスチャエフェクト、ベクターブラシ、ランダムストローク効果などなど、Adobe Illustratorにあるようなベクターグラフィックツールが実装されているようです。
AIとのこれから
Figma Config 2023にてFigmaがAIデザインツールを開発する企業のDiagramを買収したことを発表しました。それを皮切りに少しづつではありますが、FigmaでもAIによって開発やクリエイティブをどうアクセラレートするのかという取り組みがなされてきました。
この2年くらいでソフトウェア開発の環境はAIによって大きく変わり続けています。特にエンジニアリング部分でのAIによる開発環境の変化は目まぐるしく毎週トピックがあるくらいに思います。
今回の発表の中で言えば「Figma Make」などは、Figma内でのAI向けの取り組みのど真ん中として開発していた機能だと思われます。
Figma Makeもやはり実際にデザインしたものを具体的に動くものにコード化するというエンジニアリング部分でのAI活用という印象が強いように思います。
AI活用という部分に関して、一方デザインについてはどうでしょうか？
イラストなどのグラフィックの生成、リサーチやアイディエーションといったテキストベースのAIの活用といった部分は初期から取り入れられていっていますが、アプリケーションやUIデザインという分野に関してはほとんど進んでいないように感じます。
プロンプトによってそれっぽい画面デザインを生成するツールであるGalileo AIやUIzardなどは少し前からいくつか登場してきていますが、ラピッドプロトタイピングに使えるかも？程度というところでしょうか。
今回の「Figma Make」も合わせれば、実際に動いて試せるプロトタイプまで用意して試行錯誤できるという意味では進んでいる部分もあるかもしれません。
ただ、それよりもAIが得意としている早々に解決できることで、デザイナーが日々何気なくこなしている退屈な作業というのが山のようにあるように思います。
こう言った部分をAIによって強力にサポートしていくということは容易に想像できます。それはゼロからアプリケーションの画面を生成するというようなものではなく、ソフトウェアエンジニアリング部分で活用されつつある、コーディングや情報整理、構造化といった作業などです。
デザインには無から発散させていく創造的な作業と、対象者に適切に届けるために無駄を削ぎ落としていく編集的な作業があります。
創造的な作業という部分では簡易的なリサーチやアイディエーションといった部分でのAI活用がすでになされ始めていると思います。（先程挙げた「プロンプトによってそれっぽい画面デザインを生成するツール」もこのアイディエーションに近い分類に感じます）
では編集的な作業としてコーディングや情報整理、構造化といったAIによる作業はどのように活かせるのでしょうか。
Figmaのようなデザインツールですぐに実現できる簡単な想像の範囲内で考えてみると、現在Pluginなどでサポートされていることは全て生成AIに任せることができるはずです。
わざわざPluginを探したり、場合によっては自作する必要もなく、必要な機能を都度AIによってPlugin的にこなしてもらえるはずです。（単純に考えてAIがプロンプトのように動作するPluginを生成して動かせば良いだけなわけですからね）
データを流し込んだり、フォントを入れ替えたり、適切なラベルを付けたり、チャートを描いたりといったPluginで実現できる作業はすべてAIで代替可能です。
ちなみにConfig 2025のグリッドレイアウトの発表内で一部AIによる入力編集補助の提案というのが紹介されていましたが、このイメージに近いように思います。
さらにFigmaサービス自体との親和性を高くしていけば、並べられた画面アートボードから規則性を見出して自動的にデザインパターンを抽出し、デザイントークンやコンポーネントを勝手に定義してくれたり、コンポーネントライブラリに沿っていない部分があったら使用を促してくれたりというのはすぐにでもできそうです。
社内のデザインシステムをMCPサーバー化して…という話は少し前からありますが、Figmaのようなデザインツールが順当に対応していけばそもそもMCPサーバー化されているという状況にもできそうなものです。
ここに挙げた例は非常に当たり前のような話ばかりで、AIがデザイナーとして振る舞う機能ではなく、デザイナーの優秀なアシスタントとして振る舞う機能が本来は求められているのではないかと思っています。
正直、今回のFigmaのリリース内容は、どちらかというとデザインをコード化するようなエンジニアリング部分に特化した内容であり、期待した部分を満たすようなものではありませんでした。
上に示したようなAIを活用した新機能はこの1年くらいで提供されていてもおかしくない機能ですし、そういった部分を強みとして推しだしたFigma以外のデザインツールがAIファーストのデザインツールとして、これからの1年くらいでリリースされ覇権をにぎっていく可能性すらあるように思います。
ここからは勝手な妄想
この話には一つ重要な観点があるように思います。
現在、多くの起業家たちが生成AIを活用したサービスや機能というのを世に送り出そうと躍起になっているわけですが、それと同等かそれ以上に今後ソフトウェアサービスにとって生成AIとのintegratable（統合可能性）が重要になってくるのではという話です。
これは単にサービス内でAIを活用した機能を提供するという話ではありません。
AIが扱いやすいデータを用意したり、AIがツールとして使いやすい機能の提供方法を用意するという言い方がわかりやすいかもしれません。
幸いFigmaの場合はサービス内の主な操作のほとんどがAPI化されており、それがPluginなどの外部からの操作のしやすさを助けているわけですが、結果として生成AIの活用や連携のしやすさにつながっているように感じます。
完全に私の個人的な意見ではありますが、現在開発されている生成AIを活用したサービスや機能というもののほとんどは、汎用生成AIのインターフェース（入口）を支配したプラットフォーマー（ChatGPTやGeminiなど）に結果的に置き換えられていくのではと考えています。
とはいえ、汎用生成AIにできることにも限界はあると考えられます。そこで専門的な分野に特化したサービスを開発・提供している会社は2つの選択を迫られることになると思います。
一つは、自社サービス内で独自の生成AIサービス・機能を開発し囲い込んで提供していくという選択。
もう一つは、自社サービスの機能を生成AIに利用してもらいやすい状況を提供し、サービスを利用する窓口を増やしていくという選択。（ChatGPTにおけるGPTsのようなツールを提供していくというイメージが近いかもしれません）
これは必ずしもどちらか一つだけが生き残るという話ではありませんが、過去の歴史から勝手に想像して窓口をオープンにしていく戦略をとったほうが伸びていくのではという予想です。（ただその後また各々のクローズドな方向に回帰していくという流れもあるかもしれませんね）
もちろんこの「自社サービスの機能を生成AIに利用してもらいやすい状況を提供する」という選択肢にもセキュリティコントロールや独自の強みを流出させないための工夫などが必要だと思うので、簡単なことではないと思います。
ここからはさらに妄想を膨らませて、スマートフォンからAIフォンに変化していく未来についても考えてみたいです。
Geminiなどを搭載したAIフォンでは、物質的な存在やOSとAIがほぼほぼ同一化していいくのではと個人的に予想しています。今はまだスマートフォンのOS上にAIアプリケーションがのっているという印象ですが、これがイメージとして全て同一化していくイメージですね。
現在、多く提供されているスマートフォンアプリに関しても上に示したような変革が起こっていくと仮定すると、そもそもアプリオリジナルの画面UIデザインというのもなくなっていくのかもしれません。
おそらく現在のメインの窓口であるアプリケーションランチャーはAI（テキストプロンプト入力 or 音声入力）に置き換えられ、結果として表示されるものも基本的にAIチャット画面上で汎用的なUIとして表現され対話していくことになり、アプリケーション独自の画面UIというのが不要になっていく可能性があるのではと。
ユーザーにとってはアプリごとに違う操作性を求められるよりも、一貫性をもって操作できる汎用的なUIを提供される方が使いやすさという意味では良い気もしますしね。
これはかなり尖った見方ですが、アプリケーションがAIにとってのツール化していくと考えると、ありえなくもないかと思います。（とは言え専門的に緻密な作業を必要とする画面表現に関しては結局必要になっていきそうだとも思っています）
この場合、エモーショナルデザイン的な考え方やブランドコミュニケーションがどうなるのか？というのは気になるところですね。
今も一部そうですが視覚的なコミュニケーションに頼らないあり方というのが示されていくのかなと。具体的には現在のUX Writingなどに現れているような対話する対象としての体験が重要視されていくのかもしれません。（ただ実際のユーザーが対面するのは窓口であるAIですから、実際には自社サービスとAIが対話する部分のインターフェースの設計の話になっていくのかもしれない？）
かなり妄想を膨らませすぎましたが、本質的にデザイナーに求められる能力というのは今後も多く変わらないと思います。評価・判断・決断といったディレクションよりのスキルが求められていくことは間違いなさそうですが。
とはいえ、今後AIに置き換えられていくであろうグラフィックや設計の基礎的な知識や素養を持たないAIネイティブの世代が今後生まれていくと考えたとして、そういった人たちが評価・判断・決断のための軸をどのように身に着けていくのか？それともそれすら身につける必要のない新たな軸が産まれるのか？
そのあたりについてが、今の私の興味分野です。
