ゲームUI 作り方講座　Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本

はじめに
本書の使い方
サンプルファイルの使い方

●UIデザイン編

◎CHAPTER1 ゲームUIデザインの基本を知ろう
1-1 UIデザインの基礎知識(1)デザインの4原則
1-2 UIデザインの基礎知識(2)UIデザインの5つの考え方
1-3 UIデザインの基礎知識(3)ゲームUIの画面設計
1-4 UIデザインの基礎知識(4)ゲーム制作の流れ
1-5 UIデザインの基礎知識(5)UIデザイン制作の流れと仕事の内容
1-6 UIデザインの基礎知識(6)UIデザインの詳細なフロー

◎CHAPTER2 ゲームUIにおけるPhotoshopの基本を知ろう
2-1 Photoshopの基本(1)ゲームUIにおけるPhotoshopの役割
2-2 Photoshopの基本(2)Photoshopの画面構成
2-3 Photoshopの基本(3)ファイルと画像の操作
2-4 Photoshopの基本(4)ツールパネル
2-5 Photoshopの基本(5)パネルの操作
2-6 Photoshopの基本(6)画面の操作
2-7 Photoshopの基本(7)レイヤーの操作
2-8 Photoshopの基本(8)オブジェクトの操作
2-9 Photoshopの基本⑨マスクの操作
2-10 UIデザインの必須機能(1)文字パネル
2-11 UIデザインの必須機能(2)レイヤースタイル
2-12 UIデザインの必須機能(3)描画モード
2-13 UIデザインの必須機能(4)スマートオブジェクト

◎CHAPTER3 ダイアログのUIデザインを作ろう
3-1 ダイアログのデザイン(1)ダイアログのデザイン情報を整理する
3-2 ダイアログのデザイン(2)ダイアログ作成の基本を知る
3-3 ダイアログのデザイン(3)ワイヤーフレームとデザインカンプ
3-4 ダイアログのデザイン(4)ダイアログフレームを作成する
3-5 ダイアログのデザイン(5)アイテムフレームを作成する
3-6 ダイアログのデザイン(6)コインアイコンを作成する
3-7 ダイアログのデザイン(7)テキストを作成する
3-8 ダイアログのデザイン(8)ボタンを作成する

◎CHAPTER4 ホーム画面のUIデザインを作ろう
4-1 ホーム画面の基本(1)ホーム画面のデザイン情報を整理する
4-2 ホーム画面の基本(2)ホーム画面作成の基本を知る
4-3 ホーム画面の基本(3)ワイヤーフレームとデザインカンプのポイント
4-4 ホーム画面の基本(4)背景やキャラクターを配置する
4-5 ヘッダーの作成(1)ランク表示
4-6 ヘッダーの作成(2)ライフ／コイン／ジェム
4-7 フッターの作成(1)フッターメニューのフレーム
4-8 フッターの作成(2)フッターメニューアイコン
4-9 その他機能の作成　サイドメニューとサブ機能
4-10 バナーの作成(1)バナーフレーム
4-11 バナーの作成(2)イベントバナー

●UIアニメーション編

◎CHAPTER5 ゲームUIアニメーションの基本を知ろう
5-1 UIアニメーションの基礎知識(1)UIアニメーションの重要性
5-2 UIアニメーションの基礎知識(2)ユーザビリティ
5-3 UIアニメーションの基礎知識(3)インタラクション
5-4 UIアニメーションの基礎知識(4)UIアニメーションを作るための準備
5-5 UIアニメーションの基礎知識(5)アニメーション作業の位置づけ
5-6 UIアニメーションの基礎知識(6)UIアニメーションの詳細な制作フロー
5-7 UIアニメーションの基礎知識(7)各職種とのすり合わせ方法

◎CHAPTER6 ゲームUIにおけるAfter Effectsの基本を知ろう
6-1 After Effectsの基本(1)UIアニメーションにおけるAfter Effectsの役割
6-2 After Effectsの基本(2)After Effectsの画面構成
6-3 After Effectsの基本(3)フレームレートと解像度
6-4 After Effectsの実践(1)コンポジション／背景／シェイプを作る
6-5 After Effectsの実践(2)移動アニメーションを作る
6-6 After Effectsの実践(3)明滅アニメーションを作る
6-7 After Effectsの実践(4)アニメーションを書き出す
6-8 UIアニメーション必須の機能(1)UIアニメーション制作の必須機能
6-9 UIアニメーション必須の機能(2)グラフエディター
6-10 UIアニメーション必須の機能(3)親子関係
6-11 UIアニメーション必須の機能(4)トラックマット
6-12 UIアニメーション必須の機能(5)エフェクト

◎CHAPTER7 ダイアログのUIアニメーションを作ろう
7-1 ダイアログのアニメーション(1)ダイアログアニメーションの情報を整理する
7-2 ダイアログのアニメーション(2)ダイアログアニメーションのイメージを検討する
7-3 ダイアログのアニメーション(3)ダイアログアニメーションの素材を準備する
7-4 ダイアログのアニメーション(4)拡大縮小のアニメーションを作る
7-5 ダイアログのアニメーション(5)不透明度のアニメーションを作る
7-6 ダイアログのアニメーション(6)文字を遅らせて表示する
7-7 ダイアログのアニメーション(7)演出を加える

◎CHAPTER8 ホーム画面のUIアニメーションを作ろう
8-1 ホーム画面の基本(1)ホーム画面のアニメーション情報を整理する
8-2 ホーム画面の基本(2)ホーム画面アニメーションの基本を知る
8-3 ホーム画面の基本(3)ホーム画面アニメーションのイメージを考える
8-4 ホーム画面の基本(4)ホーム画面アニメーションの素材を準備する
8-5 ホーム画面のアニメーション(1)背景アニメーションを作る
8-6 ホーム画面のアニメーション(2)ヘッダーアニメーションを作る
8-7 ホーム画面のアニメーション(3)アイコンアニメーションを作る
8-8 ホーム画面のアニメーション(4)バナーのアイコンアニメーションを作る
8-9 ホーム画面のアニメーション(5)フッターのボタンアニメーションを作る
8-10 ホーム画面のアニメーション(6)フキダシのアニメーションを作る

索引
おわりに