アイコンを文字なしで伝える:設定・音・一時停止の形

何を確かめるかを三つに絞る

「アイコンが分かりやすいか」は広すぎて、測りようがありません。次の三つの問いに分けます。

1. 機能の推測:アイコンだけを見て、何をするボタンだと思うか。
2. 状態の読み取り:音のアイコンが「いま音が出ている」のか「押すと音が切れる」のか、どちらに見えるか。
3. 結果の予想:押したあと何が起きると思うか。実際に押して、予想と合っていたか。

特に二つ目は、文字なしのアイコンで取り違えが起きやすい点です。スピーカーに斜線が入った絵は、「いま消音中です」という表示にも「消音にするボタン」にも読めます。一時停止の二本線も、「いま停止中」の表示と「止めるボタン」の両方に読めます。

対象は設定、音、一時停止の三種類で十分です。ゲームで最も頻繁に現れ、見た目が作品ごとに揺れやすい組み合わせだからです。

準備するもの

• アイコン案:各機能について1〜3案ずつ。たとえば音なら「スピーカー単体」「スピーカー+斜線」「音符」の3案です。
• ゲーム画面の試作:アイコンを隅に置いた状態。完成品でなくてかまいません。
• 参加者:そのゲームを遊んだことも、作る過程を見たこともない人。人数は目安として3〜5人ほどから始めます。少人数でも、はっきりした誤解は見つかりやすいと言われています。ただし「この人数なら十分」と言い切れる数字ではないので、割れ方を見て追加するかを決めます。
• 正解の言い換えリスト:実験の前に作ります(次の節)。
• 記録用の表:紙でもスプレッドシートでもかまいません。この記事の末尾近くに、回答記録用の最小ページも載せています。

参加者に開発仲間を選ぶと、結果が甘くなります。ゲームの文脈を知っている人は、アイコンではなく文脈から答えてしまうからです。ゲームを作らない家族や知人のほうが、初見の目として使いやすいでしょう。

判定の基準を、実験の前に決める

回答を聞いてから「これは正解扱いでいいか」と考え始めると、判定が結果に引きずられます。先に、各アイコンについて次の三つを書き出します。

• 設定、一致とみなす言い方の例：設定、オプション、調整、環境設定、部分一致の例：「何か変えられそう」、不一致の例：「機械」「修理」「ロード中」
• 音、一致とみなす言い方の例：音、サウンド、ミュート、音量、部分一致の例：「スピーカー」(機能名ではなく物の名前だけ)、不一致の例：「動画を見る」「通知」
• 一時停止、一致とみなす言い方の例：止める、ポーズ、一時停止、部分一致の例：「再生関係」、不一致の例：「終了」「次へ」

表の中身は一例です。自分のゲームで起こり得る答えに合わせて書き換えてください。大切なのは、事前に線を引いておくことです。

「部分一致」を別に設けるのには理由があります。「スピーカー」と答えた人は、絵を正しく見ています。しかし機能までは言えていません。これを一致に含めると甘くなり、不一致に含めると厳しすぎます。分けて記録しておけば、あとでどちらの見方も選べます。

手順:三つの段階で聞く

一人の参加者につき、次の順に進めます。段階を混ぜないことが大切です。

段階1:アイコン単体で聞く

アイコンだけを大きく見せ、「押す前に、何をするボタンだと思いますか」と聞きます。ここで使う問いはこの一文だけです。「音に関するボタンはどれですか」のように機能名を含む質問は、答えを渡してしまうので使いません。

回答は言われたままの言葉で書き取ります。要約せず、原文を残します。迷っていた時間も、ざっくりとした秒数で控えます。正確な計測は要りません。「すぐ答えた」「かなり考えた」が分かれば足ります。

段階2:ゲーム画面の隅に置いて聞く

次に、アイコンを実際の位置に置いた試作画面を見せ、同じ問いを繰り返します。段階1と段階2で答えが変わるなら、アイコン単体では伝わらないが文脈が助けている、と読めます。逆に段階2でも分からないなら、形そのものを見直す必要があります。

段階3:押す前に予想し、押して確かめる

「押したら何が起きそうですか」と聞いて予想を記録し、そのあと実際に押してもらいます。予想と実際が合っていたか、一致・部分一致・不一致で記録します。音のアイコンでは、押すと音が出るのか、消えるのかの予想が割れるかどうかを特に見ます。

参加者が間違えても、説明や訂正をしてはいけません。「それは設定ですよ」と教えた時点で、その人は次のアイコンから初見ではなくなります。

順序と案の振り分け

同じ機能の案Aと案Bを同じ人に見せると、案Aで学んだことが案Bに影響します。同じ機能の案は、1人につき1案だけにします。参加者を増やせないときは、案ごとに別の人に当たるよう割り振ります。機能の順番(設定→音→一時停止)は、人によって入れ替えます。

記録の取り方と、結果の読み方

記録は、次の単位で取ります。

• 行の単位は「1人×1アイコン案×1試行」です。
• 列は、参加者ID、案ID、段階、回答の原文、迷った様子、判定(一致・部分一致・不一致)、押した後の予想の判定です。

同じ表に、段階1と段階2の判定を並べて書けるようにしておくと、文脈の効果が読みやすくなります。

次のページは、段階1の回答を記録するための最小の例です。アイコンをランダムな順で表示し、回答と秒数を表にします。記録は画面を閉じると消えます。作品内の保存に頼らず、最後に出る表をコピーして別の場所に貼ってください。アイコンの絵文字は、端末によって見た目が変わります。実際のゲームで使う画像やSVGに差し替えて使います。

