出版書誌データベース

UIデザイン
＋
UIアニメーション
↓
ゲームUIの
考え方と作り方が
これ1冊で
わかる！

ゲーム制作にあたって、UIのデザインはとても重要です。スマホの画面で操作しやすいUI、見やすいUI、魅力的なUIを制作する必要があります。本書は、ゲームUIをデザインしたい

・新人ゲームデザイナー
・インディーゲームの制作者
・ゲームの仕事につきたい学生

を対象に、ゲームUIをデザインするための基本的な考え方から、実際のUIパーツ、アニメーションの作り方までをやさしく解説した書籍です。前半のUIデザイン編では、Photoshopを使ってダイアログとホーム画面のUIパーツをデザイン。後半のUIアニメーション編では、デザイン編で制作したUIパーツに動きをつけます。本書の解説に使用しているサンプルファイルは、本書購入者のみダウンロード可能。UIアニメーションは、QRコードから動きを見ることができます。＜太字＞デザイン＋アニメーションで、ゲームUIの知識と実践がよくわかる＜太字＞1冊です！

●本書の内容

【UIデザイン編】
CHAPTER1 ゲームUIデザインの基本を知ろう
CHAPTER2 ゲームUIにおけるPhotoshopの基本を知ろう
CHAPTER3 ダイアログのUIデザインを作ろう
CHAPTER4 ホーム画面のUIデザインを作ろう

【UIアニメーション編】
CHAPTER5 ゲームUIアニメーションの基本を知ろう
CHAPTER6 ゲームUIにおけるAfter Effectsの基本を知ろう
CHAPTER7 ダイアログのUIアニメーションを作ろう
CHAPTER8 ホーム画面のUIアニメーションを作ろう

●本書で作れる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)フキダシのアニメーションを作る

索引
おわりに

著：はなさくの
ゲームUIデザイナー 5年半ゲーム会社でUIデザイナーを務め、独立後はUIデザインやゲーム広告動画、バナー・ロゴ制作を手掛けている。多彩な経歴を活かし、セミナー登壇や講師、UIデザイン講座開設など幅広く活動中。その他にも、SNSやブログ、YouTubeで積極的に情報発信をしている。ポップで華やかなデザインを得意としつつ、幅広いジャンルのUIデザインを手がけている。 X（旧Twitter）：https://x.com/HanaSakuno ブログ：https://hanasaqutto.com/ YouTube：https://www.youtube.com/@gameuiux

著：たかゆ
UIアニメーションデザイナー 株式会社サイバーエージェント SGEコアクリエイティブ本部 所属 10年以上ゲームアプリの業界に携わり、UIデザイン、2Dアセット、キャラクターアニメーション、エフェクト、PV制作、広告動画制作、UIアニメーションと様々な業務を対応。 現在はAfter Effects,Unityを使用したゲームのUIアニメーション、演出の制作を行う他、新卒研修やクリエイティブ x AIの研究を行っている。 X（旧Twitter）：https://x.com/takayuP4 ブログ：https://gameanimation.info/