ネオンまげ
雨の路地裏でガラス管を曲げて、自分のネオンサインを点火しよう。ガスをえらべば色が変わり、濡れた路面に光がゆれる。
- ⏱ 3〜10分
- 🔊 音あり
- 📱 指でもマウスでも
- 🆓 無料・登録不要
看板に指でガラス管を曲げてみて。離すと——点火。
遊び方
- ☝️ なぞる看板の上を指でなぞると、その軌跡が1本のガラス管になります。描いている間は、まだ冷たい透明な管のまま。
- ✋ 離す指を離した瞬間にバチバチッと放電して点火。何度かためらうように明滅してから、ふわっと灯ります。管は何本でも足せます。
- 🎨 ガスをえらぶ下に並ぶ5つの丸が封入ガス。次に曲げる管の色が変わります。切り替えると、濡れた路面に新しい色が一瞬にじみます。
✍️ お手本で下書き、↩ もどすで1本取り消し、⚡ 点灯リプレイで全部を点け直し、📸 で画像保存、📤 でシェア。
封入ガス — 全5種
ネオンサインの色は、ガラス管に閉じこめるガスで作り分けます。ネオンまげのパレットに並んでいるのも絵の具ではなくガスの名前です。色は「白く光る芯」「ガス色の光」「外ににじむ光」の3段で描き分けています。
ネオン赤橙
最初に選ばれているガス。ネオンサインという名前の由来でもある、いちばん看板らしい赤橙です。
アルゴン青白
冷たく澄んだ青白い光。赤橙の管と並べると、色の温度差でどちらも引き立ちます。
水銀青緑
みずみずしい青緑。雨の路地の青っぽい背景になじむ色です。
ヘリウム金
暖かい金色。「OPEN」の文字や星の縁取りに使うと、昔ながらの喫茶店の看板のようになります。
クリプトン薄紫
淡い紫。ほかの色の間にはさむと、看板全体が夜の色にまとまります。
つくりの話
点く瞬間を何度でも
ネオンサインは、スイッチを入れてすぐには安定しません。ヴ…ヴヴッ…と何度かためらってから、バチッと灯ります。ネオンまげは、この数百ミリ秒を何度でも味わうために作りました。
点火の明滅は、管ごとに2〜4回の暗転をはさんで、0.3〜1.1秒ほどで必ず点灯で終わるようにしています。明滅のパターンは管ごとに決まった「種」から作っていて、⚡ 点灯リプレイを押すたびに種を一つずらすので、毎回ちがうためらい方で点きます。灯った直後の0.6秒ほどは管が一瞬太く明るくなり、周りの路地にも光がこぼれます。この「生きた」感じの一拍があるかないかで、点火の気持ちよさがまったく変わりました。
指の震えは、ガラスの曲がりに直す
親指で描いた線は、点の間隔がばらばらで、細かいジグザグが残ります。そこで指を離したあと、線を等間隔の点に置き直し、前後の点となじませる処理を1回だけかけています。かけすぎると描いた形が丸まって別物になるので、震えだけが消えて、曲げたかったカーブは残る強さにとどめました。同じ線を描けば、必ず同じ管になります。
それでも「字が苦手だと看板がミミズ字になる」問題は残ります。その答えがお手本です。✍️ を押すたびに、ハート・OPEN・いなずま・ほし・つきの点線の下書きが順に看板に浮かぶので、なぞるだけで形になります。
路面の反射は、わざと物理に逆らっている
雨に濡れた路面には、看板の光が上下逆さまに映り、16本の帯に分けて少しずつ左右に揺らすことで水面のゆらめきにしています。
ここには一つ嘘があります。実際の鏡の映り方に忠実にすると、高い位置にある看板の像はほとんど画面の外に沈んでしまい、路面には看板の下の何もない部分しか映りませんでした。そこで縦に半分以下まで押しつぶして、看板全体が路面の帯に収まるようにしています。雨の夜の記憶の中では、看板はいつも路面いっぱいに映っているからです。
光らせるのは、暗さの仕事
ネオンのにじむ光は、管を3回重ねて描いたうえで、光だけを4分の1の大きさに縮めてから引き伸ばして重ねています。縮めて戻すときのぼやけが、そのまま光のにじみになります。重い処理を使わずにスマホでもなめらかに動かすための工夫です。
背景は、空のグラデーション、左右の黒いビル、薄く灯った窓が6つ、落ちてくる64本の雨、ときどき広がる路面の波紋、それに周りを暗く落とす影だけ。ごくまれに、遠くで雲がうっすら光ります。画面のほとんどを暗くしておくと、残りのネオンが全部の仕事をしてくれます。灯した管が増えるほど、路地全体もほんのり明るくなります。
音もすべてその場で合成
録音した音は使っていません。
- 変圧器のハム:55Hzを土台にした低い唸り。灯っている管の長さの合計が増えるほど太くなり、ある所で頭打ちになります
- 放電:高い雑音を50ミリ秒ほど鳴らす「バチッ」。明滅で点くたびに鳴ります
- 雨:こもらせた雑音をループさせ、雨足の強弱に合わせて音量がゆっくり変わります
- ブレーカー:点灯リプレイの最初に鳴る、低い「ガチン」
「触れたら店が開く」
ブラウザは、画面に触れるまで音を鳴らさせてくれません。そこで、ページを開いた時点では看板を消灯させておき、最初に触れた瞬間に、全部の管が0.22秒ずつずれて順番に点火するようにしました。音が解禁される瞬間と、店が開く瞬間を重ねています。初めて来た人の看板にも、消灯したハートが1本だけ最初から掛かっています。
動きを減らす設定がオンの端末では、点火の明滅を省いて順番に灯すだけにし、雨と波紋、反射の揺れも止めて、静かな夜にしています。
楽しみ方
- 2色以上で描く:赤橙のハートに青白のいなずま、のように色の温度をずらすと、写真にしたときの見栄えがぐっと上がります。
- 店の名前を書く:OPEN のお手本で文字の大きさをつかんでから、自分の名前や架空の店名を描いてみる。
- 開店の瞬間を撮る:⚡ 点灯リプレイを押して、全部灯った直後に 📸。路面への映り込みまで一枚に残ります。
- イヤホンで眺める:何も描かずにいるだけでも、雨音とハムで夜の路地に立っている気分になります。
- 翌日に開く:保存された看板が消灯して待っています。触れたときの「おかえり」の点灯は、次の日に開いたときがいちばん効きます。
よくある質問
音が出ません
音は看板に最初に触れたときに鳴り始めます。ブラウザは画面に触れるまで音を出さない決まりがあるためです。iPhone は本体の消音(マナーモード)がオンだと Web ページの音も鳴らないことがあります。別のタブに移ると、雨の音とハムは止まります。
描いた看板は消えませんか?
管を足したり消したりするたびに、お使いのブラウザの中に自動で保存されます。次に開くと消灯した状態で待っていて、画面に触れると順番に灯ります。サーバーには何も送らないので、別の端末には引き継がれず、ブラウザのデータを消すと消えます。
間違えて全部消しそうで怖いです
🧹 ぜんぶ消す は、1回押すと「ほんとに消す?」に変わり、2.5秒以内にもう一度押したときだけ消えます。1本だけ取り消したいときは ↩ もどすを使ってください。
保存した画像やシェアはどうなりますか?
📸 は今の路地を雨や反射ごと PNG 画像としてダウンロードします(隅に小さくサイトの印が入ります)。📤 は、画像の共有に対応した端末なら看板の画像ごと、そうでなければページのリンクを共有またはコピーします。
最終更新