デザインシステムの未来は自動化にあり

2017年にBenjamin Wilkins氏は、デザインシステムと機械学習を使用してローファイワイヤーフレームからコードを生成する初期の研究を発表しました。全体的な反応は、(1.) すばらしい、(2.) 自分たちの仕事はどうなるのだろう、でした。「ロボットに取って代わられるまでには、もっと時間がかかるものと思っていました」とNir Benita氏はツイートしました。

この投稿は、最近になってDiagram*チームがGeniusを披露した際に、再びTwitterで拡散され始めました。Geniusは、Figmaファイルを解析のうえ、手元のデザインシステムからコンポーネントを使用して提案を行うことのできる、当時の初期研究を結実させるAI駆動ツールです。その当時、Airbnb社でAI研究に携わっていたリサーチサイエンティスト、Jem Gold氏は、初期の研究は完全に実現しておらず、代わりにプロトタイプとして機能していることをTwitterで上で明らかにしました。とはいえ、この研究はAI支援デザインの未来を示したものであり、テクノロジーの進化に伴い、いま形になりつつあります。

「我々はまず道具をつくる｡そして､その道具が我々を形作る」と哲学者で理論家のマーシャル・マクルーハンは書いています。プラグインやウィジェットからAI支援技術まで、新しい種類のツールが状況を一変させ、いくつかの根本的な質問が提起されるようになりました。デザインを自動化できる世界においてデザイナーの役割とは何か。自動生成されたコードを使っている開発者の役割とは何か。人間が文章を完成させるスキルをツールが追い越すのはいつか。そして、私たちの仕事と業界全体の未来にとって何を意味するのか。

プラグインとウィジェットの紹介

プラグインとウィジェットの歴史は、デザインと深く関わっています。黎明期のプラグインは1970年代に、AppleのMacintoshコンピューター上のHypercardやQuarkXPressなどのテキストエディターやパブリッシングソフトウェア用に構築されました。多くのクリエーターがプラグインをこぞって利用し、他のユーザーも使用できるカスタムエフェクト、ブラシ、スタイルを広めました。

それ以来、多くのソフトウェア企業がユーザーが作成したアドオンを歓迎し、コミュニティフォーラムやアプリ内マーケットプレイスを通じての拡散を奨励しました (チームやアプリの影響範囲を広げたくない人はいないでしょう)。デザインシステムのプラグインは、通常、機能性を目的としており、一連の既存タスクを自動化するタイプと、アナリティクスの収集、デザインのテスト、アクセシビリティの改善など、機能セットを拡張するタイプの2つに分けられます。

反復作業を自動化するプラグイン

このトピックについては、Figmaのコミュニティページでご確認ください。短時間でゼロからアセットを作り上げる、アセットを圧縮するアイコンやイメージジェネレーターは非常に人気の高いプラグインで、トップ10の半分を占めています。その他には、フローの自動化、デザインのHTMLへの変換、デザインのスライドデッキへの転換などの便利なプラグインもあります。これらに共通するテーマは、複雑さの軽減と、ワークフローの合理化です。デザイナーが、あるツールを使いながら別のツールを使えるようにしたり、少ないクリック数で済むようにするのが、プラグインの主なメリットです。

手根管症候群を経験したことのある人、「エルゴノミックなキーボードデザイン」を検索したことのある人なら、反復的デザインタスクに伴う辛い痛みをご存知かも知れません。デザインのキャリアを追い求める

理由はさまざまですが、ピクセルを細かく配置することはそのなかに含まれないでしょう。

Stripe社のプロダクトデザインマネージャー、Matthew Ström氏は、複雑なデザインシステムでは、問題と解決策の間に多数のパスがあると説明しています。デザインシステムが拡大するにつれて、パスを見つけるための時間と労力が増えていき、反復作業を定義する時間も長くなります。「ローコードまたはノーコードのテストと自動化ツールは作業を大幅に迅速化でき、デザインシステムチームのマニュアル作業時間を大幅に短縮できます」と述べています。UXdesign.ccの記事で、Teisanu Tudor氏は、書体とテキストサイズの組み合わせ最大20通りをチェックするのにかかる労力について説明し、次のように結論付けています。「ほとんどの人は20通りすべてを調べることはありません...可能性のある組み合わせはいくつあるか考えてから、ある組み合わせを想定することなく1つずつ作成していく人は、ほぼいないのです」。そして、それはただの活字です。

