手描きのラフだけで作品を完成させるには：清書しない選択を確かめる実験の設計書

問いを立てる：何を比べ、何を固定するか

まず問いを一文にします。たとえば「同じルールのゲームで、素材をラフのままにした版は、清書した版より『手作りらしさ』を強く感じさせ、しかも操作の分かりやすさを落とさないか」です。曖昧なまま始めると、記録の段階で何を見ればよいか分からなくなります。

比べる条件は次の2つが基本で、3つ目は任意です。

• 条件A（ラフのまま）：紙に描いた絵を撮影またはスキャンし、トリミングと白の透過だけを行います。線の描き直しや塗りは行いません。
• 条件B（手作業で清書）：同じ構図を、線を整えて塗り直します。道具は紙でもデジタルでも構いません。
• 条件C（任意・生成で整える）：ラフを元に、画像生成ツールで仕上げた素材を使います。このシリーズ「生成と手描きの間」の関心に最も近い条件です。ただし、ラフを入力に使う場合の扱いや、出力の権利は、使うツールの公式の利用条件で確認してください。法的な判断が必要な場合は専門家に相談するのが確実です。

固定するものも決めておきます。ルール、画面サイズ、素材の配置と大きさ、音、文章、色の背景は、すべて条件間で同一にします。差し替えるのは素材の画像ファイルだけです。ここが崩れると、雰囲気の差が絵によるものか、他の要素によるものか分からなくなります。

準備するもの

素材の数は絞ります。キャラクター1〜2点、押したり選んだりする対象3〜4点、背景1点の合計5〜8枚程度が、手描きを何度か描き直せる量です。

• 小さなゲーム：ルールが単純で、1回の遊びが数分で終わるものが向いています。画像の差し替えだけで条件を変えられるよう、素材のファイル名と大きさを固定した作りにします。
• 紙とペン：線の太さが違うペンを2種類ほど用意します。鉛筆、ボールペン、サインペンなど、普段のラフに使う道具で構いません。
• 撮影・取り込みの手段：スマートフォンのカメラかスキャナです。明るさが均一になる窓際などで撮ります。
• 記録用の表：条件ごと、遊んだ人ごとに書き込める紙か表計算の1シートです。
• 遊んでもらう人：条件ごとに複数人を目安にします。人数は多いほど安心ですが、少人数でも傾向は見えます。ただし、少人数の結果は「傾向」として扱い、断定はしません。

投稿を前提にするなら、アソバースの上限も先に確認しておきます。アップロードは20MiB以内で、ZIPの場合は直下のindex.htmlが入口、素材は相対パスで参照します。撮影した写真は大きくなりやすいので、使う大きさに縮小してから入れます。

手順：ラフを素材にする

1. ラフを描く

1枚ごとに制限時間を決めます。たとえば1枚10分までとします。時間を決めないと、描き直しが重なって、実質的に清書になってしまいます。消しゴムは使わず、直したいときは線を重ねます。

2. 取り込んで背景を透過する

写真の紙の白や影が残ると、ゲームの背景に四角い白が出ます。明るい部分を透明にする処理を、次の最小構成で試せます。画像を選び、しきい値のスライダーで紙の影が消える位置を探します。

<input type="file" id="fileIn" accept="image/*">
<label>しきい値 <input type="range" id="thIn" min="120" max="250" value="200"></label>
<canvas id="cv" style="background:#e8dcc0;max-width:100%"></canvas>
<script>
let img = null;
const cv = document.getElementById('cv');
const ctx = cv.getContext('2d');
const fileIn = document.getElementById('fileIn');
const thIn = document.getElementById('thIn');
function draw() {
  if (!img) return;
  cv.width = img.width; cv.height = img.height;
  ctx.drawImage(img, 0, 0);
  const d = ctx.getImageData(0, 0, cv.width, cv.height);
  const hi = +thIn.value, lo = hi - 80;
  for (let i = 0; i < d.data.length; i += 4) {
    const l = (d.data[i] + d.data[i+1] + d.data[i+2]) / 3;
    d.data[i+3] = l >= hi ? 0 : l <= lo ? 255 : 255 * (hi - l) / (hi - lo);
  }
  ctx.putImageData(d, 0, 0);
}
fileIn.onchange = e => {
  img = new Image();
  img.onload = draw;
  img.src = URL.createObjectURL(e.target.files[0]);
};
thIn.oninput = draw;
</script>

明るさが「しきい値−80」以下の画素は不透明のまま残り、しきい値以上は透明になります。その間は線のにじみとして半透明になります。しきい値を上げすぎると紙の影が残り、下げすぎると薄い鉛筆線が消えます。ここで線を無理に濃くしないのが、条件Aの約束です。

3. 条件Bと条件Cの素材を用意する

