読み込み中...
一覧
デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン
—
%
1
はじめに:なぜ「触れるUI」で考えるのか
イントロ
絵ではなく「触れるUI」でデザインすると、気づけることが増える
チャレンジ
確認:なぜ「触れるUI」で考えるのか、言えるか?
2
条件を伝えて、AIに最初のUIをつくってもらう
実践
Cursorを入れて、作業フォルダを開く
実践
条件を伝えて、新規登録画面をつくる
実践
Cursorの画面の見方(チャット・ファイル・中身)
チャレンジ
確認:条件どおりの画面ができて、ブラウザで触れたか?
3
AIに先に計画させると、思った通りの画面になる
実践
Planモードで、ログイン画面を相談してからつくる
実践
2つの画面を行き来して、触って気づく
チャレンジ
確認:AIと相談しながら画面を足して、改善点を見つけられたか?
4
作った画面を、いつでもURLで開けるようにする
実践
AIに開発環境(Next.js)を用意してもらう
実践
ターミナルで npm run dev を打って、localhostで開く
チャレンジ
確認:作った画面を、localhostのURLで開けたか?
5
デザインツールのように、見た目をその場で直す
実践
Cursorのブラウザで、文字サイズや色を直してコードに反映する
チャレンジ
確認:画面を見ながら見た目を直して、コードに反映できたか?
6
コードでつくった画面をFigmaに持っていく
実践
html.to.designで、コードの画面をFigmaのデータにする
知識
コードとFigmaを行き来して、デザインを回す
チャレンジ
確認:コードでつくった画面を、Figmaで編集できるデータにできたか?
7
URLにして、人に触ってもらう
実践
AIに手伝ってもらって、Vercelで公開する
チャレンジ
確認:作った画面を、他の人が開けるURLにできたか?
8
まとめ
イントロ
まとめ:できるようになったことと、次にやること
チャレンジ
2.
確認:画面を見ながら見た目を直して、コードに反映できたか?
クエスト5: デザインツールのように、見た目をその場で直す
このセクションのゴールは、画面を見ながら見た目を直して、コードに反映できることです。
完了にする
お気に入り
質問する
シェア
このセクションのゴールは、画面を見ながら見た目を直して、コードに反映できることです。
チェック
Cursorの中のブラウザで、localhostの画面を開けた
要素をクリックして、文字サイズや色などを1か所変えられた
Applyを押して、コードに反映した
ブラウザを再読み込みしても、変えたスタイルが残っている
要素を増やしたいときは、AIに頼むか自分で実装する、と知っている
完了にする
お気に入り
質問する
シェア
前
Cursorのブラウザで、文字サイズや色を直してコードに反映する
次
html.to.designで、コードの画面をFigmaのデータにする
確認:画面を見ながら見た目を直して、コードに反映できたか? | デザイナーのためのCursor入門 | 触れる画面のAI×UIデザイン | BONO