ネクストモードブログ

【入門】NotionのHTMLブロックとは?ミニゲームやROI計算ツールも作れる新機能を試してみた|Nextmode Blog

作成者: 鮎澤耕平|2026/07/29 09:23

はじめに

こんにちは、ネクストモードの鮎澤です。

NotionでHTMLブロックが追加されました。HTMLブロックはHTMLファイルそのものをアップロードしてNotion上で表示できますし、Notion AIに生成してもらうこともできます。もちろん生成されたHTMLはダウンロードできるので、手元で微修正し再度Notion上にアップロードすることも可能です。

機能自体はプランに関係なく利用できますが、プランごとに1ファイルあたりのアップロード上限があるためご注意ください。また、Notion AIに生成してもらう場合は契約によってAI利用の制限がかかることがあります。

今回はHTMLブロックの主な使い方をご紹介していきます。

HTMLブロック作成

HTMLブロックはスラッシュコマンドもしくは空白行左側のプラスボタンから呼び出すことができます。

呼び出すとHTMLファイルをアップロードできるほか、Notion AIに作成してもらうこともできます。試しに「ゲーム」をクリックして、Notion AIに生成してもらいます。

少し待つと、下図のようなミニゲームが作成されました。ルールはシンプルです。自分のキャラクター(検証アイコン)を操作して、動き回る赤い四角を避けながらクエスチョンマークを回収していきます。すべて回収するとゴールのLockが解除されるので、そこまで検証アイコンを移動させればクリアです。

他にもROI計算ツールやモックアップ、Notionページ内の情報をダッシュボード化することもできます。ダッシュボード化する場合ですが、現状はページ内のコンテンツを更新してもHTMLブロックは自動では更新されないため、少し注意が必要です。

生成されたHTMLファイルの修正方法

Notion AIによって生成されたHTMLファイルの修正方法は大きく2通りあります。

1つ目はNotion AIに再度依頼する方法です。HTMLブロック上部の「AIで編集する」をクリックすると、Notionエージェントのプロンプト画面が開くので、ここで対話形式で修正することができます。

2つ目はHTMLファイルをダウンロードして、ローカルで修正する方法です。HTMLブロック上部の「・・・」をクリックしてHTMLファイルをダウンロードします。

ローカルでファイル内の「検証ラボ」という記述を「本番ラボ」に変更してアップロードします。当然ではありますが、問題なく表示することができました。このようにドラフトをNotion AIに生成してもらい、Notion AIや手作業で完成形にしていくのがベターだと考えています。

まとめ

HTMLブロックの使い方をご紹介しました。アイデア次第でNotionページが華やかになるだけでなく、計算ツールや外部公開ページの一助としても実用的に使えますので、ぜひHTMLブロックを使っていきましょう。


 

Notionについてのお問い合わせ

ネクストモード社は、日本で3社しかないNotion販売代理店です。(2025/12現在)
Notion導入を検討の際は是非下記からお問い合わせ頂けますと幸いです。