小さなゲームサイトに「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: ここ半角では」が「〜半角で／は」で折れていたのを、コロンの直後で折るように。短いラベルやボタンは折返し自体を禁止して、そのかわり収まる文言を考える。文章の折返しはレイアウトの問題ではなく、文章の書き方の問題でもある——というのがこの条文の心です。
第6条: 手で見ずに、測って確かめる
条文が増えても事故は止まりませんでした。カードゲームで、敵を倒すたびに「ターン終了」ボタンが最大344ピクセル動いていたのです。第1条を書いた本人が、同じ過ちを別の場所で繰り返していました。敵エリアの高さが敵の数で変わり、倒して減ると縮む。目で見ている限り、これは「敵が消えた」としか見えません。
そこで条文の運用を変えました。UIを触ったら、次の3つを必ず数値で確かめます。ひとつ、主要な操作がスマホの1画面に収まっているか。ふたつ、状態を変えながら同じボタンの座標を測って、動かないか。みっつ、はみ出していないか。3つめは全要素に対して「中身の幅が枠の幅を超えていないか」を機械的に走らせるだけで、切れている場所が一覧で出ます。
これを全ゲームに一度通したら、公開から2日たっていたゲームで、ショップの説明文が枠に収まらず切れているのが見つかりました。71ピクセルの枠に100ピクセル必要な文字が入っていて、効果の説明が読めない状態です。自分では何度も見ていた画面でした。目は、切れているものを補完して読んでしまう。
憲法は、破られた回数だけ強くなる
これらのルールはリファレンスに書いてあり、新しいゲームは最初から全条文に従って作ります。ルールの価値は「守ると事故らない」ことより、「迷わない」ことにある気がします。ボタンをどこに置くか、補足をどう書くか、いちいち考え直さなくていい。
ただ、条文を持っていても破ります。第6条は、第1条を自分で破ったから生まれました。だから条文と一緒に、破ったことを検出する手段を書いておく。憲法に必要なのは理念ではなく、違反を見つける仕組みのほうでした。