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

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

• 要旨（「BOOK」データベースより）

  デザイン編＋アニメーション編で、ゲームＵＩの知識と実践がよくわかる！サンプルファイルダウンロード特典付き。

• 目次

  はじめに
  本書の使い方
  サンプルファイルの使い方
  
  ●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デザイン
  ＋
  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
  ボタン／アイコン／フレーム／ランク／ゲージ／ライフ／コイン／ジェム／ラベル／バッジ／バナー／ロゴ／メニュー

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  はな さくの(ハナ サクノ)
  ゲームＵＩデザイナー。５年半ゲーム会社でＵＩデザイナーを務め、独立後はＵＩデザインやゲーム広告動画、バナー・ロゴ制作を手掛けている。多彩な経歴を活かし、セミナー登壇や講師、ＵＩデザイン講座開設など幅広く活動中。その他にも、ＳＮＳやブログ、ＹｏｕＴｕｂｅで積極的に情報発信をしている。ポップで華やかなデザインを得意としつつ、幅広いジャンルのＵＩデザインを手がけている
  
  たかゆ(タカユ)
  ＵＩアニメーションデザイナー。株式会社サイバーエージェントＳＧＥコアクリエイティブ本部所属。１０年以上ゲームアプリの業界に携わり、ＵＩデザイン、２Ｄアセット、キャラクターアニメーション、エフェクト、ＰＶ制作、広告動画制作、ＵＩアニメーションと様々な業務を対応。現在はＡｆｔｅｒ　Ｅｆｆｅｃｔｓ，Ｕｎｉｔｙを使用したゲームのＵＩアニメーション、演出の制作を行う他、新卒研修やクリエイティブ×ＡＩの研究を行っている

• 著者について

  はなさくの (ハナサクノ)
  ゲーム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/

ゲームUI作り方講座―Photoshop & After Effectsで学ぶ、UIデザインとアニメーションの基本 の商品スペック