ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

ゲーム画面を分かりやすく伝えるためのヒントが隠されてそう「たのしいインフォグラフィック入門」

こんにちは、ちょこです!

今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです!

 

「たのしいインフォグラフィック入門」

amazonの商品ページのキャプチャです。2021/9/18にこの書籍を購入しています

インフォグラフィックとUIデザインって似てるところが多い気がしています。

 

 

非デザイナーでも楽しく読めそう

本書「たのしいインフォグラフィック入門」は主に以下の3つのジャンルに分けられています。

それぞれのジャンルの中身については、制作工程の詳細とクオリティの高い実例が紹介されています。

 

入門と書かれている通り、専門書の中でも比較的優しい切り口で書かれているように見えます。

非デザイナーでも難なく読めると思いますし、ある程度理詰めで進められるため、エンジニアさんのような職種の方でも楽しく読めると思います。

実際、著者のプロフィールを見ると、プログラマー、エンジニア、ウェブデザイナーを経ています。そのような経験を持った方が著したと捉えると、非デザイナーを含めていると見る方が自然かと考えます。

 

インフォグラフィックから学びたい画面デザイン

インフォグラフィックって何?というところから、どのような活用方法が注目されているのか、などが紹介されており、分かりやすく、興味を引く内容が書かれています。

特に興味深かったのはアメリカ大統領の選挙戦といった、専門的で情報量が多いコンテンツを、事前知識も多様化している国民に伝えるために用いた例です。

 

ゲームUIも同様に情報量が多くなりがちな場面があり、ゲーム慣れしているユーザーから慣れていないユーザーまで、正確に伝えることが求められます。
アクションゲームなどは短時間での処理も重要になってきます。

インフォグラフィックを通じて、複雑なゲーム画面を分かりやすく伝えるためのヒントが隠されているのではないかと考えています。

 

 

ピクトとアイコン作りは似てる?

ピクトの作り方は以下のステップで紹介されていました。

  1. 利用目的の確認
  2. 対象の理解
  3. ラフスケッチ
  4. 清書
  5. 調整

ゲームではアプリアイコン、スキルアイコン、属性アイコン、メニューアイコンなど、様々あり、場面や目的によってデザインのアプローチも変わることがほとんどです。

それら全てのアイコンと一律同じとは思いませんが、参考にできる部分も多いのではないかと考えます。

 

例えばゲームで使用するアイコンの場合、おおよそ以下のようなことを考えると思います。

  • 目的は何か
  • どこでどのように使われるか
  • 何をアイコン化したいか
  • どのような見た目にするとユーザーが直感的に理解しやすいか、ゲーム側と共通認識を得やすいか
  • 他のアイコンと比較しても誤解を招かないか(例えば、同じ虫眼鏡アイコンでもある場面では「拡大」を表し、別の場面では「詳細」を表していると誤解を招く恐れがあるなど)

ゲームのアイコンの場合、そのゲーム独自の文脈でデザインされることもあるため、体系的、基礎的な学びは省略されることもあるかもしれません。

ピクトは歴史的にはゲームアイコンより若干先輩なので、上手く知見を取り入れることでゲームのアイコンをデザインする際に、役立てられるのではないかなと思っています。

 

インフォグラフィックは情報設計に似ている?

アイコンの次は情報設計とも似ていると感じた話です。

インフォグラフィックはざっくり言えば、グラフや図といった情報にビジュアルの情報を加え、より視覚的に訴えかけるデザイン、という解釈をしています。

 

そのインフォグラフィックの作り方のステップは以下のように紹介されていました。

  1. 利用目的の確認
  2. 題材の選定
  3. リサーチ
  4. 内容・コンセプト決定
  5. デザイン
  6. 検証

先ほど紹介したピクトと共通する部分も多いですね。

ゲームUIはグラフィックデザインの要素に加え操作性も考慮され、より複雑になる印象はありますが、断片的に言語化された要件を端的にまとめ、世界観を加味したビジュアルに落とし込むという作業はインフォグラフィックと似ていると感じました。

 

自分が見る限り、情報設計系の入門書は比較的ハードルが高めなので、こういう入口があっても良いのではなかろうかという提案をさせていただければと思います。

 

 

 
 

以上です。

他の書籍も以下にまとめています。良かったらこちらもご覧ください。

appgameui.hatenablog.com