無駄とも思える努力の積み重ねが、「美しさ」を維持する。
カウボーイビバップ ／
■
「クラブニンテンドウのＵＩのクオリティ凄ぇよ」的なツィートしたら「どこがスゴイかちゃんと説明せよ」という命令が飛んできたので解説します。
クラブニンテンドー
http://club.nintendo.jp
３ＤＳのあたりからリニューアルしたっぽいんですけど、ソフトのシリアル番号を入れるページが良く出来てるんですよね。
---------------------------------------------------
※ＵＩとは何か？
「ユーザーインターフェース」の略で、人が機械やコンピュータを操作するときの手段の総称。ゲームでもキャラクターの操作から、メニューのインターフェイスまで幅広くＵＩと呼ばれる。ちなみにＵＩ部分はゲーム本編と違って仕様定義がしやすいので、この部分の書類作成を拘るゲームプランナーは多い。
……というのがヨコオの中の定義デス。
---------------------------------------------------
という事で、クラブニンテンドーのＵＩの良さについて。
沢山あるんですが、代表的かつ気付きにくい部分を中心にご紹介します。
■
まず入力した小文字英字を自動で大文字にするところ。
画像じゃ確認できませんが、を入れても入力した端から大文字に変換していきます。
・シリアルで記載されているのは大文字のみ。
・キートップには英語は大文字で印刷されている。
・キーボードで入力するとデフォルトは小文字入力。
これらの条件から、多くの入力者（特に初心者）は小文字で入力すると思われます。最高にダメなＵＩは
小文字入力だと、最後の確認時に
【シリアルが違います】みたいなエラーを出す。
とかで、これだと「あれ？違う文字入れた？」となってしまい、大文字小文字の違いでエラーが出ている事をユーザーが認識出来ません。最悪です。最近のトレンドは、大文字小文字を両方受け付けるようにするタイプですが、入力した文字を大文字に自動で変換してくれるのは大変すばらしいと思います。
ここで注目ポイントですが、打ち間違い易い文字として右側に
「0」数字のゼロと、「O」アルファベットのオー
「1」数字のイチと、「I」アルファベットのアイ
の表示がありますよね？自動変換でない場合は、これに「アルファベット小文字のエル」「アルファベット小文字のオー」を追加する必要があり画面に情報が増えてしまうんです。
小さい事ですが、画面情報の整理はＵＩの基本ですから重要なポイントだと思います。
■
また、大きな特徴として
・入力欄と確認用の表示が二つある。
という点が挙げられるでしょう（偉そうに言う）。画像では「シリアルナンバー」という部分が入力欄で、（確認）と書いてあるのが確認用表示です。
皆さんもご承知かと思いますが、通常こうしたシリアルナンバーの入力欄＝確認欄として使用されます。「入力用」と「確認用」の二つあるのは異様です（少なくとも僕はここ以外では見た事が無い）。で、これによる恩恵は
Ａ・受領データの明示
Ｂ・ユーザー行動の明示
Ｃ・入力性と視認性の両立
などです。
一個づつ説明します。
■
まず「Ａ・受領データの明示」。
「確認用」の欄に表示されているデータは「サーバが受け取れるデータですよー」というメッセージです。だから受け取れないデータは表示しない。
サンプル画像では「-（ハイフン）」以降のデータは表示していないんですが「データがおかしいから受け取りませんよ」というメッセージを示している訳です。
こうする事で、入力された文字種でエラーが出るケースを未然に防いでいる（というかＯＫな文字しかうけつけない）ようにしています。
■
次に「Ｂ・ユーザー行動の明示」です。
一見、Ａの受領データだけちゃんと表示すればいいように思いますが、エラーデータをあえて表示する事で「貴方の行動はちゃんと聞こえてますよ～」というメッセージを投げつけているわけです。
ここで入力したデータを表示しないと、ユーザーは「あれ？入力したのに表示されない。キーボードかＩＭＥが壊れた？何か変換を間違えた？」と思ってしまう場合があります。返事をしない居酒屋の店員がダメなように、ＵＩは入力に対して何かしらのレスポンスを返すのが礼儀なのです。
ということで、シリアル表示欄が二つある事は「ユーザーが入力出来るデータ」「サーバが承認出来るデータ」の二つを同時に確認出来るという離れ業をやってのけているのです。
■
最後に「Ｃ・入力性と視認性の両立」。
シリアルとか超長いのって間違え易いじゃないですか。だから、一定の数で区切って読みやすくしているケースが多い訳です。電話番号の XX-XXXX-XXXX みたいなもので。クラブニンテンドーの場合は４文字づつですね。
とはいえ、入力欄を分けてしまうとマウスでイチイチ入力欄を指定したり TAB キーで移動する必要が出てくる訳です。それはめんどくさい。だから、入力欄では一気に繋いだ状態で入れさせ、確認欄では４つ単位で切り分けると。
■
他にも１６桁と２０桁の両方に対応した入力欄とか、次のアンケートページの文字色の変化とか、実装が Flash じゃなくスタイルシートか何かでやってるから iPhone でも使えそう（未確認）とか、いろいろ良いポイントはあります。
もちろん他のソリューションや改善方法はあると思います。
たとえば上の画像でエラーが起きている文字（ハイフン）は赤字で表示するとか。
でも、今回一番凄いと思ったのは、こんなどうでもいいシリアル入力画面にこれだけの手をかけているという事実。普通「このくらいでいいよね」ってレベルがあって、無意識のうちにそれで我慢しちゃう。それをここまで高めたのは素晴らしいのではないでしょうか。
■
という事で珍しくＵＩ周りのレビューとかしてみました。
ゲームのインターフェイスはいろんな面白話があるんですが、興味のある人が多ければまたしてみます。今回のツイートは反応も多かったですし。
……と思ったんですが、今回は任天堂ネタだから反応が多かっただけか。
ではまた。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
