AIでUIスタイリング入門
0%
1
AIでUI作成してデザインスキルは上がるのか？2
AIでUIスタイリングを生成する3
AIでスタイリングを分析する4
Figma MCPでデザインシステムの土台を作るAIでUIスタイリング入門
AIに「いい感じのUIにして」と頼めば、それなりの見た目が返ってくる。スタイリングはもうAI任せでいいんじゃないか――そう感じる人も多いかもしれません。
そう思って実験的にAIに作らせた2つのSaaS画面です。
同じ情報を扱う出張申請の画面なのに、全然違います
情報量はほぼ同じ。なのにスタイリングは別物に見える。
これがAIに何の指示もしないで作らせたパターンと、ちゃんと指示を渡したパターンの違いです。
このトレーニングコースではAIで良いUI生成をするだけではなく、それを通して自分自身のデザインスキルを上げる方法、AI時代にどういう視点が必要なのかを実践から習得するコースになっています。
それではまず「何がこの2つで違う」のか、「スタイル面のスキルアップは必要あるのか」を解き明かしていきましょう。
AIにいいスタイリングをさせるためには、UIを構成している 要素＝変数 を扱える必要があります。
先ほどの2つの違いも、生成にこの分解をしているかどうかの差でした。その2つは
です。
UIの要素はこんな階層で成り立っています。
AIを使うにせよ、使わないにせよ、これらを理解して見た目を作ることで狙った雰囲気を作り出せる確率が上がります。
さらに闇雲になんとなく見た目を作るのではなく、しっかりと土台から詰めていくデザイン制作のフローが存在します。
参考のデザインから進め、そこから分析して作ることで、狙った雰囲気を作る可能性が上がりますし、何より参考にしたデザインから”スタイリング”を学ぶことができます。
※参考レッスン：
正直な答えは、半分YES、半分NO。です
土台作りはAIにかなり任せられるようになりましたが、AIが出すものは平均値です。”どういう方向性（コンセプト）”で、”どう具体的に表現するか”をディレクションしたり、微調整して狙ったスタイルを作るにはデザインスキルが必要だと感じます。
ただ、初心者が1年〜2年かけて身につけるスタイリング部分はAIでできる範囲が存在しているようです。これはシンプルに嬉しい。
でもそれでOK、ではなく、その出力結果から学習しつつ、自分のスタイリング基礎力も高めながら、同時にディレクション力(=AIへの指示)も高めていく勝負になっています。
要素の視点があるかないかで、AIを使う体験はまったく別物になります。
UIを見たときに「ここの色が雰囲気を作ってる」「このコンポーネントがリズムを決めてる」と分解できます。
だからAIに対しても「いい感じにして」じゃなく、「ここの角丸をこう調整して、コントラストはこっち寄りに」と具体的に指示できる。
AIが返してきたものも要素ごとに評価できるから、次にどこを動かせばいいかが見える。作るたびに自分の引き出しも増えていきます📈
UIを見ても「なんとなくこうかな」しか出てこない。AIに渡す言葉もふわっとしてるから、返ってくるUIもふわっとしたまま。
「なんかうまくいかねーな、まあこれでいいか」で終わってしまって、何回作っても自分のスキルは上がらないし、トークン消費は激しいまま時間も消費するかもしれないですよね。
同じAIを使っていても、ここで決定的に差が広がります。
AIで楽になった分、空いた時間で自分の分析力を上げにいけるかどうか。これが3年後・5年後のデザイン力を作っていきます。
そのためにこのシリーズでは、3つの実践をやっていきます。
このトレーニングコースの各クエストの目的や方針になります。
次から、「スキル1：AIで良いUI生成でデザインディレクションの観点を知る 」をAIでの良い生成と悪い生成を比較して進めていきましょう！
要素の分解、トークンの定義、コンポーネントの組み立て、AIへの指示の渡し方、それぞれを一つずつ手を動かしながら学んでいく流れです。