無料個別相談
Capstone sampleSAMPLE ── 模擬案件の例です

総合制作の
進め方

講師がクライアント役を務める模擬案件を例に、依頼が届いてから世界のアワードに応募するまでの38工程で、どんな成果物をつくるのかを並べました。

クライアント（模擬）
パンと珈琲 こむぎのね（講師がクライアント役）
依頼
若い世代に知ってもらい、予約をWebに移したい
つくるもの
ブランドサイト＋店頭受け取り予約
担当
受講生ひとり（38工程すべて）

※総合制作は、講師がクライアント役を務める模擬案件です。この事例は、流れを説明するための架空のサンプルで、実在のお店・受講生とは関係ありません。

komuginone.example
こむぎのねパンお店予約

焼きたての、
ちょっといい朝を。

毎朝7時、店頭で焼きあがります店頭受け取りを予約
塩バターロール季節のカンパーニュ朝のコーヒー
Deliverables

ひとつの案件で、
これだけのものをつくる。

下の成果物は、すべて総合制作の中で、受講生ひとりが自分の手でつくるものです。

  • 38工程
  • 29成果物（このサンプルの場合）
  • 1公開を想定したWebサイト
  • 1アワードの応募フォームの例
Find a sample

成果物から、制作の中身を見る。

Beyond the final screenshot

完成画面だけでは、制作の力はわからない。

初稿から修正までの過程、提案の根拠、実装の判断、品質確認、公開後の改善。制作会社で働く場合も、フリーランスとして受注する場合も、その前後を説明できる力が必要です。ここにある成果物は教育方法を示す模擬案件であり、受講生の実績として掲載しているものではありません。

気になる成果物から、初稿・レビュー・修正の具体例へ進めます。以下は架空の案件のサンプルです。

このページに掲載している29点への目次です。提案書・見積書の制作工程は、総合制作の38工程で確認できます。

38 steps in practice

最初のメールから、
世界のアワードまで。

工程ごとに、実際にどんな成果物ができあがるのかを見てください。

Phase 101–08

受注・要件定義

クライアント役の講師から依頼を受け、模擬ヒアリングと調査をもとに要件を定義します。

01依頼が届く：クライアント役からの問い合わせ問い合わせ

差出人こむぎのね 店主（クライアント役：講師）件名ホームページについてのご相談

はじめまして。駅前でパンと珈琲の店をしています。ホームページを新しくしたいと思っています。

若いお客さんにも来てほしいのと、朝の電話予約が大変で……。予算はあまり多くはありません。一度、相談に乗っていただけますか。

01最初の返信：お礼と日程調整メール

件名Re: ホームページについてのご相談差出人受講生

お問い合わせありがとうございます。朝の予約のご負担と、新しいお客さまへの届け方について、ぜひお話を伺わせてください。

30分ほど、オンラインでヒアリングのお時間をいただけますでしょうか。ご都合のよい日時を、次の候補からお選びください（2026年10月8日（木）10:00〜／10月9日（金）14:00〜）。

02模擬ヒアリング：オンライン会議（講師がクライアント役）ヒアリング

クライアント役（講師）
受講生
現場でよくあることも、そのまま再現します
予算が決まっていない話が途中で変わる専門用語が通じない

02ヒアリングシート・議事録ヒアリング

  • いちばんの悩みは？朝の電話予約で、焼きの手が止まる
  • 来てほしいお客さんは？近くに越してきた、30代の共働き家族
  • お店の強みは？毎朝7時の焼きたてと、自家焙煎のコーヒー
  • 予算と時期は？開店記念日の3月までに公開したい。予算は相談しながら決めたい

02講師のふりかえりレビュー

ヒアリング後のフィードバック（サンプル）

「若いお客さん」が誰なのか、もう一歩聞けるとよかったですね。年齢や暮らし方まで聞くと、ペルソナの精度が上がります。予算は「いくらまでなら」と上限から聞くのも手です。

03RFP・要件定義のまとめ要件定義

目的新しいお客さんに知ってもらい、予約をWebに移す
KGIWebからの予約を、電話予約より多くする
KPI予約ページへの到達数、Instagramからの流入数
必要な機能店頭受け取り予約、お知らせ更新、地図・営業時間
非機能要件スマホでも速く表示でき、誰でも使える（WCAG 2.2 AA）

