マガジン

紙の庭を作る:余白の庭を切り紙で

遊びをつくる

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

小さな庭に石を置き、虫眼鏡で芽や生きものの変化を観察する水彩イラスト
記事のテーマをもとに制作したAI生成イラスト。

配置を遊ぶゲームを作っている場面を考えてみます。木や石や池をどこに置かせるかを決めるとき、画面の上で試作を重ねると、いつの間にか「置きやすい位置」ばかりが基準になりがちです。そこで紙とはさみで同じ庭を作ってみると、手の動かし方も迷う場所も変わるかもしれません。ただし、それが本当に変わるのかは、考えるだけでは分かりません。 この記事の問いは、同じ要素・同じ個数で庭を作ったとき、紙の切り紙と画面の「余白の庭」で配置の傾向や手の動きに差が出るのか、というものです。ここで確かめるのは「どちらが上手に作れるか」ではありません。差が出るなら、どの指標にどう現れるかを自分で記録できる形にします。結果はこの記事には書いていません。読者のみなさんが自分で行って初めて出る答えです。 実験の価値は、自作ゲームの操作設計に持ち帰れる点にあります。紙の試作は、画面のUIを作る前に配置の考え方を確かめる方法として知られています。その紙が画面の代わりになるのか、それとも画面でしか見えないものがあるのか。両方で同じ課題を行うと、その境目が見えてきます。

この記事の目次
  1. 何を比べるか:余白の庭の設計から読み取れること
  2. 準備するものと、先に決めておく条件
  3. 手順:自由制作と再現制作を、順序を入れ替えて行う
  4. 記録の取り方:何を、どの単位で、何回
  5. 結果の読み方と、起こりやすい誤り
  6. 次の行動

何を比べるか:余白の庭の設計から読み取れること

比較の前に、余白の庭について確認済みのことを整理します。木・石・草・花・池・灯りを置く庭づくりで、時間制限はありません。置いたものは移動と大きさ調整ができ、Zキーで戻す、Yキーでやり直すが使えます。置ける数は最大80個で、季節は四季、時間帯は昼夜があります。保存もあり、以前の庭を引き継げます。

この仕様から読み取れるのは、「置いてから考え直せる」設計だということです。時間制限がなく、戻す・やり直す・移動・大きさ調整がそろっているので、一度置いた位置を決定にしなくて済みます。紙の切り紙も、置いただけなら動かせます。そこで、動かす・やり直すという行為の頻度や形が、紙と画面でどう違うのかを比べる価値が出てきます。

画面の細部、たとえば置く位置の刻みや操作の手順は、この記事では書きません。そこは実際に作品を開いて確かめてください。実験の結果を読むときは、画面側の癖と紙側の癖を切り分けて考えることになります。

見る指標は次の4つに絞ります。

  • 配置の偏り:庭を3×3に分けたとき、どの区画に何個あるか。
  • 手の動き:置いた回数、動かした回数、戻した回数。
  • 大きさの使い方:大小を使い分けたか。
  • 終わり方:どこで「完成」と判断したか。

準備するものと、先に決めておく条件

紙側の準備は次のとおりです。

  • A4の白い紙(庭の台紙)を2枚。
  • 色紙またはコピー用紙。緑・茶・灰・青・黄など、6種類の要素の色分け用です。
  • はさみ、鉛筆、定規。
  • スマートフォン(写真とタイマー用)。
  • 記録用の紙。正の字を書くので、余白の広い紙が向いています。

切り紙は6種類(木・石・草・花・池・灯り)を、それぞれ大小2サイズ用意します。形は単純で構いません。木は三角、石は丸、池は楕円といった具合です。個数は各種類で小を3枚、大を2枚とすると、合計30枚になります。この枚数は紙側の上限の目安で、画面の80個とは違います。上限をそろえるために、画面側でも使う個数を自分で決めておきます。

実験を始める前に、次の条件を紙に書いて固定します。後から変えると結果の読み取りがぶれるためです。

  1. 使う個数の上限(たとえば20個)。
  2. 使う種類(6種類すべて、または絞る)。
  3. 季節と昼夜。画面側で選べる設定を一つに決め、紙では表せないので記録に書いておきます。選び方は作品を開いて確かめてください。
  4. 終了の基準。画面にも紙にも時間制限がないので、「3分間、何も動かさなかったら終了」のように、先に決めます。
  5. 画面の表示サイズ。ブラウザの大きさやプレイ画面の拡大の状態は、2回目以降も同じにします。

もう一つ、画面側で確認することがあります。余白の庭には保存があり、以前の庭を引き継げます。実験の開始時に、前回の庭が残っていないかを確かめてください。新しい庭から始める操作は、作品を開いて確認します。

手順:自由制作と再現制作を、順序を入れ替えて行う

実験は2つの課題で構成します。自由に作る課題と、同じ庭を別の媒体で作り直す課題です。順序の影響を見るため、2セット行います。

セットA:紙で自由に作り、画面で再現する

  1. 紙の台紙に鉛筆で3×3の線を薄く引きます。切り紙を置いたときに邪魔にならないよう、線は薄くします。
  2. タイマーを動かし、条件の個数以内で切り紙を置きます。置いた順番を、小さな紙片に番号で記録します。
  3. 動かしたら正の字を一本、置き直したり外したりしたら別の欄に正の字を一本つけます。
  4. 終了基準を満たしたらタイマーを止め、真上から写真を撮ります。台紙の四隅が写るようにします。
  5. 写真を見ながら、余白の庭で同じ庭を再現します。このときの所要時間と、再現できなかった点をメモします。
  6. 画面の庭をスクリーンショットで残します。

