デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—%
1
はじめに：なぜ「触れるUI」で考えるのか2
条件を伝えて、AIに最初のUIをつくってもらう3
AIに先に計画させると、思った通りの画面になる4
作った画面を、いつでもURLで開けるようにする5
デザインツールのように、見た目をその場で直す6
コードでつくった画面をFigmaに持っていく7
URLにして、人に触ってもらうデザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
ここからは、作った画面を「開発環境」で動かせるようにします。
開発環境は、開発するための土台です。
エンジニアリングの世界には、無料で使えるプラグインやフレームワーク、コンポーネント集などが世界中にたくさんあります。開発環境が整っていると、そういうものを組み込んで使えるようになります。最近の技術は、環境を整えないと動かないもので作られていることが多いので、それを整えよう、ということです。
さっきまでは、HTMLとCSSという、ブラウザで画面を表示する最低限の技術で作っていました。だからすごくシンプルでした。今回は、Next.jsという技術の開発環境を整えます。
今回は、本格的に開発を進めたいわけではありません。作った画面をFigmaに持っていきたい。そのために、開発環境で画面を表示する「ローカルのURL」を作りたい、というのが目的です。
流れはこうです。
僕らが色々覚えなくても、基本的な開発環境の整え方があるので、AIがやってくれます。このページでは、2のAIが作り終えるところまで進めます。
Planモードにして、こう書きました。
次に開発環境を作成したいです。
条件：Next.jsで開発環境を整えたいです。
開発環境を整える上で必要なものがあれば、AIが操作して入れていって構いません。
ただ、パソコンが壊れたりするようなものであれば入れないでください。
Next.jsは、サービス開発の土台を作るやり方としてよく使われているものの1つです。やり方はいろいろあるので正解というわけではありませんが、AIもNext.jsについてはよく学んでいて、わかっていることが多いです。
開発をしたことがないパソコンだと、「〇〇を入れてください」と聞かれる可能性があるので、「必要なものはAIが入れていい」と添えています。AIが勝手にパソコンに色々入れるのが怖い人もいると思うので、最後の1行のように、気になることを書き添えておくと、相談しながら進められます。
Planモードなので、AIが色々聞いてくれます。僕の場合はこう答えました。
Continueを押すと、さらに計画を作ってくれます。基本的にはそのままBuildを押してOKだと思います。
ただ、計画を読んでいくと、開発環境を作るうえでどういうファイル名になって、どういうことをやるのかがなんとなくわかってきます。繰り返していくと技術の知識もだんだん入ってくるので、目を通すのはおすすめです。
Buildを押すと、けっこう時間がかかるので、しばらく待ちます。「セットアップ完了しました」と出れば、このページはクリアです。
途中で「〇〇を入れてください」と言われた場合の対処は、次のページで説明します。