紙のカードで分岐を作ってから、ノベルゲームにする

確かめたい問い

問いを三つに分けておくと、記録の取り方が決まります。

1. 選択肢は選ばれるか。 2つ並べた選択肢のうち、一方が誰にも選ばれないなら、その分岐は実質一本道です。
2. 迷う場所はどこか。 読み手が止まるカードには、情報が足りないか、選択肢が似すぎているかのどちらかの原因があります。
3. 合流点でつじつまが合うか。 別々の道が同じカードに戻るとき、前の選択が反映されていないと、読み手は違和感を持ちます。

三つとも、作者本人が自分で読み返しても気づきにくいものです。作者は書いていない前提を頭の中で補ってしまうためです。他人に読んでもらう価値はそこにあります。

準備するもの

• 名刺大からはがきほどの紙のカード（無地の紙を切ったものでも構いません）を12〜15枚
• ペン、付箋、クリップ
• 読み手を3人以上。作品の内容を知らない人にします
• タイマー（スマートフォンのストップウォッチで十分です）
• 記録用紙。カード番号を縦に並べた表を1人1枚用意します

物語の規模は小さく決めます。始まりを1枚、分岐点を2〜3枚、合流点を1〜2枚、結末を3枚とします。結末の数を先に決めておくと、枝を広げすぎずに済みます。

カードの書式は次のとおりにそろえます。

• 右上に番号
• 本文は3〜5行
• 下に選択肢を2つ。それぞれに行き先の番号を添える
• 結末のカードは選択肢の代わりに「おわり」と書く

本文の長さは、声に出して読んで20秒以内を目安にします。画面に移したときも1画面に収まる分量です。

手順

骨組みを作る

カードを書く前に、机の上で番号だけの地図を作ります。付箋に番号を書いて並べ、線でつなぎます。始まりから結末までの道が何通りあるか、合流点にどの道から入ってくるかを、ここで確認します。

地図を作る段階で、すでに問題が見つかることがあります。たとえば、ある結末へ行く道が一つしかなく、そこへ向かう選択肢が不自然に目立つ場合です。気づいたら、本文を書く前に直します。

カードを書く

地図に沿って本文を書きます。次の2点を守ります。

• 合流点のカードの本文は、どの道から来ても読めるように書きます。前の選択に依存する内容を入れたくなったら、そのカードに印をつけます。後で「状態」として扱うカードです。
• 選択肢は、行き先の結果が予想できる書き方を避けます。「安全な道を行く」「危険な道を行く」のような書き方は、選ぶ前から答えが見えています。

読み手に渡す

読み手には最小限の説明だけをします。「1枚ずつ渡します。読んで、2つの選択肢のどちらかを選んでください。考えていることは声に出してください」で十分です。作者は途中で補足をしません。読み手が「これはどういう意味ですか」と聞いても、答えずに「そのまま選んでください」と返します。

渡し方も決めておきます。読み手が選んだら、行き先の番号のカードを山から抜いて渡します。読み手の手元には常に1枚だけがある状態にします。これが画面と同じ見え方です。紙の束を渡して好きにめくらせると、他のカードが見えてしまい、画面で得られない情報を使って選ぶことになります。

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

記録する項目

記録は、カード1枚につき1行です。読み手1人ごとに1枚の用紙を使い、次の項目を書きます。

• カード番号、書き方：渡した順に書く
• 読む時間、書き方：渡してから選ぶまでの秒数
• 迷い、書き方：なし／少し／長い。目安は、5秒以上止まったら「長い」
• 選んだ選択肢、書き方：左か右か、または行き先の番号
• 発言メモ、書き方：声に出したことの要点。「戻りたい」「さっきと違う」など

回数は、読み手1人につき通しで1回です。同じ人に2周目を頼むと、前回の記憶が選択に入り込みます。2周目を試したい場合は、別の読み手を用意してください。

結果の読み方

読み手が3人程度だと、割合を出しても意味がありません。「全員が選んだ」「誰も選ばなかった」「1人だけ選んだ」の3区分で読みます。

