授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
UIとUXの違いを言語化し、ゲームにおける「使いやすさ」とは何かを認識出来る。 |
【UI/UXの基礎概念】
UI(接点)とUX(体験)の関係、優れたUIと悪いUIの事例、ユーザビリティの原則。 |
| 【理解度確認】演習:既存ゲームのUIの良し悪しを分析 |
| 2 |
プレイヤーが目的を達成するまでの手順を整理し、画面遷移図を描くことが出来る。 |
【ユーザーフローの設計】
画面遷移図の作成、プレイヤーの「迷い」をなくす導線設計。 |
| 【理解度確認】演習:タイトルからゲーム開始までのフロー作成 |
| 3 |
情報配置と機能のみに特化した画面の設計図を作ることが出来る。 |
【ワイヤーフレーム制作】
低精度なプロトタイプ作成、情報のグルーピング、余白の論理的配置。 |
| 【理解度確認】演習:グレースケールでの画面レイアウト案 |
| 4 |
端末(PC・スマホ・TV)による解像度の違いや、セーフエリア(安全領域)を考慮した配置が出来る。 |
【デバイスとレイアウト】
アスペクト比、絶対配置と相対配置、親指の可動域(スマホUIの場合)の考慮。 |
| 【理解度確認】演習:デバイスごとのUI制約の理解 |
| 5 |
ボタンの「状態変化」を視覚化し、ユーザーに現在の状況を正しくフィードバック出来る。 |
【状態変化(ステート)のデザイン】
Normal, Hover, Active, Disabled 等の状態遷移の作り分け、アフォーダンス(押せそう感)の表現。9スライス等の作成技術紹介。 |
| 【理解度確認】演習:ボタンのステート別デザイン制作 |
| 6 |
言語に頼らず、一目で機能を伝達できるピクトグラム(アイコン)の自作出来る。 |
【アイコンとピクトグラム】
メタファー(比喩)の活用、線の太さや角の丸みの統一等、作成のためのテクニック一例。 |
| 【理解度確認】演習:ゲーム内アイテムやメニューのアイコン作成 |
| 7 |
プレイヤーが必要な情報を瞬時に読み取れるHUD(ヘッドアップディスプレイ)を設計出来る。 |
【HUDの設計と視線誘導】
ゲーム画面における情報の優先度(HP、マップ等)、Fの法則・Zの法則のUIへの応用。 |
| 【理解度確認】演習:ゲームプレイ画面のUI設計 |
| 8 |
背景に溶け込まず、かつ世界観を壊さない「可読性の高いタイポグラフィ」を選択・設定出来る。 |
【文字と色(中間課題)】
背景に負けない可読性の確保。中間課題(ゲーム画面)提出。 |
| 【理解度確認】課題:プレイ中のゲーム画面デザイン |
| 9 |
CG基礎Ⅱで学んだ質感や装飾技術を活かし、ワイヤーフレームをゲームの世界観に合わせたビジュアルに昇華できるようになる。 |
【高精度なビジュアル制作】
スキューモーフィズム(立体的)とフラットデザインの使い分け、マテリアル(質感)の適用。 |
| 【理解度確認】演習:ワイヤーフレームのビジュアル化 |
| 10 |
同じパーツを何度も作らないための手法を理解し、修正に強い効率的なデータ管理が出来る。 |
【コンポーネントとデザインシステム】
マスターデータとインスタンスの関係、アセットの共通化、UI実装時のプログラマとの連携。 |
| 【理解度確認】演習:共通ボタン・共通ヘッダーのコンポーネント化 |
| 11 |
静止画の画面同士をリンクで繋いで擬似的な操作体験を作る事が出来る。 |
【プロトタイピングの実行】
ホットスポット(クリック領域)の設定、画面遷移のトランジション(フェード、スライド等)。 |
| 【理解度確認】演習:複数画面を繋ぐインタラクション設定 |
| 12 |
ユーザーの操作に対する心地よい反応(手触り感)を演出出来る。 |
【マイクロインタラクション】
心地よいUIアニメーションの原則、時間(イージング)の制御、視覚的なフィードバック。 |
| 【理解度確認】演習:動くプロトタイプの作成 |
| 13 |
他者の客観的な視点を取り入れ、自分のデザインの「使いにくさ」を発見・改善出来る。 |
【ユーザビリティテスト】
テストの手法、問題点の抽出、フィードバックの受容。 |
| 【理解度確認】演習:学生同士でのプロトタイプ操作テスト |
| 14 |
プログラマーがゲームエンジンで即座に使える、整理されたデータを作成・出力出来る。 |
アトラス化(スプライトシート)の概念、プロの現場の命名規則(接頭辞等)、透過出力。 |
| 【理解度確認】演習:UIパーツのレイヤー名設定、実装用の素材書き出し |
| 15 |
設計したUI/UXの意図を言語化し、他者にプレゼンテーション出来る。 |
【最終課題:発表】
プレゼンテーション技法、UIデザインにおける「理由付け」の重要性。 |
| 【理解度確認】演習:完成した課題を提示し、ターゲットや工夫した点を発表 |