デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
フォルダを開いたら、さっそくAIにUIを作ってもらいます。ポイントは、何を作るかと、その条件をはっきり伝えることです。
画面の左か右に、チャット欄があります（「New Agent」のように表示されていると思います）。ChatGPTと会話するのと同じように、ここに作ってほしいものや直してほしいことを書いていきます。
最初なので、普通にできそうなものを作ってもらいましょう。僕は、何を作るか（新規アカウント作成の画面）を書いてから、条件を足していきました。
UIのプロトタイプを作成して欲しいです。プロトタイプは新規アカウント作成の画面です。
条件：デスクトップのときのデザインにしてほしい。HTML/CSSで作って。
アカウント作成に必要な入力の内容は、メールアドレスとパスワードと登録ボタンと、利用規約の同意チェックボックスです。
AIを使っていると感じると思いますが、条件をちゃんと与えると、何を作ればいいのかがはっきりするので、いいものができやすくなります。今回の条件は3つです。
「HTML/CSSで作って」は、ぜひ書いてください。HTMLとCSSは、ブラウザで動く最低限のコードの技術の名前です。これで作ると、シンプルに素早くできて、ブラウザで誰でも開ける状態になるはずです。
送信すると、AIが何をしているかを書きながら作り始めます。技術のことがわからなくても、なんとなく何をしているかはわかります。
途中で「意図と違う」と思ったり、間違えてEnterを押してしまったりしたときは、チャット欄の停止ボタン（黒丸のところ）を押せば作業を止められます。
完成すると、作ったファイル（僕の場合は prototypes フォルダの signup.html と signup.css）と、開き方を説明してくれます。
Cursorはエディターなので、普通にやるとCursorの中では画面は表示されません。ここで、さっきの話を思い出してください。作ったファイルは、最初に開いたフォルダの中に追加されています。
なので、ファインダーで自分のフォルダを開いて、中の signup.html をダブルクリックします。ブラウザで画面が開きます。
フォルダをどこに置いたか忘れたときは、Cursorの上の検索バーにフォルダの名前が出ているので、その名前でファインダーを検索すれば見つかります。
AIが作るので、出てくる画面は人によって見た目が違うと思います。僕の場合は、デスクトップ向けなので、左に説明、右にフォームという形になっていました。こういうところは、AIが推測して作ってくれます。
条件で指定したメールアドレス、パスワード、利用規約の同意は、ちゃんと入っていて、実際に入力したり押したりできます。ボタンにはホバーまでついていました。一方で、登録した後の画面やログインは指示していないので、押しても何も起きません。
Figmaで作るのにもいいところはあります。でも、こうして実際に触れると、どういう質感や操作感で体験を作れるのか、どうなっているのかを確かめられます。条件を伝えれば、触れる画面がここまでできる、という感覚をまずつかんでください。