Unity を検索

Unity エディターのユーザー体験の進化

2019年8月29日 カテゴリ: テクノロジー | 11 分 で読めます
取り上げているトピック
シェア

ますます複雑性を増して進化し続けるコンテンツ制作ツール「Unity エディター」― そのユーザー体験(UX)改善への第一歩として新しいデザインが導入されます。

毎月、何百万人ものクリエイターの皆様が Unity を使って素晴らしいコンテンツやインタラクティブ体験を制作しています。Unity は年を追って着実にその規模を拡大させ、情熱溢れる多様なユーザーベースを拡大させ続ける、世界でトップレベルのリアルタイム制作プラットフォームとなりました。Unity エディターは頻繁かつ長期的に使用される生産性向上ツールなので、使いやすさ効率性が非常に重要です。

このことから私達は今回、一歩引いた長期的な視点に立ち、(新機能の追加を中心とした改良ではなく)見た目と使用感中核的インタラクション、そしてワークフローを中心とした改良を行うことにしました。

最新の Unity 2019.3 ベータ版には Unity エディターのユーザー体験(UX)に関わる様々なデザイン改良が反映されているほか、近い将来には更なる改良も行われる予定です。この長期的な取り組みは複数の段階に分けて公開されます。その目的は、以下のようなエディターを作ることです。

  • モダン ― Unity は、創造性を刺激するような、精巧で信頼性が高く、モダンでプロフェッショナルなエディター体験をユーザーに提供したいと考えています。
  • 慣れ親しんだ UI ― Unity のユーザーインターフェースは一貫性を備え、業界標準との整合性を備えている必要があります。
  • 誰にでも使いやすい ― Unity のユーザーインターフェースは、様々なスキルレベルの幅広いユーザーにとって使いやすいものでなければなりません。
  • 効率的 ― 一般的なタスク用に明瞭で最適化されたユーザーインターフェース(UI)と合理的なワークフローを提供することで、ユーザーがコンテンツの作成とタスクの実行を効率的に行えるようにすることが目標です。

本記事では、バージョン 2019.3 に至るまでの複数のリリースにわたって Unity エディターに加えられた UX の改良について、まとめてご説明します。

モダンなビジュアルと使用感

優れたデザインとは、形と機能と美の調和です。製品のビジュアルデザインは、目的に適った、ユーザビリティとワークフローをサポートするものでなければなりません。Unity エディターのインターフェースのビジュアルは、年月を経て大幅な変化を遂げました。Unity のエコシステムが成長するに伴い、私達は、Unity エディターの見た目と使用感、およびユーザー体験に一貫性を持たせるべく、ビジュアル面での更新を行いたいと考えました。

テーマ ― Light と Dark のテーマが UI 全体にわたって更新され、新しい色と効果が追加されて明瞭性が高くなりました。ユーザーがコンテンツとワークフローに集中できるように、見た目と印象を、より軽やかでミニマリスティックなものに変更しました。例えば、気を散らす要素を減らすために UI からグラデーションを取り除いた一方で、ユーザーからのフィードバックを取り入れ、UI の奥行きを維持しました。これにより、視覚的に区別しやすく、挙動と機能が伝わりやすい制御パネルになりました。

アイコン ― アイコンは、オブジェクトやアクションや概念を視覚的に表す、Unity エディター UI の大切な要素のひとつです。アイコンの使用によって、画面内の領域が節約されるだけでなく、一目で意味が伝わり、UI の素早い把握が可能となり、美的な魅力が向上するなど、数多くのメリットがあります。

私達は、Unity エディターの UX の進化の一環としてアイコンを一新し、現在 Unity Hub や Services Dashboard などの Unity のウェブサービスで使用されているスタイルに合わせるに当たって、今が好機であると判断しました。新しいアイコンには、Unity のビジュアルアイデンティティを表現するスタイルが採用されています。ディスプレイの種類(HDPI など)や解像度に合わせて最適な形で描画するために各アイコンを複数のサイズで作成し、すべての画面ではっきりと表示されるようになっています。

エディターと Hub アプリケーションの新しいアイコン ― Windows のタスクバーおよび MacOS の Dock に表示されるアイコンは、クリックでアプリケーションを起動できるフロントドアとして機能します。新しいアプリケーションアイコンは、お馴染みの Unity キューブのリニューアル版で、エディターは黒地に白、Hub は白地に黒となっています。このモダンなビジュアルスタイルは Unity のエコシステム全体にわたって一貫したものとなっており、Unity の継続的なデザイン革新と一貫性への配慮する反映しています。

新しい UI フォント ― どんなユーザーインターフェースにおいてもテキストは大切な役割を果たしますが、Unity エディターのように情報量の多い UI の場合にはことさらに重要な要素であり、十分な視認性が絶対不可欠です。テキストが複数のプラットフォームにわたって一貫した品質と安定性をもって表示されるようにするのは容易なことではありません。これは、同じフォントでも OS によって描画方法が異なるためです。Unity エディターは長きにわたって同じ書体を使用して来ましたが、品質と描画に関する問題があったため、より視認性が高く、新しい UI が引き立つフォントを新規に導入しました。慎重な検討の末に選択されたのが、コンピューター画面向けにデザインされたモダンな書体である Inter です。Inter は視認性が高く、目の疲れを最小限に抑えます。それだけでなく、このフォントは DPI の高低に関わらずすべての OS・すべての種類の画面で綺麗に描画されます。

