授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
ユーザビリティとは何か、説明出来る。
UI・UXとユーザビリティの関係を理解し、説明出来る。
デザインとUI/UXを見直す。 |
・ユーザビリティとは
ユーザビリティの成功事例・失敗事例
・UI・UX
・ユーザ中心設計 |
| 【理解度確認】演習問題 |
| 2 |
サイトを設計するだけでなくデザイン性も向上させる。Webサイトを使いやすくするために今一度CSSを復習 |
・CSSのデザイン性を改めて理解する
・既存HTMLにCSSを再構築
・使いやすいサイトの確認 |
| 【理解度確認】演習問題 |
| 3 |
収集したユーザの意見を分析し、ユーザのインサイトを導くことが出来る。
CSSの実装と見た目の変化がわかる。見た目から使いやすさを知る。 |
・データ分析法
質的データ分析、KJ法
・ペルソナとは
・ペルソナの意味と役割
・ペルソナの作成 |
| 【理解度確認】演習問題 |
| 4 |
PCだけではなくスマートフォン最適化が求められている。スマートフォン対応にするさいのポイントを知る。 |
・スマートフォン対応CSSの構築
|
| 【理解度確認】演習問題 |
| 5 |
ユーザビリティの評価に用いられるワイヤーフレーム、モックアップ、プロトタイプの作成手法について理解し、説明出来る。
ワイヤーフレームを作成出来る。 |
・プロトタイプとは
・ワイヤーフレーム、モックアップとの違い
・ワイヤーフレームの作成 |
| 【理解度確認】演習問題 |
| 6 |
ワイヤーフレームからペーパープロトタイプを作成出来る。 |
・プロトタイプ制作のポイント
・ペーパープロトタイプの作成 |
| 【理解度確認】演習問題 |
| 7 |
ユーザビリティの評価手法について理解し、説明出来る。
ペーパープロトタイプに対してヒューリスティック評価を行い、問題点を改善出来る。 |
・ユーザビリティ評価法
・ヒューリスティック評価、認知的ウォークスルー、ユーザテスト
・ヒューリスティック評価の実践 |
| 【理解度確認】演習問題 |
| 8 |
ユーザテストの種類や注意事項について理解し、説明出来る。
モックアップを用いたユーザテストの準備を行う。
Figmaの基礎知識がわかる |
・ユーザテスト手法
・ユーザテストの基本理論
・プライバシーと倫理
・Figma演習その1 |
| 【理解度確認】演習問題 |
| 9 |
モックアップの作成に用いられる画像編集ソフトの使い方を理解し、簡単な画像を作成出来る。
Figmaにてモックアップ制作ができる。 |
画像編集ソフトの使い方 |
| 【理解度確認】演習問題 |
| 10 |
システムのモックアップを作成出来る。
Figmaにてモックアップ制作ができる。 |
・モックアップ作成における注意事項
・モックアップ作成 |
| 【理解度確認】演習問題 |
| 11 |
システムのモックアップを作成出来る。
Bootstrapを知る |
モックアップ作成
Bootstrap準備 |
| 【理解度確認】演習問題 |
| 12 |
ユーザテストに必要なツールについて理解し、テストの準備を行うことが出来る。
Bootstrap5の基礎知識がわかる。 |
・ユーザテストツールの種類
・Bootstrap5演習その1
・ユーザテストの準備 |
| 【理解度確認】演習問題 |
| 13 |
作成したモックアップを用いてユーザテストを行い、フィードバックを得ることが出来る。Bootstrap5の制作ができる |
・ユーザテストの進め方
・ユーザテストの実施とフィードバックの収集
・Bootstrap5演習その2 |
| 【理解度確認】演習問題 |
| 14 |
ユーザテストで得られたフィードバックを分析し、問題点を改善できる。 |
・ユーザテストのフィードバック分析
・モックアップ上での問題点の改善 |
| 【理解度確認】演習問題 |
| 15 |
修正版のモックアップでは、問題点が改善されたことを確認できる。
これまでのまとめとして、前期に学習した内容を説明出来る。 |
・修正版のモックアップを使ったユーザテストの再実施
・前期のまとめ |
| 【理解度確認】演習問題 |
