三回目の更新：見た目を変える勇気

見た目だけの更新が怖い理由

見た目の更新が怖いのは、効果が見えにくいからです。バグ修正なら「直った」と確認できます。ステージ追加なら「増えた」と数えられます。配色の変更は、良くなったのか悪くなったのかを測る物差しが最初から手元にありません。

もう一つ、見た目には層があります。層ごとに、反応が現れる場所が違います。

• 入口の見た目です。作品名、紹介文、カバー画像のように、遊ぶ前に目に入るものです。反応は「起動されるかどうか」に現れます。
• 画面の見た目です。ゲームを開いたあとの配色、文字の大きさ、ボタンの形です。反応は「最初に何をすればいいか迷うか」「遊び続けるか」に現れます。
• 手ごたえの見た目です。押したときの動きや光り方などで、遊んでいる最中の気持ちよさに関わります。

三層を一度に変えると、反応が変わっても原因を切り分けられません。怖さの正体の多くは、この切り分けができないことです。逆に言えば、一度に一層だけ変えれば、怖さの半分は手順で消せます。

変えるものを一種類に絞る

「中身は同じ」を守るには、何を同じにして何を変えるかを書き出します。更新前に、紙でもメモでも構いません。次の二列を作ります。

• 変えないものです。ルール、難易度、ステージの内容、操作方法、起動からゲーム開始までの手順、ファイルの読み込み量などです。
• 変えるものです。今回は一層だけ選びます。たとえば「開始画面のボタンの色と大きさだけ」です。

ここで見落としやすいのが、見た目の変更が操作に染み出すことです。ボタンを大きくしたら押しやすさが変わり、文字を小さくしたら説明が読まれにくくなります。見た目だけのつもりが、操作の難しさを動かしている場合があります。「変えないものの列に書いた項目が、本当に動いていないか」を、更新前に自分で一通り遊んで確かめてください。

作品の見た目は、その作品の約束でもあります。アソバースの公式作品を見ると、作品ごとにタイトルの文字組みが違います。縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風といった具合です。これは遊ぶ前に作品の空気を伝える役目を負っていると読み取れます。見た目を変えるとは、その約束を結び直すことです。軽く扱う必要はありませんが、約束を結び直した結果を確かめる方法はあります。

反応を読む三つの窓と、その限界

公開先で見える反応は、使える範囲では次の三つです。それぞれの読みにくさも一緒に押さえます。

プレイ回数

プレイ回数は作品の起動を実測した回数で、人数ではありません。同じ端末・同じ作品の30分以内の再起動は重複として除かれます。つまり、入口の見た目を変えたとき「起動されやすくなったか」を見る目安にはなりますが、同じ人が何度も開けば増えます。起動後の遊びやすさは、この数字には映りません。

更新前後を比べるなら、同じ長さの期間を取ります。たとえば更新前の7日間と、更新後の7日間です。更新の日時は自分で記録しておきます。曜日の偏りや、ほかの場所で作品を紹介した時期が重なっていないかも、一緒にメモします。

いいねとレビュー

いいねは1アカウント1件、レビューは1アカウント1作品1件で、本人が編集・削除できます。見た目を変えたあとに、前の版を遊んだ人が評価を書き直すかどうかは分かりません。評価順のランキングはレビュー3件以上から載るので、件数の少ない作品では、一件の増減だけで平均が大きく動きます。数が少ないうちは、点数より文面を読むほうが得られるものがあります。「見やすくなった」「前のほうが好き」といった言葉が出ているかを見ます。

窓の限界

三つの窓に共通する限界があります。更新の前後で、見ている人の顔ぶれが違います。更新前に遊んだ人と、更新後に初めて開く人は別の集団です。見た目の効果を比べているつもりが、集団の違いを比べていることになりえます。

アソバースの確認済みの機能に、同じ作品の二つの見た目をランダムに出し分ける仕組みはありません。公開先の数字だけで因果を言い切るのは難しい、というのがここでの前提です。だからこそ、次の節で自分の手で観察を足します。

最初の操作までの秒数を表示する

画面の見た目を変えたとき、いちばん素直に差が出やすいのは「開いてから最初の操作までの時間」だと考えられます。何をすればいいか分かる画面なら短く、迷う画面なら長くなるはずです。確かめるには、見た目が違う二つの版を、別々の人に遊んでもらいます。

次のコードは、画面を表示してから最初の操作までと、「はじめる」を押すまでの秒数を、画面の左下に出す最小構成です。サーバーも外部ライブラリも使いません。比較用の版では SKIN を 'b' に書き換えた別ファイルを用意し、CSS の .skin-b 側に変えたい見た目を書きます。

