NowLoading...

NowLoading
  1. ホーム
  2. 技術備忘録
  3. スマホゲームのUIデザインで大切なこと

デザイン

  • facebook
  • twitter
  • line
  • hatena
  • pocket

スマホゲームのUIデザインで大切なこと

ゲームのUIデザインに関わり続けて早10年。
ゲームとは関係が無い様々な業界からゲーム開発にやってくるデザイナーさんも多く、他業界のデザインとは勝手の違う開発スタイルに戸惑う方も多くいらっしゃいます。
特にコンソールゲームの開発経験者は、経験者であるが故か、スマホとコンソールとの違いを理解できずにスマホ開発の理屈をなかなか受け入れてくれないというケースも多々あります。

スマホゲームのUIデザインは他のデザインとは違うという認識を持たなければいいUIを作るのは難しいです。
スマホのゲームをデザインするうえで最低限押さえておきたいポイントをまとめてみたいと思います。

コントローラが無い

スマホのゲームとコンソールゲームの決定的な違いは何か?と聞かれたら僕は即座に「コントローラーが無いこと」だと言います。
ピンとこない方も多いかもしれませんが、これは重大な違いです。

コントローラはいわばインターフェイスの入力を担う部分なので、画面上には出力される情報だけ表示しておけばユーザーは操作には困りません。
ファミコン時代のシンプルなゲームなら、画面上のキャラクターがフィールドを進んでいくだけでゲームとして成立していたので、UI表示そのものが必要ない場面がありました。

uinon
SQUARE ENIX 「ドラゴンクエスト」より (昔のゲームにはUIが無かった)

同じことをスマホでやろうとすると、画面上のUI表示が必要不可欠になります。
コンソールの移植ゲームなどは疑似コントローラを設置するなどしますが、ユーザー自身の指で画面の一部を隠してしまうので、デザインの時点で隠れる部分と表示させる部分とをきちんと考慮する必要もあります。 またスマホの操作は基本”タップとドラッグ”の2種類くらいしかないので、”AとBボタン”しかないコントローラでどう遊ぶか?みたいなことをUIで何とか実現するしかないわけです。

スマホの画面そのものがコントローラになるので、画面の作り方もゲームの遊び方もコンソールとスマホでは決定的に違うということを認識しておく必要があります。 controller

マニュアルがない

昔のゲームソフトにはパッケージの中に説明書が入っていました。操作に困れば説明書を読めば簡単に答えが得られたわけです。 mario 最近のコンソールゲームは説明書を同梱しなくなりましたが、それでもWEB上に公式ガイドなどを設置してPCでもスマホでもいつでも自由に閲覧できるようになっています。
しかし、スマホのゲームには説明書すらありません。
WEBで確認しようにもゲーム起動中にブラウザを起動するとゲームからいったん離れなければ確認もできません。
ヘルプ内に遊び方のガイドを設けているゲームもありますが、テキストだけの簡素なヘルプが多く、マシンパワーが必要になるインゲーム(バトルなど)のプレイ中に直接閲覧できるような作りにはなっていないので非常に不便で不親切です。

コンソールの場合はチュートリアルを丁寧に作りこんで、説明書が無くてもゲームを進めながら徐々に操作を学習させていくというパターンが多いですが、容量的な制限の大きいスマホゲームではリッチなチュートリアルを組み込むのも難しいという現実があり、説明画像1枚を挿し挟むだけか、初回起動時にいっぺんにチュートリを経験させる方式が一般化しています。
monsto 情報量があまりに多いのでチュートリを突破するとだいたい忘れてしまうし、同じものを再確認する場所も皆無なので、操作に行き詰まると、熱量の低いユーザーはそこで離脱してしまいます。

マニュアルが無いからこそUIの見た目だけで操作方法をユーザーに分からせなければいけないというのがスマホの難しい部分です。

かのドラクエ開発者の”堀井雄二”氏はBSフジの人気番組「ゲームセンターCX」インタビューでこんなことを言っていました。
「説明書を読むのが嫌いだから、とにかく解り易いものを作る」のが大切だと。

これがUIUXデザイナーに課せられた最大のミッションなのです。

画面サイズが小さい

スマホは画面が小さいので、当然ながら画面内に入れられる要素の数にも物理的な限界があります。
また、スマホゲームは基本的に画面をスクロールさせないので、何が何でも1画面内に情報を入れる必要があります。

プランナーさんの提出する仕様書にはこれでもかと情報がぎっしり詰まっているので、そのまま画面に表示するのはまず不可能です。
そのため、スマホアプリのUIデザインの際には状況に応じて情報を出しわけたり、掲載する要素を選別する必要があります。
長い文章も単語の入れ替えや表現の仕方によって文章をコンパクトにすることもできるので、デザイナーには文章力も必要になってきます。

場面に応じて適切な情報を出しわける。
文章をリライトして解り易く簡潔に。
画面に表示する内容は選ぶ。
スマホゲームのUIUXデザイナーには空間把握能力と構成力、文章力が求められます。

端末の性能を考慮する

端末の容量が大きくなり、通信速度も速くなり、処理能力がアップし、現在のスマホは家庭用のPCと比べても遜色ないほどの性能があります。
しかしそれでもスマホで表現できるゲームの規模には限界があり、通信環境や端末性能には個人差があるため、常にハイスペックのゲームを作るというわけにもいきません。
ロード時間が長いとそれだけでもユーザーにはストレスです。

デザイナーにはいかに軽量でリッチな画面を作るか?という課題が常に付き纏います。

画面デザインの段階からいかに効率よく端末に負荷をかけない画面を構築するか?を考えてデザインするのがポイントです。

なにも考えずに画面を作ってしまうと、後々リソースが肥大化してアプリの容量削減に追われることになります。
実装の仕方が悪いと、最悪デザインのやり直しくらいの事態に直面します。 UIパーツ 実装方法や画像の圧縮技術といったエンジニアリングの知識も勉強しておくのも重要です。
デザイン知識に乏しいエンジニアにデザインリソースの管理を任せきりにしてしまうと、どうやって画面を作っているのかわからなくなってしまい、デザイナーがデザインを触れないという非常に不便な状況に陥ります。 ドローコール

SG開発のUIUXデザイナーはデザインだけできればいいわけではありません。
どうやって画面を構築するのか?どうやって動いているのか?
エンジニアリングの知識もある程度勉強しておかなければ、効率のいい画面デザインはできません。
仕組みを理解しましょう。

関連記事

もっと見る

技術備忘録 でよく読まれている記事

人気記事TOP10