モバイル UI デザインに関するベストプラクティス – 第 1 部

モバイル UI のデザインは、時として困難が伴います。ゲームやデバイスの数が指数関数的に増え続けている中、最もパフォーマンスに優れたゲームを制作することが優先すべき重要な課題となっています。

Outfit7 のシニアソフトウェアエンジニア Aleksander Gregorka 氏と UI デザイナー Maja Nadvešnik 氏、Samsung のデベロッパーリレーションエンジニア Søren Klit Lambaek 氏と膝を交え、Unity のシニアプロダクトデザイナー（UI ツール担当）Stefania Valoroso とシニアテクニカルプロダクトマネージャー Benoit Dupuis と共に、効果的なモバイル UI をデザインするための実用的なアドバイスとヒントを伺いました。本インタビューは 2 部構成です。

本 Q&A の第 1 部では、モバイルで配信する際の UI デザインプロセスとデバイス固有の課題のほか、最新のモバイルゲームで独創性を最大限に発揮し、フローを可能な限り改善するための主な戦略について話し合います。

まずは根本的な質問からです。ゲームの優れた UI とはどのような特徴を備えていると思いますか？

Maja Nadvešnik：優れたゲーム UI は、シームレスに楽しめるプレイヤー体験を作り出すのに役立ち、わかりにくくデザインが洗練されていないインターフェース要素にプレイヤーが四苦八苦することなく、ゲーム自体にのめり込むことができます。UI デザイナーとしては、プレイヤーにより心地よく安心してプレイしてもらえるように、明瞭さ、使いやすさ、一貫性、利用可能性を考慮する必要があります。

Benoit Dupuis：ゲームの優れたユーザーインターフェースは、プレイヤーにとって魅力的に見え、プレイヤーが体験しているゲームの世界観や雰囲気にうまく溶け込んでいる必要があります。アクセスが簡単で使いやすく、必要なときに表示される必要があるが、絶対にゲームの邪魔にはならないようにしなければなりません。UI に欠陥があるように感じられたり、応答しなかったりすると、プレイ体験に干渉し出すため、堅牢さとパフォーマンスも不可欠な要素です。最も大事なのは、プレイヤーがさまざまなゲームシステムと対話し、重要な情報にアクセスできるように、使いやすく見やすいものにすることです。

ゲームの UI を作成するときのプロセスはどのようになっていますか？

Maja：ゲーム UI を作成するプロセスは、UI の目標と要件の定義、スケッチとプロトタイピング、デザインとスタイリング、実装とテスト、イテレーションと調整など、一般的に複数のステップが関与します。場合によっては、UI はより大きな開発プロセスの一部に組み込まれているため、作成した UI がゲームやプロジェクトにシームレスに統合されるように、アーティスト、プログラマー、プロデューサーなどの他のチームメンバーと緊密に連携することが求められます。

プロジェクトのフォントはどのように選択していますか？カラースキームはどうでしょう？

Maja：フォントとカラースキームは、プロジェクト全体のビジュアルスタイルやトーンを引き立てて強化するものを選択する必要があります。私たちは主にファミリー層向けにデザインしているため、プロジェクトは陽気で創造性に富んでおり、よりモダンで鮮やかな表現を採用します。

ゲームには読みやすく遊び心のあるフォントを選ぶようにしています。デザインプロセス中にさまざまなテキストサイズをテストし、最低限読むことができるテキストサイズを定義します。カラースキームに関しては、アートディレクターのビジョンに合致し、十分なコントラストを備え、うまく調和する色を使うようにしています。

UI を作成するのに平均してどれくらいの時間がかかりますか？

Maja：ゲームの UI を作成するのに必要な時間は、プロジェクトの具体的なニーズと、使用されるリソースやプロセスによって変わります。ゲームの UI の作成はプリプロダクションフェーズから始まり、これには数か月かかります。プリプロダクションの後は、UI の方向性を決め、UI にさらに磨きをかけることに取り組み、UI をメインのゲームプレイからメイン以外の機能に拡張します。明確な見通しを持ち、UI スタイルを完全に定義するまでに 6 か月から 1 年かかることがあり、その後もゲームの最後の機能が完成するまで作業が続くことになります。

プレイヤーのさまざまな手の大きさや指の長さを考慮することはどれくらい重視していますか？

Aleksander Gregorka：重視すべきことの 1 つです。というのも、私たちが制作するアプリはさまざまな年齢層のプレイヤーがいて、お子様と大人とではデバイスの操作方法が若干異なるためです。大人の方と比べて、お子様はデバイスの持ち方も異なりますし、特定のジェスチャが少しぎこちなくなります。また、あらゆる種類のマルチタッチアクションを試すため、準備しておくことをお勧めします。

やりたいことは、ボタンを簡単に認識できるようにサイズを大きくすることです。複数の要素を選択する必要があるときは必ず、その要素同士が互いに離れた場所に表示されます。要素をドラッグして動かしているときは、その要素をやや上方向にずらし、ドラッグする要素が指で隠れないようにします。画面が手で隠れることなく、自分がやっていることが目で見えることが重要です。

