目次


SDLの使用、第5回:Pirates Ho! におけるインターフェース設計の原則

簡潔性、一貫性、および没頭できること

Comments

ユーザー・インターフェースとは?

われわれがユーザー・インターフェースの設計で最も考慮した点は、その目的を定義することでした。われわれの 3 つの大きな目標は、ユーザーのための、対話、情報、およびエンターテイメントでした。

対話

インターフェースを使用すれば、プレイヤーはゲームと対話することができます。この場合、そのゲームが単純なテキスト行からなっているか、3-D グラフィカル・マーベルからなっているかは関係ありません。インターフェースの第 1 の目的は、ゲーム・ロジックとプレイヤー間のデータ変換を行うことです。インターフェースがなければ、ゲームをプレイすることはできません。インターフェースは、ゲームで何が行われているかをプレイヤーに知らせ、プレイヤーはそれに応じてアクションを取ります。

2 つのユーザー・インターフェース設計 (Angband および Quake III)
2 つのユーザー・インターフェース設計 (Angband および Quake III)
2 つのユーザー・インターフェース設計 (Angband および Quake III)

情報

インターフェースは、ゲームのセッティング、キャラクター、オブジェクト、およびイベントに関する情報を表示します。これらの情報により、プレイヤーは意思決定を行うことができます。しばしば、絵は千語に値すると言われます。インターフェースの場合は、ゲームに組み込まれたイメージが、しばしば、テキストよりも効果的かつ効率的に情報を表示します。これを行うには、イラストか記号表記 (たとえば、あるキャラクターに生命がいくつ残っているか) のいずれかを使用します。

図形表記 (Raptor) を使用するインターフェース
図形表記 (Raptor) を使用するインターフェース
図形表記 (Raptor) を使用するインターフェース

エンターテイメント

インターフェースが見て楽しいものであれば、なお結構です。出来のいいグラフィックスや興味を引く風景を持ったゲームが好まれます。それは、エキサイティングなストーリー・ラインが、視覚的な要素によって、より一層、効果が高められるからです。その上、細密図は、プレイヤーがそれぞれのキャラクターのイメージを感じ取ったり、セッティングにローカル・カラーを付けたりするのに効果があります。イラストがなければ、こういった想像的な詳細さは失われます。イラストはゲームの世界をさらに豊かにします。

これらの 3 つの問題 (対話、情報、エンターテイメント) が、インターフェース設計方法の決定に大きな役割を果たしました。われわれの仕事は明確でした。つまりわれわれは、プレイヤーがゲームと対話しながら、ゲームから必要なすべての情報が面白おかしいやり方で提供されるようにする必要がありました。

優れたユーザー・インターフェースとは?

コンピューター・ゲームや他のソフトウェア、時折行うコンソール・ゲームなどのためのユーザー・インターフェースの作成について、われわれはかなりの経験を積みました。そのためわれわれには、どのインターフェースが役に立ち、どのインターフェースが役に立たないかがよく分かります。幸運なことに、ゲーム開発業界にも仲間がいますので、彼らのアドバイスが、優れた インターフェースの定義を補強したり、改良したりするのに役立っています。"Pirates Ho!" のインターフェースを開発するときに心掛けていた基本的な原則は、簡潔性、一貫性、および没頭できることでした。

簡潔性

"完全なインターフェース" の魔法の公式に関する調査で、最も多かった回答は簡潔性です。つまり、理解しやすくて、説明書のいらないインターフェースを組み立てることでした。言い換えれば、次に何をするかをプレイヤーに知らせるサイドバー (補足指示) です。

理解しやすいインターフェースと言うとき、われわれは、中間ステップ、コマンド、キー・ストロークなどを使わなくても、ゲームの情報にアクセスしたり、応答したりできるということを意味しています。情報は、プレイヤーがそれを必要とするときに画面に表示されます。プレイヤーはゲームを続けるために、キーボードやマウス、ジョイスティックなどのツールの使い方を理解するのに、あまり時間や手間を掛ける必要がありません。

