デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
—%
1
はじめに：Claude Codeで、アイデアを「動くUI」にする2
Claude Codeを使える状態にする3
ユーザーと体験を伝えて、動くUIをつくる4
Claude Codeの6つの基本操作を覚えるデザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
ここから、Claude Codeを使える状態にしていきます。インストールは4ステップです。
このページでは、2のインストールまで進めます。
このレッスンでは、Cursorというエディターを使って実演します。コードに自信がない人は、エディターに慣れながら進めた方が、バイブコーディングはやりやすいと思っています。
Cursorをまだ入れていない人は、Cursorのダウンロードページ（cursor.com）からダウンロードしてインストールしてください。Cursorの入れ方や画面の見方から知りたい人は、デザイナーのためのCursor入門のセクション1も参考にしてください。
Cursorを開いたら「Open project」を押して、作業用のフォルダを開きます。フォルダがプロジェクトのような扱いになります。書類やデスクトップなど、場所はどこでも大丈夫です。このレッスン用にフォルダを作って、そこで作業してください。僕は「Claude Code YouTube」というフォルダを開きました。
Claude Codeは、ターミナルで動くものです。Cursorの中でもターミナルを開けます。
右上にある、下に黒いバーがあるようなアイコンをクリックすると、「出力」「デバッグコンソール」「ターミナル」「ポート」と書かれたパネルが出ます。たぶん画面の下から出てくると思います。この「ターミナル」を押せば、そこがターミナルです。
ターミナルは、コマンドラインインターフェース（CLI）とも言われます。Macには最初から「ターミナル」というアプリも入っていて、そこでも作業できます。どちらでもいいのですが、今開いているフォルダとつながったところでClaude Codeを開いた方がいいことが多いです。
「Claude Code インストール」と検索すると、いちばん上にClaudeのクイックスタートのページが出てくると思います。Claude側が、始め方をきれいにまとめてくれている教科書のようなページです。
ただ、エンジニア向けに書かれているので、最初は意味がわからないと思います。このレッスンの通りに進めれば、たぶん問題ありません。
ページには、パソコンの種類ごとにインストールのコマンドが書いてあります。「Recommended（おすすめ）」と書いてあるところの、自分のパソコンに合ったものをコピーしてください。僕はMacなので、いちばん上のものをコピーしました。Windowsの人は、PowerShellやCMD用のものがあります。僕はWindowsをほとんど使ったことがないので、自分のパソコンがどちらかわからなければAIに聞いてください。
コピーしたら、Cursorのターミナルに Command + V で貼り付けて、Enterを押します。
「Setting up」のように表示されて、「Claude Code successfully installed」と出れば、インストールは完了です。
すんなりいく人の方が多いと思いますが、途中で「〇〇を入れますか？」のように聞かれたら、基本的にはOKで進めていいと思います。Anthropicが作っているものなので、やばいものを入れさせられることはおそらくないと思います。
不安な場合は、出てきた文（英語かもしれません）をコピーして、AIに「わかりやすく説明して」と聞けば説明してくれると思います。