デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
—%
1
はじめに：Claude Codeで、アイデアを「動くUI」にする2
Claude Codeを使える状態にする3
ユーザーと体験を伝えて、動くUIをつくる4
Claude Codeの6つの基本操作を覚えるデザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
Claude Codeは、名前に「コード」と入っていますが、デザインにも、企画や自動化にも使えるツールです。世界中で導入がめちゃくちゃ進んでいます。
国内でも、UIデザインで有名な会社が全社員に使わせて、アプリやサービスを200個くらい作ったという話が話題になりました。
また、あるデザインコミュニティの代表の方も、、Figmaだけでなく、Claude Codeで動くプロトタイプを作りながらデザインしていくことがめちゃくちゃ重要だ、と言っていたりもします。
ただ、Claude Codeは使い始めるハードルが結構高いです。なので、このレッスンでは、Claude Codeの導入から、1回デザインを作るところまでを一緒にやっていきます。エンジニアでない人やデザイナーでも進められるように、なるべく簡単に説明していきます。
動画の時点（2026年5月）では、Claude Codeは無料のプランでは使えません。Proプラン以上（月17ドル、だいたい3,000円くらい）に課金する必要があります。
個人的には、一度使っておいた方がいいと思っています。1ヶ月だけ使ってみたい人は、登録してすぐにサブスクリプションを停止すれば、1ヶ月後には継続されずに終わります。詳しくはログインのところで話します。
また、このレッスンでは「Cursor」というエディターの中でClaude Codeを使います。Cursorを使ったことがない人は、先に「触れる画面から始めるAI UIデザイン Cursor入門」のレッスンをやっておくと進めやすいです。