04–05リサーチ・競合分析競合分析

比較項目A店（架空）B店（架空）こむぎのね
Web予約×電話のみ○ 店頭受け取り
焼き上がり時間記載なし○○ 毎朝7時
スマホ表示△ 崩れる○○

06ユーザー分析：ペルソナペルソナ

佐藤 美咲さん（34歳・架空）共働き・保育園の送り迎えあり平日の朝は5分でも惜しい。でも、週末の朝ごはんは少しだけ丁寧にしたい。お店に寄る前に、スマホで焼き上がりを確かめたい。

07–08戦略・コンセプトコンセプト

焼きたての、
ちょっといい朝を。

「毎朝7時の焼きたて」を、予約ひとつで確実に受け取れる店へ

Phase 209–15

設計・デザイン

サイトマップとワイヤーフレームで構成を設計し、UIデザインを作成します。

09–11UX・IA：サイトマップサイトマップ

  • トップ
    • 今日の焼き上がり
    • パンの紹介
      • 定番
      • 季節のパン
    • 店頭受け取り予約
      • 予約フォーム
      • 予約の確認
    • お店について（地図・営業時間）
    • お知らせ（CMS）

12ワイヤーフレームワイヤー

12ワイヤーフレーム：初稿 → フィードバック → 修正版レビュー

v1（初稿）：予約ボタンが3スクロール目
予約する1

1メンターのフィードバック（サンプル）

この案件の目的は「電話予約を減らすこと」でしたね。今は予約ボタンが3スクロール目にあります。最初の画面で「予約できる」と分かるようにしましょう。ボタンの文言も、「予約する」より、何ができるかが伝わる言葉にしましょう。

v2（修正版）：最初の画面に予約ボタン

焼きたての、
ちょっといい朝を。

店頭受け取りを予約✓

13–14UI・ビジュアルデザインFigma

こむぎのねパンお店予約

焼きたての、
ちょっといい朝を。

毎朝7時、店頭で焼きあがります店頭受け取りを予約
塩バターロール季節のカンパーニュ朝のコーヒー

13–14デザインレビュー：Before → フィードバック → Afterレビュー

Before：伝えたいことが同じ強さ
焼きたて予約1お店の歴史

1デザインレビュー（サンプル）

色を変える前に、情報の優先度から直しましょう。「焼きたて」と「予約」と「お店の歴史」が、同じ強さで並んでいます。いちばん伝えたいのはどれですか？

After：見出しと予約に絞った

焼きたての、
ちょっといい朝を。

店頭受け取りを予約✓
お店の歴史

15デザインシステム・プロトタイプトークン

#B64B24
Primary#3B2416
Text#FFF8EF
Base#F3D9B8
Bread
Aa あ見出し 24/32・本文 16/28
コントラスト比 4.5:1 以上

Phase 316–23

実装

デザインをもとにHTML・CSS・JavaScriptで実装し、店主が更新できるようにCMSを組み込みます。

16–19HTML・CSS・JavaScript・Frontendコード

<!-- 予約ページへのリンク：href を持つ a 要素で、キーボードでも移動できるように -->
<section class="hero" aria-labelledby="hero-h">
  <h1 id="hero-h">焼きたての、ちょっといい朝を。</h1>
  <a class="btn" href="/reserve/">店頭受け取りを予約</a>
</section>
.hero { min-block-size: 100svh; padding-block-start: env(safe-area-inset-top); }

16–19コードレビュー：Before → フィードバック → Afterレビュー

Before
<div class="btn"
  onclick="reserve()">
  予約する
</div>

コードレビュー（サンプル）

divにonclickだけでは、キーボードで操作できません。この例のように画面内で予約フォームを開く処理にはbutton要素を使い、別ページへ移動する場合はa要素を使います。文言も、操作の結果がわかる言葉にしましょう。

After
<button type="button"
  class="btn">
  店頭受け取りを予約
</button>

20CMS：お知らせの更新画面WordPress

こむぎのね 管理お知らせ今日の焼き上がり予約一覧
＋ 新規作成
秋のカンパーニュ、はじめました公開中
年末年始の営業時間公開中
コーヒー豆の量り売り下書き

