作品制作

第1回

企画・コンセプト設計

Web制作の全体フロー

工程	主な作業	成果物
① 企画	目的・ターゲット・コンセプト定義	企画書・コンセプトシート
② 設計	サイトマップ・ワイヤーフレーム作成	サイトマップ・WF
③ デザイン	ビジュアルデザイン・カンプ作成	デザインカンプ
④ コーディング	HTML/CSS/JS実装	ソースコード一式
⑤ 公開	サーバーアップロード・動作確認	公開済みサイト
⑥ 改善	アクセス解析・フィードバック対応	改善レポート

サイトの目的を定義する

ペルソナとコンセプトシート

ペルソナとはターゲットユーザーを代表する架空の人物像です。基本情報・行動・ニーズを具体的に記述します。ペルソナは1〜3人に絞ることが重要。

第2回

サイト設計・ワイヤーフレーム

サイトマップとワイヤーフレーム

サイトマップはサイト全体のページ構成を階層的に示した図です。ページの数・命名・URLの設計を決めます。

• 色は使わず、グレーのボックスとテキストだけで構成
• コンテンツの優先順位を面積と配置で表現する
• スマートフォン版も合わせて作成（モバイルファーストで設計する）

第3回

デザイン制作

デザインカンプ作成

Adobe XDを使ってWFに色・フォント・画像を当てはめたデザインカンプを作成します。

• 配色 — カラーシステム（プライマリ・セカンダリ・ニュートラル）を先に決める
• フォント選定 — 見出し用ディスプレイフォントと本文用フォントを1〜2種に絞る
• レイアウト — グリッドシステムを設定し、余白を統一する

第4回

HTML/CSSコーディング①

HTMLの骨格とナビゲーション

• セマンティックHTMLで構造を記述（header・main・footer・nav・section）
• グローバルナビゲーションは nav 要素で作成
• ヒーローセクションは section に背景画像・キャッチコピー・CTAボタンを配置

第5回

HTML/CSSコーディング②

カードレイアウトとフォーム

• カードレイアウトはFlexboxまたはCSS Gridで実装
• フォームはHTML5のバリデーション属性（required・type="email"）を活用
• CSSカスタムプロパティ（変数）でカラー・フォント・余白を一元管理する

第6回

レスポンシブ・JavaScript実装

レスポンシブデザインとJavaScript

• モバイルファーストで設計し、min-width のメディアクエリで拡張する
• ハンバーガーメニュー — classList.toggle でメニューの開閉を制御
• スクロールアニメーション — IntersectionObserverで要素の表示を検知してclassを付与

第7回

公開・FTPアップロード

サーバーとドメイン

用語	説明
ドメイン	Webサイトの住所（例：example.com）。お名前.comなどで取得
共有レンタルサーバー	複数サイトで1台のサーバーを共有。安価で初心者向け（Xserver・Sakuraなど）
静的ホスティング	HTML/CSS/JSのみのサイトに最適。Netlify・Vercel・CloudFlare Pagesは無料プランあり

第8回

改善・振り返り・まとめ

公開後の改善サイクル

• Google Analytics 4（GA4）のトラッキングコードをサイトに設置
• ヒートマップツール（Hotjar・MicrosoftClarity）でユーザーのクリック位置・スクロール深度を把握
• Google PageSpeed Insightsでページ速度（Core Web Vitals）を改善