手で描いたタイトル文字をそのまま画面に使う

問いを立てる：何が「見え方」を変えるのか

見え方を左右しそうな要素は、大きく4つあります。

• 取り込みの質：撮影の光、角度、解像度
• 加工の有無：紙の色を透過にするか、しないか
• 背景：明るい色か、暗い色か
• 表示サイズ：小さい画面か、大きい画面か

この4つを一度に動かすと、何が効いたのか分かりません。そこで、次の3条件を比べます。

• A、内容：撮影した画像を加工せずそのまま置く
• B、内容：通常の解像度で撮影し、紙の部分を透過にしたPNGにする
• C、内容：大きめに撮影し、紙を透過にしたうえで、表示サイズに合わせて縮小して使う

AとBの差は「透過処理の効果」、BとCの差は「元の解像度と縮小の効果」を示します。この対応が崩れないように、同じ紙・同じペン・同じタイトルで3条件を作ります。

準備と撮影

準備するもの

• 白い紙（無地。罫線のないもの）
• 黒系の太めのペンかマーカー（細すぎる線は小さく表示したときに消えやすくなります）
• スマホのカメラ、またはスキャナ
• ブラウザと、テキストエディタ（下のコードを保存するため）
• 記録用の表（後述）

書く

タイトルは同じ文言を3枚書きます。同じ人が同じペンで書いても形は少しずつ違うので、1枚だけで判断すると、書き方のばらつきと取り込み方の差を区別できないからです。文字は用紙いっぱいではなく、周囲に余白を残して書いてください。

撮る

撮影では次の点を決めておきます。

1. 真上から撮り、紙を斜めから写さない
2. 自分の影や手の影が紙に落ちない位置にする
3. 窓際の自然光と部屋の照明では色味が違うため、条件を決めて、どちらで撮ったかを記録に残す
4. 条件Cでは、文字が画面いっぱいに入るまで近づけて撮る

スキャナがある場合は、解像度の設定を高めにするだけで条件Cに近い素材が作れます。

紙を透過にして、PNGで書き出す

条件B・Cで使う処理は、ブラウザだけで動く小さなページで行えます。考え方は単純です。各ピクセルの明るさを計算し、暗いところ（インク）は不透明に、明るいところ（紙）は透明にします。境目は少し幅を持たせて、段階的に透明度を変えます。

