Chromeの新機能「HTML-in-Canvas」とは？できること・使い方・SEOへの影響をわかりやすく解説

Webページの中で、グラフやゲーム、3Dの演出などを描くときに使われるのが<canvas>（キャンバス）という仕組みです。自由に絵を描ける反面、キャンバスに描いた文字は「ただの絵」になってしまい、選択もコピーもできず、検索エンジンや読み上げソフトにも伝わらないという弱点がありました。

この弱点を解消する新しい機能が「HTML-in-Canvas（エイチティーエムエル・イン・キャンバス）」です。Googleが2026年5月のGoogle I/Oで大きく紹介し、Chromeでの試験提供を経て、Chrome 157（安定版は2026年11月3日の予定）で正式に使えるようになる見込みです。

この記事では、HTML-in-Canvasで何ができるのか、どう書くのか、そしてホームページの担当者として気になる「検索エンジンにはちゃんと読まれるのか、SEOに悪影響はないのか」をまとめます。

この記事は2026年10月29日時点の公開情報をもとに作成しています。HTML-in-Canvasは仕様の変更が続いている新しい機能で、名前や書き方が短期間で変わる可能性があります。実際に使う際は、記事末尾の参考情報から最新のドキュメントをご確認ください。

まず結論

1. HTML-in-Canvasは、ふつうのHTML（文字・ボタン・フォームなど）を、そのままキャンバスや3D空間に描けるChromeのAPIです
2. 描いた後も中身は本物のHTMLなので、文字の選択・コピー、ページ内検索（Ctrl+F）、翻訳、読み上げソフト、フォーム入力がそのまま使えます
3. 向いているのは、3Dの演出があるサイト、Webゲーム、デザインツールのような大きなWebアプリ、グラフや図などです。ふつうの会社案内やお店のホームページで、すぐに必要になるものではありません
4. 対応しているのはChrome（とEdgeなどChromium系）だけです。SafariとFirefoxはまだ対応していません。iPhoneではChromeアプリでも動かないので、対応していないブラウザ向けの表示を必ず用意する必要があります
5. SEOの面では、文字はHTMLとしてページの中に残るので、キャンバスに文字を「絵」として描いていた従来のやり方より有利です。ただし、Googleから「この機能を使ったページをこう扱う」という公式の説明はまだありません
6. 大事な情報（会社名、サービス内容、料金、問い合わせ先など）は、これまでどおりふつうのHTMLで書くのが安全です。HTML-in-Canvasは「演出」に使い、「中身」はキャンバスに頼りすぎないのがおすすめです

HTML-in-Canvasとは

キャンバスとHTMLの「いいとこ取り」

Webページを作る方法は、大きく2つに分けられます。

• HTML（とCSS）：見出し・文章・ボタン・フォームなどを並べるふつうのやり方。文字は選択でき、検索エンジンにも読まれ、翻訳や読み上げにも対応します。ただし、3Dで曲げたり、特殊なエフェクトをかけたりといった自由な表現は苦手です
• キャンバス（<canvas>、WebGL、WebGPU）：ピクセル単位で自由に絵を描くやり方。3Dやゲーム、凝ったアニメーションが作れます。ただし、描いた文字はただの絵で、選択・コピー・検索・翻訳・読み上げなど、ブラウザが本来持っている機能がほとんど使えません

これまでは「表現の自由さを取るならキャンバス、使いやすさや検索を取るならHTML」と、どちらかを選ぶ必要がありました。キャンバスの上に文字を出したいときは、文字を自分で描画するプログラムを書いたり、HTMLをキャンバスの上に重ねて位置を合わせたりと、手間のかかる工夫が必要でした。

HTML-in-Canvasは、この2つをつなぐ機能です。キャンバスの中にふつうのHTMLを書いておき、それをキャンバスに描く（3Dなら、立体の表面に貼り付ける）ことができます。見た目はキャンバスの表現でありながら、中身はHTMLのままなので、ブラウザの機能がそのまま使えます。

誰が作っているか・いつ使えるか

