完全なウェブサイトを構築する
AIの支援でウェブサイトをゼロから構築する——HTML構造、CSSスタイリング、JavaScriptのインタラクティビティ、SEO最適化を1つのプロジェクトに統合。
プレミアムコースコンテンツ
このレッスンはプレミアムコースの一部です。Proにアップグレードすると、すべてのプレミアムコースとコンテンツを利用できます。
- すべてのプレミアムコースを利用
- 1,000以上のAIスキルテンプレート付き
- 毎週新しいコンテンツを追加
🔄 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:デプロイ
- GitHubリポジトリにコードをプッシュ
- NetlifyまたはVercelに接続
- カスタムドメインを設定(または無料サブドメインを使用)
- Google Search Consoleにサイトマップを送信
- 公開サイトで最終Lighthouseを実行
テストチェックリスト
完了と言う前に:
| テスト | 方法 | 目標 |
|---|---|---|
| モバイルレイアウト | Chrome DevToolsで375px | すべてのコンテンツが読める、横スクロールなし |
| タブレットレイアウト | DevToolsで768px | グリッドが調整、ナビが使える |
| デスクトップレイアウト | フルブラウザ幅 | max-widthコンテナ、快適な読み幅 |
| キーボード | サイト全体をTabで操作 | すべてのインタラクティブ要素に到達・操作可能 |
| スクリーンリーダー | VoiceOver(Mac)またはNVDA(Windows) | ランドマーク、見出し、ラベルが正しくアナウンス |
| 低速ネットワーク | DevTools → Network → Slow 3G | 5秒以内にページロード |
| クロスブラウザ | Chrome AND Firefox AND Safari | 一貫した見た目と機能 |
| Lighthouse | DevTools → Lighthouse → 全カテゴリ | パフォーマンス、アクセシビリティ、ベストプラクティス、SEOすべて90点以上 |
コースレビュー
学んだすべてが接続する:
- AIとパートナーシップ(レッスン1)— 小さくプロンプト、すべてレビュー、反復
- HTML構造(レッスン2)— セマンティック要素、アクセシビリティ、フォーム
- CSSスタイリング(レッスン3)— デザイントークン、Grid/Flexbox、レスポンシブ、ダークモード
- JavaScript(レッスン4)— DOM操作、イベント、バリデーション、セキュリティ
- インタラクティブ機能(レッスン5)— API連携、検索/フィルター、アクセシブルなコンポーネント
- デバッグ(レッスン6)— エラー診断、パフォーマンス最適化、Core Web Vitals
- デプロイ(レッスン7)— ホスティング、SEOメタタグ、構造化データ、モニタリング
Key Takeaways
- レイヤーで構築:HTML構造→CSSスタイリング→JavaScript動作→最適化——各レイヤーが前のレイヤーの上に構築される
- 大きなプロジェクトは小さなコンポーネントに分割し、AIに1パーツずつプロンプトする——焦点を絞ったリクエストがより良いコードを生む
- デプロイ前に複数デバイス、ブラウザ、入力方法(キーボード、スクリーンリーダー)でテスト——開発環境はユーザーを代表しない
- すべてのウェブサイトに必要:レスポンシブデザイン、キーボードアクセシビリティ、高速読み込み、適切なメタタグ、構造化データ
- AI活用ワークフロー(計画→プロンプト→レビュー→テスト→反復)はシンプルなランディングページから複雑なアプリケーションまであらゆるWebプロジェクトに機能する
- 学び続けよう:React、Vue、Svelteなどのフレームワークはここでマスターしたバニラの基礎の上に構築される
コース修了おめでとうございます。 AIを開発パートナーとしてウェブサイトを構築する方法を学んだ。ここで実践したセマンティックHTML、レスポンシブCSS、アクセシブルなJavaScript、パフォーマンス最適化の基礎は、フレームワークの有無に関わらず、すべてのWebプロジェクトの土台だ。
理解度チェック
まず上のクイズを完了してください
レッスン完了!