「私が力を入れていることの1つに、デザイナーの声を聞いてものづくりのやり方を確認し、迅速で創造的な方法を考えるということがあります」と、Diagram社の機械学習エンジニア、Andrew Pouliot氏は言います。「機械的な処理の時間を減らし、質の高い結果を生み出せるようにするのです。これがデザインシステムの未来のかなり大きな部分になると考えています」Diagram (前述のAI駆動ツールGeniusの黒衣チーム)はツールコミュニティでよく知られた存在で、プロトタイピング、自動化、デバッグのプラグインを作成しています。Diagramのプラグインの中でも最も使用されているAutomatorを使用すると、スタイルガイドの生成、アイコンの一括サイズ変更、APIデータの取得を行うためのカスタム型ドラッグアンドドロップ自動化を構築できます (また、昨年の10月まで、Figmaの長く待ち望まれていた検索と置換機能

にエレガントなソリューションを提供していました)。

機能セットを拡張するプラグイン

ツールで特定のユースケースが解決しない場合、プラグインと連携機能も解決策になります。Starkは、チームでのアクセシビリティ関連問題を発見、修正するためめの製品を提供し、現在は、デスクトップ、ブラウザー、各種アプリケーションを含む、9つの異なるプラットフォームをサポートしています。「これはツールのスイートです。Starkエコシステム導入の全体的な哲学は、デザイナー、開発者、プロジェクトマネージャー、QAエキスパートのいずれであっても、プロダクトチームが既に使っているツールに接続し、アクセシビリティワークフローに集約するというものです」とStark社の最高デザイン責任者Benedikt Lehnert氏はTechCrunchに語っています。

視覚化して整理するウィジェット

プラグインが機能性重視だとするなら、ウィジェットでは外観が重要です。アプリ内ツールは双方向性を実現するためのレイヤーを提供することが多く、ユーザーをコンテンツに引き込み、コンテンツを視覚化します。デザインシステムで最も人気の高いウィジェットには、情報を表す図、クイックリンク用ボタン、動作中のスタイルを表示するデバイスフレーム、コンポーネントのプロパティを整理する多数のテーブルなどがあります。

ウィジェットは、FigmaやFigJamファイル自体の操作性を強化し、アプリケーションで作業しているユーザーの要求に応えるものです。デバイスフレームウィジェットを使用すると、デザイナーはインターフェースのアイデアを瞬時に拡張でき、クリーンなモバイルワイヤーフレームをネット上で探し回る必要はありません。コンポーネントプロパティテーブルウィジェットは、Figmaコンポーネントからプロパティを生成し、デザイナーがハンドオフ用の仕様やドキュメントを作成する時間を短縮します。

これらの例すべてにおいて、プラグインとウィジェットを使えば、ユーザーの場所を問わず、迅速、シンプルな方法で目的を達成できます。デザインシステムの導入や、メンテナンスと配信の合理化に際し、大きなメリットになり得ます。摩擦を減らしたり、ユーザーに追加機能を提供することで、システムの能力を拡張し、ライブラリやコンポーネントの作成と管理を容易にするツールと言えます。そのため、プロダクトデザインが複雑化し、チームが膨大なタッチポイント、デバイス、プラットフォームを移動する事態になっても、これらを統合してワークフローを合理化し拡張する可能性が生まれるのです。

それでもなお、これらのツールは人間が入力しなければ効果は生まれません。

AIによるツールの強化

プラグインが機能性を向上し、ウィジェットがユーザビリティを改善するのだとしたら、人工知能はその両方を支える新たな基盤です。未来を占う水晶玉はなくても、人気の高いプラグインとウィジェットをざっと調べれば、現在どのような問題が存在しており、AIがどのように解決するかについて手がかりは得られます。

アイコン、画像、テキストなどのコンテンツをいかに短時間で生成するか、という課題にいくつかの企業が挑戦しています。 Shopifyは最近、同社が「Shopify Magic」と呼ぶ機能を利用した、AI生成による店舗向け製品説明機能を発表しました。一方、Diagramの最新のプラグイン、Magicianは、深層生成モデルを使用して、テキストベースのプロンプトを元にアイコン、コピー、画像をFigmaデザインファイルに挿入します (FigmaのプラグインAPIを使用したMagicianの構築について、こちら

でJordan Singer氏の話を伺いました)。

DiagramのAndrew氏は、GitHub Copilotが、人間とコンピューターのインタラクションの可能性について自身の考え方を変えたツールの1つと言います。機械学習アシスタントがコードエディターの中に存在し、テキストベースのプロンプトを元にコードの行を自動入力したり、ソリューションを提案します。「自分の脳を増強しているようなものです」と氏は説明します。「関数の名称を書き始めると、パラメーターをどうすべきか思いつく前に、行の残りの部分が入力されているのです」また、現在のファイルだけでなく、プロジェクトの別の側面も参考にエディター内の前後関係も考慮し、作業の進捗に応じてインテリジェントに提案してきます。

