デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
最後に、作ったものをインターネットに公開して、URLで人に触ってもらえるようにします。
使うのは、Vercelというサービスです。作ったものをインターネットに公開するホスティングサービスで、めちゃくちゃ有名です。僕の印象では、デザインにもすごく力を入れている会社で、開発環境で使ったNext.jsを開発しているところでもあります。
手順はこうです。
vercel.com を開いて、サインアップを押します。チーム名は何でも大丈夫です（僕なら「BONO」のように）。アカウントを作るところまで、ポチポチ進めてください。
ここからは、僕が説明するよりも、AIに聞きながら慣れた方がいいと思うので、聞いてみます。Planモードにして、こう書きました。
Vercelのアカウントを作成しました。Vercelを使って、今作っているものをURLで公開したいです。どうすればいいでしょうか？
すると、「GitHubにコードを置いてVercelで…」という案が出てきました。GitHubがあると便利なのですが、今回は覚えることが多すぎるので省きます。
今回GitHubは連携しない方法でいけますか？
URLを公開するだけならいけるはずです。「連携なしで進められます」と、その方針で計画を更新してくれました。
ただ、出てきたやり方は「自分でこれをやってね」という感じで、難しいと思います。なので、さらにこう聞きました。
あなたの方が実行しながら導入するやり方を考えることはできませんか？
これは僕もけっこうやります。面倒だし、わからないので。すると、AIがターミナルで実行して、ブラウザの操作だけ僕らが行う、という流れに計画を変えてくれました。
計画に質問が出てきたので、「Agentモードで実行してほしい」と選んでContinueを押しました。Planモードのままでしたが、エージェントとして実行を始めてくれました。
途中で、Vercelへのログインができていないので、ブラウザでデバイスの認証をしてください、と出てきました。ブラウザに出た認証の画面で許可すると、認証が完了します。開いたブラウザのタブは、もう必要ないので閉じてかまいません。Cursorに戻って続けると、ログインに成功して、作業が進んでいきます。
最後に「本番URLまで出せています」と出れば、デプロイは成功しているはずです。次のVercelの画面で確かめます。
Vercelの画面に戻ると、プロジェクトの一覧に、さっきデプロイしたプロジェクトが1つ増えているはずです。クリックすると、ステータスが「Ready」になっています。これでデプロイは完了です。
「Deployment」の下に、「〇〇.vercel.app」という長いURLが発行されています。クリックして、さらにドメインをクリックすると、npm run dev を唱えて localhost で表示した画面と同じものが、インターネット上のURLとして開きます。
この状態なら、自分がパソコンで作った機能や体験を、他の人もこのURLにアクセスして操作できます。インターネットに、自分が作ったものが1つ増えました。記念すべき第一歩です。お疲れさまでした。