われわれが気に入っているゲームの 1 つは、大エンターテイメント「パジャマ・サム 3: おまえは自分の体を、頭のてっぺんから爪先まで食べてしまった (Pajama Sam 3: You Are What You Eat from Your Head to Your Feet)」です。このゲームのインターフェースは、オブジェクトの上にマウスをもっていくと、矢印の外観が変わるように設計されています。矢印が変わるのは、そのオブジェクトをクリックすると何かが起こることを示しています。こうしてプレイヤーは、そのオブジェクトをクリックすることにより、ゲームのアクションを進めることができます。矢印が第 3 の形に変わり、別の画面へ導くパスが示されます。矢印を画面の最下部へ移動すると、在庫品目の図が現れますので、プレイヤーは在庫を調べることができます。プレイヤーがゲームの保管や終了のために使用する「コンピューター (computer)」アイコンも、画面の最下部に在庫と一緒に表示されます。確かに、このゲームは 3-8 歳の子供が対象です。しかし、このインターフェースの簡潔性により、あらゆる年代のプレイヤーが魅力的で面白いストーリー・ラインに没頭できます。非常に複雑なインターフェースであっても、このゲームのストーリーとパズルの面白さを減じることはありません。われわれがこのゲームを非常に気に入っているのは、これもその理由の 1 つです。

「パジャマ 3 (Pajama Sam 3)」インターフェース (在庫を含む)
「パジャマ 3 (Pajama Sam 3)」インターフェース (在庫を含む)
「パジャマ 3 (Pajama Sam 3)」インターフェース (在庫を含む)

プレイヤーが説明を読まなくてもよいようにするヒントは、ゲーム業界で働く 2 人の友人からもらいました。彼らによれば、プレイヤーは、どうしても必要に迫られない限り、説明を読んだりしないそうです。プレイヤーはゲームをプレイしたいだけなんです。われわれは当時、印刷マニュアルを作成するつもりはありませんでしたから、彼らのヒントは役に立ちました。しかし、それはまた、インターフェースを簡単に使えるようにしなければならないということも意味していました。

一貫性

インターフェース設計にとって、一貫性も非常に重要であることが分かりました。時々経験することですが、初めはプレイしやすいように見えたゲームも、結局は、別のビューやモードに切り替えたくなります。しかし、ビューやモードが変わると、別の規則が適用されます。ゲームの場合は、どこでも同じやり方で同じことを行えることが大切なのです。また、重要な情報がいつも同じ場所に配置されていることも大切です。われわれの場合の一貫性では、必ずしもゲーム全体を通して同じ画面レイアウトである必要はありません。しかし、情報がどこにあるのか、また、ゲームの別の個所ではコマンドをどのように実行できるのか、といったことを、プレイヤーが予測できるようなロジックをレイアウトに組み込んでおくことをお勧めします。

たとえば、われわれはかなり長いこと、Blizzard の「ディアブロ II (Diablo II)」をプレイしています。われわれが気付いた点の 1 つは、インターフェースの一貫性が十分に取り込まれていることです。このゲームでは、いくつかの基本コマンドが、同じ方法でどこででも使用できます。また、在庫、購入/販売/取引、スキル、属性、といったさまざまなメニューをナビゲートするのも容易です。これらのメニューは、すべて同じレイアウトになっているため、ナビゲートするのも容易です。プレイヤーは、ゲーム中の任意の時点でオブジェクトや人々、場所などにマウスを当てて、簡単な説明を表示することもでき、これが非常に役に立つのです。

「ディアブロ II (Diablo II)」インターフェース (在庫メニューを含む)
「ディアブロ II (Diablo II)」インターフェース (在庫メニューを含む)
「ディアブロ II (Diablo II)」インターフェース (在庫メニューを含む)

「ディアブロ II (Diablo II)」も、視覚的なスタイルでは一貫性があります。グラフィックス、メニュー、制御バーなどは、すべて同じゴシック様式のファンタジー・ルックになっています。この種の視覚的な継続性は絶対に必要というわけではありませんが、美的な楽しみをゲーム経験に加えてくれるし、ゲームの世界に没頭できるという幻想を高めてくれます。

没頭できること

