デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
—%
1
はじめに：Claude Codeで、アイデアを「動くUI」にする2
Claude Codeを使える状態にする3
ユーザーと体験を伝えて、動くUIをつくる4
Claude Codeの6つの基本操作を覚えるデザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
インストールできたら、次はログインです。
Claude Codeは、Anthropicという会社が作っている「Claude」というサービスのものです。Claudeのアカウントを持っていない人は、ここで作る必要があります。
ログインの方法も、さっきのクイックスタートのページに書いてあります。ターミナルに claude と打って、Enterを押します。
claude
立ち上がると、まず文字の表示スタイルを選ぶ画面が出ます。矢印キーで選べるので、自分がいちばんかわいいと思うものを選んでください。とりあえずならautoで大丈夫だと思います。選んだらEnterです。
次に、ログインの方法を1〜3から選ぶ画面が出ます。
2と3は難しいので、ほとんどの人は1でEnterを押せばいいと思います。
ここで1つ説明しておかないといけないことがあります。動画の時点では、Claude Codeはもう無料では使えません。Pro・Max・Teamといった、課金したプラン以上でないと使えなくなっています。
Proプランは月17ドルなので、だいたい3,000円くらい払うことになります。
個人的には、みんながClaude Codeと言っているので、一度使っておいた方がいいと思っています。使ってみたい人は、課金してすぐにサブスクリプションを停止すれば、1ヶ月後には継続されずに解約されます。その状態で1ヶ月使ってみるのがいいと思います。
1を選ぶと、ブラウザが開いて、ログインや認証の画面が出ます。英語で書かれていますが、許可（Authorize）のボタンを押せば、Claude CodeとClaudeのアカウントがつながります。
アカウントを作っていない人は、ここでアカウントを作ってから認証します。ログインしていない人はログインを求められるので、ログインするとこの認証の画面が出てくると思います。
認証が終わると「もう閉じていいよ」と出るので、ブラウザの画面は閉じてCursorに戻ります。
Cursorに戻ると、ログインに成功したと出ているので、Enterを押します。
「Welcome」と出て、Claude Codeのキャラクターが表示されれば、今このターミナルでClaude Codeが動いている状態です。
ちゃんと動くか、試してみましょう。ここがチャット欄で、ChatGPTのように使えます。僕はこう送りました。
おはよう。今日の天気は何かな
天気はわからないと思いますが、「おはようございます。天気の情報にはアクセスできません」のように返ってきました。何か打って返事が返ってくれば、Claude Codeの起動は成功しています。
もしエラーが出たら、基本はエラーの指示に従います。内容がわからない場合は、エラーの文をコピーして、別のAIに聞いて進めてください。課金していない人は、「課金していないので動きません」のような表示が出るかもしれません。