ピコピコゲーム制作で学ぶエモいUI/UX

5996 ワード
UI UX JavaScript ゲーム制作 ポエム JavaScript テキストリンク

ピコピコゲームのゲームデザインとエモいUI/UX

最近ではいかに長く飽きさせずにお金を落とさせるイベント設計やガチャの話題ばかりである様に思えるけれども、マリオブラザーズやドンキーコングに代表される初期ファミコンのピコピコゲームは、もっと人間の感覚に訴える部分でいかに人を楽しませるか、言い換えると、ユーザーの インプット に対して、 エモいリアクション が画面の表現より得られ、ユーザーが気持ちよくなれるような工夫がされていたと思う。

これを深堀りすると、よいUI/UXを設計するヒントが得られるのではないだろうか？

エモいリアクションとアフォーダンス

APEXやフォートナイトなど最近のハイエンドなゲームは様々な要素が高度に組み合わさって世界観を醸すUIになっているため「お、この作りすげーな」と気づくには相当な修行が必要であるが、ピコピコゲームは限られたリソースの組み合わせてユーザーの感情に訴えかけるので、少し観察をすると多くの気づきが得られると思う。

例えば『土管からカメが出てきて配管工っぽい男性に向かって歩いてくる』超有名なゲーム。

このゲームの謎の世界観、冷静に考えると全く意味が分からないが、得も言われぬ説得力が画面には存在しているのは皆さんもご存知の通りだと思う。

ジャンプするとたわむ床。ひっくり返ると無防備になるカメ。全てがエモい。これはアフォーダンスの塊と言えるのではないだろうか？
そしてこれは、ユーザーに何らかの行動を促す一般的なウェブサイトでも応用が効く考え方ではないだろうか。

個人的には、ウェブサイトのアフォーダンス設計はおもてなし設計だと思っている。理屈でガチガチに固めてABテストを行い購入ページに誘導する前に、ユーザーを気持ちよく行動させることにまずは目を向けてもらいたい。

という観点で、以下の書籍が大変楽しく読めたのでぜひ合わせて読んでもらいたい。
「ついやってしまう」体験のつくりかた 人を動かす「直感・驚き・物語」のしくみ

砂漠のひつじのUI/UX

オブジェクト指向の学習サンプルコードとして制作したピコピコゲームであるが、エモい仕掛けもいくつか入れてあるので、これを題材にエモさを考えてみたい。

ゲーム開始直後

以下はゲーム開始直後の画面であるが何か気づくだろうか？

ツノがないひつじと、左下に怪しい空気入れの様な何かを持った人物。画面上にはマウスの動きに連動して動く照準。更には、ユーザーの目線が散らからない様に初期ひつじの数を２匹とした。

これらの配慮により『ツノ砲を撃ってひつじにツノをつけてあげるのか！』ともしも思ってもらえたのであれば、作者としては、この画面は充分にエモかった、よかったよかったという話となる。

スコア表示

このゲームはひつじのコメカミに近い位置にツノをつける程得点が高い。自分の常識と比較しても得心のいくルールかと思うが、ユーザーに分かりやすく伝える必要があると思い、得点が高い程大きく表示する様にした。

性質上、スコアは画面上に長く表示できないので 「スコアを読み取れなくても、うまく操作したらよい結果となった」 とユーザーに伝える必要があったからである。

score-effect.js
// コードとしてはわずか数文字で大きな視覚効果が得られる
// scale: 1 + score / 20
this.tl.to(this.selector, { top: y / 80 + 60, scale: 1 + score / 20, duration: 0.3, ease: Power4.easeOut })
this.tl.to(this.selector, { opacity: 1, duration: 0.2 })

おわりに

UI/UX改善のためには理論と観察と仮設と実装、および、ユーザーテストが必要だと考える。
よいUIを観察して、要素に分解して仮設を立てて実装して、誰かに操作してもらって無言でそれを観察する。ユーザーが自分の想像した通りの感情になったのか、ならなかったならなぜならなかったのかを考える。
それを繰り返すことでよりよいUI/UXを提供できるようになるのではないかと思う。

砂漠のひつじとは

「砂漠のひつじ」は、html,javascript, css で書かれた製作中ピコピコゲームです。
github にソースを公開していますので、もし興味あればダウンロードして色々改造してみてもらえたら幸いです。