デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
—%
1
はじめに：Claude Codeで、アイデアを「動くUI」にする2
Claude Codeを使える状態にする3
ユーザーと体験を伝えて、動くUIをつくる4
Claude Codeの6つの基本操作を覚えるデザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
インストールできたので、実際に作ってみましょう。どう作っていけばいいのか、作れるのか、という感覚をつかむのがこのページの目的です。
ポイントは、いきなり「〇〇を作ってください」という指示をしないことです。
今回は簡単なTodoアプリを作りますが、「Todoアプリ作って」と書いても、決まっていないことが多すぎるので、意図したものは作れないと思います。
大事なのは、どういうものを作りたいのかという目的を定義して、与えてあげることです。僕は、与えれば与えるほど精度が上がっていくと思っています。たとえば、こういうことです。
こういうものを与えるほど、何を作ったらいいのかが伝わるので、Claude Codeも実装しやすくなると考えています。
ユーザー像や体験の決め方、UIの方向性の考え方は、BONOでも扱っていますし、これからも扱っていきます。今回はそこまで突っ込まず、AIと一緒にざっくり詰めた内容で作ります。
今回作るのは、「次にやるのはこれ」が1つパッとわかるような、スマホ向けのTodoのWebサービスです。プロンプトは、ここにまとめています。
これをコピーしてそのまま使えば、同じようなものが作れると思います。
プロンプトでは、いきなりコードを書き始めずに、まず次の7項目を体験の設計として考えてから、その設計に沿って作ってほしい、と伝えています。
そして、その7項目の中身も、AIと一緒にざっくり詰めて、プロンプトの中にすでに書いてあります。たとえばユーザー像は「自宅とカフェを行き来して作業する、27歳のフリーランスのWebデザイナー」で、課題は「次にやるのはこれ1つ、が画面を開いた瞬間にわかってほしい」です。
このプロンプトをコピーして、Claude Codeのチャット欄に貼り付けます。
ただ、僕のCursorのターミナルだと、長い文章を貼るとClaude Code自体が動かなくなるバグのようなことがよく起きます。動画でも起きました。なので、チャットだけでやるより、ドキュメントに書いておく方がいいです。
Claude Codeは、設計を読んで要点をまとめ、確認したうえで作っていると伝えてくれます。このまま少し待ちます。
色などの見た目まで細かく決めて頼んでいるわけではないので、動画の冒頭で見せたTodoアプリと同じ見た目になるとは限りません。仕様に沿ったものができていれば大丈夫です。
実装が終わると、作ったファイルが表示されます。今回はプロンプトで index.html などのHTML/CSSで作るように頼んでいるので、難しい技術は使わずに組まれています。HTMLのファイルを開けば動きます。
Cursorのファイル一覧で index.html を右クリックして、「Reveal in Finder」を押すと、ファインダーでファイルの場所を表示してくれます。Windowsでも、たぶん同じようなメニューがあると思います。ダブルクリックすると、ブラウザで開きます。
試しに「野菜を買いに行く」というタスクを入れてみると、ちゃんと動きました。僕の場合はこういうものができていました（AIが作るので、細かいところは人によって違うと思います）。
このデザインや機能がいいかどうかは、ちょっと置いておきます。でも、機能の検証や、体験が具体的にどうなるのかは、3〜5分くらいで作って確かめられます。
これをFigmaで雑に作ろうとしても、めちゃくちゃ時間がかかります。AIにやらせると、意図していないところもいっぱいありますが、これだけざっくりした進め方でも、なんとなく全体像をつかめてしまいます。
これがClaude Codeを使う理由でもあるし、バイブコーディングをデザインにつなげていくことがめっちゃ重要な理由の具体例だと思っています。