内容紹介

※この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。※PDF版をご希望の方はGihyo Digital Publishingも併せてご覧ください。

◆デザイン＋アニメーションで、ゲームUIの知識と実践がよくわかる！◆

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

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

■こんな方におすすめ

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

■目次

●UIデザイン編

CHAPTER1 ゲーム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デザインの詳細なフロー

CHAPTER2 ゲーム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デザインの必須機能４スマートオブジェクト

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

　　3-1 ダイアログのデザイン１ダイアログのデザイン情報を整理する

　　3-2 ダイアログのデザイン２ダイアログ作成の基本を知る

　　3-3 ダイアログのデザイン３ワイヤーフレームとデザインカンプ

　　3-4 ダイアログのデザイン４ダイアログフレームを作成する

　　3-5 ダイアログのデザイン５アイテムフレームを作成する

　　3-6 ダイアログのデザイン６コインアイコンを作成する

　　3-7 ダイアログのデザイン７テキストを作成する

　　3-8 ダイアログのデザイン８ボタンを作成する

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

　　4-1 ホーム画面の基本１ホーム画面のデザイン情報を整理する

　　4-2 ホーム画面の基本２ホーム画面作成の基本を知る

　　4-3 ホーム画面の基本３ワイヤーフレームとデザインカンプのポイント

　　4-4 ホーム画面の基本４背景やキャラクターを配置する

　　4-5 ヘッダーの作成１ランク表示

　　4-6 ヘッダーの作成２ライフ／コイン／ジェム

　　4-7 フッターの作成１フッターメニューのフレーム

　　4-8 フッターの作成２フッターメニューアイコン

　　4-9 その他機能の作成　サイドメニューとサブ機能

　　4-10 バナーの作成１バナーフレーム

　　4-11 バナーの作成２イベントバナー

●UIアニメーション編

CHAPTER5 ゲーム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アニメーションの基礎知識７各職種とのすり合わせ方法

CHAPTER6 ゲーム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アニメーション必須の機能５エフェクト

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

　　7-1 ダイアログのアニメーション１ダイアログアニメーションの情報を整理する

　　7-2 ダイアログのアニメーション２ダイアログアニメーションのイメージを検討する

　　7-3 ダイアログのアニメーション３ダイアログアニメーションの素材を準備する

　　7-4 ダイアログのアニメーション４拡大縮小のアニメーションを作る

　　7-5 ダイアログのアニメーション５不透明度のアニメーションを作る

　　7-6 ダイアログのアニメーション６文字を遅らせて表示する

　　7-7 ダイアログのアニメーション７演出を加える

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

　　8-1 ホーム画面の基本１ホーム画面のアニメーション情報を整理する

　　8-2 ホーム画面の基本２ホーム画面アニメーションの基本を知る

　　8-3 ホーム画面の基本３ホーム画面アニメーションのイメージを考える

　　8-4 ホーム画面の基本４ホーム画面アニメーションの素材を準備する

　　8-5 ホーム画面のアニメーション１背景アニメーションを作る

　　8-6 ホーム画面のアニメーション２ヘッダーアニメーションを作る

　　8-7 ホーム画面のアニメーション３アイコンアニメーションを作る

　　8-8 ホーム画面のアニメーション４バナーのアイコンアニメーションを作る

　　8-9 ホーム画面のアニメーション５フッターのボタンアニメーションを作る

　　8-10 ホーム画面のアニメーション６フキダシのアニメーションを作る

■著者プロフィール

●はなさくの：ゲーム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/