ChromeのWeb機能の状況をまとめた「Chrome Platform Status」でも、Chrome 157でパソコン版・Android版ともに提供する計画になっています。

HTML-in-Canvasでできること

GoogleのChrome開発者向けブログでは、HTMLをキャンバスに描くことで、次のような機能がキャンバスの中でも使えるようになると説明されています。

Googleが公開しているデモには、次のようなものがあります。

• 3Dの本：ページの文章がふつうのHTMLで書かれた、めくれる3Dの本。CSSでフォントを変えたり、ブラウザの翻訳機能で翻訳したりできる
• 3Dのスライダー：光が屈折するゼリーのような立体のスライダー。中身はふつうの<input type="range">なので、キーボード操作や値の刻み（step）もそのまま動く
• ゲームの中の端末画面：ゲームの中に出てくるコンピューター画面の文字を、そのままコピー＆ペーストできる
• 動く看板：SVGのアニメーションを、3D空間の看板にそのまま貼り付ける

3Dライブラリ側の対応も始まっていて、定番のThree.jsではTHREE.HTMLTextureという実験的な機能で、HTMLの要素を立体の表面に貼れるようになっています。PlayCanvasも対応しています。

どんなサイトで役に立つか

• 3Dや凝った演出のある、ブランドサイトやキャンペーンサイト：立体の中に、選択でき、読み上げにも対応した文字やボタンを置ける
• Webゲーム：メニューや設定画面、チャット欄を、ゲームの画面の中にHTMLで作れる
• デザインツール、ホワイトボード、表計算のような大きなWebアプリ：キャンバスで描いている画面の中に、HTMLの部品をそのまま使える。自前で文字の描画やフォーム部品を作らずに済むので、プログラムも軽くなる
• グラフや図：凡例や注釈を、HTMLとCSSできれいに組める
• 画像や動画の書き出し：HTMLで組んだレイアウトを、キャンバス経由で画像や動画として保存できる

逆に、ふつうの会社案内、お店のホームページ、ブログなど、文章と写真が中心のサイトでは、使う必要はほとんどありません。HTMLとCSSだけで十分に作れるものを、わざわざキャンバスに描く意味はないからです。

簡単な使い方（開発者向け）

ここからは少し技術的な話です。いちばん簡単な、2Dのキャンバスにフォームを描く例を見てみます。

<canvas id="canvas" style="width: 400px; height: 200px;"
        content="drawable" layoutsubtree>
  <form id="form" drawable>
    <label for="name">お名前</label>
    <input id="name" type="text">
  </form>
</canvas>

const canvas = document.getElementById("canvas");
const form = document.getElementById("form");
const ctx = canvas.getContext("2d");

// 中のHTMLの見た目が変わるたびに呼ばれる
canvas.onpaint = () => {
  ctx.reset();
  // フォームを、キャンバスの (100, 0) の位置に描く
  ctx.drawElementImage(form, 100, 0);
};

ポイントは3つです。

1. キャンバスに「中のHTMLを描けるようにする」印を付ける：<canvas>にcontent="drawable"を付け、描きたい要素にdrawableを付けます。少し前までは<canvas layoutsubtree>という書き方だったため、古いChromeにも対応したい場合は両方を書いておきます（知らない属性は無視されるため、両方書いても問題ありません）
2. paintイベントの中で描く：中のHTMLの見た目が変わる（文字が入力される、ホバーされるなど）とpaintイベントが起きるので、その中でdrawElementImage()を呼んで描き直します
3. 3Dで使うときは、WebGL・WebGPU用の別の命令を使う：WebGLやWebGPUでは、HTMLを立体に貼る「テクスチャ」として読み込む専用の命令を使います。この部分は試験提供中に名前や引数が何度か変わっているので、最新のドキュメントで確認してください

描いた位置とHTMLの本来の位置がずれていると、クリックや文字選択の場所が合わなくなります。描いた位置をブラウザに伝えて、クリックや選択の場所を合わせるための仕組みも用意されています（3Dの場合は、立体の向きに合わせた計算が必要です）。