<!doctype html>
<meta charset="utf-8">
<p>参加者ID <input id="pid" size="6"></p>
<div id="icon" style="font-size:64px"></div>
<p><input id="ans" size="30" placeholder="何をするボタンだと思いますか">
<button id="next">次へ</button></p>
<pre id="log"></pre>
<script>
const icons=[
  {id:"settings-A", html:"⚙"},
  {id:"sound-A", html:"🔊"},
  {id:"pause-A", html:"⏸"}
];
const order=icons.slice().sort(()=>Math.random()-0.5);
let n=0, t0=Date.now();
const rows=["参加者\t案\t回答\t秒"];
function show(){
  const el=document.getElementById("icon");
  if(n>=order.length){
    el.textContent="終了";
    document.getElementById("log").textContent=rows.join("\n");
    return;
  }
  el.innerHTML=order[n].html;
  document.getElementById("ans").value="";
  t0=Date.now();
}
document.getElementById("next").onclick=()=>{
  if(n>=order.length) return;
  const s=((Date.now()-t0)/1000).toFixed(1);
  const a=document.getElementById("ans").value.replace(/\s/g," ");
  rows.push([document.getElementById("pid").value,order[n].id,a,s].join("\t"));
  n++; show();
};
show();
</script>

ここの並べ替えは簡易的なもので、厳密な無作為化ではありません。順序を完全に制御したいときは、人ごとに順番を表で決めておく方法が確実です。

結果の読み方

判定ラインは、実験の前に自分で決めておきます。たとえば「初見の人のうち、一致が大半を占めなければ作り直す」のように書き、その「大半」が何人なのかを参加人数に応じて決めます。この記事が基準の数字を示すことはできません。作品の重要度や、アイコンの隣に文字を添えられるかによって、許せる範囲が違うからです。

そのうえで、割れ方のパターンごとに次のように判断します。

• ほぼ全員が一致:形は伝わっています。次は、押した後の予想(段階3)と、状態の読み取りだけ確認します。
• 一致と部分一致が混在:物の名前までは分かっても、機能が結びついていません。小さな文字ラベルを添える、または押した直後に画面で結果を見せる工夫を検討します。
• 別の機能に取り違えている人が複数:形の選び直しです。同じ取り違えが複数人で起きているなら、それはその形の癖です。
• 「分からない」が多い:文字ラベルの併用か、初回だけ説明を表示する案が現実的です。
• 段階1は不一致、段階2は一致:文脈が補っています。位置や周囲の要素が変わっても保てるかを、別の画面で試します。
• 段階3で予想が割れる:状態表示か操作ボタンかが曖昧です。次の節の対策を検討します。

見落としやすい誤り

質問が答えを含んでしまう。「音を切るボタンはどれですか」と聞くと、音という言葉を渡してしまいます。段階1の質問は、必ず同じ一文に固定します。

開発者が横から補足する。「これはね…」と言い始めた時点で、その参加者の以降の回答は使えなくなります。説明は全部の聞き取りが終わってからにします。

状態と操作の混同。 音のアイコンは、「いまの状態」を示すか「押した結果」を示すかを決めて、作品全体で揃えます。決めたうえで、段階3で参加者がどちらに読むかを確かめてください。一時停止中に二本線を出し続けるのか、再開を示す三角に変えるのかも、この確認の対象です。

色だけで状態を表す。 色の違いだけで有効・無効を示すと、色の見え方が違う人には伝わりません。形や配置の違いも併用します。

見えない人への配慮を忘れる。 文字を画面から外しても、ボタンの名前そのものは残せます。読み上げ用の名前(aria-label)やtitle属性に「設定」「音」「一時停止」と入れておけば、視覚の手がかりに頼れない場合の助けになります。アイコンを文字なしで伝えることと、名前を持たせないことは別です。

押しにくい大きさにする。 画面の隅の小さなアイコンは、見分けられても指で押しにくいことがあります。スマートフォンの実機で押してもらい、押し間違いも記録に加えます。

動きの強い演出で注意を奪う。 アイコンを点滅させて目立たせる場合は、「動きを抑える」設定のときに止まるようにします。

既存の作品で、見比べてみる

自分の作品を作る前に、他の作品での表現を観察する方法もあります。アソバースの公式作品には、一時停止を持つものがあります。たとえば「こだまの森」には一時停止があり、「小さな軌道」は一時停止から同じ位置で再開でき、「かたちのあいだ」には時計の一時停止があります。

ただし、それぞれのアイコンがどんな形で、文字が添えられているかは、この記事では述べません。作品を開いて確かめてください。見るときは次の三点に絞ります。

1. 一時停止の位置は、画面のどこにあるか。
2. 停止中に、表示はどう変わるか。
3. 文字を消して、形だけを見たとき、初見の人に読めそうか。

同じ機能が作品ごとにどう違って描かれているかを見比べると、自分のアイコン案の選択肢が増えます。

作品を投稿するときは、公開前の「表示の確認」の段階で、アイコンの見え方と押したときの動きをもう一度確かめられます。ゲームはsandbox付きのiframeで動くので、本番と近い形で試すつもりで確認してください。その際、アイコン理解テストで使った初見の人に同じ画面を見てもらえれば、さらに確かです。

次の行動

まず、設定・音・一時停止の三つについて、アイコン案と「一致とみなす言い換え」を紙に書き出してください。次に、ゲームを見たことのない人を3人ほど探し、段階1の質問を一文だけ決めて、説明せずに聞いてみます。判定ラインは聞く前に決め、割れた箇所から直してください。