これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載「みんなで育てるデザインシステム」では、デザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。最終回となる第7回は「デザインシステムの未来」についてです。

※本記事はウェブマガジン「CreatorZine」に2024年7月10日に掲載された記事を再掲載したものです。

---

こんにちは。グッドパッチのUIデザイナー 乗田です。前回の記事では、デザインシステムを拡張する方法やそのポイントについて紹介しました。最終回となる今回は、「デザインシステムの未来」をテーマに、デザインシステムが秘める可能性やAIとの接続についてお届けします。

デザインシステムの課題

これまでの連載を通して、デザインシステムは組織全体で一貫したデザインを維持し効率的な開発を可能にするためのツールであることや、これらのメリットを享受するためのデザインシステムの構築・運用方法について紹介してきました。

デザインシステムは組織やユーザーに大きな価値をもたらします。その一方で、デザインシステムには、構築や運用に要するコストの肥大化をはじめ、次のような多くの課題も存在します。

1.構築フェーズの課題

コンポーネントの構築

デザインシステムの中でも、コンポーネントは特に重要な存在です。しかし、コンポーネントの構築を行う過程において、一貫したスタイルですべての要素を設計し、名前やプロパティの整合性を保つことは容易ではありません。

特に、複数のサービスやマルチプラットフォームで活用するための大規模なデザインシステムは考慮すべきポイントが多いため、全体最適を図ることはとても難易度が高いです。そのため、これらの観点を反映したコンポーネントの構築には多くの開発期間が必要です。

ドキュメントの執筆

デザインシステムが組織に深く浸透するためには、ドキュメントが欠かせません。ドキュメントはコンポーネントの仕様やふるまい、使いかたが網羅的に記されている必要があり、それと同時に文章の読みやすさや分かりやすさも求められます。

これらのポイントを備えたドキュメントを用意することで、デザイナーやエンジニアが迷うことなく効率的にデザインシステムを利用できるようになります。しかしドキュメントの執筆もまた、時間と労力を要する作業です。

2.運用フェーズの課題

一貫性の維持

デザインシステムが稼働し始めた後も継続し、一貫性を維持することは重要です。デザインシステムが組織の共通言語として機能するためには、すべての要素が一つのデザイン原則に基づいていること、各コンポーネントやドキュメント同士の整合性が保たれていることも欠かせません。

一方、デザインシステムのアップデートでコンポーネントなどが増えるにつれ、デザインシステムに含まれる要素の依存関係は強くなるため、要素同士の一貫性を維持することは難しくなります。

柔軟性の確保

これまでの連載で、良いデザインシステムは組織やプロジェクトの成長に合わせてその形が変化することも紹介してきました（参考記事）。さまざまなプロジェクトやチームの多様なニーズに対応できるデザインシステムに育てるためには、柔軟性と拡張性が重要です。

しかし、それらの設計を誤るとデザインシステムの複雑性を増長させ、一貫性の維持に支障をきたす可能性があります。

デザインシステムは組織のデザインプロセスをより良いものにする効果がありますが、こういった理由から、その構築や運用は容易ではありません。

AIによるデザインシステムの生成

昨今、生成AIに関連する技術が急速に進化し、さまざまな分野でその活用が進んでいます。

デザインシステムの構築と運用には多くの労力と時間を要することは先ほども触れましたが、生成AIを活用することでデザインシステムの領域でも、より低コストかつ効率的に構築と運用を実現できる可能性があります。

将来的に生成AIが今日のデザインシステムのワークフローをどのように改善し、どんな効果をもたらすのか。ここからは例を挙げながら、考察していきたいと思います。

コンポーネントの生成

将来的に生成AIはFigmaなどのデザインツール上で、一貫したスタイルやプロパティによって設計されたコンポーネントを自動的に生成できるようになるだろうと推測しています。コンポーネントの生成が実現すると、デザイナーは手動でそのスタイルを定義したり、プロパティを設計したりする際に要していた時間を大幅に削減できるようになります。

サービスやコーポレートのブランドなどを軸に、迅速かつ一貫性を保ちながら多くのコンポーネントやそのパターンを生成できるため、簡単に全体最適ができるようになると考えられます。

また将来的には、コードベースのコンポーネントを構築する際にも生成AIは効果的に機能するようになるでしょう。AIが設計した仕様に基づき、ReactやVue.jsなどのライブラリ用のコンポーネントを生成することで、これまでコンポーネントの実装にかかっていた時間を大幅に削減。それにより、開発者がいっそう本質的な作業に集中できるようになると考えられます。

異なる技術スタックへのコンポーネントの変換

生成AIによって、コンポーネントのコードを迅速かつ正確に、異なる技術スタックへと変換できるようになることも期待されます。

このプロセスが実現すると、React用に用意したコンポーネントからVue.js用のコンポーネントへの自動的な変換なども可能となるため、手動での変換にかかる時間が短縮されます。このアプローチにより、異なる環境であっても一貫したユーザー体験を素早く提供できるようになります。

ドキュメントの生成

昨今の数多の生成AIの活用事例からも、生成AIが文章の生成に効果的なことは明らかでしょう。そして、デザインシステムのドキュメントは定型的なフォーマットに沿って構成する必要があるため、生成AIとの相性もとても良いです。

このことからも、ドキュメントの執筆業務を生成AIに任せることにより、各コンポーネントの用法やスペック情報を網羅した、分かりやすくかつ読みやすいドキュメントを自動的に生成できるようになるでしょう。

