マガジン

作品詳細のページ:遊ぶまでに通る要素を数える

遊びを見つける

執筆にClaudeを使用しています。

玉とゴールが見えるゲーム模型を、小さなフレームで切り取る写真風イメージ。
記事のテーマをもとに制作したAI生成イラスト。

一覧やランキングで気になった作品を開き、「遊ぶ」ボタンを押すまでの数秒を考えてみます。その間に目は作品名、カバー画像、紹介文、数字、ラベルなどを通り過ぎます。指もスクロールや言語の確認、場合によってはログインの案内などを経由するかもしれません。これらは「遊ぶ」ために必要だったのか、それとも遊ぶ前に通らされただけなのか。数えてみないと区別はつきません。 この記事は、作品詳細ページでプレイボタンに至るまでの要素を自分で数え、分類して読むための分析手順です。数える対象は、見る要素、操作する要素、判断を求められる要素の3種類です。結果の数値はここには書きません。画面幅や端末、ログインの有無で変わるため、読者自身の環境で記録して初めて意味を持つからです。 この手順は、作品を投稿する人が自分の紹介文やカバー画像を点検するときにも役立ちます。保護者や学習者が「子どもはどこで迷うか」を観察する道具にもなります。

この記事の目次
  1. 何を「要素」として数えるか
  2. 準備するもの
  3. 手順:3つの数え方で同じページを測る
  4. 数えた要素を読むための3分類
  5. 結果の読み方:差が出たときの判断基準
  6. 起こりやすい誤り
  7. 次の行動

何を「要素」として数えるか

数えるときの単位がぶれると、比較ができなくなります。次の3種類に分け、それぞれに数え方を決めておきます。

  • 見る要素:独立した見出し、画像、段落のまとまり、ラベル、数字の表示を1つと数えます。文字数は問いません。同じ目的の並び(星の評価とその平均点など)は1組を1つにします。
  • 操作する要素:ボタン、リンク、入力欄、切り替えスイッチを1つと数えます。押さなくても、プレイボタンより前に操作できる位置にあれば数えます。
  • 判断を求める要素:確認ダイアログ、ログインの案内、言語の選択など、進むために何かを選ぶ必要がある表示です。選ばずに通り過ぎられるものも「求められた」と記録し、備考に「回避可」と書きます。

プレイボタンそのものは数に含めず、基準点にします。ボタンの文言は作品や言語設定で異なる可能性があるため、実際のページで確かめて控えておきます。

準備するもの

比較したい条件を先に決めます。条件を一度に変えると、差の原因が分からなくなるためです。

  1. 作品を3本以上:ジャンルの異なるものを選びます。公式作品と一般投稿作品を混ぜると、紹介文の長さや画像の有無の違いも見えます。
  2. 画面幅を2種類:パソコンの広い画面と、スマートフォンかブラウザを狭めた状態です。
  3. ログイン状態を2種類:アソバースはログインなしで遊べます。ゲストの状態とログイン中の状態を比べます。ゲストの履歴や進行は端末内に保存され、ログイン後のアカウントへ自動では混ざらない仕組みなので、状態を切り替えたときの違いを混同しないよう、記録欄に必ず書き留めます。
  4. 記録用の表:紙でも表計算でも構いません。
  • (記入)、画面幅:広/狭、ログイン:なし/あり、見る要素:(数)、操作する要素:(数)、判断を求める要素:(数)、スクロール量:画面○枚分、備考:(自由記述)

手順:3つの数え方で同じページを測る

同じページを3つの角度から測ります。1条件につき、最低2回は数え直してください。表示のゆらぎや数え漏れを見つけるためです。

数え方1:最初の画面に入る要素

ページを開いた直後、スクロールせずに見えている範囲だけを対象にします。画像の読み込みが終わるまで待ってから、見る要素と操作する要素を数えます。この数は「開いて最初に何を渡されるか」を表します。プレイボタンがこの範囲にあるかどうかも、必ず記録します。

数え方2:プレイボタンまでのスクロール量

ボタンが最初の画面になければ、ボタンが見えるまで何画面分スクロールしたかを記録します。目安は「画面0.5枚分」「1枚分」といった粗い単位で十分です。ここで通り過ぎた要素も、数え方1と同じ基準で足していきます。スマートフォンでは、操作ボタンが画面下に固定されて常に見えている場合があります。その場合はスクロール量が0になるので、そう書き留めます。

数え方3:操作の回数

一覧から作品を選び、ゲームが始まる状態になるまでに必要だった操作を数えます。タップやクリック、キー入力を1回ずつ数えます。パソコンならキーボードだけでも測れます。Tabキーを何回押すとプレイボタンに届くかは、キーボードで操作する人にとっての「遠さ」を表します。