ほとんどだれもが、映画に夢中になった楽しい経験を持っています。熟練した映画製作者は、光と音の要素を組み合わせて、生き生きした幻想の世界を作り出し、永続させ、観客は、2、3 時間この世界に逃避します。このようにゲームに没頭できるときは楽しいものです。ユーザー・インターフェースの要素は、プレイヤーがゲームの世界に直接没頭できるという幻想を永続させる手助けをします。グラフィックの要素は、ゲームの世界のセッティング、アクション、およびローカル・カラーをプレイヤーに視覚的に経験させます。音楽と音響効果は、特定のムードを作り出し、ゲーム内のイベントをより現実的にします。「クエーク III (Quake III)」のようなアドレナリン・ポンプ使用者を考えてみてください。ぞっとするような音響効果とどぎついグラフィックスがなければ、彼らの魅力はほとんどなくなるのではないでしょうか?

「クエーク III (Quake III)」インターフェース
「クエーク III (Quake III)」インターフェース
「クエーク III (Quake III)」インターフェース

ゲームの世界に没頭できるという幻想を維持するためのもう 1 つの方法は、インターフェースの各要素をゲームの世界の各部分に変装させることです。映画評論家は、映画のアクションやセッティング内で可視のソースが付けられた要素 (通常は、音楽) を記述するのに、"diegetic" という用語を使用します。diegetic な要素の卑近な例としては、ピアノやジュークボックスの映像を伴った音楽です。音楽は、今でもサウンド・トラックの一部に取り入れられていますが、バックグラウンド・ミュージックとして機能するのではなく、映画の世界の一部になっています。インターフェース設計という観点に立った場合、ゲームの一部として仕立てられたツール、メニュー、その他各種の機能を記述するのに、"diegetic" ほど適切な用語は他にありません。(その上、あなたがその用語を会話で使ったら、友人たちも感心しますよ)。

ゲームの diegetic な要素の例を見てみましょう。Interplay の「フォールアウト II (Fallout II)」には、「ピップ・ボーイ (Pip Boy)」(Palm-Pilotesque コンピューターで、クエスト情報、電子マップ表示、およびゲームの世界に関する情報ファイルが含まれている) が組み込まれています。「ピップ・ボーイ (Pip Boy)」の場合も、プレイヤーは、特定の時間だけ "待機" することができます (ゲームの世界の時間にその時間だけ先へ進むよう指示します)。また、「ピップ・ボーイ (Pip Boy)」を実際にゲームで使用して、別の場所のコンピューター・ステーションから情報を検索します。この賢い diegetic なツールは、プレイヤーがゲームの世界の外側へ出て情報を探さなくてもよいようにしてくれますので、ゲームの世界と実世界との間の境界線がほんの少しだけぼやけたものになります。

「フォールアウト II (Fallout II)」インターフェース - 「ピップ・ボーイ (Pip Boy)」ビュー
「フォールアウト II (Fallout II)」インターフェース - 「ピップ・ボーイ (Pip Boy)」ビュー
「フォールアウト II (Fallout II)」インターフェース - 「ピップ・ボーイ (Pip Boy)」ビュー

われわれのインターフェースとは?

それでは、一体これをどのようにして "Pirates Ho!" に適用するのでしょうか? われわれはまだ欠陥を直していますが、予備設計は既に仕上がっています。ここで鍵となる語は「予備」です。全体をオーバーホールしてから終了することになるでしょうが、それまでは、以下のようになっているでしょう。

アクション・ビュー

われわれのインターフェースの焦点は、アクション・ビューです。このアクション・ビューを利用すれば、プレイヤーは、現在何が行われているかを知ることができるほか、それがいつ、どこで、だれに対して行われているかの情報を入手することができます。このアクション・ビューは、コンバット、航海、およびダイアログ (つまり、ゲームのアクション) を表示します。画面の右半分にある大きなグラフィックは、プレイヤーに見えているもの、または船とその周りのオーバーヘッド・ビュー (航海中やコンバット時) のいずれかを示しています。左上のグラフィックは、そのキャラクターが現在いる場所、周囲の状況、時刻、および気象条件を示しています。左下のグラフィックは、キャラクターがどこを航海しているかにより、常に、ゲームの世界または町、あるいはそれよりもっと小さな区域のいずれかを示すマップです。

