はじめに

私にはずっと、「紙に書いた文字を燃やしてスッキリしたい」という願望がありました。

ただ、現実で紙を燃やすのは火災リスクがあり危険です。縁切り・厄除け・決別といった個人的な小さな儀式をデジタルで完結できる場所が欲しいと思い、バーチャル空間で「お焚き上げ」ができるサイトを2026年1月4日に公開しました。

できるだけリアルな見た目のロウソクの火で、文字にしたためた自分の思いが燃えていく様子を見届けられることに重きを置いて制作しています。

制作動機

年末年始の気持ちの整理として、安全に「紙を燃やす」体験ができる場所が欲しかった
GitHubの機能（GitHub Pages等）に実践的に触れる練習がしたかった
Claude AIは使用経験があったので、今回はClaude Codeでの開発を試したかった

設計アプローチ

操作は極限までシンプルにしています。

紙に胸の内を書く
その紙を炎で燃やす

この2ステップだけです。

炎は静止画ではなく、リアルタイムで揺らめく3D表現にしています。紙が燃える演出で「本当に燃やした」感覚の再現を目指しました。モバイル対応もしており、Android/iOSで最適化を分岐させています。

技術スタック

要素	技術
描画エンジン	PixiJS（WebGL）
炎の表現	GLSL シェーダー（3Dレイマーチング）
燃焼エフェクト	カスタムシェーダー
テキストキャプチャ	html2canvas
ホスティング	GitHub Pages

なぜPixiJS＋GLSLシェーダーか

とにかくリアルな炎をWEBサイト上で再現したく、手持ちのキャンドルの炎が揺らめく様子を観察しながら参考例を探し回ったところ、Shadertoyで私の理想とする火の表現を見つけました。

それがShadertoy用のGLSLコードだったため、まずGLSLシェーダーとは？から調べました。

その過程で、PixiJSのFilter機能を使えば、Shadertoyのフラグメントシェーダーを比較的少ない変更でWebに移植できることが分かり、WEB上でリアルな炎を描画するにはPixiJS＋GLSLシェーダーが最も最適だと考えて採用しました。

ただし、私の開発環境がゲーミングPCだったため、モバイル端末（特にAndroid）で動作が非常に重くなるという問題に後から気づきました。PixiJS＋GLSLシェーダー以外にも表現手段があったことを認識しており、パフォーマンスと表現のバランスについては今後の課題です。

なぜPixiJSか

カスタムGLSLシェーダーをWebで動かす選択肢として、主に以下があると考えました。

ライブラリ	特徴
Three.js	3Dシーン構築向け。今回の用途にはオーバースペック
PixiJS	2D描画 + カスタムシェーダーに特化。軽量
生WebGL	最も軽量だが、実装が煩雑

今回の要件は「全画面にフラグメントシェーダーを適用する」というシンプルなもので、3Dシーンの構築は不要です。

PixiJSはこのユースケースに適しており、CDNから読み込むだけで使える手軽さも、フレームワーク不使用（純粋なHTML/CSS/JavaScript）という方針と相性が良く、採用しました。

なぜhtml2canvasか

炎に文字を記入した紙をかざして、紙が燃え上がりながら消えていく描画をしたかったため、ユーザーが入力したテキストを含む紙の見た目をそのままシェーダーに渡す必要がありました。

紙とテキストはHTML/CSSで描画されていますが、GLSLシェーダーはDOM要素を直接扱えません。シェーダーが扱えるのはテクスチャ（画像データ）のみであるため、html2canvasを使ってDOM要素をCanvas化し、それをPixiJSのテクスチャに変換することで、HTML/CSSで描画された紙をシェーダーの入力として渡せるようにしました。

DOM（紙 + テキスト）
    ↓ html2canvas
Canvas
    ↓ PIXI.Texture.from()
PixiJSテクスチャ
    ↓ 燃焼シェーダー適用
燃える紙の描画

