マガジン

手描きのタイトル文字を作る:10回書いて選ぶ

遊びをつくる

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

ゲームを実際に動かしながら、下書きの説明カードを鉛筆で確かめる手元。
記事のテーマをもとに制作したAI生成の写真風イメージ。

ゲームのタイトルを手で書いてロゴにしたいとき、迷うのは「どの1枚を使うか」です。1回目に書いた字が一番よく見えて、書き直すほど硬くなる、という経験は珍しくありません。逆に10回書いてみたら後半のほうが良かった、ということもあり得ます。感覚だけで選ぶと、あとから「なぜこれにしたのか」を説明できなくなります。 この記事は、同じタイトルを10回書き、条件を決めて記録し、基準に沿って1枚に絞るまでの実験の設計書です。確かめたいのは「小さく表示されても読め、ゲームの雰囲気に合う手書きの1枚は、どの条件で書いたものか」という問いです。結果はこの記事には書きません。実際に書く紙とペンによって答えが変わるため、読者自身の10枚で答えを出す形にしています。 アソバースの公式作品は、作品ごとにタイトルの文字組みが異なり、手描き風の文字もあります。どの作品がどんな文字組みかは、作品を開いて確かめてみてください。手本を見たあとで自分の10枚を書くと、比べる目が育ちます。

この記事の目次
  1. 準備するもの:問いを一つに絞る
  2. 10回の書き方:条件を3つだけ変える
  3. 記録と縮小テスト
  4. 結果の読み方
  5. 起こりやすい誤り
  6. 次の行動

準備するもの:問いを一つに絞る

実験の前に決めるのは、タイトル候補を1つだけにすることです。候補が複数あると、文字の良し悪しと言葉の良し悪しが混ざります。言葉が決まっていないなら、先に言葉を決めてください。

用意するものは次のとおりです。

  • 白い紙(コピー用紙で十分です)を10枚か、1枚を10枠に区切ったもの
  • 太さの違うペンを2種類(たとえば細いペンと太いマーカー)
  • 写真が撮れるスマートフォン、またはタブレットのペン入力
  • タイマー(スマートフォンので構いません)
  • 下の記録表を書き写すメモ

タッチ操作やマウスで書く人向けに、後述の比較シート(HTML)も用意しました。紙の代わりに画面上で10回書けます。ただし、手首の動きが出やすいのは紙とペンです。可能なら紙で書き、写真に撮って確認する流れをおすすめします。

もう一つ、書く前に「このゲームの雰囲気を3語で言う」というメモを残してください。たとえば「静か、夜、やわらかい」のような語です。後の採点で「雰囲気」の項目を判断する物差しになります。

10回の書き方:条件を3つだけ変える

条件を変える要素は、ペンの太さ、速さ、一文字ごとの意識の3つに絞ります。ほかの要素(紙の向き、書く場所、時間帯)はできるだけ固定します。変える要素が多いと、どれが効いたのか分からなくなるためです。

10回の割り当ての例です。同じ条件を2回ずつ書くのは、偶然の出来を見分けるためです。

  • 1〜2、ペン:ふだん使うペン、速さ・意識:ふだんの速さで
  • 3〜4、ペン:太いマーカー、速さ・意識:ふだんの速さで
  • 5〜6、ペン:細いペン、速さ・意識:ふだんの速さで
  • 7〜8、ペン:ふだん使うペン、速さ・意識:全体を2秒以内で一気に
  • 9〜10、ペン:ふだん使うペン、速さ・意識:ゆっくり、1画ずつ丁寧に

書くときの約束は三つです。

  1. 1回書いたら、その紙は伏せるか視界から外します。前の字を見ながら書くと、無意識に似せてしまい、10回が実質1回になります。
  2. 書き損じも捨てずに、番号を振って残します。失敗に見える字が、あとで味として効くことがあります。
  3. 書く大きさは、枠いっぱいに統一します。小さく書いた字と大きく書いた字は、縮小したときの印象が比べられません。

記録と縮小テスト

記録表

書き終えたら、各回を次の3項目で1〜5点で採点します。

  • 読める、見るもの:幅64pxほどに縮小しても、何と書いてあるか分かるか
  • 雰囲気、見るもの:最初に決めた3語に合うか
  • 揃い、見るもの:文字の大きさや傾きのばらつきが、意図したものに見えるか。単にだらしなく見えないか

記録の単位は「1回につき1行」です。番号、条件、3項目の点、ひと言の理由(たとえば「『ま』の丸が潰れる」)を書きます。点数だけでなく理由を残すと、あとで見返したときに判断をたどれます。

縮小して比べる

ロゴは小さく表示される場面があります。一覧のカードやアイコン近くなど、書いた大きさのまま見てもらえるとは限りません。そこで、10枚すべてを同じ縮小サイズで並べて比べます。