Stefania Valoroso：これはモバイルゲームに関しては特に重視すべきことで、ターゲットとするオーディエンスによって大きく変わることがあります。例えば、大人よりも手が小さく、おそらくそれほど器用でないお子様向けのゲームを制作する際には、ジェスチャがどのように機能するか、ユーザーがどれくらい明確な意図をもってその動きをしているか、アクセスが多いボタンとインタラクションがどこに配置されるかについて検討する必要があります。手が小さいとデバイスの画面中央には届きにくく、利き手と反対側の角はなおさらです。

さらに、ユーザーが操作を完了するために使用する利き手に基づいてコントロールや UI をどれくらいカスタマイズできるか、またはアクセシビリティツールを使用してプレイすることを希望するユーザーのために、その操作を別の方法で完了することができるかについても検討する価値があります。さらに掘り下げて、フィッツの法則（ターゲットまでの到達時間がそのターゲットの大きさとそのターゲットまでの距離によって変わる法則）のデザイン原則がモバイルデバイスとどのように関連する可能性があるかについて検討してください。詳細については、Nielsen Norman Group のこちらの記事を参照してください。

UI が大量にあるゲームに UI を作成する方や、そのようなゲーム向けにデザインする方に向けて、どのようなアドバイスを送りますか？

Aleksander：最も重要なことは一貫性を保つことです。ゲーム内のある場面にあるボタンは、別の場面にあるものと同じように動作し、同じような見た目にしてください。ある程度間隔を空けて、同類の項目のグループを作成しましょう。あらゆる場面で過剰で重いアニメーションを避け、プレイヤーの注目を集めるために絶対に必要な、最も重要な部分に注力しましょう。

Søren Klit Lambaek：パフォーマンスに優れたシステムを慎重に考え出すことが重要です。作成した UI をできるだけ多くのデバイスで定期的にテストしましょう。その場でレンダリングされる UI がある場合は、絶対に必要なときにのみアップデートされるようにしてください。

折りたたみ式デバイスの UI をデザインすることに伴う課題、追加の作業、メリットはどのようなものがありますか？

Søren：Unity の折りたたみ式スマートフォンに対するサポートは非常に良好であるため、開発者はそれほど多くの手間をかけることなく折りたたみ式デバイスに対応できます。すでに UI コンポーネントに組み込まれていますが、画面のアスペクト比が正しくなることが共通の課題です。カバー画面から大きな 2 画面に遷移する折りたたみ式スマートフォンの UI の配置は一筋縄ではいかないことがあるため、デバイスに対して広範なテストを実施する必要があります。

折りたたみ式デバイス用の UI をデザインするために利用できるツールとリソースにはどのようなものがありますか？

Søren：私のチームが Unity を使用した折りたたみ式スマートフォンのサポートに関するチュートリアルを作成しています。これらのチュートリアルは、Samsung の開発者向けウェブサイトにあります。

• Foldable device features with Unity and Unreal Engine 4（Unity と Unreal Engine 4 の折りたたみ式デバイス向けの機能）
• How to use Jetpack Window Manager in Android gamedev（Android 向けゲーム開発で Jetpack Window Manager を使用する方法）

UI の応答性は保ちながら、UI のアニメーションにはどのようにアプローチしていますか？

Stefania と Benoit：一番のアドバイスは、使いすぎないことです。情報を伝達する使いやすいユーザーインターフェースを作成するため以外にも、ユーザーの注目を集め、要素間の関係性を確立するうえで、動きは不可欠です。ゲームにおいて、アニメーションは重要な瞬間を祝うためにも使用されます。これにはより精巧なグラフィックスとビジュアルエフェクトが求められることも多く、プレイヤーにやりがいをもたらします。アニメーションの使用はこのようなケースに限定したほうがよいでしょう。

お勧めは、UI 全体で共通のちょっとしたアニメーションや遷移をいろいろと試して再利用することです。これにより、ゲーム全体の一貫性が保たれるだけでなく、パフォーマンスに与える影響も減らします。可能であれば、かつ何を達成しようとしているかに応じて、これらの標準のアニメーションをコードを使用してアニメーションコンポーネントと一緒に適用するタイミングを把握しておくと、UI がレイアウトや向きの変化に対応している間にも見た目と応答性を良好に保つのに役立ちます。UI ツールキットを使用すると、USS 遷移を利用して UI に軽量な遷移エフェクトを追加することができます。

解像度が異なるさまざまなモバイルデバイスに対応するための UI デザイン原則は何ですか？

Maja：レスポンシブデザインをアプローチとして採用することで、画面のサイズや解像度に合わせて UI のレイアウトと外観が自動的に調整されるようになります。固定ピクセル値ではなくパーセントや em を使用する柔軟なレイアウトにすることでも、同様に画面のサイズや解像度に合わせて UI がスムーズに調整されるようになります。

