こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。
今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」の説明画像の視線誘導が上手くでき、見やすいデザインであった点を紹介します。
説明画像をデザインする際の参考になれば幸いです。
説明画像が使われている画面はこちらです。
説明画像はヘルプ画面や画面遷移中に表示されています。
ヘルプ画面はゆっくり見れるけど、画面遷移中では短い時間の表示ですね。
アニメーションで見るとこんな感じです。
通信環境などにもよりますが、参考程度に。
説明画像をデザインする際の評価軸として、情報の伝わりやすさは重要です。
特にロード中に表示するような場合は、短い時間でユーザーに伝える工夫が必要です。
例えば、視線誘導ができていると文字を読まなくてもなんとなく理解することができます。
以下の画像では、視線を左から右に誘導するようにデザインしています。
視線誘導をしている要素としては以下の３点です。
- 矢印を利用して視線の流れを作っている
- 目立たせる情報に後光やキラキラエフェクトを付けて情報の優先度付けをしている
- 左側にキャラクターを配置して視線の起点を作っている（人は人の顔に視線が行く）
また、視線を誘導する事前準備として、情報整理も重要な役割を果たしています。
情報整理ができていないと効果的に視線誘導ができません。
「ドラゴンクエスト ダイの大冒険 -魂の絆-」では以下の３点が情報整理されているように感じた点です。
- 説明画像の中に文字を置かないことで、文字を読まなくても理解できるデザインを目指している
- 画像を中心に配置することで直感的な理解を促している
- レイアウトについて、ゲーム全体で統一されたルールがある
画像内に文字を置かないのは多言語対応を簡単にするためでもあるとは思いますが、情報整理の面でも有効だと思います。
他の説明画像もいくつか紹介してみます。
このように左から右に視線を誘導するデザインルールに則っています。
もちろん、例外的なデザインもあります。その場合でもなるべく左から右に視線を流すように工夫されていると思います。
この画像の場合はサムネイルの方が手前にあるため、下から上に視線が流れそうです。
他には視線が中央に集中するパターンもありました。
ルールも大事ですが、ある程度の寛容さがないとデザインの幅も狭くなってしまいます。どの程度例外を許容するかは個別に判断することになるので難しいところです。
以上です。
説明画像を作る際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者その他権利者が権利を所有する画像の転載・配布は禁止いたします。
©三条陸、稲田浩司／集英社・ダイの大冒険製作委員会・テレビ東京
© 2021 SQUARE ENIX CO., LTD. All Rights Reserved. © 2021 DeNA Co.,Ltd.
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ドラゴンクエスト ダイの大冒険 -魂の絆-」のガイドラインには個人ブログの利用に関して許諾する旨の記載がありました。
ドラゴンクエスト ダイの大冒険 -魂の絆- 動画・生配信・画像投稿に関するガイドライン
株式会社スクウェア・エニックス（以下「弊社」といいます）の提供する『ドラゴンクエスト ダイの大冒険 -魂の絆-』のプレイ動画（ゲーム内BGMを含み、以下「プレイ動画」といいます）の投稿、生放送配信、および画像投稿は、個人使用の目的に限り、以下に定めるガイドラインに従いご利用いただけます。
これによりゲーム画面のスクリーンショットの投稿についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
