このお盆休みは、いつか本気で手を付けねば…と思っていた、AIを使ったデザインの実験をしてみました。
取り組んだのは、自分で設計したUIをもとに、AIへ指示を出しながらHTML・CSS・JavaScriptで動くモックをつくること。
そして、しろごま工房のデザインシステムを整理し、そのルールを使って資料をつくることです。
AIに指示してつくる
実験のきっかけは、お世話になっているエンジニアの方から、「AIによって働き方が変わってきた」と聞いたことでした。
その後、デザイナーの交流会でも、AIを仕事に取り入れている人たちの話を聞きました。
周囲の変化に触れる中で、私もAIに適切な指示を出す力を身につけたいと思うようになりました。
私はフリーランスという働き方もあって、考えるところから制作まで一人で進めることが多くあります。
でも、AIと一緒に制作するには、頭の中にあるものを相手に伝えなければなりません。
今回はAIにも助けてもらいながら、実際に手を動かして試してみることにしました。
まずは、動くモックをつくってみる
最初に取り組んだのは、Claude Codeを使ったモック制作です。
自分で設計したシステムのUIをもとに実装してもらい、実際に画面を動かしながら、色や余白、コンポーネントなどのルールも整理していきました。
ここで思わぬ形で活きたのが、過去にCSSを自分で書けるように勉強していたことです。無駄なことなんてないんだ…！
とはいえ、最初はClaude Codeにどう指示すればいいのかも分かりません。
そこで、AIと一緒に指示文を考え、それをClaude Codeに渡すという手順で進めました。
何度か繰り返すうちに少しずつ慣れてきて、2日ほどで動くモックが完成しました。
そして作業をしている途中で、
「これ、開発の方と連携するときにも渡したほうが良いのでは…？」
と思いました。何を今さら、という感じですが…。
これまでも画面の意図や仕様は伝えていましたが、今回のように「なぜこの形なのか」「どういうルールで設計しているのか」まで整理したものを渡したことはありませんでした。
画面そのものだけでなく、その背景にある判断基準まで共有する、という視点が自分には足りていなかったのだと思います。
次に開発の方と連携する機会があったら、実際に試してみたいです。
「しろごま工房らしさ」をAIに伝える
次に挑戦したのは、しろごま工房のデザインシステムをつくり、それをもとにスライドを作成してもらうことです。
仕事では、ワークショップや提案書などの資料をつくる機会が多くあります。
もしデザインシステムをAIと共有できれば、「その会社らしさ」を反映したスライドを、もっと効率よくつくれるのではないかと考えました。
まずは、同じようにClaude Codeでデザインシステムをつくり、試してみました。
しかし、これがなかなか難しい。
フォントサイズや余白、装飾などが、どうにも思った通りに配置されません。
あれこれ試しているうちに、丸2日が経っていました。
そして3日目の朝。
「Claude Designなら作れるのでは？」
と思い立ち、調べて試してみることにしました。
まず、しろごま工房についての情報や、これまでにつくったデザイン関連の資料を渡して、デザインシステムを作成してもらいました。
すると、これまで苦戦していたのが嘘のように、かなりスムーズに形になりました。
そのデザインシステムをもとに資料を作成してみると、ついに思い通りの形に仕上げることができました。
Claude Design、お前だったのか。
感覚を、共有できる設計資料にする
今回の実験で特に大きかったのは、これまで感覚でやっていたことを、他者にも共有できる形に整理できたことでした。
普段なら「なんか違う」「こっちの方がしっくりくる」で済ませていた判断も、AIに伝えるためには、それでは通じません。
なぜ違うのか。
何を基準に判断しているのか。
一つずつ言葉やルールにしていくうちに、自分の中にあった判断基準が、少しずつ見えるようになりました。
一度ルールとして整理すれば、AIにも人にも共有できます。そして、同じ考え方を別の制作物にも応用できます。
AIへの指示を考えることは、自分自身のデザインプロセスを理解することでもあるのだと気づきました。
AIに任せたら、創作意欲の行き先が変わった
今回の実験で、もうひとつ面白かったことがあります。
AIに見た目をつくる作業の一部を任せたことで、自分の創作意欲の行き先が変わったことです。
私はもともと絵を描くことが好きでしたが、ここ数年はほとんど描いていませんでした。
創作意欲がなくなったというわけではなく、UIを設計したり、資料をつくったりすること自体が楽しくて、それで十分満たされていました。
でも、その一部をAIに任せてみると、
「もっと分かりやすくするために、キャラクターをつくってみようかな」
「ここは、もっとこう見せたら面白いかも」
と、これまでUIや資料制作に向いていた創作意欲が、別のところへ向かい始めました。
そして「絵を描きたいかも！」と思ったその勢いで、ずっと押し入れに眠っていたペンタブを引っ張り出してきました。
AIに制作の一部を任せたら、自分がつくらなくなるのではなく、別のものをつくりたくなったことは、自分でも予想していなかった変化でした。
外から変化を取り入れる
そもそも今回の実験は、エンジニアの方との会話や、デザイナーの交流会で聞いた話がきっかけでした。
フリーランスで一人で仕事をしていると、自分のやり方だけで仕事が完結してしまいます。
今回、外で聞いた話をきっかけに「じゃあ自分でもやってみよう」と試したことで、モックができただけでなく、自分のデザインの判断基準まで整理することになりました。
今回はかなり自己流で試したので、他の人がどうAIを使っているのかも、もっと知りたくなりました。
また人に会って話を聞いて、面白そうなものがあったら自分でも試してみようと思います。
次は、地域づくり協議会のデザインシステムでもつくろうかな笑