また、AIがドキュメントの生成を行うことによって、これまで執筆にかかっていた時間と労力が削減されるだけでなく、仕様に基づいて正確な内容が担保されていることから、常に一貫した最新の状態を維持することができます。

生成AIはデザインシステムの構築と運用プロセスにおいても多くのメリットがあり、既存のワークフローにおけるさまざまな課題を解決する力があると考えられます。将来的に生成AIがデザインシステム領域でも活躍することで、デザインシステムの構築と運用はよりスムーズかつ効果的なものになっていくでしょう。

デザインシステムの未来

AIとデザインシステムの連携は、デザインの未来を切り拓く重要なトリガーです。生成AIがデザインシステムを活用してデザインを行うことにより、デザインプロセスは劇的に変化することが予想できます。ここでは、デザインシステムで生成AIを活用することによって生まれる価値と、人間が享受する恩恵について考察します。

生成AIがデザインシステムを活用する未来

生成AIはさまざまなパターンのデザイン作成、画像のリサイズ、レイアウトの最適化など、時間のかかる反復作業を迅速かつ正確に、そして自動で実行することが得意です。また、大量のデータを分析したり、市場の動向やトレンド、ユーザー行動を特定した上で、効果的かつ精度の高いデザインを生成したりすることにも長けています。

一方、生成AIの課題のひとつは一貫性を維持することですが、これは生成AIがデザインシステムと連携することで解消されます。AIがデザインシステムやそこに含まれるガイドラインを学習することで、生成するデザインにも一貫性がもたらされます。これにより、AIもデザインシステムのメリットを享受し、より高品質なデザインを生成することが可能になるでしょう。

人間がさらにクリエイティビティを発揮する未来

AIがデザインシステムを活用してデザインに取り組むことで、デザインに要する時間が大幅に削減され、それによりデザイナーには多くの時間がもたらされます。

デザイナーはこの時間を活用することで、これまでよりもさらに創造的な活動に取り組めるようになります。このアプローチによって、デザインの品質や生産性はより向上し、魅力的なユーザー体験を提供することが可能になるはずです。

また、AI活用によって生まれた時間を使うことで、デザイナーはユーザーフィードバックの収集やデザインシステムの改善にもいっそうコミットできるようになるでしょう。これにより、ユーザーとの対話に多くの時間を費やすことができ、よりユーザー中心のデザインが実現できます。

連載のおわりに

これまでの連載を通じて、デザインシステムの概念から価値や必要性、構築や運用の方法、そして未来の展望について紹介してきました。この連載を執筆する中で、特に皆さんにお伝えしたかったことが2つあります。

1つは、「デザインシステムは組織やプロダクトに沿って形を変える」ということです。どれひとつとして同じ物にならないというその多様性こそが、デザインシステムの力強さであり、美しさでもあります。この性質を備えているがゆえに、デザインシステムは一意の定義を行うことが難しい概念となっています。

しかし組織の目的を達成し、デザイン活動を支えるものであれば、それは立派なデザインシステムです。ぜひ、世の中の公開されているデザインシステムや特定の定義にとらわれることなく、皆さんの組織にとって最適な形を見つけながら、デザインシステム構築に取り組んでください。

もう1つは、連載タイトルにも含まれている「みんなで育てる」ことの重要性です。デザインシステムは組織の多様なメンバーの視点や知見が反映されることで、真に価値のある組織の共通言語として機能するようになります。デザイナー、エンジニア、プロダクトマネージャーをはじめとするすべてのステークホルダー一人ひとりの貢献によってデザインシステムの品質は高まり、より良いデザインを実現するための組織のアセットとして育まれます。

このプロセスによって、組織の一体感が生まれ、より強固なチームワークを築く基盤にもなるのです。今少人数のメンバーでデザインシステムに取り組んでいる方はぜひ多くのメンバーを巻き込み、組織の活動に昇華させることも目指してみましょう。

そして、タイトルに含んだ「みんな」の定義の中には、今後は生成AIも含まれることになるでしょう。AIがデザインシステムの構築や運用をサポートすると同時にデザインシステムを活用してデザイン活動そのものを行うことで、私たちのデザインプロセスはいっそう効率的になることが予想されます。

これらの進化によって、デザイナーはより創造的な取り組みに集中できるようになります。新しいアイデアを試し、ユーザー体験を向上させるための革新的なデザインに挑戦するリソースが増えるのです。私たちのデザインはデザインシステムによってさらに高い品質となり、ユーザーに魅力的な体験を提供することが可能になります。ぜひAIも活用しながら、最小のリソースで最大の価値を発揮できるデザインシステムを育てましょう。

この全7回の連載が、デザインシステムを育てるきっかけや、デザインシステム運用の背中を押すような存在になれたなら幸いです。皆さんの組織、デザインシステム、デザインがより良いものになることを心から願っています。

---

連載「みんなで育てるデザインシステム」記事一覧

第1回：良いデザインシステムとは？その基本と構造をグッドパッチが解説
第2回：組織にデザインシステムが必要な理由とは──その効果や価値を徹底解説
第3回：デザインシステムのはじめかた──事前に理解しておきたいポイントや構築のための5つのサイクルとは
第4回：グッドパッチが実際に行っているステップ別に解説　デザインシステム構築前の準備フェーズですべきこと
第5回：4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは
第6回：適用範囲を広げ、より良いものにするために　デザインシステムを“拡張”するポイント
第7回：生成AIで変わる「デザインシステム」の未来（本記事）