- Web
- Tool
- Graphics
ネオンサインメーカー
入力した文字を、その場で光るネオンサインにするWebツール。色・フォント・背景を選んで、PNG画像で保存できる。日本語や絵文字もそのまま光らせられる。
看板にしたい言葉を入れると、レンガやコンクリートの壁に掛かったネオンサインとしてその場で描き出すブラウザのツールです。色は9色とレインボー、フォントは日本語向け4種類と英字向け2種類から選べ、文字全体が光る「ぬり」と、文字のふちをガラス管でなぞったような「チューブ」の2つの光り方があります。背景はレンガ、コンクリート、夜、透明の4つで、透明にすると写真や動画に重ねられる文字だけのPNGになります。保存する画像は横長（1600×900）、正方形、縦長（1080×1920）から選べます。描画はCanvas 2Dだけで行い、同じ文字をぼかしの強さを変えて3回重ねたあと、白に近い色で管の芯を描いて光を表しています。壁の背景には、文字の色が壁に映る光も足しています。プレビューでは古いネオン管のようにときどき1文字が消えかけ、スイッチを入れ直すと1文字ずつ点灯します。作った看板は、文字と設定を入れたリンクでそのまま人に見せられます。入力した文字はサーバーに送らず、すべてブラウザの中で描いています。
光は「ぼかした文字」を重ねて作る
ネオンらしさは、管そのものより、まわりににじむ光で決まります。そこで同じ文字を、文字の大きさの70%・32%・12%という3段階のぼかしで、外側の弱い光から順に重ねています。最後に、選んだ色を白に6割ほど近づけた色で、ぼかしの少ない「芯」を描きます。これで、中心が白っぽく、ふちに行くほど色が濃くなる、ネオン管の見え方に近づけました。
ぼかしの量は、キャンバスの大きさではなく文字の大きさに合わせています。そのため、スマホの小さなプレビューでも、1600pxの保存画像でも、同じ光り方になります。壁の背景を選んだときは、文字のまわりに放射状の光を足し、壁に色が映っているように見せています。
1文字ずつ点いたり消えたりできるようにした
古いネオン管のように1文字だけがチカチカしたり、1文字ずつ点灯したりするために、文字は1文字ずつ位置を計算して描いています。濁点の付いた文字や絵文字を途中で切らないよう、文字の区切りには Intl.Segmenter を使いました。
ぼかしを重ねる描画は1回で数十ミリ秒かかるので、毎フレーム描き直すと重くなります。そこで「どの文字が点いているか」の組み合わせごとに描いた結果を取っておき、チカチカしている間は、全部点いた絵と1文字消えた絵を入れ替えるだけにしています。端末で「視差効果を減らす」を設定している人には、動きを止めて表示します。
フォントと共有リンクの扱い
- 日本語のフォントは、入っている文字の分だけ後から読み込まれる。CSS Font Loading API で読み込みを待ってから描き直し、保存の前にも必ず待つ
- 英字だけのフォント（Tilt Neon・Neonderthaw）を選んだときは、日本語の部分を日本語フォントで描く
- 文字は3行・60文字まで。行の数と一番長い行から、画面に収まる大きさを自動で決める
- 文字と設定はページのURLに入れているので、リンクを開くと同じ看板がそのまま表示される
- 背景を透明にすると、壁と壁に映る光を描かず、文字の光だけのPNGになる