Claude Design に調整用 UI を作らせる

Claude Design でデザインを詰めるとき、位置やアニメーションの微調整をそのつど言葉にするのが負担でした。成果物そのものを作らせるのをやめ、成果物を触るための UI を作らせるようにしたところ、この往復がほぼ消えました。

Figma と Claude Design の役割分担

デザイン制作では、Figma で骨格を作り、そこから切り出したパーツやメインビジュアルを Claude Design に渡して生成させています。Figma が静止した設計を受け持ち、Claude Design が動きの検証を受け持つ、という分担です。

Claude Design だけで作り込むのは、Figma と比べると細かい微調整が難しく、今のところ避けています。簡単なアニメーションを付ける、インタラクションを確かめる、Standalone HTML 形式でお客さまにプレビューしてもらう、といった用途では具合がよいです。デザインシステムを取り込ませてモックを起こすこともできます。

言葉で調整を伝えるコスト

この分担自体はうまく回っていますが、Claude Design 側の調整はプロンプトのやり取りになります。ここに負荷が残っていました。

まず、感覚的な調整を毎回言語化しないと動かせません。「もう少しぼかす」「動きをふわっとさせる」といった要求は、正確に伝えようとすると専門用語や数値に落とす必要があります。調べればわかることではあっても、そのコスト自体が積み重なります。

さらに、生成結果がイメージと違ったときに、伝え方が悪かったのか解釈がずれたのかを切り分けられません。原因がわからないまま言い直すループに入るのが一番こたえます。そこがストレスの正体でした。

調整はもともと、触りながら決めたほうが早い作業です。言葉を介する限り、この往復からは抜けられません。

成果物ではなく、調整用の UI を作らせる

そこで、狙ってやったわけではないのですが、調整する道具のほうを作らせてみました。プロンプトで頼んだのは次の 2 です。

ドラッグ & ドロップで UI 要素を移動できるようにしてほしい
アニメーションのパラメーターを UI 上で操作できるようにしてほしい

これがそのまま動くものとして返ってきました。生成された画面には移動モードのトグルとリセットが付いていて、モードをオンにすると要素を直接つかんで動かせます。Shift を押しながらの移動も、後から追加できました。

そもそも伝える必要がなくなるので、誤解釈が発生しません。

Claude Design 自体がレイヤー構造の概念を持っているので、背面にある要素をドラッグ&ドロップできない場合がありますが、レイヤーを一旦隠す・背面に移動させるといった普段Figmaなどで行なっている操作をすれば問題なかったです。

地味に効いたのが、見出しの 1 文字目のカギ括弧が右に落ちて見える、あの手の崩れです。プロンプトで直そうとすると説明が長くなるうえ、一度で意図どおりにならないことが多いのですが、UI 上なら少し左にずらすだけで終わります。

変わったこと

プロンプトをまったく使わなくなったわけではありませんが、手でできることが手で完結するようになった分、作業も判断も速くなりました。

試行回数が増えたのも大きいです。言語化のコストがかからないので、気になったところをその場で動かして確かめられます。AI と揉めることがなくなった、というのが体感に一番近い言い方です。

作らせるときのプロンプトは凝らなくてよかった

この UI を作らせるにあたって、ペルソナ設定のような作法は使っていません。Figma のデータを渡して「こういうことができるようにして」と書いただけです。画像生成では前提や指示の書き方を整える必要を感じますが、Claude Design はそこまでしなくても意図を汲んでくれる感覚があります。

一方で、パラメーターを載せていくほど画面は重くなるはずなので、どこまで Figma に近づけるかは別の問題として残ります。全部を再現しにいくより、自分のワークフローに最適化した道具をその場で作る、という方向が向いていそうです。

なお、一発ですんなり出たわけではなく、ここに至るまでにはそれなりに試行錯誤しました。

まとめ

感覚的な調整を言語化するコストは、プロンプトの書き方を工夫しても残る
調整用の UI を作らせると、そもそも伝えなくてよくなるので誤解釈が起きない
画面が重くなる可能性はあるので、必要な操作だけを載せるのが現実的

デザインの工程を AI 前提で組み替える取り組みは AIDD デザインとしてご提供しています。デザインシステムを起点に開発工数を短縮したデザインシステム導入の事例もあわせてご覧ください。お気軽にご相談ください。