また、ユーザー補助の観点から、さらに UI テキストに改良を加えました。以前はドロップダウンメニューとテキストフィールドのテキストのサイズが極端に小さかったので、最小のテキストサイズを大きくし、より多くの方にとって使いやすい UI へ改良しました。

中核的インタラクションと制御の改良

Unity エディターには、多くのワークフローで頻繁に使用される、中核的なインタラクション(「マイクロインタラクション」と呼ばれるもの)や制御が数多く存在します。したがって、これらに改良を加えることで、効率性と使いやすさを大幅に向上することができます。このため Unity では、中核的インタラクションに関連する既知の問題への対応と制御の質の向上に、短期・長期の両面において力を入れて取り組んでいます。

この分野に関して加えられた改良のいくつかを、以下にご紹介します。

  1. アクティブウィンドウのインジケーター ― Unity エディターは、多数のウィンドウを同時に開いて入り混じった環境で使用されるので、現在どのウィンドウがアクティブな状態なのか分かりにくくなりがちです。そこで、ユーザーの入力を受け取っているアクティブなウィンドウを明瞭に示す視覚的インジケーター(青い線)を導入しました。これは、状態把握を行いやすくして、ユーザーが注意集中を維持したまま流れに乗って作業を進められるようにすることが目的です。
  2. タブの改良 ― 以前は UI のタブの幅が固定されていたため、異なる長さのテキストを含むタブでスペーシングが不規則になり、視覚的なバランスが崩れる現象が起こっていました。現在ではタブの幅がテキストの長さに応じて変化するようになっているので、テキストの周囲のスペーシングに一貫性が保たれています。また、幅が可変になったことでローカライズも行いやすくなりました(翻訳された文字列の長さは言語によって大幅に異なる場合があるため)。
  3. 新規コンテンツの追加 ― コンテンツの追加は、すべての制作ソフトウェアにおいて重要なインタラクションのひとつです。「+」ボタンは、モダンな UI においてユーザーが制作ワークフローを開始する際に探すものとして定着した要素になっています。Unity エディターにもこの要素を導入し、画面領域を節約すると共に、クリエイターが慣れ親しんだ操作を実現しました。

マウスオーバー ― よりレスポンシブでインタラクティブな使用感を実現するために、エディターの制御にマウスオーバーを追加しました。マウスオーバーは、ユーザーがどの要素とインタラクトしているかを明瞭に示し、ツールチップのプロンプトとして機能します。

ワークフローの改良

ユーザーが Unity で実行するすべてのタスクはワークフローの一部です。私達はワークフローを「ユーザーが目的を達成するために実行する一連の手順」と定義しています。Unity には、複雑度と詳細度の異なる何百ものワークフローがあります。つまり、ユーザー体験を向上し効率化する多くの可能性があるということです。

バージョン 2018 および 2019 のリリースで、いくつかの重要なワークフロー改良の実装を開始しています。これには以下が含まれます。

プロジェクト設定(Project Settings) ― プロジェクト設定は、長きにわたってユーザーの皆様から改良を求めるご意見が寄せられていた部分でした。以前は、メインメニューから各設定ページにアクセスし、それがインスペクター内に表示されるようになっていました。つまりユーザーは、編集したい設定に辿り着くために何度もクリックしなければならず、他のウィンドウで何かを選択した場合にそのページを見失ってしまうということが頻繁に起こっていました(各設定ページがインスペクターに固定されていたため)。現在ではプロジェクト設定のワークフローが効率化されています ― すべてのページが単一のドッカブルウィンドウ内に統合されて、各ページのタブが付いたサイドバーを使用して簡単にナビゲートできるようになりました。また、検索ボックスから特定の設定を検索する機能も追加されました。プロジェクト設定の複数のページ間をワンクリックで切り替えられるようになって効率性が大幅に向上したため、同じウィンドウレイアウトと挙動を環境設定(Preferences)ウィンドウにも適用し、より効率的で一貫性のあるユーザー体験を実現しました。

クイック検索 ― 何百、何千というアセットやゲームオブジェクトを含む大規模なゲームを制作する場合、特定のコンテンツの場所を特定するのは骨の折れる困難な作業となり得ます。クイック検索機能を使うと、アセットからゲームオブジェクト、設定、メニューアイテムまで、エディター内のすべての要素を簡単に見つけることができます。この機能はショートカットキー「Alt + '」で素早くアクティベートでき、完全にキーボードだけで操作可能です。ユーザーは検索結果に対してアクションを起こしたり、関連の設定ページを開いたり、アセットをシーン内にドラッグしたり、メニューアイテムをアクティベートしたりすることができます。この方法でコンテンツを探すことでユーザーのワークフローは大幅にスピードアップし、クリック数とマウスの移動回数が大幅に削減できます。

