デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
このレッスンでは、Cursorというツールを使って、AIに条件を伝えてUIのプロトタイプを作ります。最後には、作った画面をFigmaに持っていったり、URLにして人に触ってもらったりするところまで進みます。
最初に、なぜこのやり方をおすすめしているのかを話しておきます。
流れは4つです。
コードに慣れていない人ほど、エディターから入るのがやりやすいと思います。僕もエンジニアではありません。
僕たちは何のためにデザインをするのか。僕は、課題を解決して、ソフトウェアやサービスを使うユーザーをハッピーにするためだと考えています。それをAIと一緒にやった方が、確実にパワーアップすると思っています。
これまでデザイナーは、Figmaのような「実物ではないデータ」でデザインしてきました。それが今は、話す言葉でコードが書けるようになって、実際に触れるものを作るハードルがガーンと下がりました。
Figmaでも似たことはできます。でも、あくまで仮のものです。実際に動くもので触ってみると、ユーザーにとってどういう体験がいいのかの気づきがめちゃくちゃ増えます。いいアイデアに気づけたり、ダメなところに気づけたりして、デザインを広げたり深く潜ったりできるようになります。
もうひとつの理由は、コードで色々なものが作れるようになったことです。
Web業界のものは、全部コードで出来上がっています。これまではエンジニアでないと触れなかったその素材に、誰でも触れるようになりました。コードを扱えると、自由度もクオリティも上げやすくなります。
ちなみに僕は、全部コードでやる派ではありません。コードも使いつつ、Figmaのような自由なキャンバスも使って、アイデアを広げたり深めたりしながらクオリティを上げていく、というスタンスです。
Cursorは「エディター」です。エンジニアがコードを見やすく書くために使ってきたツールで、エンジニアにとってのFigmaのようなものだと思ってください。そこにAIが乗っているのがCursorです。
結論から言うと、どちらも使ってください。僕は両方使っています。
Claude Codeは、実はCursorの中から呼び出して一緒に使うこともできます。
それでもCursorから始めるのをすすめているのは、エディターが使えるようになると、コードへの抵抗がぐっと下がると思っているからです。コードに慣れていない人は、まずエディターを土台にした方がやりやすいと思います。Claude Codeは、別のレッスンで扱います。