小さなゲームサイトに「UI憲法」ができるまで
うちの開発リファレンスには「UIルール」という節があります。中身は、事故のたびに1条ずつ増えてきた決まりごとです。最初から設計思想があったわけではなく、全部、実際に踏んだ地雷の跡です。どんな事故がどんなルールになったかを書きます。
第1条: クリック位置を動かさない
カードゲームで、戦闘開始時に手札が配られると「ターン終了」ボタンが156ピクセル下に飛ぶことが計測で分かりました。ユーザーが押そうとした場所から、ボタンが逃げるわけです。ほかにも、手札の枚数が変わるとボタンが上下する、ターゲット選択の帯が出ると全体が押し下がる、敵が出現するとエリアが伸びる——全部直しました。
手段は3つに整理しています。後から出る要素は場所を先に確保しておく。出たり消えたりするものはオーバーレイにして流れから外す。伸縮する要素は画面の一番下に置いて、下に何も置かない。以来、ボタンの位置サンプリングをテストに組み込んで、全状態で座標が固定であることを数値で確認しています。
第2条: 絵文字を使わない
開発中のUIには警告や鍵の絵文字が便利で、つい使ってしまいます。ところが絵文字は端末ごとに見た目が全く違い、モノクロのつもりの記号がiPhoneでは派手なカラー絵文字に化けたりします。ゲームの世界観は一撃で壊れます。いまは絵文字を全面禁止にして、どうしても記号が要る場所は ✓ や ❯ のような単色のテキスト記号だけを使っています。ゲーム内の絵文字フォールバックも全部テキストに置き換えました。
第3条: 説明文に丸括弧を使わない
これはユーザーからの指摘で生まれたルールです。「メンタル6回復（この戦闘中1回だけ）」のような括弧の補足は、狭いカードの中では読みにくく、折返しの事故も起こします。全部で48箇所を書き直しました。補足は「。」で文を区切って本文にする。ボタンは「取る — 全快・負債+1」のようにダッシュで繋ぐ。直してみると、括弧がないほうが明らかに読みやすい。以来、書く前から括弧を使わない文を考えるようになりました。
第4条: スマホの実機幅で測る
いちばん新しい条文です。PCの広い画面で確認して満足していたら、375ピクセル幅のスマホでは、ショップのボタンが71ピクセルはみ出し、敵の行動予告が箱を突き破り、ターン終了ボタンが画面外に押し出されていました。3箇所同時です。原因の大半はflexboxの子要素が「中身の幅より縮めない」というCSSの仕様で、min-width:0を知っているかどうかの話でした。いまはUIを触ったら375px幅で、しかも「一番文字が長くなる最悪ケース」をわざと作って測るのをルールにしています。
条文より大事なこと
ルールを増やすときに決めているのは、必ず「実際に起きた事故」と「発覚の経緯」をセットで書くことです。「絵文字禁止」とだけ書いてあるルールは数週間で形骸化しますが、「iPhoneでカラー絵文字に化けて世界観が壊れた」と書いてあれば、未来の自分が納得して守ります。憲法の条文の重みは、前文にどれだけ血が通っているかで決まる気がします。
第5条: 折返しを成り行きに任せない
日本語のテキストはどこでも折り返せてしまうので、放っておくと「ダメー／ジ」のような変な位置で切れます。カードの説明文は「。」の位置で必ず改行するようにコードで変換し、一文が長い説明はそもそも二文に書き直しました。敵の名前も「nit: ここ半角では」が「〜半角で／は」で折れていたのを、コロンの直後で折るように。短いラベルやボタンは折返し自体を禁止して、そのかわり収まる文言を考える。文章の折返しはレイアウトの問題ではなく、文章の書き方の問題でもある——というのがこの条文の心です。
憲法は、破られた回数だけ強くなる
これらのルールはリファレンスに書いてあり、新しいゲームは最初から全条文に従って作ります。実際、いちばん新しいゲームではUIの事故がほとんど起きていません。ルールの価値は「守ると事故らない」ことより、「迷わない」ことにある気がします。ボタンをどこに置くか、補足をどう書くか、いちいち考え直さなくていい。小さなサイトでも、憲法を持つ価値はあります。