Claude CodeでUI案を量産する方法

TL;DR

単一のHTMLファイルとTailwind CSSのCDNを使い、Claude Codeに異なるUI案を繰り返し生成させます。採用した案はReactやNext.jsへ置き換え、必要ならThree.jsのCDNや3Dモデルを加えることで、初期構築を増やさずに比較と改善を進められます。

Transcript

はい、どうもしです。え、今回はですね、 クロードコードを使ってUIデザインを 無限に生成する方法について紹介していき たいと思います。ま、今お見せしているの が私が2、3時間で作ったブログ記事の メディアなんですけども、ま、このUI デザインですね、ま、かなり優れていると 思います。こんな感じでね、え、記事も 見ることができるんですけど、これ僕の メディアにしていこうと思うんですけど、 ま、こういった自分のお切入りのUI デザインをですね、クロードコードに出力 してもらう方法ですね、そちらについて 今回紹介していこうと思います。ま、 こんな感じで、ま、ブログ記事メディアの MOみたいなのを色々作成してもらったん ですけど、こういったいくつかのデザイン 例をどうやって高速にクロードコードで 作... Read More

Key Insights

• UI案の量産方法は、空のHTMLファイルを起点にClaude Codeへデザイン生成を繰り返し依頼し、気に入った案だけを後工程へ移す流れである。
• Tailwind CSSのCDN利用は、試作段階でモジュールをインストールせずにスタイルを適用でき、後からReactやNext.jsへ移しやすくする手段である。
• 別のHTMLファイルを作る方法は、既存案を残したまま新しいデザインを試せるため、複数の候補を比較しながら選定する用途に適している。
• 並行生成の方法は、Claude Codeを複数立ち上げ、それぞれに別のHTMLファイルを担当させることで、複数のデザイン案を同時に作る手順である。
• プロンプトの指定例は、サイトの目的に加えて、モダン、暗色、グラデーションなど、求める見た目の方向性を短い言葉で伝えるものである。
• モデル選択について話者は、Claude 4 Sonnetの出力を微妙と評価し、利用可能ならClaude 4 Opusを選ぶことを勧めている。
• Three.jsのCDN利用は、既存の3Dモデルやマウス追従の動きを加え、静的なHTML試作に立体的な表現を追加する方法である。
• 採用後の移行方法は、完成したHTMLとTailwind CSSの構成をClaude Codeに渡し、ReactやNext.js向けに置き換えさせる手順である。
• 🎬 このチャンネルの他の動画:
  • Next.jsにClerk認証を導入する方法
  • Figma MCPでAI感のないUIを作る方法
  • Next.js App Routerを最適設計する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Claude CodeでUIデザイン案を量産する方法は？

空のHTMLファイルを作り、そのディレクトリでClaude Codeを起動して、サイトの種類や希望する雰囲気を指示します。結果が合わなければ別のHTMLファイルへ新しい案を生成し、複数候補をブラウザで比較して、採用するデザインを選びます。

Q: なぜ最初からNext.jsでUIを作らないのですか？

複数案を試すたびにNext.jsプロジェクトを立ち上げる必要をなくし、試作と破棄を簡単にするためです。話者は、まずHTMLとCDNでデザインを固め、採用後にReactやNext.jsへ置き換える流れを提案しています。

Q: Tailwind CSSをCDNで使う理由は何ですか？

試作のたびにTailwind CSSのモジュールをインストールせず、HTMLファイルだけで素早く表示を確認できるからです。また、話者はTailwind CSSで作った構成なら、後からClaude Codeを使ってReactやNext.jsへ置き換えやすいと説明しています。

Q: Claude Codeへどのようなプロンプトを入力すればよいですか？

作るページの目的と、希望する外観を具体的に伝えます。動画内では、モダンなIT系ホームページを格好よく作る依頼や、講座LPを全体的に暗くしてグラデーションを加える依頼が例として示されています。

Q: 生成されたHTMLをブラウザで確認する方法は？

エディタのLive ServerプラグインからHTMLを開くか、エクスプローラーでファイルを表示してブラウザから開きます。表示後にレイアウトや色、文章を確認し、必要であれば日本語への置換や別案の生成をClaude Codeへ依頼します。

Q: 複数のUI案を同時に生成する方法は？

Claude Codeを複数立ち上げ、それぞれに異なるHTMLファイルへのデザイン生成を依頼します。各処理を別ファイルに分ければ既存案を上書きせずに済み、生成された候補を並べて比較しながら採用案を決められます。

Q: HTMLのUIをNext.jsへ移行する方法は？

採用したHTMLとTailwind CSSの構成をClaude Codeへ渡し、Next.jsプロジェクト向けに置き換えるよう依頼します。話者の実例では、移行後もHTML版とほぼ同じ外観を維持できましたが、フォントは一度外しており、必要なら別途追加するとしています。

Q: UIに3D表現やアニメーションを加える方法は？

Three.jsのCDNをHTMLへ導入し、既存の3Dモデルなどを組み込みます。動画では、地球やBlenderで作ったモデルも導入可能な例として挙げられ、マウスの動きに追従する3Dオブジェクトを使ったデザインが実演されています。

Q: Claude CodeでUIを作る際はどのモデルを選べばよいですか？

話者は、利用できるならClaude 4 Opusを選ぶことを勧めています。Claude 4 Sonnetによるデザイン出力は微妙だったという本人の評価が根拠であり、一般的な性能比較ではなく、動画内の制作経験に基づく見解です。

Summary & Key Takeaways

• 最初に空のHTMLファイルを用意し、そのディレクトリでClaude Codeを起動します。Tailwind CSSはモジュールを入れずCDNで読み込み、作りたいサイトの種類、雰囲気、配色などをプロンプトで指定します。話者の例では、モダンなIT系ホームページや、暗色とグラデーションを使った講座LPを依頼しています。

• 生成されたHTMLはLive Serverやブラウザで表示し、求める品質でなければ別のHTMLファイルとして再生成します。複数のClaude Codeを立ち上げ、異なるファイルへ並行して案を出す方法も紹介されています。話者は、この反復をUIガチャに例え、複数案から気に入ったものを選ぶ流れを勧めています。

• 採用したデザインは、Claude Codeに依頼してReactやNext.jsへ置き換えます。話者の実例ではHTML版とNext.js版の見た目はほぼ同じで、フォントのみ外しています。さらにThree.jsのCDNや既存の3Dモデルを導入すれば、マウス追従などの表現も追加できますが、品質評価は話者の実演に基づきます。