Samsung のデバイスをターゲットとする UI デザインに関わるヒントをいくつか共有してもらえますか？

Søren：折りたたみ式スマートフォンに関しては、アスペクト比とサイズ変更（カバー画面からメイン画面への遷移）が意図したとおりに動作することを確認する必要があります。確認しないと、UI が見えなかったり、グラフィックスがおかしくなったりと、あまり望ましい結果は得られません。

折りたたみ式スマートフォンに関しては、フレックスモードをできるだけ早期の段階で実装することをお勧めします。実装されるとすぐに、UI デザイナーがさまざまなアイデアを試し、計画どおりに機能するかどうかをテストできるようになります。

UI はできるだけ多くのデバイスでテストする必要があります。このために Samsung では Remote Test Lab を用意しています。Samsung アカウントをお持ちの方であれば誰でも無料で使用できます。

クロスプラットフォーム対応の UI をデザインする際のベストプラクティスは何ですか？

Stefania：まずは配置、物理ユーザーインタラクション、期待される動作、コンテキストなど、各プラットフォームが UI やコントロールに及ぼす影響を理解することです。例えば、モバイルで親指を使ってキャラクターを動かすことと、デスクトップでマウスやキーボードを使用する、およびコンソールでコントローラーを使用してキャラクターを動かすことはまったく異なります。

そのようなコンテキストにおいて、その UI は実際にはどのような見た目になるでしょうか？タッチデバイスの画面の端でユーザー入力を受け付けるようにする、ひいてはある特定のインタラクタブル UI にすると便利になるでしょうか？それとも、そうするとアプリ間の切り替えやデバイスのクイック設定を立ち上げることなど、ユーザーがタッチデバイスを使用している間に 1 日を通して使用するスワイプアクションと干渉する可能性はないでしょうか？

Unity での実装に関しては、ターゲットとするプラットフォームによってはオンになっているプレハブアセットまたは UI ドキュメントを活用できます。UI ツールキットを使用して、UI ドキュメントを初期化するために、プラットフォーム固有の Unity スタイルシート（USS）を設定することもできます。これは、ノーコード（コーディングなし）ワークフローを使用しているユーザーが各プラットフォームに必要な USS を割り当てることができるように、MonoBehaviour として表示されることもあります。大きな差異がある場合は、1 つのコンポーネントを介してプラットフォームごとに UXML アセットを割り当てることで、同様のことを行うこともできます。

最も重要なポイントは、自分が作成したインターフェースをその特定のプラットフォームでどのように操作するかについてユーザーが感触をつかむことができるように、できるだけ多くのデバイスでテストすることです。

縦向きと横向きの両方できちんとしたモバイル UI を作成するためのアドバイスはありますか？

Aleksander：縦向き用の UI を横向きに移植するだけでは、見た目がおかしなところが出てきます。いろいろと配置を変えて、実際に横向き用にデザインするほうが良いでしょう。例えば、横向きの場合はメニューを横端に移動することができます。これを許可することで、ゲームが画面の一部分に表示されるようになります。テストを行い、プレイヤーが実際に意図したとおりに使用しているかどうかを観察することをお勧めします。驚かされることになると断言できます。

Stefania：自分が作成したインターフェースをその特定のコンテキストでユーザーがどのように使用しているかを感じ取ることが重要です。ユーザーが縦向きで使っているときは、中央に集まったボタンをタッチするのは簡単ですが、UI が横向きに切り替わると、それらのボタンを正確にタッチできなくなる傾向が出てきます。簡単にアクセスできるように、角に動かすことが必要になる場合があります。

さらに、角に固定された要素はどちらの向きでもサイズが固定されることがあり、キャンバスの変更に伴い更新されます。要素を再配置する必要がある場合や、向きによってまったく異なるインターフェースが必要になる場合は、ビューに基づく要素の有効化と無効化を利用できます。

解像度が異なる画面で UI デザインのセーフエリアはどのように管理しますか？

Aleksander：私たちはセーフエリアを動的 UI のオフセットとして扱っています。デバイスごとに、上下のオフセット（横向きでプレイするゲームの場合は左右）を用意し、UI 要素を動的にオフセットします。

このインタビューからモバイルデザイナーに持ち帰ってもらいたい重要なポイントは、シームレスで使い勝手の良い、楽しめるプレイヤー体験に注力することです。早期の段階から対象とするプレイヤーを念頭に置いてデザインし、一貫性を保つために計画を立てることが、デザインプロセス全体を通して、さらにその先に進むうえで役立ちます。本シリーズの第 2 部では、UI の実装、テスト、パフォーマンス最適化、アナリティクス統合について、知見を持つ Unity のエキスパートが紐解きます。

もっと知りたい方にはUnity でのユーザーインターフェースのデザインと実装に関する Unity の新しい e ブックをご覧ください。また、Made with Unity フォーラムにて成功を収めるためのヒントを他のユーザーと共有してください。