AIxUIスタイリング入門
0%
1
AIでUI作成してデザインスキルは上がるの？2
クエスト2: AIにUIスタイリングを生成させる3
クエスト3: スタイリングシステムをつくり、まなぶAIxUIスタイリング入門
AIに「いい感じのUIにして」と頼めば、それなりの見た目が返ってくる。スタイリングはもうAI任せでいいんじゃないか――最近そう感じている人、多いと思います。
それを確かめたくて、AIでスタイリングをどこまで作れるのか試してみました。同じ出張申請のSaaS画面を、5パターン。その中でちょっとゾッとする結果が出たので、今日はそこから話を始めさせてください。
何も考えずに「作って」と頼んだものと、ちゃんと準備して頼んだもの。同じAIなのに、仕上がりがまるで違いました。
丸投げしたほうは「うーん、惜しい」。一方、参考を分解してから頼んだほうは、一発でそれらしいSaaSの画面に。1ミリも手直ししていないのに、余白も密度も文字サイズも、学び始めて1年目の人より整っている。正直すごいです✨
（実際の5パターンは動画で並べて見せています。違いは見たほうが早いです）
ただ、これで「もうUIの勉強いらないじゃん」と思うのは早い。
よく見ると惜しい部分も残っていて、たとえば新規作成のボタンが、本来とは違う場所にちょこんと置かれている。見た目は綺麗でも、目的から考えると置き場所が違うんですよね。AIは「それっぽく並べる」のは得意でも、「この操作はここにあるべき」という判断までは、まだ拾いきれない。
そして一番大事なのは、この差を生んだのがAIの性能じゃないということ。頼んだ側が、スタイリングを分解して指示できていたかどうか。 ただそれだけでした。
なぜ分解して頼んだほうがうまくいったのか。
ざっくり言うと、いい見た目はセンスやひらめきで出てくるものではなく、テイスト → ルール → 部品 → 画面、という順番で積み上がっていくものだからです。この順番でAIに頼むと、土台から方向がそろうので、画面全体も自然とまとまる。
逆に「この雰囲気で」「これを真似して」だけだと、たまたま当たることもあるけど外すこともある。要するにガチャです🎰 しかも、なぜそうなったのかが分からない。
分解する側は、途中が全部見えている。だからAIと議論できるし、気に入らなければどこを直せばいいかも分かる。同じ「AIにUIを作らせる」でも、真似と分解はまったく別のスキルなんです。
（この「順番に積み上げる」具体的なやり方は、動画で実際に手を動かしながら見せています）
正直な答えは、半分YES、半分NO。
土台作りはAIにかなり任せられるようになりました。昔は1年、2年かけて身につけた部分です。これはシンプルに嬉しい😊
でも、ここに落とし穴があります。土台を理解していないまま丸投げすると、出てきたものが良いのか悪いのかも判断できない。直すことも、狙って同じものを出すこともできません。AIに任せられることと、自分が理解しなくていいことは、イコールじゃないんです。
だから答えは、はっきりNO。むしろ学ぶべきことはちゃんと残っています。ただ、学ぶ中身が変わった。それを2つに絞って話します。
ひとつ目は、さっき出てきた分解の構造そのものです。
テイスト → ルール → トークン → コンポーネント → 画面。この順番で見た目が決まっていく、という土台の仕組み。これはAIに作らせるとしても、自分が分かっていないといけません。
なぜなら、理解していないと「直せない」からです。あの新規作成ボタンの位置に違和感を持っても、それが画面の組み方の問題なのか、部品の問題なのか、当たりがつけられない。どのレイヤーをいじればどう変わるか――それが見えてはじめて、AIをコントロールできます。
逆に言えば、ここさえ分かっていれば、土台作りそのものはAIに任せていい。手を動かして覚える時間は減って、「なぜこの順番なのか」を理解することに集中できます。昔より、むしろ学びやすくなったところです。
ふたつ目は、その土台を一歩進めて、ルールとして整理してコントロールしていくことです。
一発でいいUIを出す、で終わりではありません。仕事で何枚も画面を作るなら、毎回ガチャを引くわけにはいかない🎰 そこで、スタイリングを再現できるルールにまとめて、AIと一緒に大きな仕組みとして回していく。同じ品質を、狙って何度でも出せる状態にする。
これは、土台の構造を理解しているからこそ踏み込める領域です。①が分かっていない人には、そもそもルール化のしようがない。①があって②がある、という順番ですね。
そして、この②までやれる人は強い。土台はAIに任せれば誰がやっても同じものになるけれど、それをシステムとして設計してコントロールするところは、まだ人の仕事だからです。
この次からは早速、用意されたプロンプトを理解して用いながら、何もデザイン的な意図の入ってないUIと、デザイン意図が入って作成されたUIを生成するところから始めましょう。
その後に、生成されたスタイリングされたUIを使って、ルールを扱う1歩に進みます。