こんにちは、ちょこです！
このページでは、自分が購入した書籍の中で【レイアウト】に関する書籍を紹介します。ゲームUIデザイナーさんが書籍を選ぶ際の参考になれば幸いです。
レイアウト系の書籍の特徴
レイアウトに関する書籍は広告やバナーといったグラフィックデザインに視点を置いた書籍が多く、webやゲームはあまり扱われていません。
そのため、見た目や伝わりやすさなどは担保できると思いますが、GUIの特性、操作性などに関しては別のインプットで担保する必要があります。
例外として、中国開発っぽいゲームUIを作りたい場合は参考になるかもしれません（あれは操作性よりもビジュアルを重視するのが特徴なので）
おおきく「教科書系」と「パターン分析系」に分けられる
ここで紹介するレイアウトの書籍は「教科書系」と「パターン分析系」に分けて紹介します。
今回手持ちの書籍を改めて俯瞰的に確認しましたが、教科書系は好みの１冊、パターン分析系も好みで選ぶのが良いかと思います。
新しめの実例の方が掲載されている書籍の方が良いかなとも思ったのですが、ゲーム画面のトレンドを追うならゲーム画面を見ると思われるため、掲載されている実例が多少古めでもそこまで影響は無い気がします。
教科書系…文章が多く、体型的に学べる傾向があります。デザインを言語化したい方にオススメです。パターン分析を兼ねている書籍もあります。
パターン分析系…図が多く、デザインの特徴を分析し、紹介しています。サンプルデザインには実例も用いられ、見本帳の側面もあります。
教科書系…２冊
レイアウト・デザインの教科書
| 発売 | ページ数 |
| 2019/2/22発売 | 184ページ |
| デザインの４大原則 | ★★☆ | 冒頭に紹介されています。基礎から伝えようとしているため、体系的に理解しやすく感じました。 |
| 視線誘導 | ★★☆ | 写真の人物の目線による視線誘導や、情報の配置によって滞在時間をコントロールする仕組みは面白いと感じました。 |
| グリッドシステム | ★★★ | 14ページで概要、作り方、サンプルが紹介されています。グリッドシステムのさわりを把握するなら十分すぎる物量かと思いました。 |
| 配色 | ☆☆☆ | 実例を紹介する中で触れられています。 |
| 文字 | ☆☆☆ | 実例を紹介する中で触れられています。 |
| ユニバーサルデザイン | ★☆☆ | テクニックと言うよりは思想的な紹介が主です。ピクトグラムについて簡単に紹介されています。存在だけでも知ってもらえれば…というくらいの内容かと思います。 |
| 実例 | 索引 |
| 102例 | 105語 |
INTRODUCTIONでも書かれているのですが、この書籍ではレイアウトの基本ルールとトレンドが学べます。基本ルールは簡単には変わらないので抑えておくと良いかと思います。実例が掲載されているため、お手本のクオリティは十分だと思いますが、読むタイミングによってはトレンドから離れていってしまうため注意も必要です。
やさしいレイアウトの教科書［改訂版］
| 発売 | ページ数 |
| 2018/9/19発売 | 144ページ |
| デザインの４大原則 | ★☆☆ | ★★☆ |
| 視線誘導 | ★★☆ | 情報整理のひとつとして視線誘導が取り上げられています。 |
| グリッドシステム | ★☆☆ | ２ページで概要だけ説明されています。 |
| 配色 | ★☆☆ | 色の印象など、基本的なことが紹介されています。 |
| 文字 | ★★☆ | レポートを想定し、組版について書かれています。 |
| ユニバーサルデザイン | ★☆☆ | シニア層をターゲットにする際、レイアウトや見せ方について気を付ける点について軽く触れられています。 |
| 実例 | 索引 |
| なし | 105語 |
図と文章が6：4くらいの面積で構成されています。要点には下線が引かれており、全体的に読みやすい文章だと思います。
パターン分析系…５冊
最強構図 知ってたらデザインうまくなる。
| 発売 | ページ数 |
| 2023/1/26発売 | 224ページ |
| 実例 | 実例なし |
| 作例 | 92サンプル |
| ノウハウ | 6 |
レイアウトの基本である「黄金比」「三分割」「対角線」「日の丸」「シンメトリー」「トライアングル」の6つに絞って書かれています。これだけ絞られているとパターン出しの時の参考にしやすいと感じます。レイアウトの基礎を徹底的にたたき込むのに良さそうです。
サンプルデザインで使っているフォント名やカラーコードも載っているので参考にしやすさもあると思います。
あるあるレイアウト すぐに使えて素敵に仕上がるデザインカタログ集
| 発売 | ページ数 |
| 2021/5/28発売 | 272ページ |
| 実例 | 実例なし |
| 作例 | 154サンプル |
| ノウハウ | 22 |
クオリティの高い作例とは別にグレースケールのモックが豊富に掲載されているのが特徴の書籍です。グレースケールに置き換えるため、色や文字といった情報を削ぎ落された分、見やすく感じました。
作例に関するキャプションは１行程度なので、デザインを分析、言語化したい人にとってはやや難しいかもしれません。
っぽくなるデザイン 誰でもできるかっこいいレイアウト集
| 発売 | ページ数 |
| 2020/3/3発売 | 160ページ |
| 実例 | 実例なし |
| 作例 | 181サンプル |
| ノウハウ | 35 |
作例が豊富で、図は大きく、キャプションは1～2行程度の構成です。
要点が簡潔にまとめられているため、実際にデザインに取り入れようとすると各自に委ねられる部分が大きいです。
また、「あえてラフに切り抜く」といったテクニックなど、使いこなすにはかなり難易度が高いノウハウも紹介されています。全体的にやや中級者向けな印象です。
［デザイン技法図鑑］ひと目でわかるレイアウトの基本。
| 発売 | ページ数 |
| 2019/10/1発売 | 160ページ |
| 実例 | 78作品 |
| 作例 | 132サンプル |
| ノウハウ | 44 |
目次がビジュアル化されているため、一通り読んだ後は目次に目を通すだけでも復習になるようになっているのが好きです。
本題に入る前に、８ページにわたって「誰に何をどのように伝えるか」ということが丁寧に書かれています。
どういった時にこのデザインが活かせるかなども紹介されているため、比較的幅広く読みやすい書籍だと感じました。
デザインのルール、レイアウトのセオリー。
| 発売 | ページ数 |
| 2010/7/26発売 | 208ページ |
| 実例 | 97作品 |
| 作例 | 146サンプル |
| ノウハウ | 48 |
実例は豊富ですが、2023年時点では発行から13年経っているため、トレンドの参考にはならず、デザインがどう変化していってるかの参考になってくると思います。
ノウハウ、デザインに関する説明は豊富で、枠外の小話も面白く、個人的にはオススメしたいです。
ただ、チャプター２と４で使われている文字が白地に対して明るく、若干読みにくく感じました。
以上です。
他の書籍も以下にまとめています。良かったらこちらもご覧ください。
