Claude Codeでアプリを高速開発する方法

TL;DR

Claude Codeは、要件定義を文書化し、作業をチケットへ分割して複数のセッションで並行実装すると効率的に使える。WindowsではWSLを準備し、生成後は開発サーバーで表示や動作を確認して、崩れや配置のずれを追加指示で修正する。

Transcript

はいどうもしです今回はですね今話題の クロードコードですねえこちらを使って 爆速でまバイブコーディングま平行バイブ コーディングって言うんですかねまそちら を行っていこうかなと思いますうんま クロードコードの始め方からえまどういっ た使い方が1番効率よく開発できるのかま そこら辺ですねま今私がシリウール範囲で ですねちょっとお伝えしようかなと思って おりますでこのクロードコードなんです けどえ実際にですね私課金してね 1万5000円課金して使ってるんです けどめちゃくちゃいいとえこれは エンジェニアの働き方ガラっと変わるなっ ていう印象がありましたのでえーまそこも 踏まえてえお伝えできたらなと思いますま 例えばフロントエンドバックエンドま プロジェクトマネージャーPMまその役割 をクロードコ... Read More

Key Insights

• ・Claude Codeの導入はnpmのインストールコマンドとログイン操作で進められるが、Windowsでは事前にWSLを用意し、その環境内でインストールする必要がある。
• ・料金の選択肢はAPIの従量課金とMaxサブスクリプションであり、動画では少額のAPI利用から試し、継続的に開発する場合は月額100ドルのプランを検討している。
• ・Claude Codeは依頼内容からTodoを作成し、その項目を順番に処理するため、機能ごとに何度も指示と承認を繰り返す作業を減らせると紹介されている。
• ・ランディングページの品質は「モダン」「リッチ」などの方向性、必要なセクション、使用技術、コンポーネント分割を具体的に指示することで改善できる。
• ・生成された画面はそのまま完成品とは限らず、スマートフォン表示の崩れ、ホバー時の文字消失、ラベル位置のずれなどを実際に操作して検出する必要がある。
• ・要件定義書はAIとの共通の参照点として機能し、会話が長くなる複雑なプロジェクトでも、当初の要件や実装段階を確認しやすくする。
• ・並行開発はスキーマ、レイアウト、認証などの作業をチケットやグループへ分け、複数のClaude Codeセッションへ別々に担当させる方法で実施できる。
• ・AI生成物の実務適性について、話者は自身がAIで作った販売ページから560人の受講と100万円超の売上が生じたと述べているが、動画内の自己申告であり外部検証は示されていない。
• 🎬 このチャンネルの他の動画:
  • Claude CodeにMCPを導入する方法
  • AIツールでYouTube風アプリを開発する方法
  • Claude CodeでUI案を量産する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: WindowsでClaude Codeを始める方法は？

Windowsでは最初にWSLをインストールし、WSLのLinux環境内でClaude Codeのnpmインストールコマンドを実行する。インストール後にClaudeコマンドを起動し、表示テーマとログイン方法を選ぶ。ターミナルを右側へ置きたい場合は、エディターのセカンダリサイドバーへ移動する方法も紹介されている。

Q: Claude Codeのログイン方法は何を選べばよいですか？

まず試したい場合はAPIの従量課金、アプリ完成まで継続的に使いたい場合はMaxサブスクリプションが動画内の選択基準である。話者は最初に5ドルや10ドル程度のAPI利用から試し、価値を感じた後に月額100ドル、約1万5000円と説明するプランへ移行した。

Q: Claude Codeでランディングページを作る方法は？

販売する商品や講座、利用する技術、必要なセクションを日本語で指示し、生成されたプロジェクトを開発サーバーで確認する。動画ではClaude Code講座の販売ページを題材にNext.jsを指定し、必要な構成はAIに考えさせた。初回生成後にデザインや構造の修正を追加指示する流れで完成度を上げている。

Q: 生成されたWebサイトの見た目を改善する方法は？

「モダンでリッチなUIにする」「コンポーネントを分ける」など、求める方向とコード構造を具体的に伝える。動画では追加指示によってアニメーション、ホバー効果、カリキュラム、講師、料金、よくある質問などの表現が加わった。ただし、装飾がコンバージョンに有効かは話者も判断できないと述べている。

Q: Claude Codeの生成結果はそのまま公開できますか？

公開前には人間による表示確認と修正が必要である。実演では、スマートフォン幅でカリキュラムが崩れる、ホバーすると一部が見えなくなる、料金欄のラベル位置がずれるといった問題が残った。画面サイズや操作状態を変えて確認し、問題箇所をClaude Codeや別の編集支援機能へ具体的に伝える必要がある。

Q: AIによるアプリ開発で要件定義書が必要なのはなぜですか？

要件定義書は、AIと人間が同じ仕様を参照し続けるための基点になるからである。動画では技術記事投稿サービスの認証方式、投稿形式、テーブル構成、開発フェーズなどを整理し、requirements用のMarkdownファイルとして保存した。プロジェクト後半で会話が長くなっても、文書を参照させれば要件のずれを抑えやすい。

Q: Claude Codeで並行開発する方法は？

要件を独立して進められる開発チケットへ分割し、複数のClaude Codeセッションへ別々のグループを担当させる。動画ではスキーマ作成、レイアウト、認証、ログインやサインアップなどをフェーズとグループに整理している。先に共通の要件定義書を用意し、各セッションに読ませてから担当範囲を指示することが前提となる。

Q: Claude Codeでフルスタックアプリを作る流れは？

最初に作りたいサービスについてClaude Codeと質疑し、技術要件と機能を固めて要件定義書へ保存する。次に実装内容をチケットへ分割し、フロントエンドとバックエンド、またはフェーズごとに並行して開発する。実演では記事投稿プラットフォームを題材にし、Supabaseによる認証や最小限のテーブル、Markdown投稿を要件へ含めている。

Summary & Key Takeaways

• 導入時は公式ページに掲載されたnpmのインストールコマンドをターミナルで実行し、Claudeコマンドを起動する。LinuxとMacではそのまま進められるが、Windowsでは事前にWSL環境が必要になる。ログイン方法はAPIの従量課金か、動画内で月額100ドル、約1万5000円と説明されたMaxサブスクリプションから選択する。まず少額のAPI利用で試し、用途に合えば定額利用へ移る方法も紹介されている。

• ランディングページ制作では、用途、使用技術、必要なセクションを日本語で指示すると、Claude CodeがTodoを作り、Next.jsの構成や画面をまとめて実装した。最初の出力に対して、モダンでリッチなUI、コンポーネント分割、アニメーションなどを追加指示すると品質を高められる。一方、スマートフォン表示の崩れ、ホバー時の視認性、料金ラベルのずれなどは残り得るため、人間による確認と具体的な修正指示が必要である。

• フルスタック開発では、技術記事投稿サービスを題材に、最初に質問形式で要件を整理し、要件定義書をMarkdownファイルとして保存した。さらにスキーマ、レイアウト、認証などの開発チケットへ分割し、複数のClaude Codeセッションでグループ別に並行実装する流れを示している。動画の章立てにはSupabaseのセットアップ、MCPサーバーの設定、動作確認も含まれるが、複雑な開発ほど文書を共通の参照点にすることが重要だと述べている。