21–23アクセシビリティ・レスポンシブチェック

  • キーボードだけで予約できるWCAG 2.1.1
  • 文字と背景のコントラスト4.5:1
  • 画像に代替テキストWCAG 1.1.1
  • スマホの画面の端まで崩れずに表示Safe Area
  • 320pxでも崩れないReflow

21–23アクセシビリティレビュー：Before → フィードバック → Afterレビュー

Before：自動チェックの結果
2件の問題・ボタンの文字のコントラストが足りない（3.1:1）
・商品の画像に代替テキストがない

アクセシビリティレビュー（サンプル）

文字と背景のコントラストは、4.5:1以上にしましょう。画像の代替テキストは「画像」ではなく、商品名と特徴を短く書きましょう。直したら、キーボードと読み上げでも確かめてください。

After
問題なし・コントラスト 5.2:1
・代替テキスト：「塩バターロール。外はパリッと、中はふんわり」
基準初稿修正版
文字のコントラスト（4.5:1以上）NGPass
画像の代替テキストNGPass
キーボードで操作できるPassPass
フォーカスが見えるPassPass
部品の名前と役割が伝わるPassPass

Phase 424–32

テスト・公開

表示速度・セキュリティ・アクセシビリティを検証し、自動テストを通してから本番環境に公開します。

24–27品質：テストと実機確認QA

  • 表示速度（Core Web Vitals）LCP・CLS・INP
  • セキュリティ（フォーム・ヘッダー）OWASP
  • 予約フォームの異常系テストPlaywright
  • iPhone / Android の実機確認Safari・Chrome

28Git：変更の履歴Git

main

feat: 店頭受け取り予約フォーム 3d

fix: 予約ボタンのフォーカス表示 2d

perf: 画像をAVIFに変換 2d

chore: 本番へデプロイ 1d

29–31CI/CD・インフラ・DNSデプロイ

$ git push origin main
✓ Lint passed
✓ Unit & E2E tests passed
✓ Accessibility check passed (axe)
✓ Build completed
✓ Ready to deploy（サンプル）→ https://komuginone.example

32本番公開（想定）公開

komuginone.exampleDemo
こむぎのねパンお店予約

焼きたての、
ちょっといい朝を。

毎朝7時、店頭で焼きあがります店頭受け取りを予約
塩バターロール季節のカンパーニュ朝のコーヒー

Phase 533–37

納品・運用

操作マニュアルを添えて納品し、公開後はアクセス解析をもとに運用・改善を提案します。

33–34アクセス解析・SEOGA4

予約ページへの到達数の推移（イメージ）。データを見て、次の改善を決めます。

35納品：操作マニュアル納品

お知らせ管理画面の「新規作成」から、写真と文章を入れて公開
焼き上がり毎朝、焼き上がった商品にチェックを入れるだけ
予約の確認予約一覧で、受け取り時間順に確認

36–37運用・改善提案改善

改善前：予約ボタンが下のほう
予約する1
改善後：最初の画面に予約ボタン

焼きたての、
ちょっといい朝を。

店頭受け取りを予約✓

Final38

CSS Design Awardsに応募する

完成したプロジェクトを、CSS Design Awardsに応募します。

38制作レビュー：基準ごとの評価判定

評価項目基準結果
要件定義目的・指標・必要な機能が、根拠とともにまとまっているPass
UI・デザインデザインの意図を、言葉で説明できるPass
コードHTMLの意味づけ・レスポンシブ・保守性の基準を満たすPass
アクセシビリティWCAG 2.2 AAの必須項目を満たすPass
品質・テスト重大な不具合がない（テスト項目表で確認）Pass
プレゼンテーションクライアント役に、制作の意図と成果を説明できるPass

制作レビュー：すべての到達目標を達成（サンプル）。完成後も質問・レビューを続けられます。

38応募フォームCSSDA

CSS DESIGN AWARDS

Website submission

Project
パンと珈琲 こむぎのね（架空）
URL
https://komuginone.example
Judged on
UI / UX / Innovation
Made by
想定受講生による制作例
Submission example
Next

まずは面談だけでも、お気軽にどうぞ。

毎月2名限定。卒業・受講期限なし。制作後も学び続け、質問できます。

無料個別相談を予約総合制作のページへ戻る

毎月2名まで受講できます