目次
- はじめに
- 本書の使い方
- サンプルファイルの使い方
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 ホーム画面のアニメーション⑥フキダシのアニメーションを作る
- 索引
- おわりに