授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
卒業制作の目的を理解し、プロジェクトの方向性とチームの運用ルールを決定出来る。 |
①シラバスの確認、チーム内での役割分担（ディレクター、デザイナー、フロントエンド等）と進行ルールの策定。
②アプローチするクライアントの候補出しと選定理由の言語化。
③関心のある社会問題・トレンドのブレインストーミングと方向性のすり合わせ。
・AI活用による情報収集の効率化とハルシネーション
・「体験」を重視した方向性の検討 |
| 【理解度確認】チームルールまとめ、議事録 |
| 2 |
対象となるクライアントや社会課題について情報を収集し、現状の課題を整理出来る。 |
①企業・店舗へのアポイントメント取得、ヒアリングシートの作成、実地調査および競合調査。
②統計データ、トレンドなどの文献調査と、ターゲットユーザーの解像度向上。定量調査と定性調査の両面から実施。 |
| 【理解度確認】調査結果まとめ |
| 3 |
・収集した情報から潜在的な課題（インサイト）を抽出し、解決すべきコアテーマを設定出来る。 |
①ヒアリング結果を分析し、クライアント自身も気づいていないインサイトの特定。
②調査結果から社会のペインポイントを特定し、Webの力で解決可能なテーマの絞り込み。 |
| 【理解度確認】議事録 |
| 4 |
ユーザーの行動導線を可視化し、As-Is/To-Beのギャップを確認出来る。 |
①テーマに基づいたペルソナの設定。
②ペルソナの行動導線を可視化しAs-Is/To-Beの整理とギャップの明確化。 |
| 【理解度確認】議事録 |
| 5 |
設定したテーマに対する解決策を考案し、提供する新たな体験価値（UX）のコンセプトを立案出来る。 |
①As-Is/To-Beのギャップから導出できる解決策のブレインストーミングと、提供価値（バリュープロポジション）の言語化。
②提供価値に基づいたコンセプトの立案。 |
| 【理解度確認】コンセプト、議事録 |
| 6 |
ユーザーの行動導線を可視化し、Webサイト・サービスの全体構造（情報設計）を構築出来る。 |
①ターゲットユーザーの行動変容を促すシナリオ設計と、機能要件の洗い出し。
②サイトマップの作成と情報設計。 |
| 【理解度確認】シナリオ、サイトマップ、情報設計 |
| 7 |
情報設計に基づいてワイヤーフレームを作成し、システム要件と実装スケジュールを定義出来る。 |
・デザインツールを用いたワイヤーフレームの作成と画面遷移の確認。
・フロントエンド実装要件の定義と、WBSを用いた進行スケジュールの策定。 |
| 【理解度確認】ワイヤーフレーム、WBS |
| 8 |
モックアップを用いた検証を行い、フィードバックをもとに要件やデザインを改善出来る。 |
①UIデザインの制作、インタラクションの設計、およびモックアップの完成。
②モックアップを用いた動作検証とフィードバック。
③実装に必要なフロントエンド技術、外部API（Headless CMS等）の選定。 |
| 【理解度確認】モックアップ、利用技術まとめ |
| 9 |
クラウドサービスを活用し、フロントエンド実装に必要となるサーバーAPIを実装出来る。 |
①Headless CMS（microCMS等）やBaaS（Supabase等）を用いたAPIエンドポイントの用意。
②生成AIを利用した、APIの仕様理解、データベースのスキーマ設計補助、ダミーデータの効率的な生成。
③生成AIを用いた開発のメリットとリスクについての学習。
・開発そのものに対する影響
・ユーザビリティ＆アクセシビリティへの影響 |
| 【理解度確認】APIエンドポイント |
| 10 |
フロントエンドのUI実装とサーバーAPIとのデータ連携を実装出来る。 |
①HTML/CSS/JavaScript等を用いたマークアップと、コンポーネント単位でのUI実装。 |
| 【理解度確認】作品 |
| 11 |
デザインの意図を忠実に再現し、適切なアニメーションやフィードバックによって没入感のあるUXを実装出来る。 |
①CSSアニメーションやJavaScriptを用いた、視覚的に心地よい状態遷移（ホバー、スクロール連動等）の実装。
②データ取得時のローディングUIやエラー表示など、ユーザーのストレスを軽減するマイクロインタラクションの実装。 |
| 【理解度確認】作品 |
| 12 |
実装した作品を用いてユーザーテストを実施し、プロトタイプでは発見できなかったUXの課題を抽出出来る。 |
①クライアントおよび実際の顧客環境を想定した、実装済み画面での操作テストとヒアリング。
②ターゲット層に対する実機テストの実施と、実際の操作感に基づく離脱ポイントの分析。
③テスト結果から、フロントエンドの修正優先度の決定。 |
| 【理解度確認】ユーザーテスト結果、修正方針まとめ |
| 13 |
UXテストの結果に基づいてUIを改善し、併せてアクセシビリティやパフォーマンスの最適化が出来る。 |
①抽出された課題に基づくUIデザインおよびフロントエンドコードの修正。
②WCAGに準拠したセマンティックなマークアップ、コントラスト比の確認、および各種デバイスへのレスポンシブ最適化。 |
| 【理解度確認】ソースコード、作品 |
| 14 |
プロダクトの最終確認を行い、制作プロセスと「どのようなUX価値を生み出したか」を論理的に説明する資料を作成出来る。 |
①クライアントへの最終納品に向けた動作検証と、課題解決のプロセスを示す提案資料の作成。
②社会問題へのアプローチと技術的工夫、生み出したUXの価値をまとめたプレゼン資料の作成。
③「AIをどのように活用して課題（技術的ハードル）を乗り越えたか」を含めた、制作プロセスの言語化。 |
| 【理解度確認】プレゼンテーション資料 |
| 15 |
制作プロセスと成果物を論理的に発表し、プロジェクト全体の振り返りを通じて自身の成長と課題を自己評価出来る。 |
①卒業進級制作展における成果発表。
②来場者からのフィードバックの受容とプロジェクトの振り返り。 |
| 【理解度確認】卒業制作展、リフレクションシート |