ショートカットマネージャー ― キーボードによるインタラクションは、効率性とアクセシビリティを確保するための重要な要素です。キーボードショートカット(特定のキーやその組み合わせ)でコマンドを実行できることでワークフローが大幅にスピードアップし、マウス移動の必要性が抑えられます。新搭載のショートカットマネージャー機能を使用すると、Unity エディター内でキーボードショートカットを閲覧・管理できます。また今後この他にも、キーボードによるインタラクションとマウスによるインタラクションの両方に関して、エディターをすべてのユーザーにとって使いやすいものにするための改良を計画中です ― 将来のリリースを楽しみにお待ちください。

Unity では、ユーザーのワークフローを向上させ、最小限の努力で目的を達成できるようにすることを目標に、取り組みを進めています。皆様が一日のうちに何度も実行するタスクに掛かる時間のほんの僅かな割合でも削減できれば、効率性のアップに寄与することができます。私達は今後も引き続き、ユーザーパフォーマンスと満足度の向上を目指し、ワークフローを改善する更新を続けてまいります。

皆様のフィードバックが活かされています

Unity の基本理念のひとつは、ユーザーを第一に考えることです。ユーザーの皆様のフィードバックを早期かつ頻繁に集めることは、これまでも今後も、私達の取り組みにおける重要な方針のひとつです。

エディターの新デザインは、プレビュー版のビルドで 1 年近く提供されていました。その間に、フォーラムやアンケートやソーシャルメディア経由で非常に沢山の有益なフィードバックをお寄せいただきました、これは、Unity ユーザー基盤の類稀なる情熱の証です。私達はこうしたフィードバックを積極的にデザインのプロセスに取り入れ、ユーザーの皆様から学んだことを基盤にしながらイテレーションを行って来ました。

上記のような大きな変更を加えるに際しては、それを実際のニーズに根差したものにする必要があるため、私達はプロセスの最初から積極的にユーザーの方々のご協力を仰ぎました。変更を加えても、それが問題を解決してユーザーの皆様に価値を提供するものでなければ意味がないからです。新しいデザインに関するご意見・ご要望は、フォーラムからお気軽にお寄せください。

今後に向けて

これはまだまだ始まりに過ぎません。今後のリリースで、見た目や使用感、中核的インタラクション、ワークフローなどに関わる UX 改良が更に加えられる予定です。

以下は、現在検討・調査が進んでいるいくつかの UX 改良のコンセプト画像です。ツールとアクションをユーザーの焦点領域により近付け、クリエイティブな流れに乗った(流れを途切れさせない)作業を行いやすくするための改良を考えています。またこのコンセプトは、(ワールド構築、アニメーション、ライティングなどの)特定のタスク用に最適化された異なるレイアウトの作成と切り替えを簡単に行えるワークスペースの構築も含めて検討されています。

データ指向のゲーム制作・開発は重要な研究分野であり、Unity におけるユーザーリサーチとデザインワークの多くはここに費やされています。また私達は、クリエイターが目標を達成する力になるという長期的なビジョンの一環として、ユーザー視点に立った直感的・効率的なものへとワークフローを進化させるべく、力を入れて取り組んでいます。

私達は今後も引き続き、ユーザーの皆様による貴重なフィードバックを活かしながら、皆様とともに未来のデザインを作ってゆきたいと考えています。そして、これまでに貴重なご意見をお寄せ下さったコミュニティの皆様に、心から感謝申し上げます。ありがとうございました。

開発者のための Human Interface Guidelines

すでにアセットストアにエディター拡張機能やパッケージを公開されている開発者の方向けに、新しく Unity から公開された Human Interface Guidelines ウェブサイト(現在ベータ版)の一部として移行ガイド(英語)を作成しました。新しいテーマや、見た目・使用感、インタラクションを導入される際のガイドとしてご利用ください。

『Ninja Megacity』プロジェクト

本記事冒頭のスクリーンショットでご覧いただける『Ninja Megacity』デモは、Animation Rigging パッケージとしてリリースされる各種の新機能を Unity 2019.2 で実演するために、Unity のグラフィックスチームとアニメーションチームによって制作されました。Unity は今年の SIGGRAPH の Studio Workshop でこれらのツールを使用しました。サンプルプロジェクトが GitHub からご入手いただけます。その後このプロジェクトは、本記事で扱った新しい UX 改良のテストを行うために Unity 2019.3 向けにアップグレードされました。

謝辞

本記事でご紹介したエディター UX の各種改良は、Unity の多数のチーム(UX 研究開発、プロダクトマネジメント、ブランド & デザイン、Labs、コンテンツ、プロダクト、QA、エディター)が一体となって構想づくりと実装に取り組んだ結果実現されました。

2019年8月29日 カテゴリ: テクノロジー | 11 分 で読めます
取り上げているトピック