AIによるUI生成の検証は、すでに多くのプロダクトデザイン組織が取り組んでいるところかと思います。
カナリーでは、2025年ごろから「最小のデザイン組織」を目指して、プロダクトデザインのAIワークフロー化を試みてきました。
今回はその中でも、UIのパターン出しにうまく役立っている「デザイナー人格のskill化」の取り組みについてまとめてみます。
前提として、カナリーではすでに「PRDを読み取り、UIを生成する」までの一連のフローをチームとして運用可能な状態にできています。(以前はFigma Makeでの検証をしていましたが、現在はそこからClaude Codeを使ったフローにアップデートしています。)
今回問題視したのは、そのフロー構築の初期段階で起こっていた「AIが出力するUIがありがちなものになってしまう」ということでした。
AIによるUI生成を試みた時に、最初に問題に感じるのは「既存のプロダクトトンマナと合っていない」ということだと思います。
カナリーでは、この解消のためにデザイン哲学やデザインガイドラインなどをskillとして読み込ませ、ある程度「カナリーっぽいUI」が出力できる状態に持っていけました。
ただ、そこで次に問題となったのが「どの画面も同じような、ありきたりなUIが出力される」ということです。
例えば、「退会手続きの確認モーダルをつくりたい」などとプロンプトを打ち込むと、デザインシステムだけを介したLLMからは以下のようなUIが出力されます。ただ、これはデザイナーの視点から見ると「機能的には正しいけど、他プロダクトとの違いがないUI」に見えていました。
プロダクトの使い心地は細部に宿ります。例えば、この場合だと、「退会時に失ってしまう内容説明をする」「退会後の安心感を作る(スケジュール感や最終請求に関して)」のようにもう一工夫を加えることで、カナリーならではの良さを感じてもらえるUIになるはずです。
このような、平均的なアウトプットが積み上がってしまうと、差分のないありがちなプロダクトになってしまいます。そのため、改めてワークフローを見直すことに決めました。
ここで、普段デザイナーが行っているUIの設計プロセスと、当時のLLMの生成プロセスを比較してみました。
カナリーでのUI生成ワークフローはいつも、社内のリードデザイナーがどのように考えているのか？を言語化して、それをLLMに落とし込むように設計をします。
「リードデザイナーがつくる時も、LLMで生成するときも、同じ思考・設計のプロセスを辿るようにする」というスタンスが記載
今回の場合は、当時のLLMの生成プロセスに「意図的に違うパターンを発散させる」という思考が抜けていることが分かってきます。
カナリーのデザイナーはいつも、仕様を満たすことやトンマナを揃えることに加えて、プロダクト全体の体験を考えて痒いところに手が届くような一工夫を加えています。一方で、LLMのデザインではそこが抜けており、合理的ではあるが必然性が少ないものが出力されているように感じていました。
「その発散的な思考をLLMにも取らせることができないか？」と考え始めました。
まず最初に、LLMに読み込ませるために、カナリーでプロダクトデザインをリードしている寺本さんの思考を洗いざらい言語化することからはじめました。
デザインのプロセスは、デザイナーの頭の中だけにあって言語化されきっているわけではないことも多いので、リバースエンジニアリング的に意図や思考方法を汲み取っていく必要があります。
そのために、AIワークフロー構築に責任を持っている平場から「このUIはどう考えてつくっていたか？」と寺本さんに問いかけ、一緒に棚卸しをしていく時間を何度か取りました。
この中で、寺本さんはいくつかのユニークな発想パターンを持っていることが分かってきます。これらをまずは、デザイン組織として共有するために3つの思考方法として資料化しました。
次に、汲み取った寺本さんの3つのデザインの思考方法をLLMでも再現可能にするために「デザイナー人格」としてskill化し、LLMに読み込ませていきました。
前段の資料のままだと、LLMは読み込みきれないので、もう少し具体的にプロンプトを記載するようにしています。
例えば「Detour (遠回り) 」というデザイナー人格だと以下のようなskillとしてまとめています。
「Detour」というskillは、発散的に思考するために、あえて前提となる要件や仕様を意図的に考慮から除いてUIを発散し、その発散したアイデアの中からもともとの設計に戻していくような寺本さんの考え方を参考にしたものです。
このように、いくつかの考え方を読み取って、LLMがその思考フローを取れるようにドキュメンテーションしていくようなアプローチを続けました。
次に「デザイナー人格」のskillをUI生成ワークフローに反映していきます。
Beforeでは、PRDをもとに情報設計を行い、デザインシステムを介してUIに収束させるフローを取っていました。
Afterのフローでは、情報設計後に特定の「デザイナー人格skill」を介してパターンの発散をしてから、デザインシステムで収束させるように変更しています。
より具体的なフローは以下のように設計しています。
情報設計が決まった後に、いくつかの「デザイナー人格」を選び、UIパターンの発散を行います。
これらのパターンを、デザインシステムのフィルターに通して、あまりに突飛なアウトプットは省きつつ、「通常パターン」「人格を介した一工夫があるパターン」などを出力していくイメージです。
「デザイナー人格」を介することで、出てくるアウトプットの違いは以下のように生まれます。
Beforeでは機能が満たされているだけなのに対し、デザイナー人格を介したAfterでは、合理的な要件に加えたデザインの一工夫が生まれています。
ちなみに、「デザイナー人格」を複数用意しているのは、毎回同じ思考をさせてしまうとそれはそれで平均的なUIになってしまうからです。
リードデザイナーである寺本さんは、毎回いろいろな思考方法でアウトプットをジャンプさせているので、同じようにLLMも発散における思考パターンは毎回変えていける方が良いのではないかと考えています。
デザイナー人格を介した発散の仕組みがワークしそうなことが分かったので、少しずつデザイナー人格の拡充をしてみています。
例えば、人格の１つに「Persona」というものがあります。これは、UI設計を「複数のペルソナ視点」で再解釈し、UI案をN個並列生成する発散モードです。
少し設計意図を解説すると、使うペルソナのコンテキストを複数用意、ペルソナごとにエージェントを並列起動し、各エージェントが「そのペルソナにとって何が重要か」を再評価してUI構造を組み直す仕組みとなっています。
他にも、マイケル・ジャクソンの曲制作の方法にインスパイアを受けたモードとして「Thriller」という人格もつくってみています。
これらのデザイナー人格は、半分実験的な遊びの要素もありますが、もう一つの意図には「クリエイティブ生成」のための準備という側面があります。
カナリーには、プロダクトデザインのスペシャリストがいますが、クリエイティブのスペシャリストは不在です。
これからデザイン組織としてブランド設計、大規模なクリエイティブ施策などに踏み出していくにあたり、使えそうなデザイナー人格を用意しておこうと思って、アーティストの思考をデザイナー人格として変換してみています。(これがうまくいくかは、また別の事例でまとめます。)
結果として、このフローを通して、デザイナーが関わった時のように一工夫のあるUIが生成される確率が高まりました。
何がユーザーにとってベストなパターンなのかはまた別の観点が必要となるため、そこには人の目を介していますが、少なくとも「良さそうなUIパターンを発散する」という部分は、デザイナーから手離れしてLLMに任せられるようになっています。
カナリーのデザイン組織では、UI生成だけでなく、情報設計やレビュー、もっというと全社のブランド設計やコーポレートキャラクターの設計など、あらゆるところでLLMを活用しています。
私たちの考え方としては、「LLMをリードデザイナーの1人に仕上げていく」という意識を持ってワークフローの構築に取り組んでいます。
もともと、カナリーではシニアなデザイナーがなかなか採用できなかった背景があります。そこでAIが登場し、考え方を切り替えて「今の時代だからこそできる最小のデザイン組織の体制を、AIでつくっていく」という方針へと舵をきりました。
なので、私たちにとってLLMを育てることは、シニアデザイナー採用と同じくらい重要なことです。 LLMがシニアなプロダクトデザイナーと同じくらいワークするようになって、初めて価値があると捉えています。
なので「それっぽいUIができた」ということだけでは不十分で、リードデザイナーがつくるアウトプットと遜色ないものが毎回できるようになって、初めて「実用可能」だと判断するようにしています。
今回のように、AIのアウトプットに対して1人のデザイナーに向き合うようにシビアに評価を行い、不足しているところがあればリードデザイナーの思考をインストールしていくことを繰り返して、LLMを1人前のシニアデザイナーへと育てていくのがカナリーのAIワークフロー構築です。
今回紹介したのは一部なので、また続けて現在ワークしているフローについての事例を公開します。少しでも不確実な時代を前に進められるようにできればと思うので、私たちの検証をぜひ参考にしてもらえると嬉しいです。