この記事についてClaude（Anthropic）との共同編集により作成されました。
要約
- 視界遮断Webアプリ tobari に夏シリーズ3作（宵蛍の帳 / 花火の帳 / 波紋の帳）を追加した
- 「夜の帳」の系譜のまま、静けさを保ったまま夏の夜の質感だけをそっと足す方針で作った
- いずれも 1 ファイル完結（HTML + CSS + Vanilla JS）、UI なし・音なし・Screen Wake Lock 込みで画面スリープ抑止^1
- 入り口は
/tobari/。直URLはtobari-4qj.pages.dev/{hotaru, hanabi, hamon}/- tobari 本体の話はリリース記事、開発フローはBacklog.md MCP の記事
リリース記事で「永遠・深海・幕開け」の 3 つの帳を公開してから少し経った。 深夜作業のお供として自分でも使い続けているのだが、ふと気づいたことがある。
毎晩同じ「暗転」だけだと、ちょっとずつ飽きる。
完全に静かな暗幕（永遠の帳）と、わずかなゆらぎ付きの深海、1 時間でゆるく明けて沈む幕開け。3 種類あって運用上は十分のはずだったが、季節感がない分、どうしてもツール側の手触りが固定化する。 そこで「夜の帳のまま、季節の質感だけそっと載せる」という方向で増やすことにした。今回はその夏編 3 作の話。
公開 URL：
- 宵蛍の帳: https://tobari-4qj.pages.dev/hotaru/
- 花火の帳: https://tobari-4qj.pages.dev/hanabi/
- 波紋の帳: https://tobari-4qj.pages.dev/hamon/
入り口ページ /tobari/ からも飛べる。お好きにどうぞ。
方針 — 「夜の帳」のまま、季節を載せる
夏シリーズの 3 作は全部「夜の帳」に分類している。日中の浅瀬や木漏れ日のような明るい昼の帳は今回はまだ無い（将来案として置いてある）。
これは深夜作業のまぶしさ軽減という用途を崩したくないため。背景はどれも墨色〜紺基調で、tobari 本来の「触らせない」「視界遮断」「離脱歓迎」の思想はそのまま維持している^2。
そのうえで、各作で 1 つだけ季節モチーフを足す。
- 宵蛍の帳 — 黄色い発光点（蛍）が数匹だけふわふわ漂う
- 花火の帳 — 散発的に上がる、しだれ系の余韻花火
- 波紋の帳 — 静かな夜の池に同心円の波紋がポツリと広がっては消える
どれも「賑やかな表現」をやろうとすると tobari の思想とぶつかるので、情景の一番静かな部分だけを切り出す形にした。
宵蛍の帳
夜の野にぽつぽつ漂う、数匹の蛍の発光点だけ。
動作
- 数匹の発光点が画面内をふわふわ漂う（シルエットは描かない）
- ゆっくり蛇行しながら移動する。明滅は「ゆったり強弱」と「たまにパルス」の合成
- 各蛍が独立した位相を持つので強弱が同期せず、完全には消えない
- 背景は上が暗く下が明るい縦グラデ（下のほうに光源があるような視点）
シルエットを描かないのは意図的で、「点光源だけが宙にある」状態のほうが集中作業中の視界に刺さらない。蛍を「観察する」のではなく、机の端のほうで黄色いものがぼんやり光っているのだけがわかるくらいの存在感に寄せた。
「群れ」というよりも、「同じ場に偶然居合わせた数匹の個体」の感じが出るくらいの匹数に絞っている。
URL: https://tobari-4qj.pages.dev/hotaru/
花火の帳
賑やかな打ち上げ花火ではなく、しだれ系の余韻。
動作
- 数十秒のランダム間隔で 1 発、たまに 2 連射・3 連射
- 開いてから数秒の助走を置いてから初発（無音）
- ロケットは画面下から炸裂点へゆっくり上昇、淡い点
- 中心閃光は控えめに、すぐに消える
- しだれ性: 重力で下に落ちながら数秒かけてフェードしていく粒
- 色は燻し金 / 朱橙 / 薄紅 / 薄藍 / 麦色を中心に、原色は避けて燻し系で統一
花火の帳でいちばん時間を使ったのは「閃光をどう抑制するか」で、普通に打ち上げ花火を再現すると、暗転を期待して開いた人の目に刺さる。 中心閃光を控えめに、ロケットも淡い点だけ、粒子の色も完全な原色を避けて燻し系のパレットで揃えた。打ち上げの瞬間ではなく、散ったあとの粒が下に落ちながら消えていく数秒間を主役にしている。
URL: https://tobari-4qj.pages.dev/hanabi/
波紋の帳
静かな夜の池に、同心円の波紋がポツリと。
動作
- 数十秒のランダム間隔・ランダム位置に水滴が落ちる。同時に存在する水滴は最大 2 つまで
- 1 つの水滴から 3 本のリング（主波と、追いかけてくる小さな後続波 2 本）
- 画面の半分くらいまで広がりながら、ゆっくり減衰して消える
- 線は薄水色。後続ほど淡く・細く
- 背景は夜の池色の縦グラデ（青寄り、緑味は抑制）
波紋の帳は「同時に存在する水滴は最大 2 つ」がキモで、ここをもっと増やすと見た目の静けさが一気に崩れる。画面上に常に何かが動いている状態になってしまうので、上限は意図的に低くしている。
1 つの水滴に主波＋後続 2 本という構成は、実際に水滴を観察したときの「最初の波と、その後ろを追ってくる小さな波」の感じに寄せたもの。出現と消失はベル型のカーブで滑らかにフェードするので、突然消える違和感がない。
URL: https://tobari-4qj.pages.dev/hamon/
共通実装メモ
3 作とも同じ枠組みで作っている。
- 構成:
public/{hotaru, hanabi, hamon}/index.htmlの 1 ファイル完結 - 言語: HTML + CSS + Vanilla JS のみ、フレームワーク不使用
- 描画: Canvas 2D
- 画面スリープ抑止: Screen Wake Lock を直書きで組み込み^1
- アクセシビリティ:
prefers-reduced-motion対応（動きを抑える側へ） - 検索除外:
<meta name="robots" content="noindex"> - 配置: Cloudflare Pages の単一プロジェクト（
tobari-4qj.pages.dev配下のサブパス）
「共通 JS を作って <script src="..."> で読み込む」をやりたくなる場面だが、1 ファイル完結を維持するために Wake Lock スニペットは各 HTML に直書きで複製している。3 作ぶんあるので冗長ではあるが、tobari のコードベースは依存最小（外部ファイル無し）を価値にしているのでこれは意図的。
prefers-reduced-motion への対応はそれぞれ別パラメータが効いていて、「動きを減らすときに何を削るか」は作品ごとに違う。宵蛍は匹数と速度、花火は粒子数とインターバル、波紋は寿命と間隔・リング数、というふうに、その作品の「静けさを保ったまま動きを抑える」軸が違う場所にあるので、ここだけは個別に決めた。
ブクマ動線 — 直URLでもいいけど、入り口経由が便利
夏 3 作も直 URL でブクマしてもらってアプリ自体は動く。
が、その日の気分で「今夜は蛍にしようか、波紋にしようか」とゆらぐタイプの運用なら、入り口ページ /tobari/ をブクマしておくのがおすすめ。6 つのボタンが並んでいるので、その日の気分で選びやすい。
帳の種類は今後さらに増やす予定で、現状の SPEC メモには次のラインナップが控えている：
- 春 — 夜桜の帳 / 雨の帳 / 蛍の帳（宵蛍とは別、春の蛍）
- 秋 — 紅葉の帳 / 月の帳
- 冬 — 雪灯りの帳 / 焚き火の帳 / 吹雪の帳
- 通年 — 星空の帳 / 星巡りの帳 / 宇宙の帳
入り口ページ経由でブクマしておくと、追加時に勝手にラインナップが更新される。あと、こちら側の都合として、ブログ側で広告経路を残せる、というのもある。すぐ透ける欺瞞は嫌いなので率直に書いておきます。
おわりに
視界に、帳を下ろす。
tobari のキャッチコピーは変わらない。 夏シリーズ 3 作は、その帳に「夏の夜」の質感だけをそっと載せる試みでした。深夜作業中に開いておく場所として、宵蛍 / 花火 / 波紋 のどれかが居場所になればうれしい。
入り口は /tobari/ です。お好きな帳を選んでいってください。
参考文献
- Screen Wake Lock API - MDN https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
- tobari リリース記事（永遠・深海・幕開けの 3 作） https://yurudeep.com/posts/web/2026/20260515/
- tobari 開発の裏側（Backlog.md MCP + Claude Code） https://yurudeep.com/posts/web/2026/20260516/