機械学習アシスタントは完璧な存在ではありません。ユーザーは引き続きコードベースを調整し、必要に応じてエラーを修正することも求められます。とはいえ、GitHub Copilotは、人間とコンピューターの間でコールアンドレスポンスを生み出します。開発者ワークフローがスピードアップするだけでなく、すでにAIがデザインと開発で当たり前の存在になっている証明でもあります。Andrew氏は、幅広いデザインシステムコミュニティに向け、 Geniusのようなスマートツールを喜んで構築し続けたいと考えています。「デザインシステムは、この2～3年で大きく変化していきます。未来を予測する最善の方法は、それを生み出すことだと思います」と語っています。

デザイントークンW3Cコミュニティグループの創立者、Kaelig Deloumeau-Prigent氏は、AIはデザインシステムワークフローを向上させる大きな可能性を秘めていると感じています。「AIから導かれる発見は非常に多くあります。GitHubのAI Copilotはコーディングに役立ちますし、デザインシステムでも同じようなテクノロジーとのコラボレーションを期待しています」と語っています。Deloumeau-Prigent氏は、トークン管理システムがこの数年でさらに改良され、参入障壁を下げることになるだろうと考えています。現在のところ、ターンキーソリューションはほとんど存在せず、他の手段でコーディングの豊富な知識や、GitHub、監査、自動化への理解が求められます。「この障壁を克服することが困難なチームもあるでしょう」と話すDeloumeau-Prigent氏は、AI支援デザインが、トークンの今後の改良に大きく貢献すると見ています。

来たるべき未来に備える

Figmaが2021年に主催したパネルで、Soleio氏は1年先を見据えて次のように述べました。「今後、デザインの探求やフィードバックの自動化がさらに進むでしょう。現在、私たちが共同作業している環境と同様に、将来的には、より多くの知識作業、フィードバック、反復が仮想コラボレーターを通じて行われる未来が来ると予測しています。共同作業する相手は、現在手動で行われているタスクに熟達した、人間ではないエージェントです」

AIがさらに利用しやすくなるにつれ、新しい機能が数多く登場するでしょう。デザインシステムを拡張して新しいインターフェースを短時間でまとめる、潜在的な問題や不一致を発生前に特定するなどの機能です。AIのもう1つの可能性はドキュメントとガイダンスの領域におけるもので、コンプライアンス遵守だけでなく、使い方の提案といった活用法が期待できます。

デザイナー人材の需要

AIはデザイナーにとって有益なツールとなり得るものの、あくまでツールに過ぎないという点を忘れないことが重要です。ウィジェットやプラグインと同様に、特定のタスクを自動化し、デザインの新しい可能性を広げてくれますが、人間が発揮する問題解決スキルや創造性に代わることはできません (そして、新たな懸念も生じます)。Web3やメタバースなどの新しい環境に合わせて、さらに差別化された魅力的なインタラクションを伴うレスポンシブルデザインソリューションも必要になるのです。

Intuit社のデザインシステム兼アクセシビリティ担当ディレクター、Sam Anderson氏は、予測できる範囲の未来においては、デザインは引き続き重要なヒューマンタスクであり続けると考えています。「顧客の問題を見つけ出し、最適な解決策をカタログから特定して、適切な方法で画面に表示するAIを生み出すのは難しいでしょう。その役割は引き続き人間のデザイナーが担うはずです」と話します。Anderson氏の期待は、自動化でデザイン作業が加速し、チームが短時間でコンセプトからプロトタイプに進むこと、迅速な実験と画面テスト、ユーザーフィードバックが実現することです。

心配は無用です。デザイナーへの需要は安定しています

。「デザインがさらにコードとリンクし、デザインシステムの操作性が改善し普及が進むと、今よりも多くの人が一定の水準以上のインターフェースを作成できるようになります」と、Figmaでインサイトを主導するAndrew Hoganは語ります。「ただし、優れたインタラクションや新しい魅力的なインタラクションへの需要は高まります。企業が他社よりも突出し、ステータスや差別化を実現しようとする姿勢が、デザイナーのさらなる需要につながります」。デザイナーには、さらに多くの方向性を探り、新しいフィードバックや課題を検討して、問題への新しい視点をもたらすことが求められるのです。

もちろん、そのニーズに、AIなどのテクノロジーを深く理解し、未来に向けた倫理的かつ責任能力を持ったソリューションを生み出せるデザイナーと技術者が含まれるのは言うまでもありません。