Xでタップすると謎ノ美兎が出てくる写真を作った【透過PNG】

Xのタイムラインではふつうの写真なのに、タップして開くと謎ノ美兎の顔が出てくる。そんな画像を作れるようにしました。手持ちの写真で、下でそのまま試せます。

• 写真を読み込む：手持ちの写真を使えます。写真はこの端末のブラウザの中だけで処理され、どこにも送信されません
• サンプル：部屋の写真で試せます
• 写真の色：白い背景の上の写真の色の濃さ（初期設定は60%）
• 顔の明るさ：黒い背景の上の顔の明るさ（初期設定は35%）
• 位置と大きさ：「＋ 位置と大きさ」を開くと、顔を置く場所と大きさを変えられます
• 押している間 黒い背景で見る：タップして開いたときの見え方を確かめられます
• PNG保存：Xにそのまま投稿できるPNGを保存します

ミコンスキー

まずは「押している間 黒い背景で見る」を押してみてください。白いときは部屋の写真なのに、黒くすると顔が出てきます。

タップすると変わるのはなぜ？

Xのタイムラインは白い背景、画像をタップして開いた画面は黒い背景です。半透明の画像は、下にある背景の色と混ざって見えるので、同じ1枚でも、白の上と黒の上で見え方が変わります。

しくみ

画面に出る色は「画像の色 × 不透明度 ＋ 背景の色 ×（1 − 不透明度）」で決まります。白の上と黒の上で見せたい色が決まっていれば、そこから画像の色と不透明度を逆算できます。

1. 写真の明るさを、明るい側（白の上で見える範囲）に寄せます。
2. 謎ノ美兎の顔（白黒の濃淡）を、暗い側（黒の上で見える範囲）に寄せます。
3. 画素ごとに、白の上では写真、黒の上では顔になる「色」と「不透明度」を計算します。
4. Xで透明が消えないように、256色を選び直したPNG（長辺800px以下）にして保存します。

写真の色と顔の明るさ

明るさの範囲を、写真（明るい側）と顔（暗い側）で分け合っているので、「顔の明るさ」を上げるほど、白の上の写真は白っぽくなります。

また、不透明度は1画素に1つしか決められません。白の上で写真の色を出すと、その色の差がそのまま黒の上にも残るので、部屋がうっすら見えます。「写真の色」を下げるほど、黒の上は顔だけに近づきます（0%にすると写真は白黒になります）。

Xに投稿するときの注意

• PCのブラウザから投稿してください。スマホアプリから投稿するとJPEGに変換され、透明が消えます
• 透明が保たれるのは「256色のPNG・長辺800px以下」という条件です（保存されるPNGはこの条件に合わせてあります）
• ダークモードで見ている人には、タイムラインの時点で顔が見えます

この方法は、Zennの記事「タップで絵が変わる機能を作った」などで解説されている計算を参考にしています。

ミコンスキー

ライトモードの人にだけ効く、ちょっとしたいたずらです。タップした人だけが、部屋の中の謎ノ美兎に気づきます。

いかがでしたか？

ミコンスキー

自分の写真で作って、Xに投稿してみてください。タップした人の反応が楽しみです。

まとめ

• Xのタイムラインは白い背景、タップして開いた画面は黒い背景
• 半透明の画像は背景の色と混ざるので、白の上と黒の上で別の絵を見せられる
• 白の上では写真、黒の上では謎ノ美兎の顔になる色と不透明度を、画素ごとに逆算する
• 写真の色を残すと、黒の上にも部屋がうっすら残る
• PCのブラウザから、256色・長辺800px以下のPNGで投稿する

鍵で確かめる文章の透かしは「謎ノ美兎透かし」、音に顔を入れるのは「謎ノ美兎スペクトログラム」にあります。

※ 謎ノ美兎のファン作品（二次創作）です。