AIによって広がる素材に触れるデザイン

LovableやV0を触ったことがあるデザイナーは少なくないと思います。でも「思った通りにならない」「結局自分で直すことになる」と感じて、使わなくなった人も多いのではないでしょうか。

「試したけど、使えなかった」

プロンプトを書いて、出てきたものを見て、「これじゃない」アウトプットが生成される。何度か試して、結局 Figma でデザインを始める。「それっぽい UI」が出来ても、ちょっとした調整に疲れていつしか触らなくなったという経験は私だけではないはず。

想像していたデザインが生成できなかったからといって諦めるのはもったいないです。 デザインプロセスは混沌としています。最初に計画したものをそのまま作り上げるのではなく、見たものに応じて少しずつ調整していく過程です。 つまり、混沌としたプロセスをすべてAIに任せるのではなく、その中から一部を抜き出して作るというアプローチを取ることで、様々な可能性が見えてきます。

先に言語化を求めるAIツール

デザイナーがAIをまったく使っていないわけではありません。

ISCA TOKYOの調査によると、アイデア出しやブレストにAIを活用しているデザイナーは67.9%に達しています。一方で、Figma AI Report 2025では、UIレイアウトの探索にAIを使っているのは21%程度に留まっています。

「使っていない」のではなく「ブレストで止まっている」のが実態です。アイデア出し、テキストやダミー画像出力では活用できているのに、実際のデザインプロセスに組み込むところに壁があるようです。

新規案件や探索向けのアイデア向けであれば精度が随分上がりましたが、様々な制約を考慮したうえでの「意図通りのデザインアウトプット」は、現時点では少し早いかもしれません。

デザインは「作りながら考える」プロセスです。手を動かしながら「こっちのほうがいいかも」という発見が生まれます。ところが、現在のAIツールは「先に言語化」を要求します。作る前に、作りたいものを言葉で説明しなければならない。このミスマッチが、壁を作っている一因ではないかと思います。

ただ、だからといってこれらの AI に触れる価値がないわけではありません。期待の置き方を変えると、見えてくるものがあります。

デザインツールによる『縛り』

デザインツールで作業していても、「こっちのほうがいい」という新しい発見は、ツールがもつ機能の中に閉じこもることがあります。

レスポンシブwebデザインが当たり前になった時期にデザイナーが「可変するデザイン」を作るのに苦労していた時期がありました。当時は Figma や Sketch のような選択肢がなく、Photoshop を使っていました。しかし Photoshop ではレスポンシブ対応を試みても、ツール上で可変状態を表現する機能がありませんでした。デザイナーの能力や可能性がツールによって制限されてしまったひとつの例です。

それと似たようなことが今起こっていると思います。素材に触れながら、試しながら、「これだ」という感覚にたどり着く。その探索のプロセス自体は、Figmaの外でも実現できるようになってきました。

昔から「デザイナーはコードを学ぶべきだ／知るべきだ」という論調があります。今でも1, 2年に一度はSNSなどでその議論が持ち上がります。「Design in Browser（ブラウザ上でデザインする）」という考え方もあり、デザイナーは制作物の素材を理解した上で設計すべきだという主張が込められています。

一昔前であれば、コードを知ろうとするだけでも難しかったです。また、簡単なものを作るにしても、実装環境を整えるのが大変でしたし、そこから模索するための無難なインターフェースもありませんでした。コードも書けるデザインエンジニアだけが、コードに触れながらデザインするという状況が生まれたと思います。

そうした背景から、デザイナーはデザインツールに閉じこもり、そのツールで可能な表現だけを考えるようになったのではないでしょうか。そのことが、デザインと実装の連携をより複雑にしたとも感じます。Figmaではこう見えるが実装ではできない、あるいは実装ではこうだがFigmaではその見た目を継承できない、といったギャップと戦ってきた人もいると思います。

トランジションのイージング。インタラクションのタイミング。ホバー時の挙動、スクロールに連動したアニメーション、マイクロインタラクションの細部。本当は「こうしたい」というのがあっても実現できなったデザイナーもいると思います。それらは、コードが書ける人たちの『特権』となってしまったところがあります。

コードと接点をもちながらデザインすることの最大のメリットは素材に直接触れてデザインできることです。先述したようにデザインは「作りながら考える」プロセスです。実装された状態で見たり触ってはじめて気付くことがたくさんありますし、そこから新しいアイデアが生まれることがあります。

Webflow や STUDIO のようなノーコードツールでデザインしている人も似たような感覚があると思います。実装済みのページを実際に触りながら、「こうしたらどうか」「ああでもない」と試行錯誤して詰めていく感覚は、デザインツールではなかなか得られません。

素材に触れながら作ってみる

AI やノーコードツールは「コードを知るべき、書けるべき」といった議論から解放され、自分で素材を使ったデザインできる良い手段です。AIも「画面全部を作ってもらう」ではなく、「素材に触れながら模索するスケッチブック」のように扱うと、可能性が広がります。

例えば、コンポーネントのちょっとした動きでも、コンマ単位でどんな挙動をするのかをチェックしながら試したいときがあると思います。そこで私は、パラメータ付きのUIコンポーネントを実装し、実際に触りながらどれくらいの数値が適切かを考えられるツールを作りました。

従来であれば、こうしたツールを作るのは非常に面倒でしたし、エンジニアにわざわざ作ってもらうのは負担だと感じる人も多かったと思います。しかし、今ではデザイナー1人で30分ほどで作れてしまうようになりました。

こうしたツールが作れると分かれば、「このコンポーネントでマイクロインタラクションをどう作ればよいか」「触ったときの感触はどうか」といったことを自分で模索できるようになります。また、セオリーだけに頼るのではなく、自分の感覚を研ぎ澄ます機会にもなります。

AIを、自分の仕事の成果物を代わりに作ってもらうツールと考えるのではなく、自分の仕事の幅を広げるための道具として捉えてみるとどうでしょうか。自分だけの道具（スケッチブック）。素材に直接触れることでアイデアが広がりそうなコトは何でしょうか。最初は時間がかかると思いますが、きっと自分だけの道具が作れるはずです。ぜひ試してみてください。