モバイルデザインパターンとゲームUI

モバイルデザインパターンとゲームUI

ゲームデザイナの水島です。少し前の話題ですが、aimingでランチの時間に読書会をやってました。

mobiledesignpattern

テーマはこれです。オライリー・ジャパンの『モバイルデザインパターン――ユーザーインタフェースのためのパターン集』

ナビゲーション、フォーム、リスト、フィルター…という具合に、モバイルのアプリケーションのさまざまなパターンを網羅的に収集・命名して解説していく、というシンプルな本です。普段我々が目にするアプリのほとんどの定型が詰め込まれてます。

この本ではゲームのUIは扱ってませんが、近年のタッチデバイスのゲームは、iOSやandroid標準のUIを模したものがどんどん増えてます。iOSのユーザーインターフェースガイドラインでは、“ゲームなどの没入型アプリケーションの場合は、完全にカスタムのコントロールを作成することが望ましい”とされており、標準のUIを使う必要はないことを示唆しています。でも実際には、使いやすさや他のアプリとの親和性を考えて、かなり近くしているゲームも多いですね。

iPhoneの名作放置探索ゲー『ゆけ!勇者』が2010年に出たときは、そのミニマルなビジュアルのほとんどがiOSの標準UIでできている事実に軽い衝撃を受けました。でも今では、標準UIっぽいデザインを大幅に取り入れたゲームもめずらしくありません。パズドラなんかもそうですよね。

モバイルデバイスのゲームUIは日々進化していると感じさせられます。

先ほどの読書会で出た話題です。『モバイルデザインパターン』には、「Bulk Action(操作の一括実行)」とされるUIが出てきます。写真の管理アプリなどで、複数のファイルを連続でチェックして一斉に削除したりする操作です。「これ最近もどこかで見たなー…」と思っていたら、iPhoneでヒットしている『ドラゴンリーグⅩ』(UIの秀逸なゲーム!)にも、アイテムを一斉に合成させるための同じようなインターフェースが出てくるんですね。しかも単に選択したアイテムがチェックされるだけでなく、現在、何個選択されたか分かるように、チェックマークに数字が書いてあるんです。ゲームの仕様上、同時に合成できる個数に上限(10個)があるので、この仕様は非常に効果的でした(これより前にこのUIを使ってるアプリがあったらごめんなさい… この仕様はパズドラのほうが先のはず、というご指摘をいただきました……すみません。とにかく最初に考えた人はエラい!)。

ほんのちょっとした違いではありますが、すでにこの『モバイルデザインパターン』よりも先に行ってるUIもあるなー、などと考えながら読むとさらに楽しめます。

最後に。

本書の巻末には、付録としてこの本で定義されたパターンの一覧がまとめてあります。ゲームのUIを作っていると、UIデザイナとゲームデザイナ、UIデザイナとプログラマなどの異なるパート間で、お互いが考えていることが通じずもどかしい思いをすることがあります。そのギャップは、ラフを書いてみたり、実際にデザインしてみたりしてなんとか埋めていくわけですが、けっこうな労力がかかる。あげくの果てに、お互いの話を突き詰めていくと実はおんなじことを話してたりして。

このパターン一覧は、そうしたギャップを埋めるためのコミュニケーションツールとしても使えると思いました。読書会が終わっても、サッと取り出せるように手元に置いてます。会社からUIをめぐる諍いが消えるその日を願って……!