条件Bは、条件Aと同じ構図、同じ大きさで描き直します。条件Cを行う場合は、同じラフを元に生成した素材を使い、背景の透過など取り込みの手順は揃えます。

4. 同じゲームに差し替える

ファイル名とサイズを揃えた3組のフォルダを作り、HTMLは共通のまま、素材のフォルダだけを切り替えます。差し替え後は、押せる対象が背景から見分けられるかを自分で一度確認します。

記録の取り方

記録は「雰囲気」と「遊びやすさ」を別々に取ります。1人が1条件を1回遊んだ時点で、すぐ記録します。

• 雰囲気の形容語：「あたたかい」「手作り」「不安定」「雑」「きれい」「冷たい」などを10個ほど書いたチェックリストを渡し、当てはまるものに丸をつけてもらいます。選択肢に否定的な語も含めるのがコツです。
• 7段階評価：「この世界にもっと居たいと思ったか」「作者の個性を感じたか」の2項目を1〜7で答えてもらいます。
• 遊びやすさ：「どれが押せるか迷った回数」を観察者が数えるか、本人に「迷った場面」を自由記述で書いてもらいます。
• 一言メモ：「何が一番印象に残ったか」を1行で書いてもらいます。

順序の扱いも決めておきます。同じ人に複数条件を遊んでもらうなら、順番を人ごとに入れ替えます。A→B、B→Aのように半数ずつに分ければ、「最初に見たものが新鮮だった」効果が片方に偏りません。条件間の休憩を入れ、同じ人が同じ条件を続けて2回遊ぶことは避けます。

注意したいのは、アソバースの数字を結果の指標にしないことです。プレイ回数は作品の起動の実測回数で人数ではなく、いいねやレビュー平均には絵以外の要因も混ざります。レビューは1アカウントが1作品に1件なので、同じ人が2つの版を同じ作品に評価し分けることもできません。公開して比べたい場合は、版ごとに別の作品として投稿する手もありますが、集まる人が違う以上、上の記録表のような手元の比較の代わりにはなりません。

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

集まった記録は、2つの軸で読みます。

• Aで雰囲気の語が増え、迷った回数は同程度、読み取れること：ラフの揺れが可読性を損なわずに個性として働いている可能性があります、次の判断：ラフのまま仕上げる方針を続けます
• Aで雰囲気の語は増えるが、迷った回数も増える、読み取れること：味わいは出るが、押せる対象の見分けが弱い可能性があります、次の判断：外枠や色の面だけ足して、線は直さない折衷案を試します
• AとBで雰囲気の語がほぼ同じ、読み取れること：雰囲気を決めているのは絵以外（色、音、文章、動き）かもしれません、次の判断：素材以外の要素を1つずつ変える次の実験に進みます
• Bで「きれい」が増え、「個性」の評価が下がる、読み取れること：整えることで平均的な印象になった可能性があります、次の判断：清書する場合も、どこを残すかを決めます
• Cでだけ評価が割れる、読み取れること：生成による整い方が、好みや期待と合う人・合わない人に分かれた可能性があります、次の判断：生成物の扱いを公開時に明記するか検討します

人数が少ない間は、数値の差ではなく、理由のメモと迷った場面を中心に読みます。「なぜそう感じたか」が複数の人で重なる部分が、再現性のある手がかりです。

起こりやすい誤りも挙げておきます。

• 作者の愛着が目を曇らせる：自分のラフは良く見えがちです。評価は遊んだ人の記録だけを根拠にします。
• ラフの質の差を絵柄の差と取り違える：条件Aの出来が偶然悪い、または良い場合があります。主要な素材は2枚ずつ描き、良い方を選ぶのではなく、描いた順に採用すると偏りを抑えられます。
• 線が小さい画面で読めない：パソコンで見やすかった細い線が、スマートフォンでは消えることがあります。両方の画面で確認します。
• 透過処理で線が痩せる：しきい値を上げすぎると薄い線が消えます。処理前後を並べて見て、条件Aの「線の濃さ」を毎回同じ基準にします。
• 条件ごとに他の要素が変わる：素材を差し替える際に、位置や大きさが少しずれるだけでも印象は変わります。差し替えはファイル名単位で行います。
• 見る順序の偏り：順番を入れ替えないと、最初に見た版の印象が基準になります。

公式作品には、作品ごとにタイトルの文字組みが違うものがあります。縦組みの明朝や手描き文字などです。カバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。手描きらしさと生成の質感が、同じ作品群の中でどう配分されているかは、各作品を開いて自分の目で確かめてください。

次の行動

まず素材を5枚だけ、時間を決めて手描きし、上のコードで透過して、自分のゲームの1画面に置いてください。そこから条件Bの素材を作り、2〜3人に順番を入れ替えて遊んでもらうところまでが、最初の1サイクルです。結果の表を見て、ラフのまま進むか、一部だけ整えるかを決めてから、投稿の準備に進んでください。