Tabの回数は、ブラウザの開発者ツールのコンソールでおおまかに調べられます。次のコードはページ内の操作可能な要素を表示順に並べ、目印の文言を含む最初の要素の位置を返します。

js
const 目印 = "遊ぶ"; // 実際のボタンの文言に書き換えます
const 対象 = [...document.querySelectorAll(
  "a, button, input, select, textarea, [tabindex]")]
  .filter(e => !e.disabled && e.tabIndex >= 0 && e.offsetParent !== null);
const 位置 = 対象.findIndex(e => e.textContent.includes(目印));
console.log("位置:", 位置 + 1, "/", 対象.length);
console.log(対象.slice(0, 位置 + 1).map(
  e => e.textContent.trim().slice(0, 20) || e.getAttribute("aria-label")));

このコードは近似です。固定表示の要素は拾えないことがありますし、同じ文言が上部のメニューにあれば、そちらを先に拾ってしまいます。表示された一覧を見て、実際のTab順と照らし合わせてください。

数えた要素を読むための3分類

数え終えたら、一つひとつの要素を次の3つに分けます。

  • 遊ぶ判断の材料:作品名、カバー画像、紹介文、遊び方の説明など、「自分向きか」を決める情報です。
  • 信頼や人気の手がかり:プレイ回数、いいね数、レビューの点数などです。読むときは意味に注意します。アソバースのプレイ回数は作品の起動を実測した回数で、人数ではありません。同じ端末・同じ作品の30分以内の再起動は重複として除かれます。レビュー平均を使った評価順は、レビューが3件以上ある作品から掲載されます。数字の見方が分かると、同じ表示でも読み取れる量が変わります。
  • 周辺の要素:プレイに直接関わらない案内や装飾です。

この分類で、プレイボタンまでの「重さ」を判定します。判断の材料が多く、周辺が少なければ、数が多くても迷いにくい構成だと言えます。逆に操作する要素が多く、材料が少なければ、遠回りの可能性があります。一概に正解はないので、あくまで比較の物差しとして使ってください。

カバー画像については、公式作品では生成したアートワークで、ゲーム画面のスクリーンショットではありません。ページ上で「画像が示すもの」と「実際の画面」の違いが読み取れるか、また紹介文や遊び方が実際の操作を補っているかは、作品を開いて確かめます。架空クリエイターについても、カードとプロフィールに「架空クリエイター」と表示されると案内されています。作品詳細のどこでその表示が目に入るかを、見る要素として数えてください。

結果の読み方:差が出たときの判断基準

表がうまった段階で、条件ごとに差を見ます。

  • 広い画面と狭い画面で数が大きく違う:狭い画面では、同じ情報が縦に並び、スクロール量が増えているかもしれません。数え方2の値と合わせて読みます。
  • ゲストとログイン中で判断を求める要素が違う:案内や選択肢の違いを、備考に書き出します。ログイン中はクラウドセーブや「あとで遊ぶ」などが使えます。これらの入口がページ上でどう置かれているかを確かめます。
  • 作品ごとの差が大きい:紹介文の長さやカバー画像の有無で、見る要素の数が変わっている可能性があります。投稿者なら、自分の作品が最も要素の多い側に入っていないかを見ます。
  • Tab回数が多い:キーボード利用者や読み上げソフトを使う人は、そこまで長く辿ることになります。回数を減らす余地があるか、順序が自然かを点検します。

数の大小だけで良し悪しは決まりません。「プレイボタンまでに、遊ぶ判断の材料が足りているか」を中心に判断してください。

起こりやすい誤り

  • ゲームの中の画面まで数えてしまう:作品はサンドボックス付きのiframeで動きます。プレイ開始後のタイトル画面や説明は、詳細ページとは別に数えます。
  • 画像の読み込み前に数える:表示が揃う前だと、数え方1の値が小さく出ます。
  • 言語を切り替えたまま比較する:日本語と英語では文量が変わります。作者が入力した作品名や紹介文は表示切り替えで書き換わらないので、混在して見える場合は備考に書きます。
  • 動きを抑える設定の違い:動きを抑える設定に対応しているので、アニメーションの有無で目に入るタイミングが変わることがあります。設定を固定して測ります。
  • ブラウザ拡張の影響:広告ブロックや翻訳の拡張が要素を増減させます。拡張を切った状態で数えます。
  • 1回だけで結論を出す:最低2回の数え直しを省くと、数え漏れがそのまま結論になります。

次の行動

まず作品を3本選び、ゲスト状態・広い画面で数え方1だけを記録してください。そのあと画面幅とログイン状態を変えて、表を埋めていきます。投稿者の方は、自分の作品の詳細ページを同じ手順で測り、材料が足りているかを点検してみてください。