生成 AI 時代のデザインシステム
AI がデザイン業界に新たな時代をもたらしています。ChatGPT や GPT-4 Vision などの生成 AI が、テキストやスケッチから HTML や CSS コードを生成することで、デザイナーやエンジニアの作業効率を大幅に向上させています。デザインシステムに対しても、生成 AI はどのような変化を与えてくれるのでしょうか。
エクサウィザーズでは 2 年ほど前からデザインシステムの開発をしています。私自身は 10 年以上デザインシステムや UI ライブラリの開発に携わっていまして、UI ライブラリの Bootstrap の開発メンバーとして取り組んでいたこともありました。仕事の多くの期間をデザインシステムと共に歩んできたのですが、AI を専門とするエクサウィザーズに相応しいデザインシステム、そしてこれからの AI 時代に適したデザインシステムのビジョンが見えてきましたので、今回はその背景や理由についてご紹介させていただきます。
※あくまでも私個人の考えであり、エクサウィザーズとしての見解ではないことをお伝えさせてください。また、Web デザインを対象としています。
Bootstrap の栄枯衰退
いきなり強烈な見出しですので、多くの方の意見をいただくことになるかもしれませんが、Bootstrap の開発をしていた私の意見として書かせてください。
Bootstrap は 2010 年代の Web 開発を大きく支えてくれました。Bootstrap の使い方に慣れたデザイナーやエンジニアにとっては、多様なプロジェクトで利用でき、再利用性が高く、コミュニケーションを円滑にするための共通のフレームワークとなりました。
数え切れないほどのサードパーティー製のライブラリやサンプルが作られ、開発の効率性を向上させることができました。Bootstrap が巨大なエコシステムを築いた理由の 1 つは、CSS クラス名という共通言語があったからです。公式に提供されていない UI コンポーネントや画面テンプレートなども、Bootstrap の CSS クラス名を使用すれば容易に追加することができました。
しかし Bootstrap の人気は以前ほどではなくなっており、実際、Bootstrap のウェブサイトに書かれていた「The most popular HTML, CSS, and JavaScript framework …」というリード文も変更されています。Bootstrap が使われなくなってきた理由はさまざまありますが、最も大きな理由は利用者側が作りたいデザインシステムに適合しづらくなってきたからだと考えています。
ヘッドレス UI ライブラリの台頭
なぜ Bootstrap はデザインシステムと合わないのか？
デザインシステムという考え方自体は 2010 年代前半から普及し始め、Sketch や AdobeXD、Figma などの UI 設計ツールの登場によってますます広まり、多くの企業やプロジェクトでデザインシステムが構築されました。
それぞれのデザインシステムは会社のブランドを表現したり、プロダクトの使いやすさを向上させるために独自の設計が必要です。そのため、Bootstrap や Material UI（マテリアルデザインの UI コンポーネントライブラリ）などの UI フレームワークを実装に使うことに限界が生じてきました。Bootstrap っぽさやマテリアルデザインっぽさがどうしても出てしまうのです。
また、デザイナーが UI デザインする際にも、Bootstrap や Material UI に沿った設計が求められ、デザインの自由度が制約されることもありました。しかし、Figma などの UI デザインツールの普及もあり、UI フレームワークを前提としたデザイン開発は受け入れられにくくなっていきました。
そのような中で 2020 年前後に登場し始めたのが、スタイルが一切適用されていないヘッドレス系の UI ライブラリや Tailwind CSS です。自由なスタイルを表現することができるようになりました。
こうして、Bootstrap や Material UI のようなスタイルの制約がある UI フレームワークは徐々に役割を終えつつあり、世の中は Tailwind や ヘッドレス系の UI ライブラリの活用に移り始めました。
Material UI はこのような流れを受けて、MUI として体系化してヘッドレスな UI ライブラリも合わせて提供しています。
shadcn/ui の登場
そんな中、今年の2023年1月に shadcn/ui がリリースされました。
shadcn/ui は、ヘッドレス UI ライブラリの Radix UI と Tailwind を組み合わせたコンポーネント集です。shadcn/ui は npm を介してインストールして使用するような UI ライブラリではありません。コンポーネントスニペット集として公開されているため、コンポーネントのコードを自分のプロジェクトに貼り付けて使用します。
shadcn/ui は GitHub に公開されてわずか 3 ヶ月で 1 万スターを超えるほどの人気で、すでに多くのプロジェクトで活用されています。これには理由があります。私も初めてshadcn/ui の存在を知ったときにそのコンセプトに衝撃を受けました。
利用者に主導権がある
従来の UI ライブラリは利用者であるデザイナーやエンジニアがカスタマイズするには制約があり、例えばテーマ設定などの決まった枠の中で行うような作りになっています。フルカスタマイズしようとすると、元のコードをコピーして改変することになります。しかし、多くの UI ライブラリは共通の処理やユーティリティなど複数のファイルに依存して作られているため、コードをコピーするのも単純ではありません。UI ライブラリが提供していない機能や要素を追加するのも厳しく、UI ライブラリのバージョンアップに追従することも負担でした。
shadcn/ui の場合、コードスニペットをコピーするだけで使用できるように作られているため、UI を簡単にプロジェクトの要件に合わせてカスタマイズすることができます。
豊富なコンポーネント
スタイルを自由にできないという利用者の課題を解決する他の手段として、スタイルが一切ついていないヘッドレス UI ライブラリを使う方法もあります。複雑なインタラクションやアクセシビリティの実装はライブラリに任せて、サービスやプロダクトに合ったスタイルを自由に適用することができます。
しかし、JavaScript による制御が要らないコンポーネント（例えば単純なボタンやバッジなど）はヘッドレス系の UI ライブラリは提供していないので、自分たちで用意する必要がありました。
shadcn/ui には JavaScript が不要なコンポーネントから日付ピッカーのような高度なコンポーネントまで幅広く用意されているため、Web でよく使われる UI であれば shadcn/ui だけで実現できます。
生成 AI がフロントエンドを実装する
そして現在、世界は生成 AI 時代に突入しています。ChatGPT が世の中に広く知れ渡るようになった頃、テキストや絵で指示するだけで Web ページの HTML を生成してくれるという使い方を目にしたことがある方も多いと思います。その頃は仕事で十分に活用するにはまだまだ難しいという印象でしたが、今では色んなコード生成ツールが登場しています。
v0 は Web ホスティングサービスや Next.js の開発をしている Vercel が作った生成 UI システムです。shadcn/ui が使用され、Tailwind ベースの React コードを生成してくれます。
draw-a-ui やそのフォークの make real は、 tldraw で UI スケッチを描くと GPT-4 Vision が Tailwind ベースの HTML コードを生成してくれます。
Tailwind ベースの UI コードを出力する生成 AI はたくさんありますが、Tailwind が選ばれる理由はそれがすでに多くのシェアを持っていることだけでなく、AI が CSS コードを出力する必要がないからだと考えます。TSX や HTML コードだけを出力すれば良いので、そのため、ML モデルの開発や調整にかかる負荷が軽減されます。
ただ、Tailwind のクラス名がついたコードが生成されてもそのままでは活用できません。実際の開発現場では再利用可能なコンポーネントが必要です。エンジニアは既存のコンポーネントを使ったコードの生成を期待しているのです。
エンジニアが期待するような UI コンポーネントが使用されたコードを出力するには、当然その UI コンポーネントのことを AI が知っている必要があります。利用者の要求に応じて自由なスタイルが表現でき、幅広い UI が用意されている shadcn/ui のコンセプトが生成 UI 系の AI が求めるものとフィットしたため、shadnc/ui を用いた生成ツールが多く登場しているのです。
世の中は shadcn/ui のような、かつての Bootstrap の CSS クラス名のような世界を巻き込む共通言語を探していたのです。
エクサウィザーズらしいデザインシステム
過去に何度かアイコンに関する取り組みをご紹介してきましたが、UI ライブラリについてはあまり手をつけられておらず、進捗を上げることができていませんでした。エクサウィザーズらしい UI ライブラリとはどのようなものか、ノーコードやローコード、そして AI とどう向き合って行くべきかのビジョンが私には思い描けてない状態でした。
そんな中での shadcn/ui の登場に私の頭は雷に撃たれ、一つの期待を感じました。
「shadcn/ui は Bootstrap の次の時代に世界中を巻き込むエコシステムになる」
生成 AI を使って自社のデザインシステムに基づいたフロントエンドのコードを出力できるようにするには、まだ一定のハードルがあると思います。Microsoft Copilot Studio や GitHub Copilot、Figma の将来の AI 機能がその助けをしてくれる可能性は十分にありそうです。
ですが、自社の UI コンポーネントが世界的な共通のフレームワークに基づいていれば、自社で AI チャットボットや ML モデルを専用に開発する必要もなく、サードパーティ製の生成 AI をフル活用できます。React だけでなく、Vue や Svelte などの様々なフレームワークへの対応についても、サードパーティ方が開発したものを使用できます。
チャットや絵から動くものが出力できるようになれば、お客様とのプロジェクトや自社プロダクトの UI 開発などあらゆる場面で、デザインや実装ができない人でも組織全体で AI を活用しながら新しい提案や開発ができるようになります。まさに生成 AI 時代のデザインシステムの姿ではないでしょうか。
もちろん、shadcn/ui ではなく別のコンポーネントセットが流行る可能性は十分にありますが、様々なところで shadcn/ui が使用されている様子を見てある程度の確信を持っています。少なくとも 2020 年代は Tailwind ベースで続くと考えています。
また、shadcn/ui も完全に自由なデザインを表現できるわけではありません。自社のデザインシステムに基づいてコードまで出力してくれるような AI が理想なのは間違いありません。弊社の場合はデザインシステムはお客様のシステム開発にも使用されることもあり、サードパーティ製の生成 AI を活用できることが大きなメリットだと考えています。
こうして、私たちは新たに shadcn/ui ベースで開発する案について、エクサウィザーズらしい UI ライブラリの形にするための方向性や進め方のディスカッションを始めました。
何を利用者（デザイナーやエンジニア）に提供するのか
開発や保守のリソースは確保できそうか
既存のデザインシステムや Figma ファイルへの影響
具体的な進め方やスケジュール
現在開発を進めていますが、年度内の社内リリースやその先の OSS としての公開など、まとまった進捗がありましたらご紹介させていただきます。
おわりに
コンサルと自社プロダクトの両輪の事業を持つ会社として、AI の会社として、そしてあらゆる社会の課題解決を目指す会社として、どのようなデザインシステムを構築するべきなのかについての考えを書かせていただきました。
まとめ
スタイルが定義されている UI ライブラリは衰退し、ヘッドレス系の UI ライブラリの利用に移り変わっている
AI 時代に突入し、フロントエンドのコードを出力する生成 AI が増加
生成 AI と Tailwind CSS との親和性は非常に高いが、実務で使用するには UI コンポーネントが必要
shadcn/ui はそれらを解決し、生成 AI 時代の巨大なエコシステムを築くと信じている
最後になりますが、エクサウィザーズでは一緒に働く人を募集しています。興味のある方はぜひ以下のリンクから採用情報をご覧ください！
筆者: 株式会社エクサウィザーズ プロダクトデザイングループ 吉田