使えるかどうかは、ブラウザのバージョンではなく、機能があるかどうかで判定するのが確実です。

if ("drawElementImage" in CanvasRenderingContext2D.prototype) {
  // HTML-in-Canvasが使える
} else {
  // 使えないブラウザ向けの表示に切り替える
}

注意点・制限

• 他のサイトの中身は描けない：別ドメインのiframe（埋め込みのYouTubeや地図など）は、セキュリティとプライバシーのため描けません。閲覧履歴（訪問済みリンクの色）やスペルチェックの赤線など、ページのプログラムから本来見えない情報も描かれないようになっています
• スクロールやアニメーションが重くなりやすい：キャンバスの中のHTMLはJavaScriptで描き直すため、ふつうのページのように、ブラウザがJavaScriptとは別にスクロールやアニメーションを滑らかに処理することができません。キャンバスの中に長い文章を入れてスクロールさせる作りは避けたほうが無難です
• 仕様がまだ変わる可能性がある：Chrome 157で正式提供されても、他のブラウザの実装や標準化の議論の中で、細かな仕様が変わる可能性があります

対応していないブラウザでどう見えるか

ここが、実際にホームページで使うときにいちばん注意したいところです。

HTML-in-Canvasに対応していないブラウザでは、キャンバスの中に書いたHTMLは「キャンバスが使えないときの代わりの中身（フォールバック）」という昔からの扱いになり、画面には表示されません。キャンバス自体は使えるブラウザなので、何も描かなければ、その部分は空白のままになります。

日本ではiPhoneを使っている人が多いので、スマートフォンから見に来たお客さまの多くには、HTML-in-Canvasの表示は届かないと考えておく必要があります。

使う場合は、次のどちらかの形にしておきましょう。

• 対応していないブラウザでは、キャンバスを隠して、ふつうのHTMLとして表示する（上の判定コードで切り替える）
• キャンバスは飾りにとどめ、肝心の情報はキャンバスの外に、ふつうのHTMLで書いておく

SEO的にはどうなのか

ホームページの担当者として、いちばん気になるのはここだと思います。

これまでのキャンバスは、SEOに不利だった

キャンバスに描いた文字は、ページの中では「絵」でしかありません。検索エンジンのクローラーはページのHTMLを読んで内容を理解するので、キャンバスに描いただけの文字は、検索エンジンにほとんど伝わりません。画像の中の文字と同じで、「キャッチコピーを3Dでかっこよく見せたら、Googleには何も書かれていないページに見えていた」ということが起こりえました。

HTML-in-Canvasでは、文字はHTMLとして残る

HTML-in-Canvasでは、描く元の文字や見出しはキャンバスの中にふつうのHTMLとして書かれています。ページのHTMLを読めば、そこに文字があることがわかります。

Googleも、Chrome開発者向けのブログで、HTML-in-Canvasの利点のひとつとして「クローラーやAIエージェントが、2Dや3Dの中に描かれた文字を読み取れる」ことを挙げています。また、読み上げソフトが内容を読み取れる（アクセシビリティツリーに含まれる）ことも、ページの内容を機械が理解しやすくなる点でプラスです。

そのため、「キャンバスに文字を描く」こと自体は、従来の方法よりSEO上はっきり有利と言えます。

ただし、気をつけたいこと

一方で、次のような点には注意が必要です。

1. Google検索としての公式な説明はまだない

上のGoogleの説明は、Chromeの開発チームによる機能紹介です。Google検索の公式ドキュメントで「HTML-in-Canvasを使ったページはこう評価する」と説明されているわけではありません。HTMLとして書かれている以上、文字が読まれること自体は期待できますが、見出しの扱いやページの評価への影響まで保証されているわけではありません。

2. 「見えない文字」と思われないように

対応していないブラウザでは、キャンバスの中のHTMLは画面に表示されません。もし、キャンバスの中にだけ大量のキーワードや文章を詰め込み、ほとんどの人には見えないという作りにすると、「ユーザーには見えない文字で検索エンジンをだまそうとしている」と受け取られるおそれもあります。キャンバスの中のHTMLは、実際に画面に描いている内容と同じものにしておきましょう。