<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" accept="image/*">
<label>しきい値 <input type="range" id="t" min="60" max="220" value="150"></label>
<label><input type="checkbox" id="w">白インク</label>
<canvas id="c" style="max-width:100%;background:#9bd"></canvas>
<a id="d" download="title.png">PNGを保存</a>
<script>
const f=document.getElementById('f'),t=document.getElementById('t');
const w=document.getElementById('w'),d=document.getElementById('d');
const c=document.getElementById('c');
const x=c.getContext('2d',{willReadFrequently:true});
let img=null;
f.onchange=()=>{
  const u=URL.createObjectURL(f.files[0]);
  img=new Image();
  img.onload=()=>{URL.revokeObjectURL(u);draw();};
  img.src=u;
};
t.oninput=w.onchange=()=>img&&draw();
function draw(){
  const s=Math.min(1,1600/img.width);
  c.width=Math.round(img.width*s);
  c.height=Math.round(img.height*s);
  x.drawImage(img,0,0,c.width,c.height);
  const m=x.getImageData(0,0,c.width,c.height),p=m.data;
  const th=+t.value,soft=40,v=w.checked?240:20;
  for(let i=0;i<p.length;i+=4){
    const l=0.299*p[i]+0.587*p[i+1]+0.114*p[i+2];
    const a=Math.max(0,Math.min(1,(th-l)/soft));
    p[i]=p[i+1]=p[i+2]=v;
    p[i+3]=Math.round(a*255);
  }
  x.putImageData(m,0,0);
  d.href=c.toDataURL('image/png');
}
</script>

保存したHTMLをブラウザで開き、撮影した画像を選ぶと、背景色の上に文字だけが残った状態が表示されます。確認の際は次の点を見てください。

• しきい値のスライダーを動かすと、線の太さと紙の影の残り方がどう変わるか
• 「白インク」を切り替えると、暗い背景用の素材が作れる

しきい値は、紙の影が消える最小の値から始め、線が痩せはじめる手前で止めるのが目安です。条件Bはそのまま保存し、条件Cは大きく撮った画像で同じ処理をして保存します。条件Aは加工せず、元の写真ファイルを使います。

なお、ここでのコードは取り込みの原理を確かめるための最小構成です。大きな画像で滑らかに動かす工夫や、保存形式の最適化は含まれていません。

画面に置いて、決まった単位で記録する

3つの素材ができたら、同じ1枚のHTMLに並べて表示します。img要素に幅を指定するだけで十分です。背景には明るい色と暗い色の2種類を用意します。暗い背景に黒インクの素材を置くと沈むことは予想できますが、条件Aの紙色がどう見えるかも含めて、目で確認してください。

変える条件

• 素材：A／B／C
• 背景：明るい／暗い（暗い背景では白インク版も加える）
• 表示幅：120px／320px／640px（CSSピクセルで指定）

画面の拡大率や高精細な画面の違いも見え方に影響します。可能なら、ふだん使うスマホとPCの両方で同じ表を埋めてください。

記録の単位

1条件（素材×背景×表示幅）ごとに、次の4項目を○△×で記録します。

1. 読める：初見でタイトルが読めるか
2. 縁：ギザギザやにじみが気にならないか
3. 白いフチ：文字の周りに明るい縁取りが見えないか
4. 手描きらしさ：線の揺れや太さの変化が残っているか

3枚書いたうちの各1枚を同じ条件で評価し、3枚の評価がそろうか、ばらつくかを見ます。評価は日を変えて2回行うと、そのときの印象に引きずられにくくなります。

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

記録がそろったら、次のように読みます。

• AとBで「読める」「手描きらしさ」の評価が大きく違う：紙の色が見え方を支配しています。透過処理を標準の手順にします。
• Bに白いフチが目立つ：しきい値が高すぎるか、soft（境目の幅）が狭すぎる可能性があります。しきい値を下げる、softを広げる、の順に調整してから再比較します。
• 小さい幅で線が消える：撮影やペンの太さの問題が考えられます。細い線は小さな表示に向きません。ペンを太くして書き直します。
• BとCで差が出る：元の解像度と縮小の影響です。差が小さければ、ファイルを軽くするために低めの解像度でも足ります。
• 暗い背景で黒インクが沈む：白インク版を作るか、背景側に薄い面を敷くなどの対処を検討します。

起こりやすい誤り

• 撮影の光が条件ごとに違い、加工の差と光の差が混ざる
• 文字の周りの余白を大きく残したまま使い、画面上で位置がずれる（透明な余白も画像の一部です）
• 画像だけでタイトルを表示し、代替テキストを付けない。読み上げ環境やテキストが読み込めない場合に備えて、alt属性か、見えない形のテキストを併用してください
• 既存のフォントをなぞって書いた文字を、そのまま配布する。権利の扱いは断定できないため、心配なら専門家やフォントの提供元の案内で確認してください
• 画面サイズごとの表示を確かめず、PCだけで判断する

次の行動

まず、同じタイトルを3枚書き、条件A・B・Cの素材を作って、明るい背景と暗い背景で見比べてください。気に入った素材は、index.htmlと同じフォルダに置いて相対パスで読み込み、ZIPにまとめて投稿画面の「表示の確認」で実際の見え方を確かめるところまで進めると、手元とのずれに気づけます。アップロードには1ファイル30MiBなどの上限があるため、PNGの大きさも記録に加えておくと安心です。