AIと歩むデザインシステム構築【UXデザイン勉強会vol.7／イベントレポート】

デザイン負債
デザイン要件の切り出し
方針策定
採用技術
デザイン仕様
工数削減の試み
LLMの選定基準とプロンプト例
人間とLLMの分業
有効だったプロンプトの紹介
- プロンプト例1: 詳細なガイドラインを作る
- プロンプト例2: ダブルチェック
結果
振り返り
これからやりたいこと

登壇者はこの方

野口航己氏

コミューン株式会社テックリード/フロントエンドエンジニア

スタートアップ企業を中心にソフトウェアエンジニアとしてモーションデータ解析、決済システム、SNSマーケティングツールなど、多様なプロダクト開発に携わる。特にフロントエンド領域でリーダー職に従事。現在はコミューン株式会社にてフロントエンドアーキテクチャの刷新に取り組む。新しい技術への探究心を持ちながら、ユーザー体験の向上とチーム開発の効率化に注力する。

野口：本日は「デザインリブランディングの再構築に対してLLMを活用した」というお話をしたいと思います。

今回はエンジニア視点の話になるため、デザイナー視点だと異なる意見もあるかもしれませんが、デザインシステム構築でLLMの活用を検討されている方には参考になれば幸いです。

事例を紹介する前に、先にCommuneというプロダクトを簡単にご紹介させてください。Communeはノーコードでコミュニティプラットフォームを各製品や各ブランドに合わせて展開できるサービスで、その中でロイヤルカスタマーを育成し、各サービスの価値を高めることを目指したコミュニティサクセスプラットフォームです。

しかし、リリースから5年以上続いているプロダクトのため、デザインの統一性がないなど、様々な問題があり、入社してすぐにデザイナーから私へデザインリブランディングの要望がありました。そして、「とりあえず調査期間をください」ということで時間をいただきました。

デザイン負債

調査の結果、デザイン負債の問題が数多くあることがわかりました。まず、Atomic Designではデザイナーにとって良くても、エンジニアにとっては使いづらいという不適切な分割がありました。

また、担当者の退職などの理由からメンテナンスが不在となり、UIコンポーネントライブラリが使えない状態にもなっていました。明確なレイアウトルールも存在せず、各画面ごとに様々なメディアクエリを発行しており、統一性がない状態でした。

その他、フロントエンドの負債も多数ありました。

今回はUXの話なので深くは言及しませんが、長く続いているプロダクトではこのような問題が多いと思います。負債を見るとリブランディングは大変だという印象があり、やり方を考え直す必要があると感じました。

デザイン要件の切り出し

そこで、まず最初にデザイン要件を切り出しました。各ブランドごとのプラットフォームなので、複数のテナントごとにテーマを用意したいと考えました。

Design Requirements 1/3

Design Requirements 2/3

次にコンポーネントごとのカスタマイズ性を担保したいと考えました。もともとはMaterial UIをベースにしていましたが、カスタマイズがしづらく、機能要件ごとに細かい違いがあるため、カスタマイズしやすいようにしたいと思いました。

Design Requirements 3/3

また、各ブランドのユーザーに対する体験を向上させるため、リッチなアニメーションを作りたいという要件や、端末ごとに横展開できるデザインシステムを作りたいという要求も出てきました。

これらの要件を踏まえると「全リプレイスしたほうが早いのではないか」という結論に至りました。

方針策定

方針としては、以下に決定しました。

- UIライブラリを新規で作る

複数のプロダクトで利用し、オーナーシップを全員で持つ

- 並行して管理画面のリプレイス

プロダクトの特性上、コミュニティ管理者が意思決定者になるのでフィードバックが得やすい

採用技術

採用技術も従来使用していたReactを基に、要件に沿ったもので各コンポーネントを構築していくことに決定しました。

デザイン仕様

デザイン仕様については複数のテナントごとにテーマを用意し、Material Design 3をベースにカスタマイズを行い、リッチなアニメーションやマルチプラットフォーム対応はCSS Modulesで最新技術をキャッチアップしつつアシストしていくことに決めました

工数削減の試み

プロジェクトを進めるうちに、思ったよりもアサインできるメンバーが少ないことがわかり、工数削減の必要性が出てきました。リプレイスが進行している間もロードマップは止まらず、要求される機能は増え続けるため、なるべく早くリプレイスを完了させたいと考え、工数削減のために「LLMが使えるのでは？」と考え、使用を検討しました。

LLMの選定基準とプロンプト例

LLMの選定基準として、まず学習データが悪用されないことを条件としました。機密情報の漏洩リスクを負わないように、利用規約としてLLMの学習に利用されないものを選ぶ必要がありました。

また、プロンプトが独立した思考で終わるのではなく、ある程度コンテキストを共有できることも条件に加えました。例えば、今回の場合はMaterial Design 3のコンポーネントを作るというコンテキストを共有した上で開発できると、次の開発時にも別のコンポーネントで利用することができます。そういったことができるLLMを選定しようと考えました。