こんにちは、ちょこです！
今回、私が購入した書籍の中からUIのアニメーションに興味がある方向けに紹介します。書籍でUIアニメーションが紹介されているのは結構珍しいかも…？
「ゲームUI 作り方講座 Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本」
本書によると、想定読者は「就職して間もない新卒から入社3年目ほどの方」を想定している、とのこと。購入するとPhotoshopやAfter Effectsのファイルもダウンロードできるので、割と現場寄りの構成。
これらのことから、おそらく学生や非デザイナーに対しては書かれていないかもしれません。
また、モバイル端末を想定したデザインで書かれています。PCやコンシューマーとは設計思想が異なる部分あると思うので、デザインの意図を理解しつつ読み進めると良いかもしれません。
内容や難易度などの目安のご参考までに。
主な構成は以下の通りです。
全部で8章で構成されており、UIデザインとUIアニメーションで明確に分けられています。ざっくり分けるとこんな感じです。
| UIデザイン編 |
|
| UIアニメーション編 |
|
全体的な感想としては以下の通りです。
- 研修のような流れに沿って必要な知識を共有する、という見せ方をしていて資料として分かりやすいと感じた
- モバイル端末向けに書かれているけど、他のプラットフォームでも十分に応用できる
- ゲームUI系の書籍自体がニッチな上、初学者向けにUIアニメーションまで紹介した書籍は2025年4月時点では見たことない
- 現場で一定の共通認識を得たいと考えたり、業務で携わる方は１冊会社に置くと良さそう
…という感じです。
それぞれの章の概要と感想は以下の通りです。
UIデザイン編
1〜4章はUIデザイン編です。各章の概要は以下の通りです。
1章：ゲームUI基本
「デザインの四大原則」のようなデザインの基礎をゲーム画面に例に説明しています。
自分が知る範囲だと、多くのデザイン書籍は広告やwebを中心にしたグラフィックデザインで、ゲーム画面を例にする書籍はあまり見ない気がします。
ゲーム画面を実例にすることで、より実践度合いが増した見せ方になっています。
ゲームUIデザイナーにとっては実務に即している部分が多いので、より理解しやすいかと思います。
例えば、セーフエリア、汎用的なパーツ運用、複数人で運用することを前提としたデザインなどはゲーム画面のUIならではの視点だと感じました。
2章：Photoshopの話
2章はPhotoshopの話が書かれています。
本書の想定読者は、新卒〜3年目程度とあるように、ある程度業務経験があるならそんなに難しい内容ではないかと思います。「業務でPhotoshopを触った経験がある人の理解を助ける」、「作業者間で最低限の機能の認識を合わせる」という感じで見ると良いのかもしれません。
よくあるPhotoshopの解説本と異なるのは、UIデザインをする上で汎用度や重要度が高い機能を中心に紹介し、実践的な内容を目指している点です。
例えば「のコピー」のチェック外す、の機能の紹介があったのは実践的な気がしました。
余談：複数人で作業する際、レイヤー名を管理する上で何かと邪魔になることが多いので、遅かれ早かれチェックは外されがち。
3章：ダイアログを作ってみる
3章は一言で言えば、「ダイアログのデザインを例に実際に作ってみようのコーナー」でしょうか。
ダイアログはシンプルなデザインにまとめることができるので、初めてゲームUIに取り組む方も完成形がイメージしやすいのではないかなと思います。
個人的にはすごく手堅くて玄人好みな内容だと感じました。
主な理由は以下の通りです。
- ダイアログはゲーム内に数多く利用され、見た目のバリエーションも豊富
- バリエーションを作っていく内に、パターン化できる要素と例外的な要素が変化しやすく、初期段階での情報整理が重要なUI
最初の課題でダイアログを扱うことで、今後ダイアログを見る視点が変わると思います。例えば…
「この情報はダイアログで表示すべき内容なのか？」
「このゲームにおけるダイアログの定義とは？」
「そもそもこの見た目はダイアログなのか…？」
…など、ゲームを遊ぶときにダイアログのデザインを考えるキッカケ作りになる気がすします。
個人的には、ダイアログの情報整理やパターン化が上手にできる人は他の画面のデザインも上手にできる気がしています。ダイアログはそれくらい難易度に幅のあるUIになりがちです。
なので、一見簡単に見えるダイアログデザインが紹介されているのは手堅いな、などと感じました。
4章：ホーム画面を作ってみる
4章は「ホーム画面を作ってみようのコーナー」です。
見た目が複雑になり、いきなり難しくなってると感じるかもしれませんが、他画面のルールに縛られずある程度好きにデザインできる画面でもあります。
書籍内ではホーム画面に配置されるUIパーツについて細かく言及されており、すごく丁寧だと感じました。
以上が1〜4章の概要と感想です。続いて5〜8章です。
UIアニメーション
5〜8章はUIアニメーション編です。
UIデザイン編で作成した画面にアニメーションを付けることをゴールに設定した上で、デザインの考え方やツールの話にも触れている感じです。
5章：ゲームUIアニメーションの基本
第5章はゲームUIのアニメーションの話です。
スマートフォンゲームをモデルとしたUIアニメーションの基本と業務フローの一例が紹介されています。ページ数的にはほぼ半々の割合で書かれており、どちらも重要であることが伺えました。
前半はアニメーションの中でもUIパーツのアニメーションにスポットを当てて、クオリティを構成する基本的な要素を説明しています。多分、基本的なUIパーツのアニメーションパターンは網羅されてるはず。
UIアニメーションにおける動きの良しあしが表になっているのが見やすくて好きです。
後半は業務フローの話です。
ここで紹介されているフローは「研修などで説明するにあたり、ある程度パターンに当てはめたい」という感じで、あくまで一例として読み取りました。
本文にも…
- すべてのプロジェクトでこれらのフローを辿るわけではない
- 様々なやり方がある
…と、いう旨が書かれています。
個人的な感覚ですが、やはりこの辺りは流動的に変わるものみたいですね。
6章：After Effectsの話
6章はAfter Effectsの話です。
使用するツールの話はUIデザイン編でもありました。
「まずはツールの話をしよう」と言う感じの構成で統一されています。
ここでもゲームUIアニメーションをデザインする際に必要な機能に絞って紹介されています。
7章：ダイアログにアニメーションを付ける
7章は、3章で作成したダイアログにアニメーションをつけてみようと言う内容でした。
- デザイン工程
- ツールの使い方
- 制作のコツ
…などが紹介されています。
動き方の様子についてはダウンロードしたファイルを参考にすると分かりやすいかもしれません。
制作のコツの中で印象的なものとして…
- ダイアログが表示されるときのアニメーションの長さと、消える時のアニメーションの長さを比較した時、消える時のアニメーションの方を短くすると良い
…というようなダイアログ以外にも適用できる汎用性の高い考え方があげられます。
感覚的には、
情報を表示するときの認知コスト、非表示にするときの認知コストを比較した際、表示するときの認知コストが高いと考えられます。なので、基本的には何かしら新しい情報を伝える場合は認知する時間があると丁寧なのかな
…という感じでした。
逆に情報を非表示にする際の認知コストは少ないため、素早く次の工程に進めるようにするほうが良いのかな、と解釈しています。
8章：ホーム画面にアニメーションを付ける
最後の8章は、4章で作成したホーム画面にUIアニメーションをつけてみようという内容です。
7章のダイアログと異なり、
- 視線誘導
- 情報の優先度
- アニメーションの尺
- 統一感
など、ダイアログより情報が増えたことで考慮することも増えています。
ここでも丁寧に工程が説明されているので、雰囲気は伝わるかと思います。
索引…のべ330語
個人的に技術書の索引コーナーが好きなので軽く紹介します。
索引を見ることで大まかに以下の事柄が知れると考えています。
- 書籍の難易度が知れる
- 書籍に含まれている情報量が分かる
- どのような単語が重視されているのか知れる
本書の索引はUIデザインとUIアニメーションとで区分されています。
そのため、それぞれで重複している単語もありますが、数は以下の通りでした。
- UIデザイン…195語
- UIアニメーション…135語
- のべ330語
数が多いので間違ってるかもですが、大体のボリュームの目安になれば…！
以上です。
他の書籍も以下にまとめています。良かったらこちらもご覧ください。
