Claude 3.7でサイトを公開する方法

TL;DR

Claude 3.7 Sonnetに要件定義、コード生成、修正を順番に依頼し、HTML、CSS、JavaScriptと画像を所定の構成で保存すれば、ティザーサイトを制作して公開できる。プレビューとブラウザで表示を確認し、画像パスやデザイン、文言、リンク、公開日時を段階的に直すことが重要である。

Transcript

はいこんにちはケトですこのチャンネルは 生生愛の最新情報や活用事例を紹介して ます是非チャンネル登録などお願いいたし ますえそして今回のテーマはですねAIで ウェブサイトを作ってみようっていうこと でこの動画でウェブサイトを作っていき たいと思います私ですね実は今新しい事業 を作ってましてそのシステムの開発をです ね外部のエンジニアに依頼してますでその システムがもうすぐ完成するっていうこと で今すぐですねティザーサイトを作って 公開しちゃいたいんですよねでこれ今中に やりたいんでそのスピード感でやるにはえ どこか外部の人に依頼してえお金の やり取りをしてっていう時間もなかったの でせっかくならばですねAIを使ってもう めちゃくちゃスピーディに作ってしまって 公開までしちゃおうかなって思って... Read More

Key Insights

• 要件定義は、サイトの目的、ページ構成、操作方法、必要な機能、視認性への配慮まで具体化し、Claudeとの対話で整理すると、そのままコード生成の指示として再利用できる。
• ティザーサイトは、全画面のヒーローと事前登録という2セクションに絞ることで、縦スクロール、画像切り替え、カウントダウンなどの演出を含めても比較的単純な構成にできる。
• Claudeのアーティファクトは、コードを画面右側で生成し、生成後のプレビューを確認できるため、初期デザインを見ながら修正点を見つける用途に利用できる。
• ファイル構造は、index.html、CSS、JavaScript、ヒーロー用画像、登録セクション用画像に分けると、コードと素材の役割を整理しながらローカル環境で表示確認できる。
• 画像が表示されない場合は、JavaScript内に残ったサンプル画像のパスと実際のフォルダー構成を照合し、参照先を一致させることで解消できる場合がある。
• デザイン改善は、最初からコードを書き換えさせず、利用可能な演出案をClaudeに提案させてから、採用する効果を選び、まとめて修正を依頼する流れで進められる。
• 事前登録やパートナー募集は、フォームが未完成でも仮のリンク先を設定してレイアウトを完成させ、正式なURLが用意できた段階で差し替える進め方が取れる。
• 公開前の確認事項は、文章、リンク、画像、ボタンの配置、カウントダウンの日時であり、ローカル表示を確認してからデータを本番環境へアップロードする必要がある。

Questions & Answers

Q: Claude 3.7でティザーサイトを作る方法は？

最初に目的、構成、機能、デザイン上の注意点をClaudeへ伝え、要件定義として整理させる。次に、その要件からHTML、CSS、JavaScriptを生成し、プレビューとブラウザで確認する。画像パスや演出、文言、リンク、公開日時を修正した後、本番環境へアップロードすれば公開できる。

Q: AIにWebサイトの要件を伝える方法は？

サイトの種類、セクション数、スクロール方式、背景画像、アニメーション、フォーム、タイマー、視認性への配慮を具体的に伝える。事例では、1ページ2セクション、TikTok風の縦スクロール、複数画像の切り替え、事前登録、背景上の薄い黒色処理まで指定し、要件定義へ整形させた。

Q: Claudeで生成したコードをパソコンで確認する方法は？

生成されたコードをコピーし、index.htmlとして保存してブラウザで開けば確認できる。コードを分割する場合は、CSSをstyle.css、JavaScriptをscript.jsへ保存し、HTMLから正しく読み込ませる。画像は指定されたフォルダーへ配置し、コード内の参照パスと一致させる必要がある。

Q: 背景画像が表示されないときの直し方は？

JavaScriptやCSSに記載された画像パスを確認し、実際のフォルダー名とファイル名に合わせて修正する。事例では、JavaScript内の画像データがサンプルパスのままだったため、Claudeへ先に作成したフォルダー構成へ合わせるよう依頼し、コードを差し替えることで表示できた。

Q: サイトの画像をランダムに切り替える方法は？

ヒーロー用と登録セクション用の画像フォルダーを用意し、JavaScriptで各フォルダー内の画像を数秒ごとにランダム表示するよう指定する。さらに、セクション間で同じ画像が重ならない条件もClaudeへ伝え、必要なコードとファイル構造をまとめて生成させる。

Q: Claudeでサイトをおしゃれに改善する方法は？

まずコード変更ではなく、追加できる演出やタイポグラフィーの案だけを提案させ、その中から採用する項目を選ぶ。事例では、滑らかなトランジション、タイピング効果、スプラッシュ、3D効果、フリップカード型タイマー、フォントやグラデーションを選び、まとめてコードへ反映させた。

Q: 事前登録とパートナー募集をサイトへ追加する方法は？

表示する位置、見た目、リンク先を指定してClaudeにコード修正を依頼する。事例では、カウントダウンの下にシンプルな事前登録導線を配置し、過去の実績へのリンクをパートナー募集欄へ移動した。フォームが未完成だったため、リンク先は一時的にGoogleフォーム用の想定で設定し、後から差し替える方針とした。

Q: AIで作ったWebサイトを公開する前に確認することは？

ローカル環境で画像、縦スクロール、アニメーション、タイマー、各リンク、文章、ボタン配置を確認する。特に画像パスと公開日時は誤りが表示へ直結するため、実際のフォルダー構成と日付に合わせる。事例では、公開日を2025年4月18日に設定した後、完成データを本番環境へアップロードした。

Summary & Key Takeaways

• 最初に、制作するサイトの目的と構成をClaudeへ伝える。事例では、AIアートの新サービスに向けたティザーサイトを対象とし、全画面のヒーローと事前登録という2セクション、縦スクロール、背景画像の切り替え、カウントダウン、メールフォーム、黒い背景オーバーレイなどを要件として整理した。

• 次に、整理した要件からコードを生成し、Claudeのアーティファクトでプレビューする。生成コードはindex.htmlへ貼り付け、CSSとJavaScriptを別ファイルに分け、画像用フォルダーも用意した。画像が表示されない問題は、JavaScript内のサンプル画像パスを実際のフォルダー構成に合わせて修正することで解消した。

• 最後に、トランジション、タイピング効果、スプラッシュ、3D効果、フリップカード型タイマー、フォントやグラデーションを追加した。さらに事前登録、過去の実績、パートナー募集、運営会社の内容とリンクを整え、公開日を2025年4月18日に設定して本番環境へアップロードした。作業は合計約6時間で、打ち合わせ約2時間を除くと約4時間だった。