紙で書いた人は、写真に撮って画像編集ソフトなどで幅256px・128px・64pxに縮小してください。画面上で書く人は、次のHTMLをテキストファイルにして .html で保存し、ブラウザで開くと使えます。外部通信はなく、ページを閉じると内容は消えます。

html
<!doctype html>
<meta charset="utf-8">
<title>手描きロゴ 比較シート</title>
<canvas id="c" width="480" height="160" style="border:1px solid #888;touch-action:none"></canvas>
<p><button id="keep">この1枚を残す</button> <button id="clear">消す</button></p>
<div id="sheet"></div>
<script>
const c = document.getElementById("c");
const g = c.getContext("2d");
let drawing = false;
function reset() {
  g.fillStyle = "#fff"; g.fillRect(0, 0, c.width, c.height);
  g.strokeStyle = "#222"; g.lineWidth = 6; // 太さはここを書き換えます
  g.lineCap = "round"; g.lineJoin = "round";
}
reset();
function pos(e) {
  const r = c.getBoundingClientRect();
  return [(e.clientX - r.left) * c.width / r.width, (e.clientY - r.top) * c.height / r.height];
}
c.onpointerdown = e => { drawing = true; g.beginPath(); g.moveTo(...pos(e)); };
c.onpointermove = e => { if (!drawing) return; g.lineTo(...pos(e)); g.stroke(); };
c.onpointerup = c.onpointerleave = () => { drawing = false; };
document.getElementById("clear").onclick = reset;
document.getElementById("keep").onclick = () => {
  const sheet = document.getElementById("sheet");
  if (sheet.children.length >= 10) return;
  const row = document.createElement("div");
  row.append(sheet.children.length + 1 + "回目 ");
  for (const w of [256, 128, 64]) { const i = new Image(); i.src = c.toDataURL(); i.width = w; row.append(i, " "); }
  sheet.append(row);
  reset();
};
</script>

「この1枚を残す」を押すたびに、下の一覧へ256px・128px・64pxの3サイズが並びます。最大10回まで残せます。太さを変えたいときは、lineWidth = 6 の数字を書き換えて読み込み直してください。読み込み直すと残した一覧は消えるため、変更は書き始める前に済ませます。

結果の読み方

10枚の採点と縮小の並びがそろったら、次の順で絞ります。

  1. 「読める」が3点以下のものを先に外します。雰囲気が良くても、タイトルが読めなければロゴの役目を果たせません。
  2. 残ったものから「雰囲気」の点が高い順に3枚へ絞ります。
  3. その3枚について、「揃い」の理由欄を読み返します。ばらつきが味になっているか、ただの乱れかを見分けます。

条件ごとの傾向も見ます。同じ条件の2枚の点数が近ければ、その条件は安定して同じ質の字を生んでいると読めます。逆に2枚の差が大きければ、偶然の出来に左右されやすい条件です。偶然の出来は「再現できない良さ」なので、使うならその1枚をそのまま取り込み、書き直さないほうが安全です。

最後に、他の人に見てもらう確認を入れます。方法は次のとおりです。

  • 3枚をそれぞれ幅128px程度に縮小して用意します。
  • 1枚ずつ3秒だけ見せて、「何と書いてあると思いますか」と聞きます。
  • 答えが正しいかどうかと、答えるまでの迷い方を記録します。
  • 見てもらう相手には、先に正解を伝えないでください。

作者本人は正解を知っているので、読めてしまいます。初見の人が読めるかどうかは、自分の採点とずれることがあります。ずれたときは、他の人の読みを優先して判断してください。

起こりやすい誤り

  • 一文字ずつ書き直して揃えてしまう各文字を最良の出来で集めてつなぐと、全体のリズムが崩れることがあります。まず1回のひと続きで書いた字を基本にし、直すのは最小限にします。
  • きれいに整えすぎて、手描きらしさを消す画像編集で線をなめらかにしすぎると、ふつうのフォントに近づきます。手描きを選んだ理由を思い出してください。
  • 背景と文字のコントラストを見落とす白い紙に書いた字をそのまま暗い背景に載せると、読めなくなることがあります。載せる予定の背景色の上で必ず確認します。
  • 大きい画面でだけ確認する拡大して見ると良く見えても、64pxでは細い線が消えることがあります。縮小テストを省かないでください。
  • 既存のフォントやロゴをなぞるなぞった字は手描きに見えても、元の文字の権利に関わる可能性があります。著作権の扱いは断定できないため、判断に迷う場合は公式情報や専門家に確認してください。
  • 点数だけで決める合計点の最上位が、他の人に読めないことがあります。点数は絞り込みの道具で、最後の判断は他の人の読みと合わせて行います。

次の行動

まずタイトルを一つに決め、紙に10回書いて、番号と条件を記録してください。次に、10枚を同じ縮小サイズで並べ、「読める」が3点以下のものを外すところまで進めます。残った3枚を誰かに3秒だけ見せられれば、ロゴ候補の1枚が選べます。