• ある選択肢を誰も選ばない、疑うこと：文面が弱いか、もう一方が明らかに良く見える、直し方の例：文面を変える。結果が予想できる書き方になっていないか確認する
• 迷いが長いカードがある、疑うこと：情報不足、または選択肢が似ている、直し方の例：発言メモを読み、何を知りたがっていたかを本文に足す
• 合流点で「さっきの」と言う、疑うこと：前の選択が反映されていない、直し方の例：そのカードを状態つきにする（後述）
• 結末のあとに「他の道も見たい」と言う、疑うこと：分岐に手応えがある、直し方の例：画面では結末から冒頭へ戻る導線を作る
• 結末のあとに感想が出ない、疑うこと：道の違いが伝わっていない、直し方の例：結末の本文に、選んだ道の痕跡を入れる

表の「疑うこと」は仮説です。確定ではありません。直したら、別の読み手でもう一度回して確かめます。

起こりやすい誤り

• 作者が補足してしまう。 読み手の沈黙が気まずくなり、つい口を挟みます。口頭で補った情報は、画面には存在しません。
• 読み手が作者の知人ばかり。 物語の背景を知っていると、迷いが記録に出ません。
• 発言を要約しすぎる。 「迷っていた」とだけ書くと、原因が分かりません。言葉そのままを短く書き留めます。
• 1回の結果で全部直す。 3人の記録は傾向を示すだけです。全員に共通して出た問題から直します。

画面に移す最小の形

紙で直した後、カードの内容をそのままデータにします。次のコードは、合流点で前の選択を反映する最小のノベル画面です。1つのHTMLファイルで動き、外部ライブラリは使いません。

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>分岐の試作</title>
<p id="t"></p><div id="c"></div>
<button id="b">一つ戻る</button>
<script>
const cards = {
  1: { text: f => "雨の駅です。傘は一本だけです。",
       choices: [["傘を貸す", 2, "lent"], ["傘を借りる", 3]] },
  2: { text: f => "濡れながら歩きます。", choices: [["家に着く", 4]] },
  3: { text: f => "相手は黙ってうなずきます。", choices: [["家に着く", 4]] },
  4: { text: f => f.lent ? "髪から雫が落ちています。" : "傘の水を払います。",
       choices: [], end: true }
};
let id = 1, flags = {}, history = [];
function show() {
  const k = cards[id];
  t.textContent = k.text(flags) + (k.end ? "（おわり）" : "");
  c.innerHTML = "";
  k.choices.forEach(([label, to, flag]) => {
    const btn = document.createElement("button");
    btn.textContent = label;
    btn.onclick = () => {
      history.push([id, { ...flags }]);
      if (flag) flags[flag] = true;
      id = to; show();
    };
    c.append(btn);
  });
}
b.onclick = () => { if (history.length) { [id, flags] = history.pop(); show(); } };
show();
</script>

カード4が、紙で「状態つき」と印をつけた合流点にあたります。flagsに選択の痕跡を持たせ、本文を関数にして出し分けています。紙の段階で印をつけたカードだけを関数にすれば、データの作りが複雑になりすぎません。

ここで、紙と画面で変わる点を確認します。

• 戻る操作。 紙では読み手が自由に前のカードを見返せます。画面で戻る機能を入れるかどうかは、紙の記録の「戻りたい」という発言を根拠に決めます。上のコードは、選択前の状態に戻す最小の実装です。
• 読む速さ。 紙の秒数は目安にとどまります。画面では文字の大きさや行間で読みやすさが変わるので、スマートフォンの縦画面で実際に読んで確かめます。
• 選択肢の見え方。 紙では選択肢が本文と同じ紙面にあります。画面ではボタンになり、押しやすさが加わります。

アソバースに載せるときの確認

作ったHTMLを作品として投稿する場合、アソバースでは直下のindex.htmlが入口になります。HTMLかZIPを直接アップロードでき、サイズは20MiB以内が条件です。このコードのような小さな作品なら、容量の心配はほとんどありません。

進行の保存は、確認が必要な点です。アップロード作品の中のlocalStorageは一時メモリーの互換処理とされているので、ページを閉じても残るとは考えないでください。進行を残したい場合は、作品ごとのクラウドセーブ（JSONで128KiBまで）を使います。具体的な呼び出し方は、投稿画面の案内で確認してください。

次の行動

まず、カード12枚と結末3つの地図を付箋で作り、番号だけで道の数を数えてください。次に、作品の内容を知らない人を3人見つけ、補足なしでカードを1枚ずつ渡して記録を取ります。全員に共通して出た問題を一つだけ直したら、上のコードにカードを移してください。