Claude CodeでWebサイトを作る方法

TL;DR

Node.jsとClaude Codeを導入し、作業用フォルダーへ移動して「claude」コマンドを実行すれば、自然言語の指示からWebサイトを作成できる。見本画像や原稿を渡すと、HTML、CSS、JavaScript、画像素材、下層ページまで同じフォルダー内で編集できる。

Transcript

はい、こんにちは。ケトです。この チャンネルは生成案最新情報や活用事例を 紹介してます。是非チャンネル登録などお 願いいたします。そして今回のテーマは クロードコードについてですね、紹介。 そしてこのクロードコードの、え、実際の セットアップ方法、さらにクロードコード を使って実際にウェブサイトを作ってみ るってところまでをですね、やっていき たいと思います。で、今回紹介する クロードコードで作ったウェブサイトが こんな感じです。はい。めちゃくちゃ綺麗 じゃないですか?ウェブサイトを作るのに 最もおすめなAIは何ですかと言われたら クロードさらにその中でもクロードコー ドっていう機能を使うのが最もいいんじゃ ないかなとこの動画を撮ってみてですね、 もうはっきりとしました。なので ウェブサイト... Read More

Key Insights

• ・Claude CodeはWeb版Claudeとは別のツールであり、ターミナルから作業対象のフォルダーを指定して起動する仕組みである。フォルダー内のファイルを直接作成、編集できる点がWeb制作に適している。
• ・制作開始の基本手順は、作業用フォルダーを作り、「cd」とフォルダーのパスで移動した後、「claude」コマンドを実行する流れである。起動時には対象の場所が正しいか確認する。
• ・自然言語で「おしゃれなウェブサイトを作成して」と頼むだけでも、HTML、CSS、JavaScriptが生成される。実演ではレスポンシブデザイン、配色、アニメーションを備えたサイトが完成した。
• ・見本画像や原稿ファイルを作業フォルダーに置けば、Claude Codeは両方を読み取り、参考デザインと掲載内容を反映したサイトへ修正できる。画像を扱える点も実演で確認された。
• ・Claude CodeはSVG形式のロゴや装飾用グラフィックも自動生成し、画像フォルダーへ配置できる。実演では複数の素材が作られ、ページ全体のデザインを構成する要素として利用された。
• ・外部で作成した画像を画像フォルダーへ保存し、差し込み位置や文言修正を自然言語で頼める。実演では画像の反映と、英語になっていた箇所の自然な日本語への変更が行われた。
• ・Claude Codeは下層ページ用のHTMLとリンク遷移も作成できる。企業情報ページの実演では理念、代表メッセージ、アクセス情報などを含むページが生成され、トップページから移動できた。
• ・利用方法はAPI認証とClaudeアカウント認証から選択できる。話者はClaude Maxの利用枠で実演し、APIの従量課金は発生していないと説明したが、利用量はWeb版と共通になるとしている。

Questions & Answers

Q: Claude CodeでWebサイトを作る方法は？

作業用フォルダーを作成し、ターミナルで「cd」に続けてそのフォルダーのパスを入力して移動します。次に「claude」コマンドを実行し、対象フォルダーを確認したうえで、作りたいWebサイトを自然言語で指示します。提案されたHTML、CSS、JavaScriptの作成内容を確認して承認すると、必要なファイルがフォルダー内に生成されます。

Q: Claude Codeをセットアップする方法は？

最初にClaude Codeの案内ページからNode.jsのページへ進み、使用しているOS向けのインストーラーをダウンロードして導入します。次にClaude Codeのページに記載されたインストール用コードをコピーし、Macではターミナルへ貼り付けて実行します。動画の説明はMacを前提としており、Windowsでは細部が異なる可能性があるとされています。

Q: Claude Codeで作業フォルダーを指定する方法は？

