#2.ゲームUIから学ぶ、触りたくなるUI

機能性の高さを保ちつつサービス全体の魅力が伝わるUIデザインとは一体何なのでしょうか？そこで今回は演出やエンターテインメント性の強いゲームのUIデザインから”ワクワク感や没入感”を学びたいと思います。

こちらに記述しておりますのはあくまでも私個人の考え・感想です。本文に登場するサービスや施設、企業団体様とは全く関係ありません。御理解の方よろしくお願いいたします。

任天堂『スプラトゥーン』UIデザイン

大ヒットゲームシリーズのスプラトゥーン。UIの基本である”分かりやすさ”を維持しつつ”スプラトゥーンらしさ”がわかるUIデザインを設計しています。スプラトゥーンのUIが出来上がるまでのプロセスをまとめた記事を見つけましたのでそちらを参考に自身のUIデザインに応用できる点をまとめました。

あらゆるUIデザインを比較する

スプラトゥーンのUIデザインを考える際は、任天堂が持つ、既に完成された他のUIデザインと比べて、”スプラトゥーンらしさ”を見つけていったそうです。

UIデザインとして抑えるべきポイントと、そのサービスの世界観を表現できるポイントを発見できるようになると”そのサービスならではのUIデザイン”が見えてくるのではないかと思いました。”サービスのコンセプト”や”UIデザイン自体のコンセプト”を考えると良いのかもしれません。

イメージの言語化と可視化

コンセプトがはっきりとすると、世界観に合ったフォントやエレメントが作成しやすくなります。軸となるモチーフからイメージを言語化し、さらに”動き”や”形”にまつわる言葉に形容されオブジェクトとして可視化されます。可視化されたフォントとエレメントの構成によって色がなくても”そのサービスを感じる”ことができます。

彩度と明度の特徴を活かす

”サービスのらしさ”が分かりやすく現れるカラー。単にイメージから連想されるカラーを用いるのではなく、画面をひとつの空間として、各エレメントがどのように作用するのかを考える必要があります。

「見やすいゲーム画面になっているかどうかは画面を白黒にすると確認できます」

画面を白黒にすることで機能的な部分が装飾に埋もれていないか、また、どのような色を用いたら見やすくなるのか検討ができます。強調したい部分は彩度を高くする。背景の役目を果たす部分は彩度を低くするなど。これは配色の基本ともいえるでしょう。

参考文献

・任天堂『スプラトゥーン』UIデザインの舞台裏｜娯楽のUI 公式レポート #2