ここまでの計画では、ポイント・アンド・クリック・コマンドに応答するために必要なすべてのものを インターフェースに組み込みます。いくつかのキーボード・ショートカットや他の機能は、後で追加することができますが、今のとこころ、その作業は非常に簡単かつ直接的に行えるように思われます。われわれは、プレイヤーが項目の上にマウスをもっていったときに表示されるオブジェクト、場所、ボタン、人間などの説明を組み込む予定です。ゲーム内でのすべての対話に同じレイアウトを使用し、かつ、すでに用意してある説明を一貫して提供することにより、簡潔性、外観の一貫性、および情報の可用性のバランスを取りたいと考えています。

ゲーム・レイアウト
ゲーム・レイアウト
ゲーム・レイアウト

船のログ

「船のログ」は、われわれが設計する diegetic な要素の良い例です。われわれは、このようにして、クエスト状況、食料、在庫、および船の乗組員に関する情報を組み立てています。これはログ・ブックに似ていて、各種の情報が入っている 3 つのセクションからなっており、画面の最下部にある本の形をしたアイコンをクリックしてアクセスすることができます。このログの 1 つのセクション、つまり "ページ" には、基本クエスト情報が入っていますが、この情報は自動的に入力され、更新されます。プレイヤーは、自分の注釈をログに入力することで、この情報を詳しくすることができます。次のページには、食料に関する詳細情報と所有物が示されており、プレイヤーは、下船するときに持っていく武器、食料、その他の品目を選択することができます。3 ページ目には、船の乗組員に関する情報が示されており、プレイヤーは、財貨、武器、食料などを乗組員に分配することができます。われわれは、ログの要約情報をアクション・ビューに組み込んで、プレイヤーが、いろいろな画面を使って必要な品目を探すのに時間を掛けなくても済むような方法を 考え出したいと思っています。

船のログ
船のログ
船のログ

ゲームの世界について

われわれが作成しているもう 1 つの diegetic なツールは、ゲームの世界の歴史、経済、地理、および文化を文書化します。プレイヤーは、この情報に基づいて、ゲームの世界で生じるさまざまなイベントの基本パターンを理解することができます。このことは、地図製作の大家である Frederick Figgleworth の 「諸島の小史 (A Brief History of the Isles)」という著書に示されています。Figgleworth は、時々、ゲームの中にも現れ、プレイヤーと対話します。

上述のように、プレイヤーに読ませる量を減らすという観点に立った場合、ゲームの世界に関する説明を組み込むのは、あまり支持が得られないように思われます。このようなこともあって、われわれは、インターフェースのこの部分が、ゲームの世界にとって "本物" のように見えるようにしているわけです。この「小史 (Brief History)」も、ゲームの世界で行われているパターンを要約するための最も簡明な方法です。もちろん、プレイヤーはこの歴史を読む必要はありません。プレイヤーは、最終的には、ゲームでの対話や探検を通してこれと同じ情報を集めることができます。「小史 (Brief History)」は、ゲームの世界の単一ソースとしてではなく、補足参照ツールとして使用するためのものです。

「小史 (Brief History)」参照ツール
「小史 (Brief History)」参照ツール
「小史 (Brief History)」参照ツール

オーディオ

われわれは、オーディオ機能をインターフェースに組み込む予定です。ただし、どの程度組み込むかは、まだ決まっていません。ゲーム中ずっとサウンド・トラックを流し続けることはしないかもしれませんが、時々ムード・ミュージックを取り入れることは考えられます。われわれは伝統的な船乗りフォーク・ソングや海のはやし歌などに耳を傾け、ミュージシャンの友人たちに当たってバイオリニストやペニーホイッスルの演奏家などを探しています。また、少なくともいくつかのダイアログ・シーンにボイス・オーバーを組み込んで、プレイヤーとゲームに登場するキャラクターたちとを感覚的に関連付ける方法も提供したいと考えています。もちろんコンバット・シーンには音響効果を取り入れ、キャラクターとの対話や航海シーンには周辺の騒音を取り入れます。

結論

多くの研究と検討を行った後で、ユーザー・インターフェースの予備設計ができ上がりました。この設計は、"Pirates Ho!" 開発の進行とともに練り上げていくことができます。これまでのところ、われわれはでき上がった設計の簡潔性と一貫性について非常に満足しており、プレイヤーをゲームの世界に没頭させる手段として、このインターフェースを使用しようと、考えられる最善の努力をしています。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Linux
ArticleID=227110
ArticleTitle=SDLの使用、第5回:Pirates Ho! におけるインターフェース設計の原則
publish-date=08012000