Skip to Content
Lecture第11回：総合制作①（企画・設計）

第11回：総合制作①（企画・設計）

🎯 学習目標

本講義では、これまでの学習内容を統合して、オリジナルWebサイトの制作に取り組みます。今回は企画立案と設計フェーズに焦点を当てます。

  • 企画力: サイトの目的とターゲットユーザーを明確に定義できる
  • 設計力: ワイヤーフレームと技術構成を設計できる
  • 計画力: 制作スケジュールと実装計画を立てられる
  • 総合応用: HTML、CSS、JavaScriptの知識を統合的に活用できる

📚 導入（10分）

総合制作について

これまでの10回の講義で学習した技術：

  • HTML: セマンティックなマークアップ、フォーム、アクセシビリティ
  • CSS: レスポンシブデザイン、Flexbox、Grid、アニメーション
  • JavaScript: DOM操作、イベント処理、API連携、非同期処理

これらを統合して、実用的なWebサイトを制作していきます。

制作の流れ（全3回）

  1. 第11回（今回）: 企画・設計
  2. 第12回: 実装・開発
  3. 第13回: 完成・発表・振り返り

💡 理論学習（30分）

1. Webサイト企画の基本プロセス

1.1 目的の明確化

問い：なぜこのサイトを作るのか？
- 情報提供
- サービス紹介
- コミュニティ形成
- ポートフォリオ
- 学習記録

1.2 ターゲットユーザーの定義

ペルソナ設定例：
- 年齢層
- 職業・属性
- 利用デバイス
- 技術レベル
- 利用シーン

1.3 コンテンツ設計

必要なページ・機能：
- トップページ
- 詳細ページ
- お問い合わせ
- 検索・フィルタ
- インタラクティブ要素

2. UI/UX設計の基本

2.1 情報設計

サイトマップの作成：
Home
├── About
├── Services
│   ├── Service A
│   └── Service B
├── Portfolio
│   └── Project Details
└── Contact

2.2 ワイヤーフレーム設計

レイアウトパターン：
- ヘッダー（ナビゲーション）
- メインコンテンツ
- サイドバー（必要に応じて）
- フッター

3. 技術選定と構成

3.1 フロントエンド技術スタック

<!-- 基本構成 -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- メタ情報 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO対応 -->
    <title>サイトタイトル</title>
    <meta name="description" content="サイト説明">
    
    <!-- スタイル -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- コンテンツ -->
    <script src="js/main.js"></script>
</body>
</html>

3.2 ファイル構成

project/
├── index.html
├── css/
│   ├── reset.css
│   ├── style.css
│   └── responsive.css
├── js/
│   ├── main.js
│   └── api.js
├── images/
└── README.md

🛠️ 実習（40分）

ステップ1: 企画立案（15分）

課題: サイト企画書の作成

# Webサイト企画書
 
## 1. サイト概要
- サイト名：
- 目的：
- ターゲット：
 
## 2. 主要機能
- [ ] 機能1
- [ ] 機能2
- [ ] 機能3
 
## 3. 技術要件
- HTML5セマンティックマークアップ
- レスポンシブデザイン
- JavaScript インタラクション
- API連携（オプション）

ステップ2: ワイヤーフレーム作成（15分）

手書きまたはデジタルツールでレイアウト設計

┌─────────────────────────────┐
│          Header             │
│    Logo    Navigation       │
├─────────────────────────────┤
│                             │
│        Hero Section         │
│                             │
├─────────────────────────────┤
│   Content   │   Sidebar     │
│             │               │
│             │               │
├─────────────────────────────┤
│          Footer             │
└─────────────────────────────┘

ステップ3: 技術仕様書作成（10分）

実装予定の技術要素をリストアップ

## 技術仕様
 
### HTML
- [ ] セマンティック要素の使用
- [ ] フォームバリデーション
- [ ] アクセシビリティ対応
 
### CSS
- [ ] Flexbox/Grid レイアウト
- [ ] レスポンシブデザイン
- [ ] CSS アニメーション
 
### JavaScript
- [ ] DOM操作
- [ ] イベント処理
- [ ] API連携

💼 プロジェクトテーマ例

1. ポートフォリオサイト

  • 自己紹介、スキル、作品紹介
  • お問い合わせフォーム
  • SNSリンク

2. 地域情報サイト

  • 地域のお店・イベント紹介
  • 地図API連携
  • 検索・フィルタ機能

3. 趣味のコミュニティサイト

  • 投稿機能（仮想）
  • ギャラリー
  • ユーザーインタラクション

4. 学習支援サイト

  • 資料整理
  • 進捗管理
  • クイズ機能

📝 まとめ・質疑応答（10分）

今回のポイント

  1. 目的とターゲットの明確化が成功の鍵
  2. ワイヤーフレームで開発前にレイアウトを固める
  3. 技術要件の整理で実装をスムーズに進める
  4. 段階的な開発計画でプロジェクトを管理

次回に向けて

  • 企画書とワイヤーフレームの完成
  • 必要な素材（画像、テキスト）の準備
  • 開発環境の整備

Q&A

  • 企画の進め方について質問
  • 技術的な実装に関する相談
  • デザインやUIについてのアドバイス

🏠 宿題

必須課題

  1. 企画書の完成

    • サイト目的、ターゲット、機能の明確化
    • 3ページ以上の構成

  2. 詳細ワイヤーフレーム

    • 各ページのレイアウト設計
    • モバイル版とデスクトップ版

オプション課題

  1. デザインカンプ作成

    • カラースキーム決定
    • フォント選定

  2. 素材準備

    • 画像素材収集
    • コンテンツテキスト準備

提出物

  • 企画書（Markdown形式推奨）
  • ワイヤーフレーム（画像ファイル）
  • 次回までの準備リスト

次回予告: 第12回では設計したサイトの実際の実装に取り組みます。HTML/CSS/JavaScriptを使って機能的なWebサイトを構築していきましょう！

Last updated on
第10回：JavaScript応用とAPI第12回：総合制作②（実装・開発）