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

UIデザイン編

CHAPTER 1　ゲームUIデザインの基本を知ろう

• 1-1　UIデザインの基礎知識①デザインの4原則
• 1-2　UIデザインの基礎知識②UIデザインの5つの考え方
• 1-3　UIデザインの基礎知識③ゲームUIの画面設計
• 1-4　UIデザインの基礎知識④ゲーム制作の流れ
• 1-5　UIデザインの基礎知識⑤UIデザイン制作の流れと仕事の内容
• 1-6　UIデザインの基礎知識⑥UIデザインの詳細なフロー

CHAPTER 2　ゲームUIにおけるPhotoshopの基本を知ろう

• 2-1　Photoshopの基本①ゲームUIにおけるPhotoshopの役割
• 2-2　Photoshopの基本②Photoshopの画面構成
• 2-3　Photoshopの基本③ファイルと画像の操作
• 2-4　Photoshopの基本④ツールパネル
• 2-5　Photoshopの基本⑤パネルの操作
• 2-6　Photoshopの基本⑥画面の操作
• 2-7　Photoshopの基本⑦レイヤーの操作
• 2-8　Photoshopの基本⑧オブジェクトの操作
• 2-9　Photoshopの基本⑨マスクの操作
• 2-10　UIデザインの必須機能①文字パネル
• 2-11　UIデザインの必須機能②レイヤースタイル
• 2-12　UIデザインの必須機能③描画モード
• 2-13　UIデザインの必須機能④スマートオブジェクト

CHAPTER 3　ダイアログのUIデザインを作ろう

• 3-1　ダイアログのデザイン①ダイアログのデザイン情報を整理する
• 3-2　ダイアログのデザイン②ダイアログ作成の基本を知る
• 3-3　ダイアログのデザイン③ワイヤーフレームとデザインカンプ
• 3-4　ダイアログのデザイン④ダイアログフレームを作成する
• 3-5　ダイアログのデザイン⑤アイテムフレームを作成する
• 3-6　ダイアログのデザイン⑥コインアイコンを作成する
• 3-7　ダイアログのデザイン⑦テキストを作成する
• 3-8　ダイアログのデザイン⑧ボタンを作成する

CHAPTER 4　ホーム画面のUIデザインを作ろう

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

UIアニメーション編

CHAPTER 5　ゲームUIアニメーションの基本を知ろう

• 5-1　UIアニメーションの基礎知識①UIアニメーションの重要性
• 5-2　UIアニメーションの基礎知識②ユーザビリティ
• 5-3　UIアニメーションの基礎知識③インタラクション
• 5-4　UIアニメーションの基礎知識④UIアニメーションを作るための準備
• 5-5　UIアニメーションの基礎知識⑤アニメーション作業の位置づけ
• 5-6　UIアニメーションの基礎知識⑥UIアニメーションの詳細な制作フロー
• 5-7　UIアニメーションの基礎知識⑦各職種とのすり合わせ方法

CHAPTER 6　ゲームUIにおけるAfter Effectsの基本を知ろう

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

CHAPTER 7　ダイアログのUIアニメーションを作ろう

• 7-1　ダイアログのアニメーション①ダイアログアニメーションの情報を整理する
• 7-2　ダイアログのアニメーション②ダイアログアニメーションのイメージを検討する
• 7-3　ダイアログのアニメーション③ダイアログアニメーションの素材を準備する
• 7-4　ダイアログのアニメーション④拡大縮小のアニメーションを作る
• 7-5　ダイアログのアニメーション⑤不透明度のアニメーションを作る
• 7-6　ダイアログのアニメーション⑥文字を遅らせて表示する
• 7-7　ダイアログのアニメーション⑦演出を加える

CHAPTER 8　ホーム画面のUIアニメーションを作ろう

• 8-1　ホーム画面の基本①ホーム画面のアニメーション情報を整理する
• 8-2　ホーム画面の基本②ホーム画面アニメーションの基本を知る
• 8-3　ホーム画面の基本③ホーム画面アニメーションのイメージを考える
• 8-4　ホーム画面の基本④ホーム画面アニメーションの素材を準備する
• 8-5　ホーム画面のアニメーション①背景アニメーションを作る
• 8-6　ホーム画面のアニメーション②ヘッダーアニメーションを作る
• 8-7　ホーム画面のアニメーション③アイコンアニメーションを作る
• 8-8　ホーム画面のアニメーション④バナーのアイコンアニメーションを作る
• 8-9　ホーム画面のアニメーション⑤フッターのボタンアニメーションを作る
• 8-10　ホーム画面のアニメーション⑥フキダシのアニメーションを作る

• 索引
• おわりに