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

ビジネス内容をClaude Codeに伝えるためのプロンプト（指示文）の書き方を学びます。「業種・強み・ターゲット・掲載したい情報」を整理して指示するコツを把握し、実際にホームページのHTMLファイルを生成する手順を体験します。

Claude Codeがコードを生成・実行する仕組みを理解します。生成されたファイルの種類（HTML・CSS・JavaScriptの3ファイル）を確認し、それぞれの役割を把握します。この段階で「AIがどうコードを出力するか」の流れを体験します。

GitHubのアカウント作成・リポジトリの作成・ファイルのアップロード方法を学びます。コミット（変更の記録・保存）の概念を理解し、画像ファイルをGitHubで管理する方法を実際の操作で確認します。

Claude Codeへのプロンプトで、サイト内に画像を挿入・配置する方法を学びます。画像パスの指定方法・代替テキストの設定方法・サイズ調整のプロンプト例を実際に試しながら習得します。

生成されたコードの不要部分を削除・修正する方法と、ファイルとフォルダを整理する手順を学びます。サイトの構成をスッキリさせるためのファイル管理の考え方を習得します。

GitHubのPages機能を使い、作成したウェブサイトに固有のURLを発行して公開する手順を学びます。スマートフォン・他のパソコンからも閲覧できる状態にするまでの全工程を確認し、「公開できた」という達成感を体験します。

著作権フリーのストック写真サービス（Unsplash・Pexels等）の使い方と、商用利用可能な画像の選び方を学びます。画像のサイズ最適化（ファイルサイズを小さくする方法）とサイトへの挿入手順も確認します。

HTMLの基本的なタグ構造とCSSのスタイル記述の仕組みを初心者向けに解説します。フォントの変更・色の変更・余白の調整・ボタンのデザインなど、見た目に直結する編集方法を実践します。

Visual Studio Code（VSCode）のインストールと基本操作を学びます。HTMLファイルとCSSファイルを開いて直接編集し、ブラウザでリアルタイムにプレビューを確認しながらデザインを調整する方法を習得します。

ローカル（自分のパソコン）で編集したファイルをGitHubにアップロードし、インターネット上の公開サイトに変更を反映（デプロイ）させる手順を学びます。「編集→保存→アップロード→反映」のサイクルを習慣化します。

見た目のクオリティをさらに高めるデザイン改善の具体的テクニックを学びます。配色のバランス・フォントの使い分け・余白の取り方・ファーストビューの作り方など、デザインの基本原則をウェブサイト制作に応用します。

自分のビジネスアイデアや提供したいサービスをウェブサイトに実装する具体的な方法を学びます。「売れそうかどうかをサイトでテストする」というリーンスタートアップ的な考え方を取り入れ、最小工数でアイデアを形にする手順を確認します。

Googleなどの検索エンジンでサイトを上位表示させるためのSEO（検索エンジン最適化）の基礎を学びます。タイトルタグ・メタディスクリプション・見出し構造・キーワードの入れ方など、Claude Codeへの指示で対応できるSEO設定を実践します。

トップページだけでなく、「サービス紹介ページ」「プロフィールページ」「お問い合わせページ」など複数のページを持つサイトを構築する方法を学びます。ページ間のリンク設定・ナビゲーションメニューの作成も確認します。

ウェブサイトにデータ解析・自動回答・フォーム送信などのアプリ的な機能を組み込む方法を学びます。Claude Codeを使って機能をプロンプト指示で実装するアプローチを体験し、単なる紹介サイトを超えた「機能するサイト」の作り方を習得します。

従来のウェブ制作（エンジニアがコードを書く・WordPressを使う・ノーコードツールを使う）とClaude Codeを使ったAI主導の開発を比較します。それぞれのメリット・デメリットと、どのシーンでClaude Codeが最も有効かを整理します。

試作版（プロトタイプ）として作ったサイトを、実際にビジネスに使える本番環境に移行するための手順とチェックポイントを学びます。セキュリティ・表示速度・モバイル対応・バックアップの基礎も確認します。

「アイデア→プロンプト設計→生成→編集→デプロイ→改善」の制作サイクルを習慣化する方法を学びます。プロのウェブデザイナーが使うワークフローの考え方を取り入れ、クオリティを継続的に向上させる体制の作り方を確認します。

ウェブ制作スキルを今後どのように伸ばしていくかの学習戦略を立てます。AIウェブ開発のスキルロードマップ（初級→中級→上級）を整理し、次に学ぶべき内容（AIアプリ開発・フロントエンド・ビジネス展開）の方向性を確認します。

ウェブサイトで使う画像・フォント・アイコンなどの素材に関する著作権・ライセンスの基礎を学びます。商用利用できる素材と使えない素材の違い・正しいクレジット表記の方法・おすすめの無料素材サービスを整理します。

Claude Codeを使ったウェブ開発の全体像を最終回として振り返ります。この講座で学んだ「プロンプト設計→サイト生成→GitHub公開→デザイン改善→SEO対応→機能拡張」の一連の流れを整理し、今後の実践への第一歩を踏み出すための具体的なアクションプランを確認します。