ターミナルに「cd」と入力して空白を入れ、作業したいフォルダーをターミナルへドラッグします。これによりフォルダーのパスが入力されるので、その状態でEnterを押します。ターミナルが対象フォルダー内へ移動した後に「claude」コマンドを実行すると、そのフォルダーを対象としてファイルの生成や編集を進められます。

Q: 見本サイトのデザインをClaude Codeへ反映する方法は？

参考にしたいサイトのスクリーンショットやデザイン画像を作業フォルダーへ保存し、必要に応じて見本サイトのURLも伝えます。さらに掲載したい原稿をテキストファイルとして同じフォルダーへ置き、見本のデザインと原稿を使って修正するよう指示します。実演ではClaude Codeが画像と原稿を確認し、HTML、CSS、JavaScriptを更新しました。

Q: Claude Codeで画像やロゴも作成できますか？

実演ではClaude CodeがSVG形式のロゴと複数のグラフィックを生成し、画像フォルダーへ保存しました。一方、本文に対応する画像はChatGPTの画像生成機能で別途作り、名前を付けて画像フォルダーへ入れています。その後、Claude Codeへ画像を差し込むよう依頼することで、ページ内の該当箇所へ素材を反映させました。

Q: Claude Codeで下層ページとリンクを作る方法は？

トップページを作成した後、作りたい下層ページの種類と、リンク遷移も必要であることを自然言語で指示します。実演では企業情報の下層ページとリンクの作成を依頼し、「about.html」が生成されました。完成したページには理念、代表メッセージ、写真用の領域、アクセス情報などが入り、トップページのリンクから移動できました。

Q: Claude Codeの認証には何が必要ですか？

初回設定では、APIを使う方法かClaudeのアカウントを使う方法を選択します。APIを利用する場合はClaudeのコンソールへログインしてAPIキーを取得し、あらかじめ決済情報を登録しておく必要があると説明されています。Claudeのアカウントを選ぶ場合、実演ではClaude Maxのアカウントが使用され、契約プランの利用制限内で処理していました。

Q: Claude MaxでClaude Codeを使うとAPI料金はかかりますか？

話者の実演では、Claude Maxの利用枠を選択していたため、APIの従量課金は発生していないと説明されています。ただしClaude Codeで使った量はWeb版Claudeの利用量と共通に扱われ、契約プランの制限へ加算されるとされています。この説明は動画内の利用例に基づくもので、すべての契約や利用条件を検証したものではありません。

Q: Claude Codeの操作コマンドを確認する方法は？

Claude Codeを起動した後、プロンプトの入力欄で「/help」と入力して送信すると、利用できるコマンドの一覧を確認できます。動画では、ログインに使うアカウントを変更する操作や、ログアウトする操作などをコマンドから実行できると説明されています。設定や認証を変更したい場合は、まずヘルプに表示される一覧を確認する方法が示されています。

Summary & Key Takeaways

• Claude Codeで制作を始めるには、Web版のチャットではなくターミナルを使用する。作業用フォルダーを作成し、「cd」とフォルダーのパスで移動してから「claude」コマンドを実行する。対象フォルダーを確認した後、作りたいサイトを自然言語で指示すると、HTML、CSS、JavaScriptの作成が順番に提案され、内容を承認しながらファイルを生成できる。

• 具体的な制作例では、見本サイトのスクリーンショットとURL、サービス用の原稿を同じフォルダーに置き、それらを参照して既存サイトを修正するよう依頼した。Claude CodeはHTML、CSS、JavaScriptに加えてSVGのロゴやグラフィックも作成した。さらに別途生成して画像フォルダーへ保存した素材の差し込みと、英語表記の自然な日本語への変更も指示できた。

• Claude Codeはフォルダー内を直接操作できるため、トップページだけでなく企業情報などの下層ページとリンク遷移も作成できる。導入にはNode.jsをインストールし、Claude Codeのページに記載されたコードをターミナルで実行する。認証ではAPIかClaudeのアカウントを選択でき、API利用時は決済情報とAPIキーが必要になる。操作コマンドは「/help」で確認できる。