3. 表示速度・操作の快適さ（Core Web Vitals）

Googleは、ページの表示速度や操作したときの反応の速さ（Core Web Vitals）も評価に使っています。3DやWebGLを使うページは、もともとスマートフォンでは重くなりがちです。さらに、HTML-in-Canvasでは中のHTMLが変わるたびにJavaScriptで描き直すため、作り方によっては、ボタンを押したときの反応（INP）が遅くなることがあります。重い3D演出は、ファーストビュー（最初に見える画面）の表示を遅らせない作りにすることが大切です。

4. 対応していないブラウザのお客さまの体験

検索順位だけでなく、実際に来てくれたお客さまに情報が届くかどうかも大切です。前の章のとおり、SafariやiPhoneでは表示されないので、肝心の情報がキャンバスの中にしかない作りは避けましょう。

SEOのために、ホームページでのおすすめの使い方

まとめると、HTML-in-Canvasは「キャンバスで演出したいけれど、SEOやアクセシビリティを犠牲にしたくない」というときに、とても良い選択肢になります。一方で、SEOのためにわざわざキャンバスを使う理由はありません。文章と写真が中心のページなら、これまでどおりふつうのHTMLで作るのがいちばん確実です。

よくある質問

Q. 今のホームページに、何か対応は必要ですか？

必要ありません。HTML-in-Canvasは「新しく使えるようになる機能」で、使わなければ今のホームページには何の影響もありません。

Q. ホームページに3Dの演出を入れたいのですが、使ったほうがいいですか？

3Dの中に文字やボタンを入れたいなら、検討する価値があります。ただし、SafariやiPhoneではまだ動かないので、対応していないブラウザ向けの表示を用意することが前提です。お客さまの多くがiPhoneで見に来るお店などでは、まず「3Dの演出が本当に必要か」から考えるのがおすすめです。

Q. WordPressでも使えますか？

使えます。HTML-in-Canvasはブラウザの機能なので、WordPressなどのCMSの種類には関係ありません。ただし、管理画面の通常の編集機能で作れるものではなく、テーマやブロックにJavaScriptを書いて組み込む開発が必要になります。

Q. 正式提供後も仕様は変わりますか？

変わる可能性はあります。Chrome 157で正式提供されたあとも、SafariやFirefoxでの実装や、Web標準としての議論の中で、細かな書き方が変わることがありえます。使う場合は、変更に追従できるよう、保守を含めて考えておきましょう。

まとめ

HTML-in-Canvasは、「自由に描けるけれど、文字がただの絵になってしまう」というキャンバスの長年の弱点を解消する、Webにとって大きな一歩です。3Dの演出、ゲーム、デザインツールのようなWebアプリを作る人にとっては、待望の機能と言えます。

一方で、今のところ使えるのはChrome系のブラウザだけで、SafariとiPhoneでは動きません。SEOの面では従来のキャンバスより有利ですが、Google検索としての公式の扱いはまだ説明されていません。

ふつうのホームページでは、大事な情報はふつうのHTMLで書き、HTML-in-Canvasは演出の部分に使う。この考え方で取り入れるのが、いちばん安全です。

C-TechLabでは、表示速度やSEOに配慮したホームページ制作のほか、「3Dの演出を入れたいけれど、検索やスマートフォンでの見え方が心配」といったご相談も承っています。お気軽にお問い合わせください。

参考情報

• Chrome for Developers「HTML-in-Canvas API オリジン トライアルの導入」（2026年5月19日更新）
• WICG「html-in-canvas」（仕様の説明・最新のAPI）
• Chrome Platform Status「HTML-in-canvas」
• blink-dev「Intent to Ship: HTML-in-canvas」（2026年9月30日）
• Chromium Dash「Chrome 157のリリース予定」
• html-in-canvas.dev「Browser support」
• Mozilla「standards-positions #1076」
• Codrops「Exploring the HTML-in-Canvas Proposal」（2026年5月13日）