スタジオルーペ開発者日記

iPhoneにはボタンが無い。それゆえにデザインで「タッチできる部分」とそうでない部分の違いを表現する事は思った以上に難しい事でもあります。

今回はオリジナルUI（ユーザーインターフェイス）を実装する時に僕が意識している事を書きます。

まず、ボタン（タッチする事で何かが起こるエリア）を分かりやすくする。
簡単な方法はアニメーション（動き）を使ってその部分を引き立てる事です。
ゲームなどではよくスタート画面で最初にタッチするべき場所をフラッシュ（光ってる感じに）させて、
「ここを触ってください」と注目させる事が多いです。

新作の「シンクロ・フィンガーズ」では、最初の画面で「Touch To Start」を触ると、次はモード選択を迫られるのですが、そこでは左右にある矢印の方向を変え、「２つの選択肢」に矢印を合わせる事で「次はこっちを押してください」と動きで伝えています。

これは「矢印が動くゲーム」、という事をゲームが始まる前からユーザーに教える役割にもなっています。

モードを選ぶとゲーム画面に切り替わります。
ここではドカンと真ん中に「START」という丸いボタンが表示されます。

１回目のタッチ、２回目のタッチと真ん中を続けて押してもらっているので、その流れで「次はこれか」、と大体瞬時に分かってもらえると思うので、ここはそれほど強調はしていませんが、触った時に変化があると、「押している感じ」を引き出せるので、ここではタッチをすると丸が若干小さくなるようにしました。
指を離すと同時にカウントダウンが始まり、ゲームがスタートします。

タッチパネルでは実際に「押している」という感触は無いため、少しでもヴィジュアル的な変化や音などを使って、その感覚を作り上げなくてはならないのですが、色の変化というのも効果的です。
色は違いがハッキリしているほど印象は強くなりますが、あまりに極端な変化も目によくありません。
特に「シンクロ・フィンガーズ」で気をつけたのは、ゲームプレイ中のタッチによる変化の付け方です。

このゲームは早さを追求するゲームなので、早い動きを前提に、色や形の変化が及ぼす目への負担なども考えなくてはなりません。
「シンクロ・フィンガーズ」ではあえてタッチの時の色の変化は控えめにしています。
こんな感じです↓

それは１秒に一回以上の早さで正解が続いた場合に、極端に色が違うと、チカチカ光って見えて、ゲームに集中しづらくなるからです。
「不正解」の場合だけは極端に違う色を使ってシグナルを送っています。
不正解する事がゲームの目的ではないため、不正解の場合は逆に多少の不快感を引き出さなければなりません。

シンクロ・フィンガーズを持っている人は試しに１本の指で、間違えた場所を連続で押してみてください。チカチカしますよね？こういう激しい変化が秒速で続くと目にも脳にも負担になるので、ゲームなど動きのあるものを設計する時は注意するべきポイントです。

そんなわけで、「正解」を瞬時に伝える為には「音」ともう一つ別の「動き」を使っています。その動きとは中央の矢印の方向が変わるというものです。「正解」に対してのみ発生する変化なので、ある程度やるうちに、脳が正解の時にだけ起こる「変化」を認識し始めます。なので矢印は基本的にランダムではありますが、前回と同じ方向には絶対にならないように設定しています。これによって「たまたま同じ方向になって動きが止まったように見え、正解したのかしていないのか？」と一瞬脳が混乱するような事態を防いでいます。
つまり一定した変化を上手く利用する事によって生み出せる「感覚」もある、という事ですね。

「フラットな感触」しか無いタッチパネルだからこそ必要以上に意識して作り上げていかなければならない部分も多く、作り手を悩ませる事も多々あると思いますが、同時にその「無い事」が刺激になって、面白いものを生み出す力にもなっていると思います。
iPadの登場でますます時代はタッチパネルの方向へ向かっている事が見えてきましたし、これからはタッチパネルデザイン論というものがどんどん注目を浴びる事になるはずです。
画面が大きくなればなるだけ、画面上の触れる場所とそうでない場所の区別もハッキリさせる必要がでてきますし、見るだけのデザインの時代から、触る事も前提としたデザインが重要視される時代へとシフトしていくでしょうね。

特にウェブデザイナーあたりは急激にこの波に飲み込まれる恐れがあるため、興味のない人でも絶対にiPadには注目した方がいいと思います。
デザイナーにとって新しい時代はもう既に始まっているのですから。