UXデザイナーがゲームのUIから学べること

Jonathan Deesing

JonathanはUXライターであり、ポッドキャスター、ゲームデザイナーである。

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

What UX Designers Can Learn from Video Games’ Obsession with UI

ゲームにおいては、ユーザーインターフェイス(UI)が全てです。ユーザーをゲームに没頭させ続けるために、見た目と動きから得られる体験を説得力のあるやり方で強化するのに役立ちます。ゲームは長年に渡り、UIがどのようにユーザーの信頼を損なうことなく重要な情報を表すことができるかを追求し、UIに対するアプローチを進化させ続けています。

私がUXの仕事を始めるずっと前、ゲームのレビューを読んで情報を得ていたことから、UIについては何でも知っているとも言える状態でした。ほとんどのWebデザイナー、ソフトウェアデザイナーは彼らのプロダクトはゲームからもっとも遠いものだと主張しますが、UIデザインに関してゲームから学べることは多くあります。

なぜゲームデザイナーはUIに夢中になるのか

UIはゲームにとって不可欠なパーツです。ゲームデザイナーは、プレイヤーを先に進ませるための情報をどのように表示するかということと、ゲームを台無しにしないようにすることとのバランスを取る必要があります。情報が少な過ぎるとプレイヤーが混乱しますが、多過ぎるとプレイヤーが処理できなくなり、フラストレーションになります。

FPSにおける弾数カウンターから格闘ゲームにおける体力ゲージに至るまで、ゲームにおける情報の表示はプレイヤーがゲームをプレイするにあたって必要不可欠です。

たとえば「Call of Duty」シリーズでは、プレイヤーがダメージを受け過ぎると、操作キャラクターが痛みにあえぎ、スクリーンの縁が血の色に染まります。他のゲームは決まって体力ゲージを画面の上か下かに表示しますが、Call of Dutyのアプローチは、ユーザーが周りで起こっている全てのことに集中し続けられるようにしており、ゲームに熱狂的な要素を加えています。

「Call Of Duty」におけるダメージの視覚的な表示

ナビゲーションメニューや検索バー、パンくずなど、ほとんどのWebサイトが非常によく似たUIを備えている一方で、ゲームは真にユーザーのためになるUIエレメントを作ることで差別化しています。

よくできたデザインほど目に見えないものだ。私たちがデザインに気づくときは、決まってその出来が悪いときだ。 ―Jared Spool

ゲームデザイナーがUIのトレンドを作っている3つの重要なやり方を見て、それがWebにおける体験にどのように使えるのか検討してみましょう。

メニュー

多くのゲームはメニューを通してプレイヤーに様々なアクションを求めます(ゲーム内のインベントリを管理する、キャラクターをアップグレードするなど)。しかしながら、シンプルにフォルダを並べる代わりに、ゲームデザイナーはメニューにおいてユニークな体験を作り上げることに誇りを持っています。

ロールプレイングゲームの中には、プレイヤーがスキルツリーを使ってキャラクターをアップグレードできるものがあります。これによってプレイヤーは1つかそれ以上の「枝」に沿ってキャラクターを育てることができます。

これはしばしばスキルを結ぶ線として表示される一般的なゲームの仕組みですが、「The Elder Scrolls V: Skyrim」では、デザイナーがゲームのファンタジー的なテーマに合わせるためにスキルツリーを星座として表示することを選びました。

スキルツリーの画面を開くと、プレイヤーのキャラクターが文字通り空を見上げており、これによってゲームへの没頭をより深くしています。スキルツリーが持つ機能自体は他のゲームと変わりませんが、画面の開き方とその機能の使い方へのエレガントなアプローチが、Skyrimを他のゲームから際立たせている多くのディテールの1つとなっています。

「Skyrim」のキャラクターのスキルツリー

ポイント・オブ・インタレスト(POI)

マーケティングWebサイトがCTAボタンによってユーザーの注意を引きたいと望むように、ゲーム開発者はポイント・オブ・インタレスト(POI)によってユーザーの注意を引こうとすることがよくあります。地面に体力回復アイテムが落ちていても、ユーザーがそれに気づかなければ役に立ちません。

「ゼルダの伝説 ブレス オブ ザ ワイルド」を例に取りましょう。ユーザーを夢中にさせるオープンワールドのゲームで、狩りをしたり料理をしたり、野生の馬を手なずけたりと、数え切れないほどのアクティビティを楽しむことができます。その中でカエルは、ある種のレシピに不可欠な材料ですが、狙いを絞って探さない限りフィールドでは簡単に見過ごしてしまいます。カエルにフォーカスを当てると、その種別が小さなテキストでカエルの上に表示されます。

「ゼルダの伝説 ブレス オブ ザ ワイルド」におけるカエルの詳細情報の表示

このゲームにおいて、もしカエルがあまりにも見つけやすかったら、プレイヤーは興ざめしてしまいますし、逆に見つけるのが難しすぎても、狩りは面白くありません。詳細を知るためにいちいち選択しなければならなかったら、すぐに退屈な作業になったはずです。ユーザーがブレス オブ ザ ワイルドに夢中になるのは、必要なときにUIがあり、要らないときには無いおかげなのです。

