選択肢の説明をホバーに頼らない：タッチ操作でも確定前にコストを伝える

選択肢による資源の消費、必要な時間、既知の制約がマウスホバー時にしか表示されないなら、タッチ操作版には十分な判断材料を得る手段が欠けています。改稿ではまず、選択を変えうる既知のコストを選択肢のそばに書きます。補足説明はタップで開く形でも構いません。必要に応じて設ける確定前の要約は、現在の決定を確認するためのものであり、重要な条件を初めて知らせる場所にしてはいけません。

常時表示すべき情報かどうかは、「この一文を知ったら、プレイヤーは別の選択肢を選ぶだろうか」と考えて判断します。そうであれば、折りたたみ部分や案内のないジェスチャーの奥に隠すべきではありません。たとえば「唯一の通行証を消費する」は判断に必要な条件です。誰が発行した通行証で、なぜ有効なのかは、今の選択に影響しない場合に限り詳細に置けます。

「閲覧」「選択」「確定」の三つの操作も区別します。「コストを見る」をタップしたら文章を展開するだけ、選択肢をタップしたら候補として選択し、明示的な確定ボタンを押して初めて物語を進める、という形です。タップと同時に選択が確定する作品では、説明を開く操作部と確定する領域を明確に分けます。説明を読もうとした一度のタップで、選択まで確定してはいけません。

本記事では、架空の教材用事例『霧港の最終船』を使います。登場人物、数値、操作は問題を説明するために設定したもので、実際のユーザー事例や実測結果ではありません。また、DramaForkに既にある製品機能を示すものでもありません。

まず各選択肢の既知の条件を列挙し、それから表示位置を割り当てます。先に文字数だけを基準に削ると、決め手となる制約まで消してしまうおそれがあります。

原稿を確認するときは、もう一度「これを削ると判断が変わるか」と問いかけます。変わるなら、判断に影響する不確実性も含めて常時表示する階層に戻します。「適用条件」を一律に折りたたんではいけません。選択の可否や必要な支払いを決める条件は常時表示し、選択に影響しない補足だけを開いて読む形にします。詳細は重要な情報の収納箱ではなく、要約も最初の開示漏れを埋め合わせるものではありません。

三つの方法は併用できますが、役割は異なります。常時表示する要点は選択肢同士を比較しやすい反面、ページの縦幅を使います。開いて読む詳細は長い説明を収められる反面、閲覧の手順が増えます。確定前の要約は取り消しにくい決定や誤操作しやすい場面に向く反面、進行の流れをいったん止めます。

短い選択肢が二つだけなら、条件の常時表示と明確な確定操作だけで十分かもしれません。四つの選択肢にそれぞれ複数の条件があるなら、まず情報の順序を統一して同じ観点で比較できるようにし、そのうえで補足説明を開く操作部を追加します。普通の会話すべてに確認ダイアログを付ける必要はありません。

事例では、林遥は船の切符を二枚と届けるべき書類を一通持っており、出航まであと十五分です。船頭に今すぐ書類を届けてもらうことも、波止場に残って仲間を待つこともできます。教材の設定では、配達を頼むと切符をすべて使うため、その晩はもう客船に乗れません。待つ場合は切符を消費しませんが、今回の配達船を逃します。書類が届いたあとの影響はまだ明かされていません。

初稿には「船頭に書類の配達を頼む」と「仲間の帰りを待つ」しか表示されず、コストはホバー時の説明に隠れていました。最初の改稿では次のようにします。

• 船頭に書類の配達を頼む：切符を二枚消費する。今晩は客船に乗れない。横に「配達の条件を見る」を置く。
• 仲間の帰りを待つ：切符は消費しない。今回の配達船を逃す。横に「待つ場合の条件を見る」を置く。

