HTML-in-Canvasで作る未来のWeb UI表現

フロントエンドカンファレンス関西2026の発表資料。
https://2026.frontend-conf.osaka.jp/

■概要
HTML-in-Canvasという新しいAPIをオリジナルのデモで解説。
HTML・CSSから見た利点、Canvasタグから見た利点を掘り下げます。

派手な演出だけでなく、ウェブ開発でも役立つ場面を紹介。

■動画配信
YouTubeで発表（再収録）を公開しました。
本スライドはデモが多いので、Speker DeckではなくYouTubeでの視聴をオススメします。
https://www.youtube.com/watch?v=CRnSDIaGvxY

Transcript

1. HTML-in-Canvasで作る 未来のWeb UI表現 株式会社ICS 池田泰延 フロントエンドカンファレンス関西2026 2026年10月12日（月・祝）/ コングレスクエア グラングリーン大阪
2. 本スライドはテーマの特性上、モーションを利用しています。 Slideshareではなく YouTubeでの視聴をオススメします。 https://www.youtube.com/watch?v=CRnSDIaGvxY
3. 池田 泰延 株式会社ICS代表 いけだ やすのぶ 筑波大学非常勤講師 UI制作・インタラクション実装が専門 @clockmaker
4. SECTION 1 / 8 HTML-in-Canvas とは何か
5. HTML-in-Canvasとは HTML・CSS Canvas <article> <img src="P3324910.jxl"> <div> <h1> </h1> <button> </button> </div> </article> セーヌ川の夜景 もっと見る article { display: flex; } img { width: 200px; } ブラウザーがレイアウト 見た目を 取り込む セーヌ川の夜景 もっと見る HTMLの見た目をCanvasへ
6. Canvasの3つの描画API <canvas> 描画する領域 Canvas 2D 図形・文字・画像を 平面に描く GPUで2D・3Dを描く 2D・3D描画とGPU計算
7. 作例紹介 デモを開く 別タブで開く
8. HTML-in-Canvasの活用場面 画面遷移 3D空間への HTML配置 ポストエフェクト ウェブページの 画像化・動画化
9. “今年もっとも予想外で驚かされた 機能は……HTML-in-Canvas！” Chris Coyier CSS-Tricks創設者 New Things You Should Know About HTML Here in Mid 2026（2026年9月2日公開） Master.dev / https://blog.master.dev/new-things-you-should-know-about-html-here-in-mid-2026/
10. “Webでできることが大きく変わる、 めったにない瞬間のひとつです。” Una Kravets Google Chrome / UI & Tooling DevRel Lead What's new in Web UI（Google I/O 2026）（2026年5月22日公開） Chrome for Developers / https://www.youtube.com/watch?v=uT7MVcCQ4rw&t=2093s
11. HTMLに Canvasの 表現力を加える Canvasに HTMLの 機能を加える
12. SECTION 2 / 8 HTMLにCanvasの 表現力を加える
13. CSSでかけられるエフェクト filter 要素全体 backdrop-filter 背後だけ HTML 詳しく見る filter: blur(6px) backdrop-filter: blur(16px) CSSの組み込みフィルターでは用意された効果だけを指定
14. iOS 26登場時のLiquid Glass風CSS CSSでガラスの見た目を表現 ぼかし・マスク・ハイライト https://codepen.io/Nishihara/pen/KwpZNyx backdrop-filterで ぼかした表現が多かった
15. Liquid Glass デモを開く 別タブで開く
16. HTML-in-Canvasの処理の流れ HTMLのレイアウト Canvasへ取り込み シェーダーで加工 HTML HTML HTML 文字・画像・レイアウト 2D画像をテクスチャとして使用 形状と色を変える
17. HTML HTML-in-Canvas 通常表示 描く文字 反映する
18. HTML HTML-in-Canvas 屈折 描く文字 反映する
19. HTML HTML-in-Canvas 渦巻き 描く文字 反映する
20. HTML HTML-in-Canvas 波 描く文字 反映する
21. デモ：画面遷移に歪みエフェクト デモを開く 別タブで開く
22. check_circle ポイント HTMLにCanvasの表現力を加える HTMLページ ページ全体にCanvasのエフェクト
23. SECTION 3 / 8 CanvasにHTMLの 機能を加える
24. Canvasのテキスト描画
25. Canvasでのテキスト描画は貧弱 ctx.font = 'bold 56px "Noto Sans JP Variable"'; ctx.fillText( " ); 吾輩は猫である。名前はまだ無い。どこで生れたか見当がつかぬ。", 24, 88 このコードの描画結果 折り返しができない
26. HTMLとCSSを使った文字組 適用するCSS .description { /* CSS */ } 未指定 CSSの適用結果 HTMLとCSSで2026年の Web UIを作る。文字や画 像をCanvasに取り込み、 エフェクトを適用。 右端で自動的に折り返せる
27. HTMLとCSSを使った文字組 適用するCSS .description { /* */ font-feature-settings: "palt" 1; } 文字詰め CSSの適用結果 HTMLとCSSで2026年の Web UIを作る。文字や画像 をCanvasに取り込み、エフ ェクトを適用。 字間を詰められる
28. HTMLとCSSを使った文字組 適用するCSS .description { /* */ font-feature-settings: "palt" 1; /* */ line-break: strict; } 文字詰め 厳密な禁則処理 CSSの適用結果 HTMLとCSSで2026年の Web UIを作る。文字や画像 をCanvasに取り込み、エ フェクトを適用。 小さい仮名を行頭に置かない
29. HTMLとCSSを使った文字組 適用するCSS .description { /* */ font-feature-settings: "palt" 1; /* */ line-break: strict; /* */ word-break: auto-phrase; } 文字詰め 厳密な禁則処理 文節で折り返す CSSの適用結果 HTMLとCSSで2026年の Web UIを作る。文字や 画像をCanvasに取り込み、 エフェクトを適用。 助詞などの後ろで折り返し
30. HTMLとCSSを使った文字組 適用するCSS .description { /* */ font-feature-settings: "palt" 1; /* */ line-break: strict; /* */ word-break: auto-phrase; /* */ text-autospace: normal; } 文字詰め 厳密な禁則処理 文節で折り返す 日本語と英語の間に余白 CSSの適用結果 HTMLとCSSで2026年の Web UIを作る。文字や 画像をCanvasに取り込み、 エフェクトを適用。 日本語と英語の間に余白
31. HTMLとCSSの文字組をCanvasへ HTML・CSS HTMLとCSSで 2026年のWeb UIを 作る。文字や画像を Canvasに取り込み、 エフェクトを適用。 <canvas> HTML-in-Canvas
32. Canvasを マシンリーダブルに
33. fillText()で描いた文字は画像 HTML Canvas <canvas> だけ
34. HTML-in-Canvasでは文字もDOM HTML Canvas <canvas> 内の<p>も表示
35. Canvas内に入力フォーム
36. Canvasタグの中にHTMLフォーム <canvas content="drawable"> <form drawable> <label for="name"> 名前 </label> <input id="name"> <button> </button> </form> </canvas> 送信 デモを開く 別タブで開く
37. Canvas内のフォームの役割と名前 DevToolsのアクセシビリティーツリー
38. Lighthouseのアクセシビリティ監査もクリア このデモのLighthouse検査結果
39. check_circle ポイント Canvasの弱点をHTMLで補う format_size 美しい文字組 HTMLとCSSでレイアウト account_tree DOM構造 機械が読み取れるHTML edit_square 入力フォーム テキスト入力・ボタン操作
40. SECTION 4 / 8 実装方法
41. Canvas 2Dの実装手順 1 HTMLの準備 2 Canvasへ描画 イベント <canvas content="drawable"> paint <div drawable> Canvasに描くカード Canvasの子要素としてHTMLを配置 drawElementImage() HTMLの更新通知を受け取り描き直す Canvas 2Dのクリック位置は、ブラウザーが自動で同期
42. HTML の子要素をレイアウト <!-- Canvas --> <canvas id="canvas" width="280" height="200" content="drawable"> を付けた要素を描画対象にする --> に描くカード クリック <!-- drawable <div id="card" drawable> <p>Canvas </p> <button> 0</button> </div> </canvas> ブラウザーの表示結果
43. JavaScript const canvas = document.querySelector("#canvas"); const card = document.querySelector("#card"); const ctx = canvas.getContext("2d"); ブラウザーから イベントを受け取り描画 // paint canvas.addEventListener("paint", () => { ctx.reset(); ctx.drawElementImage(card, 0, 0); }); canvas.requestPaint(); ブラウザーの表示結果 Canvasに描くカード クリック 0
44. JavaScript const canvas = document.querySelector("#canvas"); const card = document.querySelector("#card"); const ctx = canvas.getContext("2d"); ブラウザーから イベントを受け取り描画 // paint canvas.addEventListener("paint", () => { ctx.reset(); 右へ 、下へ40移動 ctx.translate(100, 40); // 100 ctx.drawElementImage(card, 0, 0); }); canvas.requestPaint(); ブラウザーの表示結果 Canvasに描くカード クリック 0
45. JavaScript const canvas = document.querySelector("#canvas"); const card = document.querySelector("#card"); const ctx = canvas.getContext("2d"); ブラウザーから イベントを受け取り描画 // paint canvas.addEventListener("paint", () => { ctx.reset(); 右へ 、下へ40移動 時計回りに15°回転 ctx.translate(100, 40); // 100 ctx.rotate(Math.PI / 12); // ctx.drawElementImage(card, 0, 0); }); canvas.requestPaint(); ブラウザーの表示結果 Canvasに 描くカ クリック 0 Canvas 2Dでは ヒットエリアも自動同期 ード
46. 注意点：変形とクリック範囲 変形前 シェーダーで変形 Canvasに描くカード 点線：HTMLのクリック範囲 波形の変形はクリック範囲に反映されない 参考：Precise hit testing https://github.com/WICG/html-in-canvas/issues/148 Canvasに描くカード
47. SECTION 5 / 8 ウェブアプリへの応用
48. URLから記事カードを作りたい 記事タイトル・画像などの OGP情報を取得し、 カード風のPNG画像に
49. ブラウザーでの外部データ取得 クロスドメインの制約 外部サイトの記事情報・画像の取得が制限されている check_circle 対策 外部サイトのOGP取得はバックエンドで行う
50. Node.jsでの画像生成 Node.jsにCanvas機能はない node-canvasなどのCanvasライブラリーがある Canvasでは複雑な日本語の文字組は できない check_circle 対策 美しい文字組はブラウザで行う
51. 記事カードジェネレーター HTML・CSSで組んだ記事カードをPNGとしてコピー デモを開く 別タブで開く
52. CSSの日本語組版をPNGへ .card { /* */ font-feature-settings: "palt"; text-autospace: normal; line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; 日本語の文字組・英語との間隔 文字幅と上下の余白 } /* */ text-fit: shrink; .card__title { white-space: nowrap; text-box: trim-both text; } 出力したPNG
53. HTML・CSSの文字組を画像へ CSSで文字をレイアウトし、Canvasに転写し画像データを得る HTML・CSS 高度な日本語組版 Canvas HTML-in-Canvas drawElementImage() PNG クリップボード image content_paste 画像へ変換 PNGをコピー toBlob() clipboard.write()
54. 記事カード生成の技術構成 ブラウザー 記事のURLを入力 https://ics.media/… hourglass_empty Suspense 取得中はスケルトンを表示 Node.js 外部サイトに接続 記事情報・画像を取得 public 外部サイト OGP情報 画像
55. 記事カード生成の技術構成 ブラウザー 記事のURLを入力 https://ics.media/… HTML・CSSでレイアウト Node.js 外部サイトに接続 記事情報・画像を取得 React Server Component React要素のデータを返す <article>・<div>など public 外部サイト OGP情報 画像
56. check_circle ポイント HTML-in-Canvasは 演出だけのものではない フロントエンドのウェブ開発に役立つ
57. SECTION 6 / 8 対応ライブラリー
58. VFX-JS https://amagi.dev/vfx-js/
59. Stable Fluid CRT Halftone JPEG Glitch VFX-JS https://amagi.dev/vfx-js/
60. Canvas UI https://canvasui.dev/
61. Cloth Asciify Liquid Shatter Canvas UI https://canvasui.dev/
62. Three.js https://threejs.org/
63. PixiJS https://pixijs.com/
64. SECTION 7 / 8 対応ブラウザー
65. 対応ブラウザー Chrome Edge Firefox Safari 2026年10月11日時点 155 フラグ設定・オリジントライアル 155 同上 157.0.1 未対応 27.0 未対応（WebKitで実装中）
66. 正式公開、間近か！？ / 2026年11月3日 提供予定 Chrome 157 Chrome 157 Release Notes https://chromestatus.com/release-notes/157
67. SECTION 8 / 8 類似技術との比較
68. SVGでもHTMLを画像化できる HTML-in-Canvas以外にも、SVGの<foreignObject>を使う方法がある。 HTML・CSS ブラウザーの文字組 SVG画像 <foreignObject> Canvas 画像として取り込む
69. SVGとHTML-in-Canvasの比較 デモを開く 別タブで開く
70. 比較項目 CSSの文字組 HTMLの更新 Webフォント 外部画像 入力・文字選択 SVGの<foreignObject> SVG画像 → Canvas SVG内のHTMLにCSSを指定 SVG画像を作り直す 外部URLからは読み込み不可 外部URLのままでは表示不可 不可 HTML-in-Canvas ページのCSSを利用 paintイベントで更新 ページのフォントを利用 HTML内の画像を利用 可能 マシンリーダブル SVG化のオーバーヘッドなし
71. おわりに
72. HTMLとCanvasのいいとこどり HTML・CSS 文字組・レイアウト・入力 handshake HTML-in-Canvas Canvas 加工・合成・3D
73. Canvasタグの歴史 2004 brush Canvas 2D 2011 view_in_ar WebGL 2018 memory OffscreenCanvas 2023 developer_board WebGPU 2026 html HTML-in-Canvas WebKitにCanvas要素を導入 WebGL 1.0仕様公開。GPUで3D描画 Worker側で描画可能に GPUで描画・計算 HTML・CSSのレイアウトをCanvasへ Canvas 2D・WebGL・WebGPUで利用
75. ご清聴ありがとうございました！ 今日のイベントを楽しみましょう！ ICS 池田泰延 @clockmaker フロントエンドエンジニアを積極採用中 https://ics-web.jp/recruit/