カスタマイズによるシンプル化

ゲームの中には、世の中のもっとも複雑なソフトウェアさえシンプルに思えるくらいに複雑なものが存在します。そのような場合、ゲームデザイナーは時として万人に受け入れられるわかりやすい解決に走らずに、UIをプレイヤーに渡してしまうことを選びます。

「World of Warcraft」では、ゲーム自体が非常に奥深く複雑であるので、UIのカスタマイズがこのゲームに不可欠なパーツとなっています。プレイヤーはゲームの中で行える数百もの事を管理しやすくするために、大量の修正を加えることができますし、ゲームの開発者はユーザーにそのような機能を与え、これをすることを奨励しています。他の多くの複雑なゲームは似たようなカスタマイズ機能しか持っておらず、プレイヤーが自分に見やすいように情報の表示を並べ替えるといったようなものです。

「World of Warcraft」におけるカスタマイズ

UIデザイナーはゲームから何を学ぶことができるか

WebデザイナーとソフトウェアデザイナーはUIデザインについて様々な質問を投げかけることで、ゲームのUIの先進的な性質から多くを学ぶことができます。

このUIは本当にプロダクトを表現しているか?

ユーザーに進む道を見つけさせたい、またはユーザーを特定の方向に誘導したいのであれば、常にUIが本当にプロダクトを表現しているのかどうか考えるべきです。

2009年にハンバーガーメニューが再登場すると、瞬く間にミニマリストにとって絶対のスタンダードとなるモバイルフレンドリーなデザインになりました。しかし今ではそれが消極的なUXであるとして批判に直面しているように、ある種のプロダクトはもっとそのプロダクトに合うメニューを見つけ出しました。

たとえば「サウンドクラウド」は、お馴染みのハンバーガーメニューのデザインを横にし、さらに1本の棒を傾けているので、ほとんどレコードがCDが並んでいるように見えます。お気に入りのトラックを集めたコレクション、プレイリスト、最近再生した曲などのメニューに繋がるアイコンとしてこれは完璧です。ユーザーの全てのレコードが棚に並んでいるようなものです。

「サウンドクラウド」におけるハンバーガーメニューのカスタマイズ(右下)

気づいて欲しいPOIに注意を引く良い方法が他にはないか?

CTAの色や置き場所にこだわることに止まらず、他にPOIへ注意を引くために使えるUIエレメントがないか自問してみましょう。

GoDaddy.comは伝統的なフロントページ中央のCTAボタンを使っていますが、彼らは幅広いオーディエンスへの訴求を狙っているのでこれは合理的です。しかしまだ「Start for Free」をクリックする準備ができていない人にとっては、その人の目が自然に向くであろう他の場所として、検索バーに親しみのこもったメッセージが用意されています。

そのメッセージは、ここで「あなたにぴったりなドメイン名を探すことができる」と言っています。さらに、検索するとわかりやすい結果と価格が表示されるので、ユーザーはGoDaddyが素早くドメイン名を探すことができる場所だと覚えるでしょう。

検索バーにクリエィティブな第2のCTAを持つGodaddyのホームページ

ユーザーにカスタマイズさせることによって解決できる問題はないか?

誰もが皆、あなたのプロダクトに対して同じ使い方をするとは限りません。誰にでも受け入れられるUIをデザインしようとする代わりに、ユーザーにプロダクトの機能の使い方をカスタマイズしてもらうようにすれば、最高のUXになるでしょう。

Adobeのプロダクトは様々な使い方が出来ることで知られており、カスタマイズ可能なUIについて造詣が深いです。InDesignはその最たる例です。幅広い機能を持つDTPソフトウェアであるInDesignを使えば、ユーザーは自分のサイドバーに各機能のショートカットを組み込むことができ、類似のショートカットをグループにまとめることができます。一度機能を立ち上げると、あとはそれをサイドバーかグループにドラッグするだけで、素早く簡単にサイドバーが自分用にカスタマイズされます。

InDesignのショートカットのカスタマイズ

ゲーマーはUIが大好きなのだから、あなたのユーザーも同じはず

ゲームレビューフォーラムのポスト、またはゲームの宣材においてすら、ゲームのUIが取り上げられることはほとんどありません。ユーザーがゲームを進める主な手段でありユーザーが何時間も目にするものなのですから、ゲームのUIはその機能に不可欠なものです。

優れたUIはプロダクトを使いやすくするだけでなく、楽しませることもできます。Webサイトとソフトウェアは誰かのタスクを完成させるためにデザインされるのが普通ですが、ゲームはそれ以上のことをもたらすためにデザインされます。

ゲーム業界の数十年に及ぶユーザーフレンドリーなUIへのこだわりが、UIを学びたいと考える人に多くの教訓を提供する先進的なUIを生み出すための土壌となったのです。そして、もし他に何もなければ、あなたは今「仕事のために」ゲームをプレイする理由ができたことになります。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント