Claude Codeにお任せ！　日本語指示だけでOK。初心者でも作れるWebサイト制作完全ガイド　【前編】

AIへの指示文（プロンプト）の構造と書き方を学びます。「曖昧な指示」と「明確な指示」の違いを比較しながら、思い通りのコードを引き出すための指示のコツを習得します。

実際にClaude Codeに日本語で指示を出し、HTMLとCSSのコードを自動生成する操作を実践します。生成されたコードがどのファイルに保存されるかを確認しながら、Webサイトの骨格が完成するまでの流れを体験します。

Webサイトのナビゲーションメニューと、スクロールしても画面上部に固定されるヘッダーをClaude Codeで実装します。サイトの使いやすさを大きく左右するUI部品の作り方を習得します。

HTML・CSS・JavaScriptの3ファイルがどのように連携して1つのWebサイトを構成するかを学びます。複数ファイルで開発することで、修正・更新がしやすい構成になる仕組みを理解します。

Webサイトに使う画像・ビジュアルコンテンツをAI画像生成ツールで制作する方法を解説します。著作権フリーの素材をAIで自前で用意することで、サイトの見栄えを無料でプロ仕様に仕上げられます。

Claude Codeを使ったWeb開発で知っておくと役立つ実践テクニックをまとめて解説します。デザインの細かい調整方法や、AIへの追加指示の出し方など、完成度を高めるためのノウハウを学びます。

Webサイトにスクロールアニメーションやボタンのエフェクトなどの動きを追加します。JavaScriptを直接書く必要はなく、Claude Codeへの指示でアニメーションを実装する方法を実演します。

GitHubのアカウント作成・ログインから、Webサイトのファイルをアップロードするための「リポジトリ（保存フォルダー）」を作成します。公開するための準備段階として最初の重要な一歩です。

作成したリポジトリの詳細設定を行います。リポジトリの公開設定・README・ファイル構成のベストプラクティスを確認しながら、後工程でエラーが出にくい構成を整えます。

自分のパソコン（ローカル環境）とGitHubをGitコマンドで接続します。「git clone」「git remote」などの基本コマンドの役割を理解し、ローカルとリモートが同期できる状態を作ります。

Webサイトのコードを変更した後、GitHubに反映させるための「commit（変更の記録）」と「push（GitHubへの送信）」の操作を実践します。この操作は繰り返し使うため、流れを体に覚えさせましょう。

GitHub Pagesの設定画面を開き、「どのブランチからデプロイするか」を設定してWebサイトを公開する手順を解説します。設定完了後にURLが発行されるまでの流れを確認します。

公開設定が正しく完了しているかを確認し、公開・非公開の切り替え方法を学びます。「まだ公開したくない」場合の一時的な非公開設定の方法も解説します。

発行されたURLにアクセスし、Webサイトが正しく表示されているかを検証します。表示崩れやリンク切れのチェック方法と、問題があった場合の最初の対処方針を学びます。GitHub Pagesの公開設定を完成させる

公開後のサイトをスマートフォン・パソコン・タブレットそれぞれで表示確認する方法を解説します。複数デバイスでの見え方の違いと、調整が必要な場合のClaude Codeへの追加指示の出し方を学びます。

「github.io」のデフォルトURLを、自分で取得したオリジナルドメイン（例：yourname.com）に変更する手順を解説します。ドメイン取得サービスの選び方とDNS設定の基本も合わせて確認します。

Claude Codeでのコード生成時によく発生するエラーの種類と、それぞれの対処方法を解説します。「エラーメッセージをそのままClaude Codeに貼り付けて修正させる」方法を実演します。

GitHubへのpush時・GitHub Pages公開時に起こりやすいエラーのケーススタディを紹介します。認証エラー・ブランチ設定ミス・ファイルパスの問題など、初心者が最も詰まるポイントを丁寧に解説します。

1ページだけのサイトから、「トップページ・サービス紹介・お問い合わせ」などの複数ページ構成に発展させる方法を学びます。ページ間リンクの設計とファイル構成のベストプラクティスを解説します。

Claude Codeでのコード生成からGitHub Pagesでの公開完了まで、全工程を振り返ります。各ステップで「何をしているのか・なぜ必要なのか」を再確認し、自力で最初から最後まで進められる状態にします。

この講座で習得したスキルをベースに、次に何を学ぶべきかのロードマップを解説します。副業・ビジネス活用・ポートフォリオ作成など、目的別の次のステップを提示します。