セットB:画面で自由に作り、紙で再現する

  1. 新しい庭を開き、条件の個数以内で自由に作ります。
  2. 動かした回数と戻した回数を数えます。数えにくければ、画面録画を使って後から数える方法もあります。録画の方法は端末ごとに違うので、お使いの端末の案内で確認してください。
  3. 終了基準を満たしたら、スクリーンショットを撮り、タイマーを止めます。
  4. そのスクリーンショットを見ながら、紙で再現します。ここでも所要時間と再現できなかった点を記録します。

セットAとBは、同じ日に続けて行わないでください。直前の庭の記憶が残り、再現の成績に影響します。間に最低でも1日は置いたほうが安全です。

記録の取り方:何を、どの単位で、何回

記録は、一回の制作ごとに次の表の形でつけます。紙の自由制作、画面での再現、画面の自由制作、紙での再現の4つが、それぞれ1行になります。

  • 置いた個数、単位:個、取り方:種類別に数えます
  • 動かした回数、単位:回、取り方:正の字で記録します
  • 戻した回数、単位:回、取り方:画面ではZキーの使用、紙では外す・置き直す
  • 大きさの使い分け、単位:個、取り方:大を使った数と小を使った数
  • 所要時間、単位:分と秒、取り方:開始から終了基準まで
  • 区画ごとの個数、単位:個、取り方:3×3の9マスに分け、各マスを数えます
  • 迷った場所、単位:一言、取り方:手が止まった場面を一行で書きます

区画の数え方に注意があります。ものが区画の線をまたぐときは、中心がある側に入れる、と先にルールを決めておきます。画面側は庭の範囲を自分で3×3に分けますが、庭の範囲や枠の取り方は作品を開いて確かめてから決めてください。紙と画面で庭の縦横比が違う場合は、そのことも記録に残します。

偏りの指標には「最多の区画の個数から、最少の区画の個数を引いた値」を使います。ゼロの区画があってもそのまま数えます。この値は粗い指標ですが、写真から誰でも同じように数えられる利点があります。

回数については、最初は各条件1回でも構いません。ただし、1回だけの結果で結論を出すのは避けてください。可能なら、日を変えて同じ組み合わせを3回行うと、その人の癖と今回たまたま出た差を見分けやすくなります。

結果の読み方と、起こりやすい誤り

結果の読み方は、「こうなったら、こう考える」という判断基準の形で整理します。

区画の偏りが紙と画面で似ている場合。 偏りは媒体よりも、作り手の好みに由来している可能性があります。画面のUIを工夫しても、配置の傾向はあまり変わらないと考えられます。

偏りが紙と画面で違う場合。 媒体の影響が疑えます。たとえば、画面のほうが一方の端に寄るなら、その側に置きやすい操作の癖があるのかもしれません。ただし、画面の庭の範囲の取り方によって数え方が変わるので、先に区画のルールを見直してください。

動かした回数が画面のほうが多い場合。 動かす手間が小さく、試行が増えていると解釈できます。自作ゲームで試行を促したいなら、これは望ましい性質です。逆に紙のほうが多いなら、紙は一度置いても見た目で全体を把握しやすく、微調整が増えたと考えることもできます。どちらの解釈が合うかは、迷った場所のメモと合わせて決めます。

戻した回数が画面で多い場合。 画面のやり直し機能が、試す心理的な負担を下げている可能性があります。ただし、戻すキーを使った数と、紙で外した数は、動作の重さが違います。回数の大小だけで優劣は決めず、所要時間とあわせて見てください。

大きさの使い分けが画面で増える場合。 画面は連続的に大きさを変えられるので、紙より大小の差を細かく使う傾向が出るかもしれません。紙は二段階しかないので、同じ比較はできません。この場合は「二段階に収まったか」を見るに留めるのが安全です。

再現できなかった点が多い場合。 再現できなかった項目の中身を見ます。位置の細かさが原因なら、画面側の位置決めの仕組みが影響しているかもしれません。要素の種類が原因なら、紙の切り紙の形が画面の見た目と離れすぎていた可能性があります。

起こりやすい誤りもまとめます。

  • 順序効果。 先に作ったほうの庭を、後のほうが覚えています。セットAとBを入れ替えて行うのはそのためです。
  • 終了基準が後から変わる。 「このへんで十分」と感覚で終えると、所要時間の意味がなくなります。基準は事前に書いてください。
  • 写真の角度。 斜めから撮ると区画の数え方がずれます。真上から、四隅を入れて撮ります。
  • 画面の表示サイズが変わる。 拡大の状態が違うと、庭の見え方が変わります。2回目以降も同じ表示にします。
  • 「正解の庭」を想定する。 この実験に正しい庭はありません。美しさの採点を足すと、指標が混ざります。
  • 1回の差を大きく読む。 1回では、疲れや気分の影響も入ります。差が出たら、まず繰り返して確かめます。

次の行動

まず切り紙を6種類・大小2サイズで用意し、条件を紙に書き出してください。そのうえで、紙の自由制作を一回行い、写真を撮ってから、余白の庭で再現するところまで進めます。そこで得られた区画ごとの個数と手の動きの記録を、自分のゲームの配置UIを考える材料に使ってください。