<!doctype html>
<meta charset="utf-8">
<title>見た目比較用</title>
<style>
 body{margin:0;font-family:sans-serif}
 #stage{height:100vh;display:grid;place-items:center}
 #start{padding:16px 32px;cursor:pointer}
 .skin-a #start{background:#fff;color:#333;border:1px solid #333}
 .skin-b #start{background:#ff8a3d;color:#fff;border:0;font-size:2em}
 #log{position:fixed;left:8px;bottom:8px;font-size:12px;white-space:pre}
</style>
<div id="stage"><button id="start">はじめる</button></div>
<pre id="log"></pre>
<script>
const SKIN='a'; // 比較版は 'b' に変えた別ファイルを作る
const stage=document.getElementById('stage');
const log=document.getElementById('log');
const t0=performance.now();
const rows=[];
stage.className='skin-'+SKIN;
function mark(label){
  const s=((performance.now()-t0)/1000).toFixed(1);
  rows.push(label+' '+s+'秒');
  log.textContent='skin '+SKIN+'\n'+rows.join('\n');
}
function first(){ if(rows.length===0) mark('最初の操作'); }
addEventListener('pointerdown',first,{once:true});
addEventListener('keydown',first,{once:true});
document.getElementById('start').addEventListener('click',()=>mark('はじめる押下'));
</script>

このコードは記録を保存しません。表示された秒数を、遊んでもらった直後に自分で書き留めます。これで外部通信も保存も要りません。

観察の手順は次のとおりです。

1. 変える層を一つだけ決めます。ここでは開始画面のボタンの見た目とします。
2. 版Aと版Bのファイルを作り、SKIN 以外のコードを同一にします。
3. 遊んでもらう人を二組に分けます。同じ人に両方を見せると、二回目は慣れで速くなるので、一人に見せる版は一つにします。
4. 「これを自由に遊んでみてください」とだけ伝え、操作の説明はしません。説明を足すと見た目の差が隠れます。
5. 終わったら、表示された二つの秒数と、迷っていた様子を一行で書き留めます。
6. 各版で同じ程度の人数を集めます。人数が少ないうちは、数値の差よりも、迷いの様子の書き方に注目します。

結果の読み方

秒数が出たら、その読み方を先に決めておきます。結果を見てから解釈を選ぶと、都合のよい読み方に流れやすいからです。

• 版Bのほうが「最初の操作」も「はじめる押下」も明らかに短く、版Aのばらつきが大きい場合です。見た目の変更が、何をすればいいかの分かりやすさに効いている可能性があります。次は層をさらに一つ足して、同じ手順で確かめます。
• 二つの秒数が近い場合です。この変更は、開始画面の分かりやすさには効いていないと読めます。入口の見た目(作品名や紹介文)に効果があるかは、プレイ回数の窓で別に確かめます。
• 「最初の操作」は短いのに、「はじめる押下」が長い場合です。画面は触りたくなるが、ボタンが何のボタンか分からないという状態かもしれません。ボタンの文言や位置を疑います。
• 版Bのほうが長い場合です。目立たせたつもりが、情報量や色の強さで読み込みに時間がかかっている可能性があります。ただし、人数が少ないほど偶然のぶれが大きいので、断定せず、人数を増やして繰り返します。

数値が同程度でも、書き留めた様子が違うことがあります。たとえば、迷いなく押す人と、画面全体を見回してから押す人がいる場合です。秒数は同じでも、体験は違います。数値と様子は両方を残してください。

失敗しやすい点もまとめておきます。

• 変えた層が複数になっています。ボタンの色と同時に文言も変えると、どちらの効果か分かりません。
• 更新直後の数日だけを見ています。最初の数日は、更新自体が目に入ることで動きが出ることがあります。同じ長さの期間で、少し時間を置いて比べます。
• 数字が出ないことを「失敗」とみなしています。差がないという結果は、見た目を変えても遊びやすさは動かなかったという情報です。次の更新で別の層を試す根拠になります。
• 前の見た目を残していません。戻したくなったときのために、更新前の版は手元に必ず残します。公開内容は更新できますが、元のファイルは自分で保管しておく必要があります。

次の行動

次の更新では、変える層を一つだけ選んで書き出してください。そして、上の小さな計測コードを入れた版Aと版Bを作り、遊んでもらう人を二組に分けて、最初の操作までの秒数と様子を書き留めてみてください。公開内容の更新で何を差し替えられるかは、投稿画面で現在の案内を確認してから進めると安心です。