こんにちは、ナッシーです
デザインの仕事をしていると、パーツの試作で地味に時間を取られることがよくあります。
ボタンの光り方、背景のグラデーション、質感のあるアイコン——ちょっとした見た目の調整なのに、色を変えて、光の位置を変えて、また色を変えて……という細かい手作業の繰り返しになりがちです。
今回は、そんな「地味な試作作業」をAIにどこまで任せられるのか、実際に試してみた話です。作ったのは、球体（オーブ）のビジュアルを作れる「オーブジェネレーター」というツールでした。
やってみた
使ったのはClaudeのアーティファクト機能です。コードは一切書いていません。会話で「こんな見た目にしたい」を伝えながら、Claudeに実装してもらいました。
やりたいことは、色・光の向き・ツヤの強さなどをスライダーで動かすと、その場でプレビューが変わる調整ツールです。実際にClaudeへ投げた指示（の体裁を整えたもの）はこちらです。
オーブジェネレーター用の指示文
- 【作りたいもの】球体（オーブ）のビジュアルを調整できるジェネレーター
- 【本体（拡散光）】明るい色／中間色／暗い色の3色でグラデーション。光の向き／光の高さ／やわらかさをスライダーで調整
- 【縁（リム）の色】縁の色／濃さ／広がりを調整
- 【ツヤ・ハイライト】光の色／左右位置／上下位置／大きさを調整
- 【レイアウト】左に大きくプレビュー、右にスライダーを一覧配置
- 【書き出し】コードをコピー／CSSのみコピー
伝えたのはそのイメージだけで、実際の実装（スライダーの配置、プレビューとの連動、値の反映のさせ方）は全部お任せしました。
え、これで動くの…!
結果、一発で動くものができてしまいました。
正直拍子抜けするくらいのスピード感でした。
発見
予想以上にすぐできてしまい、作ってすぐは満足していました。しかし少し考えると、「これを実際にWebサイトで使うとなると、Figma上でのデザインでの使用やコーダーさんへの共有を考えると、コードだけではなくSVGという選択肢もあるといいかもしれない」と気づきました。
試作の見た目を決めるだけなら今の形で十分でも、実務で使うことを考えると、書き出し方まで含めて用意しておく必要があります。
そこで、「SVGとして書き出せる機能も追加してほしい」と指示を出したところ、それも追加で対応してもらえました。見た目を作る部分は最初から一発でできたのに対して、「実際にどう使うか」という運用面については、自分で気づいて指示を出す必要があったという感じです。
活用の幅を広げよう
見た目のパーツを試作する部分は、想像していたよりもずっとAIに任せられるという実感がありました。一方で、「それをどう使うか」「誰に渡すか」といった運用の視点は、自分で気づいて指示を出さないと出てこない部分でした。
今回作ったのは球体（オーブ）でしたが、指示の出し方を工夫すれば、全然違う形や模様のジェネレーターも同じように作れるのか気になったので、同じスレッドで市松模様とドットパターンも試しに指示してみました。
市松ジェネレーター用の指示文
- 【作りたいもの】さっきのオーブジェネレーターと同じ操作感の、市松模様ジェネレーター
- 【調整項目】2色の配色を切り替え／マスのサイズ／縦横のマス数
- 【書き出し】既存のコピー機能はそのまま維持
ドットジェネレーター用の指示文
- 【作りたいもの】同じ構成の、ドット柄ジェネレーター
- 【調整項目】ドットの大きさ／間隔（余白）／色／背景色。配置パターン（正方形グリッド／千鳥配置）を切り替え
- 【書き出し】既存のコピー機能はそのまま維持
やっぱり色んな形でも作れた…!
結果、どちらも指示を出してすぐに形になりました。球体のときと同じように、伝えたイメージをそのまま形にしてもらえる感触は、モチーフを変えても変わらないようです。
次は、アイコンのバリエーション出しや、ボタンの状態（通常・ホバー・非活性）の試作あたりにも使えそうな気がしているので、また手が空いたときに試してみたいところです。
デザインパーツの試作にAIを使う場合、「作る部分」は思い切って任せてみて、「使い方の設計」は自分で見張っておくくらいの線引きが今のところちょうどよさそうだと感じています。