html2canvasはこの「DOM→Canvas変換」の定番ライブラリであるとClaude Codeが教えてくれたので、ひとまずそれを信用し、CDNから読み込むだけで使えるため採用しました。

なぜGitHub Pagesか

すぐに公開したかったため、自由度が高くかつ公開も容易なGitHub Pagesを選択しました。もともと気になっていたツールでもあったため、練習も兼ねています。

工夫した点

炎のリアルさ：レイマーチングによる3D描画

炎の表現には、GLSLシェーダーでレイマーチングを使っています。

レイマーチングは、ポリゴンを使わずに距離関数でオブジェクトを描画する手法です。カメラ位置からレイ（光線）を飛ばし、距離関数で衝突判定を繰り返しながら前進させることで、3D空間上のオブジェクトを描画します。

この手法で炎を3D空間に描画し、不規則な揺らぎ・煙・火の粉を表現しています。

炎の表現にあたって参考にしたShaderToyの作品：

キャンドルの参考：https://www.shadertoy.com/view/XsjBRm
燃える紙の参考：
- https://kylehalladay.com/blog/tutorial/2015/11/10/Dissolve-Shader-Redux.html
- https://www.shadertoy.com/view/XsVfWz
- https://www.shadertoy.com/view/tt3XWB
- https://www.shadertoy.com/view/tc2GWV
火の粉：https://www.shadertoy.com/view/wl2Gzc
作った後で見つけた焚き火：https://www.shadertoy.com/view/Wtc3W2

なお、goworkship.comの炎エフェクトまとめ記事の「Candle in the (Strong) Wind」も参考にしましたが、今回の用途には合いませんでした。

燃焼演出

紙が炎に近づき、端から焦げて燃え広がるエフェクトをカスタムシェーダーで実装しています。紙のテクスチャにはbeiz.jpの和紙素材を使用しました。

ユーザーが書いたテキストはhtml2canvasでキャプチャし、テクスチャとしてシェーダーに渡しています。

パフォーマンス最適化

Android端末ではGPU性能にばらつきがあり、フルのシェーダーエフェクトでは重くなるケースがありました。端末を判定し、重いエフェクトを自動で無効化する分岐を入れていますが、画質が極めて悪くなるため、改良予定です。

SEO対策

メタタグ、OGP、構造化データを実装し、検索流入を意識した設定にしています。

開発環境

今回の開発にはClaude Codeを使用しました。

VSCodeのインストールについてはこちらの記事を参考にしています。

Claude Codeの具体的な使い方についてはこちらの記事が詳しかったです。

制作期間

約20時間（Claude Code活用）。

シェーダーのパラメータ調整やモバイルでの動作確認に時間がかかりましたが、Claude Codeによってコードの骨格部分の実装は大幅に効率化できました。

公開後の反応

公開後、友人やWEBディレクター同士のコミュニティで試してもらったところ、こんな反応をいただきました。

燃え方がホラゲみたいですこ

めちゃスッキリした・・・

なんだかほんとにスッキリ～🔥

燃やしまくって心の整理ができた

火がめっちゃリアルだから、サイト開いて放置するだけでも落ち着く

全体的に「スッキリした」という感想が多く、まさに作りたかった体験そのものだったので嬉しかったです。リアルな火の表現にも拘った甲斐がありました。

今後の展望

ユーザー数に応じてGA4の導入を検討
特定の言葉を燃やした時だけアニメーションを追加
火の表現、燃焼演出のさらなる改善
使用した技術手法（レイマーチング、GLSLシェーダー等）の理解を深める

さいごに

「紙に書いて燃やす」というシンプルな行為をデジタルで再現するだけでも、炎の描写、紙の燃焼表現、パフォーマンス最適化と、技術的にはかなり奥が深いものでした。

ShaderToyに公開されている先人たちの作品がなければ、ここまでの表現はできなかったと思います。ありがとうございました。

★この記事はClaude AIを使って執筆しました。