logo
コーディング

投稿日

霧も炎も水しぶきも！Canvas UIでWebページにエフェクトを加えよう

液体、炎、霧、ガラスの割れる演出まで！Webページの上にリッチな動きを重ねられる無料のコンポーネント集「Canvas UI」の使い方を、実装時の注意点とあわせて紹介します。

Canvas UI とは？

Canvas UI

Canvas UIは、Canvas要素の上に描画するエフェクトを集めた、オープンソースのコンポーネントライブラリーです。作者は、Reactのアニメーション部品集「React Bits」でも知られるDavid Hazさん。流体シミュレーションやシェーダーを使った表現など、見ているだけで楽しくなるような視覚効果がそろっています。

おもしろいのは、エフェクトが「本物のHTML」の上で動くこと。画像やスクリーンショットを加工しているわけではないので、エフェクトの下にあるテキストやボタンはちゃんと操作できる状態のままです。

水玉がページ上をぷよぷよ動いたり…。

スクロールするとページが粒状で描画されていったり…。

これを実現しているのが、「html-in-canvas」というブラウザーの新しい機能です。Canvas要素の中にDOM（HTMLの要素）をそのまま描画できる仕組みで、ページの見た目をテクスチャーとして扱い、シェーダーで歪ませたり溶かしたりできます。なお、3Dモデルを使うエフェクトなど、一部はこのAPIを使わずに動くものもあります。

無料で利用でき、React、Solid、Preact、Vue、Svelte、TypeScript（Vanilla）に対応。

対応ブラウザー

ここは少し注意が必要です。html-in-canvasは、2026年10月現在、まだChromeの実験的な機能という位置付け。html-in-canvasに対応していないブラウザーでは、自動的に普通のHTMLとして表示されます。エラーで画面が壊れることはなく、動かせる部分のエフェクトだけが動く仕組みなので、その点は安心です。

また、レンダラーごとの対応状況は次のとおりです。

レンダラー

対応ブラウザー

非対応時の挙動

WebGL版（デフォルト）

WebGL2に対応したブラウザー（ほとんどのモダンブラウザー）

普通のHTMLとして表示

WebGPU版

Chrome / Edge 113以降、Safari 26以降（iOS 26含む）、Firefox 141以降

中身をそのまま表示

迷ったら、より幅広い環境で動くWebGL版を選んでおけばOKだと思います。

Canvas UIの使い方

インストール方法は2通りあります。

  1. shadcnのCLI（コマンド）でインストールする
  2. 各コンポーネントのページからソースコードをコピーして、手動でプロジェクトに追加する

どちらの方法でも、最終的にはコンポーネントのファイルが自分のプロジェクトに入ります。

この段階で「なんだか難しそうだぞ！？」と感じたあなたは、後半で紹介する「Copy for AI」でAIにお願いする方法を使うといいでしょう。「Playground で試してみよう」までジャンプ！

CLIでインストールする

たとえばReactで「Liquid」というエフェクトを使う場合は、次のコマンドを実行します。

npx shadcn@latest add @canvas-ui/liquid-react

@canvas-ui/{コンポーネント名}-{フレームワーク名} という形式になっているので、Vueなら liquid-vue、Svelteなら liquid-svelte のように読み替えればOKです。WebGPU版を使いたい場合は、末尾に -webgpu を付けます（例：@canvas-ui/liquid-react-webgpu）。

ファイルは components/canvasui/ フォルダーに追加されます（Svelteの場合は src/lib/components/canvasui/）。shadcnを使うのが初めての場合は、先に npx shadcn@latest init を実行しておきましょう。

なお、公式ドキュメントのページ上でパッケージマネージャー（npm / pnpm / yarn / bun）、レンダラー、フレームワークを選んでおくと、ほかのページのコマンドやコード例もその設定に合わせて表示されます。地味ですが、これがかなり便利。

コードに組み込む

あとは、エフェクトをかけたい部分をコンポーネントで囲むだけ。Reactの場合はこんな感じです。

import { Liquid } from "@/components/canvasui/Liquid";

export default function Page() {
  return (
    <Liquid rainbow style={{ height: 480 }}>
      <YourContent />
    </Liquid>
  );
}

rainbow のようなプロパティ（props）はすべて任意で、あとから動的に変更することもできます。

必要な環境

  • TypeScriptの利用が推奨されています（ファイルが型付きのソースで配布されるため）
  • 対象バージョンは React 19 / Solid 1.9 / Preact 10 / Vue 3.5 / Svelte 5
  • 3Dモデルを扱う「〜Object」系のエフェクトは、three.jsが追加で必要です（CLIなら自動でインストールされます）

Vanilla版もTypeScriptで書かれているため、HTMLファイルに <script> タグで直接読み込む…という使い方はできません。ViteなどのビルドツールでTypeScriptを扱える環境を用意するか、後半で紹介する「Copy for AI」でAIに組み込みをお願いするのが近道だと思います。

用意されているコンポーネント

コンポーネント一覧ページには、2026年10月現在で35種類のエフェクトが並んでいます。

一覧のサムネイルにカーソルを乗せると、実際の動きをプレビューできます。名前だけでは想像しにくいエフェクトも多いので、まずはひととおりホバーして眺めてみるのがおすすめです。見ているだけでも楽しいですよ！

気になるものがあったら、クリックして詳細ページへ。詳細ページでは、次の情報を確認できます。

  • デモ（実際にカーソルを動かして試せます）
  • インストールコマンド
  • 依存パッケージ
  • フレームワーク別・レンダラー別のコード
  • 利用できるプロパティの一覧（API reference）と、それぞれのデフォルト値
  • html-in-canvasが必要かどうかのラベル