配達条件を開くと、「船頭は報酬として切符二枚をすべて受け取ります。渡した書類は取り戻せません。受取人の反応は不明です」と表示されます。ここで最初の改稿の漏れが見つかります。書類を取り戻せないことは選択に影響するため、展開した部分だけに置いてはいけません。最終的な常時表示文は「船頭に書類の配達を頼む：切符を二枚消費する。今晩は客船に乗れない。渡した書類は取り戻せない」とします。詳細には、選択に影響しない受け渡しの説明だけを補足します。

プレイヤーは読んだあとに詳細を閉じ、配達を選び、本事例で採用した要約に進みます。「書類を渡し、切符を二枚消費します。残りは零枚です。今晩は客船に乗れず、書類は取り戻せません」。操作名は「選択に戻る」「配達を確定する」とし、意味の曖昧な「確認」だけにはしません。

この教材で手順をたどった際の重要な成果は、漏れていた条件を発見できたことです。要約は開示済みの情報を照合するもので、最後の段階で突然新しい損失を追加してはいけません。戻ったときに候補の選択状態を保てば、プレイヤーは改めて比較できます。

一つ目の失敗は、目に見える操作部を用意せず、ホバーを長押しに置き換えることです。プレイヤーには相変わらず説明の場所が分からず、長押しを別の操作だと捉える可能性もあります。長押しは補助的な方法には使えますが、重要条件は直接読めるようにし、補足説明を開く操作部には分かりやすい文字のラベルを付けます。

二つ目の失敗は、説明アイコンがタップしにくい、あるいは即時確定する領域に近すぎることです。「開けるか」だけでなく、「見ようとして誤った選択をしないか」も問題になります。W3Cの解説には、ターゲットの最小サイズの要件と例外が示されています。これはすべてのボタンを同じ大きさにすべきという意味ではなく、これを根拠にページが認証済みだとも言えません。確認では、説明を開く操作部と確定領域の配置、および操作結果の両方を見ます。

三つ目の失敗は、詳細のオーバーレイがほかの選択肢を覆い、閉じるとページの先頭に戻ってしまうことです。一つずつ比較する必要がある場合は、その場で展開し、操作名を「条件を閉じる」に変える方法が使えます。詳細が非常に長い場合は別に表示しても構いませんが、戻ったら元の選択肢の位置に復帰させます。

四つ目の失敗は、色、アイコン、省略記号だけで損失を示すことです。「切符のアイコンに−2」の横には「切符を二枚消費する」と書きます。狭い画面で折り返した際に「取り戻せない」が切れてはいけません。文字を拡大した状態の確認では、見出しがはみ出さないかだけでなく、条件の全文と確定ボタンも確認します。

次のチェックリストを重要な選択場面ごとにコピーし、編集者が文言を記入したうえで、画面の実装担当者に照合してもらいます。

このチェックリストが扱うのは判断材料の提示だけであり、完全なアクセシビリティ評価の代わりにはなりません。要約は任意ですが、確定前に実際の条件を照合することは、要約の有無にかかわらず必要です。読んでいる間に資源が変化したら、まず新しいコストを示し、プレイヤーが決め直せるようにします。要約を使う場合はそちらも更新し、古い内容を使い続けてはいけません。

物語上の未知と画面上の説明漏れも分けて考えます。この事例では受取人の反応を伏せておけますが、登場人物が既に知っている必要な切符の枚数は隠せません。ネタバレを抑えるとは、まだ明かされていない結果を先に知らせないことであって、目の前の取引条件を隠すことではありません。ある結果が登場人物の推測にすぎないなら「かもしれない」と書き、要約で確実なことに変えてはいけません。

制限時間付きの選択では、読む時間も計時するかどうかを決め、画面で説明する必要があります。読んでいる間も時間が進むなら、重要条件をすべて残したまま常時表示文を簡潔にし、開かなければ読めない内容を減らします。詳細ボタンを置くだけでは読む負担は解消しません。最終的な引き渡し基準は、隠れたジェスチャーを発見しなくても、プレイヤーが行動する前に何と何を引き換えにするのか分かることです。