デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
開発環境ができても、それだけではURLは立ち上がりません。立ち上げるための「呪文」を唱える必要があります。
これは覚えてください。
npm run dev
これをターミナルに打ち込むと、開発環境が立ち上がって、URLで確認できるようになります。
僕の場合はすんなり進みましたが、人によっては開発環境を作る途中で「Node.jsを入れてください」のように聞かれる可能性があります。Next.jsを動かすのに必要なものがあるからです。
わからないときは、チャットでAIに「どうやってインストールすればいいですか？」と聞いてください。場合によっては「ターミナルでこれを打ってください」と言われます。
僕もそんなに詳しいわけではありませんが、ターミナルは、パソコンへの直通電話のようなものらしいです。黒い画面で、一見ちょっと怖いです。
今のパソコンは、フォルダを開く、削除する、といった操作をボタンでできます。でも昔は、そういうボタンがなくて、全部コマンドを文字で打ち込んでいました。それが、直感的に操作できるUIになったので、誰でもパソコンを触れるようになった、という背景があります。
つまり、パソコンはそもそもターミナル（コマンドラインインターフェース、CLIとも言います）で操作するものです。削除ボタンを押したときも、裏ではコマンドが走っています。そのコマンドを直接打てるのがターミナルです。最初は怖いですが、慣れていきましょう。
ターミナルはMacのアプリとしても開けますが、最初はCursorの中のターミナルを使うとやりやすいと思います。
AIに「ターミナルでこれを打ってください」と言われた場合も、ここに打ち込めばインストールできると思います。わからないことが出てきたら、AIに聞きましょう。詳しいエンジニアさんだと思って、自分の専門外のことは聞く。この時代はそれが重要だと思います。
ターミナルに npm run dev と打って、Enterを押します。人によっては、AIがもう立ち上げてくれていることもあります（僕の環境もそうでした）。サーバーが起動して、「localhost:3000」のようなURLが表示されれば、起動は完了です。
このURLを、ChromeなどのブラウザのURL欄に打ち込みます。Commandキーを押しながらURLをクリックしても、ブラウザで開けます。
僕の場合は、ログインとサインアップへのリンクが並んだページが開きました。ログインを押せばログインの画面に、新規登録を押せば新規登録の画面に移動できます。作った画面をリストにしてくれていました。同じ見た目でなくても、こういうページが立ち上がっていれば開発環境は成功です。
localhostのURLは開発用なので、自分のパソコンの上でしか開けません。他の人にシェアしても、同じものは開きません。人に見せる方法は、このレッスンの最後（Vercelで公開する）でやります。