Playground で試してみよう

コードを記述して1から組み込んでいってもいいですし、用意されているデモをベースに既存のページに動きを加えてもいいですね。Canvas UIでは「Playground」（遊び場）というページが用意されています。ランディングページ風のサンプルの上で各エフェクトを動かせるので、ここで動きを確認するのが一番わかりやすいかもしれません。

ページ左上のメニューから、試したいコンポーネントを選択できます。

その下に並んでいるスライダーをドラッグすると、動きの速さや強さ、色などをリアルタイムで微調整できます。数値を変えるとすぐ画面に反映されるので、「このくらいがちょうどいいかな？」と感覚的に探れるのがうれしいところ。

調整が終わったら、左サイドバーからコードをコピーできます。中でもおもしろいのが「Copy for AI」というボタン。今設定しているコンポーネントの種類や各パラメーターの値をそのまま引き継いで、AIに実装してもらうためのプロンプトをコピーできます。スライダーで見つけた「ちょうどいい値」を、手作業で書き写す必要がないのは助かりますね。

実装してみた

ChatGPTのテスト用に、以前ChatGPTで雑に作ったWebサイトがあったので、そこに「Clouds」エフェクトを追加してみます。Cloudsは、ページの上を霧がふわっと漂い、カーソルを動かすと風が吹いたように霧が晴れていくエフェクトです。

まずはPlaygroundでCloudsを選び、スライダーで霧の量や速さを好みに調整。「Copy for AI」ボタンでプロンプトをコピーします。

次に、実装したいプロジェクトをAIエージェント（Claude CodeやCodexなど）で開いて、コピーした内容をそのままペースト。

しばらくすると……実装されました。早い！

コードをほとんど書かずに、ここまでの表現ができてしまうのは驚きです。とはいえ、実際にページを触ってみると、いくつか気になる点も出てきました。

実装の注意点

クリックしにくいかも？

エフェクトを重ねると、「リンクやボタンが押しにくい」「どこがクリックできるのかわかりにくい」と感じることがあります。

  • 霧などのエフェクトでボタンが見えにくくなり、押せる場所がわかりづらい
  • html-in-canvasはまだ実験的な機能のため、見た目とクリック判定の位置がずれる可能性がある
  • エフェクトの範囲内がスクロール領域になり、ページのスクロールやクリックの感覚が変わる

対応策

  • エフェクトをかける範囲を絞る：ページ全体を囲むのではなく、ファーストビューや背景など、装飾的な部分だけに適用
  • 重要なボタンはエフェクトの外に置く：ナビゲーションや「お問い合わせ」などのCTAボタンは、エフェクトのコンポーネントの外に配置するか、z-index で手前に出しておきます
  • エフェクトを控えめにする：Cloudsなら opacity（不透明度）や cover（霧の量）を下げるだけで、ボタンがぐっと見やすくなります
  • フラグのオン・オフ両方で確認する：html-in-canvasが有効な環境と、普通のHTMLとして表示される環境の両方で、実際にクリックして確かめておきましょう

動作が重くなるかも？

Canvas UIのエフェクトは、GPUを使って毎フレーム描画しています。高性能なパソコンでは快適でも、古いノートパソコンやスマートフォンでは、カクついたり、バッテリーの減りが早くなったりすることがあります。

対応策

  • quality を下げる：Cloudsには描画解像度を調整する quality プロパティがあります。まずは 0.5 くらいから試してみてください
  • 範囲を小さくする：描画する面積が小さいほど負荷は軽くなります。「クリックしにくい」対策とあわせて、範囲を絞るのがおすすめです
  • 1ページに使うエフェクトは1つまでを目安に：あれもこれもと重ねたくなる気持ちはわかりますが、重くなるうえに、見た目もごちゃごちゃしがちです
  • 実機で確認する：開発用のパソコンだけでなく、スマートフォンでも必ず表示を確かめましょう。Chromeのデベロッパーツールの「Performance」パネルで、CPUの速度をわざと落として確認するのも手です

ちなみに、画面の外に出たエフェクトは自動で描画を止める仕組みになっています。スクロールして見えなくなったエフェクトが、裏でずっと動き続けるわけではないようです。

文字が読みにくくなるかも？

霧やグリッチ、VHS風のノイズなどは、雰囲気が出るぶん、文字の読みやすさを損ないがちです。また、動きの多い画面は、人によっては気分が悪くなってしまうこともあります。

対応策

  • 本文など、しっかり読んでほしいテキストの上にはエフェクトをかけない
  • 不透明度や強さを下げて、テキストのコントラストを確保する
  • OSの「視差効果を減らす」設定（prefers-reduced-motion）を取り入れる

AIが書いたコードは一度確認しよう

「Copy for AI」で実装すると本当に早いのですが、AIが既存のコードを思わぬ形で書き換えていることもあります。今回も、念のため差分を確認しました。

対応策

  • 実装前にGitでコミットしておき、いつでも元に戻せるようにする
  • AIが変更したファイルと内容をざっと確認する
  • ほかのページのレイアウトが崩れていないか、ブラウザーで見て回る

Canvas UIはソースコードが自分のプロジェクトに入る仕組みなので、「どこに何が追加されたか」を把握しておくと、あとで調整したいときにも迷わずにすみますよ。

html-in-canvasはまだ実験段階の機能なので、実案件で使うときは対応ブラウザーや表示確認に気を配る必要がありますが、個人サイトやポートフォリオで遊んでみるにはぴったりだと思います。まずはPlaygroundで、お気に入りのエフェクトを探してみてくださいね！

参考リンク