完全なウェブサイトを構築する

🔄 Quick Recall: このコースを通して、HTML構造の構築、CSSスタイリング、JavaScriptのインタラクティビティ追加、デバッグ、パフォーマンス最適化、SEO付きデプロイを学んだ。すべてを使って完全なプロジェクトを構築しよう。

キャップストーンプロジェクト：ポートフォリオサイトの構築

この演習では、実際のデプロイ可能なポートフォリオサイトを構築する。自分のニーズに合わせてアレンジしよう——個人ポートフォリオ、ビジネスランディングページ、プロジェクトショーケースでもいい。

フェーズ1：計画

コードを書く前に、何を作るか定義する：

以下のページを持つポートフォリオサイトを計画：

1. ホーム — ヒーローセクション、自己紹介プレビュー、
   注目プロジェクト（3件）、お客様の声、CTA
2. 作品集 — カテゴリでフィルタリングできる6件以上のプロジェクトカード
3. 自己紹介 — 経歴、スキル、経験タイムライン
4. お問い合わせ — バリデーション付きフォーム

デザイン制約：
- バニラHTML、CSS、JavaScript（フレームワークなし）
- モバイルファーストレスポンシブデザイン
- システム設定によるダークモードサポート
- 目標：Lighthouse全項目90点以上

ファイル構造、コンポーネントリスト、構築順序を作成。

✅ Quick Check: なぜプロンプトの前に計画するのか？ 何が必要かを正確に知っていると、AIはより良いコードを生成する。漠然としたリクエスト（「ポートフォリオを作って」）は汎用的な出力。具体的な計画（「2つのCTAを持つヒーローセクション、フィルタリングできるプロジェクトグリッド、バリデーション付きフォーム」）は焦点の絞られたレビュー可能なコンポーネントを生む。

フェーズ2：HTML構造

各ページのHTMLをコンポーネントごとに構築：

ホームのヒーローセクション：

ホームページのヒーローセクションのHTMLを作成：
- 名前と肩書きの大きな見出し
- 短いキャッチコピー（1〜2文）
- 2つのCTAボタン：「作品を見る」「お問い合わせ」
- 背景要素（CSSで後からスタイリング）

セマンティックHTML、アクセシブル、CSS・JavaScriptなし。

プロジェクトカード：

プロジェクトショーケースグリッドのHTMLを作成：
- 6枚のプロジェクトカード：画像、タイトル、説明、
  技術タグ、「プロジェクトを見る」リンク
- 上部にフィルターボタン：すべて、Web、デザイン、アプリ
- 各カードはリスト内のarticle要素

フィルターボタンにaria-label、適切な見出し階層を含める。

各コンポーネントのHTMLをレビューしてから次に進む。

フェーズ3：CSSスタイリング

レッスン3のデザインシステムを適用：

ステップ1： デザイントークンを生成（色、スペーシング、タイポグラフィのカスタムプロパティ）。

ステップ2： CSS Grid（ページ構造）とFlexbox（コンポーネント内部）でレイアウト。

ステップ3： レスポンシブ対応を追加：

このページをレスポンシブに：

[現在のCSSを貼り付け]

ブレークポイント：
- モバイル：ベーススタイル（< 768px）
- タブレット：768px（2カラムグリッド、横並びレイアウト）
- デスクトップ：1024px（3カラムグリッド、max-widthコンテナ）

カスタムプロパティオーバーライドでダークモードも追加。

フェーズ4：JavaScriptのインタラクティビティ

コンポーネントに動作を追加：

プロジェクトフィルタリング：

プロジェクトカードをフィルタリングするバニラJavaScriptを作成：
- フィルターボタン：すべて、Web、デザイン、アプリ
- フィルタークリックでマッチするカードだけ表示
- 「すべて」ですべて表示
- カードの表示/非表示にスムーズなフェードトランジション
- アクティブフィルターをURLに反映（?category=web）
- アクティブフィルターボタンに視覚的ハイライト

依存なし。

お問い合わせフォームのバリデーション：

フォームバリデーションを作成：名前（必須）、メール（必須、有効形式）、
件名（必須）、メッセージ（必須、20文字以上）。
textContentで各フィールド下にエラー表示。有効になるまで送信を阻止。
アクセシブルなエラーアナウンスを含める。

モバイルナビゲーション：

モバイルハンバーガーメニューのバニラJavaScriptを作成：
- トグルボタンでナビの表示/非表示
- メニューは右からスライドイン
- オーバーレイが背景を覆う
- Escapeキーでメニューを閉じる
- 開いたメニュー内にフォーカスをトラップ
- トグルでaria-expandedを更新

依存なし。

フェーズ5：最適化とSEO

デプロイ前にすべてを最適化：

完成したウェブサイトのデプロイ準備をレビュー：

[ページと機能を説明]

監査：
1. パフォーマンス — 画像の遅延読み込み？ CSS/JS縮小？
   クリティカルリソースのプリロード？
2. SEO — 全ページにユニークなtitle、description、OGタグ？
3. アクセシビリティ — キーボードナビゲーション、スクリーンリーダー互換性、
   コントラスト比？
4. クロスブラウザ — Safari/Firefoxで壊れるCSS/JS？
5. セキュリティ — ユーザー入力の安全でない処理？

優先順位付きの修正リストを提供。

フェーズ6：デプロイ

1. GitHubリポジトリにコードをプッシュ
2. NetlifyまたはVercelに接続
3. カスタムドメインを設定（または無料サブドメインを使用）
4. Google Search Consoleにサイトマップを送信
5. 公開サイトで最終Lighthouseを実行

テストチェックリスト

完了と言う前に：

コースレビュー

学んだすべてが接続する：

1. AIとパートナーシップ（レッスン1）— 小さくプロンプト、すべてレビュー、反復
2. HTML構造（レッスン2）— セマンティック要素、アクセシビリティ、フォーム
3. CSSスタイリング（レッスン3）— デザイントークン、Grid/Flexbox、レスポンシブ、ダークモード
4. JavaScript（レッスン4）— DOM操作、イベント、バリデーション、セキュリティ
5. インタラクティブ機能（レッスン5）— API連携、検索/フィルター、アクセシブルなコンポーネント
6. デバッグ（レッスン6）— エラー診断、パフォーマンス最適化、Core Web Vitals
7. デプロイ（レッスン7）— ホスティング、SEOメタタグ、構造化データ、モニタリング

Key Takeaways

• レイヤーで構築：HTML構造→CSSスタイリング→JavaScript動作→最適化——各レイヤーが前のレイヤーの上に構築される
• 大きなプロジェクトは小さなコンポーネントに分割し、AIに1パーツずつプロンプトする——焦点を絞ったリクエストがより良いコードを生む
• デプロイ前に複数デバイス、ブラウザ、入力方法（キーボード、スクリーンリーダー）でテスト——開発環境はユーザーを代表しない
• すべてのウェブサイトに必要：レスポンシブデザイン、キーボードアクセシビリティ、高速読み込み、適切なメタタグ、構造化データ
• AI活用ワークフロー（計画→プロンプト→レビュー→テスト→反復）はシンプルなランディングページから複雑なアプリケーションまであらゆるWebプロジェクトに機能する
• 学び続けよう：React、Vue、Svelteなどのフレームワークはここでマスターしたバニラの基礎の上に構築される

コース修了おめでとうございます。 AIを開発パートナーとしてウェブサイトを構築する方法を学んだ。ここで実践したセマンティックHTML、レスポンシブCSS、アクセシブルなJavaScript、パフォーマンス最適化の基礎は、フレームワークの有無に関わらず、すべてのWebプロジェクトの土台だ。