---
title: 【入門】NotionのHTMLブロックとは？ミニゲームやROI計算ツールも作れる新機能を試してみた｜Nextmode Blog
description: 2026年7月のNotion 3.6で登場したHTMLブロックを検証しました。スラッシュコマンドからの作成手順、Notion AIによる生成、ダウンロードして再アップロードする編集フロー、プランごとのファイルサイズ上限まで、新機能の要点を整理します。
image: https://info.nextmode.co.jp/hubfs/Notion%20Blog-1.png
---
[](https://info.nextmode.co.jp/blog)
[ホワイトペーパー](https://info.nextmode.co.jp/white-paper/) [資料請求](https://info.nextmode.co.jp/request/) [お問い合わせ](https://nextmode.co.jp/contact/)
- [会社TOP](https://nextmode.co.jp/)
- [生成AIセキュリティ](https://nextmode.co.jp/services/ai/security/)
- [SaaSライセンス＆サポート](https://nextmode.co.jp/services/saas/)
- [Oktaライセンス＆サポート](https://nextmode.co.jp/services/saas/okta/)
- [Netskopeライセンス＆サポート](https://nextmode.co.jp/services/saas/netskope/)
- [Notionライセンス＆サポート](https://nextmode.co.jp/services/saas/notion/)
- [Asanaライセンス＆サポート](https://nextmode.co.jp/services/saas/asana/)
- [SysCloudライセンス＆サポート](https://nextmode.co.jp/services/saas/syscloud/)
- [CrowdStrikeライセンス＆サポート](https://nextmode.co.jp/services/saas/crowdstrike/)
- [AWS総合支援](https://nextmode.co.jp/services/aws/)
- [AWS導入コンサル・構築](https://nextmode.co.jp/services/aws_consulting/)
- [AWS運用・保守代行](https://nextmode.co.jp/services/aws_operation/)
- [導入事例](https://nextmode.co.jp/casestudy/)
- [会社情報](https://nextmode.co.jp/company/)
- [セミナー](https://info.nextmode.co.jp/seminar/)
- [ブログ](https://info.nextmode.co.jp/blog)
[](https://www.youtube.com/@nextmode)
目次
2026/07/29 18:23
# 【Notion】NotionのHTMLブロックとは？ミニゲームやROI計算ツールも作れる新機能を試してみた
[» Notion](https://info.nextmode.co.jp/blog/tag/notion) [» 技術](https://info.nextmode.co.jp/blog/tag/技術) [» Notion AI](https://info.nextmode.co.jp/blog/tag/notion-ai)
[ 鮎澤耕平](https://info.nextmode.co.jp/blog/author/ayu)
共有： [facebook-f icon](http://www.facebook.com/share.php?u=https://info.nextmode.co.jp/blog/notion-html-block-tutorial) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://info.nextmode.co.jp/blog/notion-html-block-tutorial) [Twitter icon](https://twitter.com/intent/tweet?url=https://info.nextmode.co.jp/blog/notion-html-block-tutorial) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://info.nextmode.co.jp/blog/notion-html-block-tutorial) [envelope icon](mailto:?body=https://info.nextmode.co.jp/blog/notion-html-block-tutorial)
## はじめに
---
こんにちは、[ネクストモード](https://nextmode.co.jp/)の鮎澤です。
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導入を検討の際は是非下記からお問い合わせ頂けますと幸いです。
[](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/20481958/0a17ddba-0e2a-4cfa-b3f6-4d30c0a91bf1)
### 関連記事
[ 【Notion】アクセス権限を設定して採用情報を安全に管理できるか検証してみた  鮎澤耕平 2026/10/08](https://info.nextmode.co.jp/blog/notion-recruitment-access-control)
[ 【Notion】社内ナレッジのすべてをコンテキストに：ネクストモードのオープンなカルチャーが支える Notion AI 活用法  yuki 2026/10/04](https://info.nextmode.co.jp/blog/notion-ai-open-culture-knowledge-context)
[ 【世界一周ワーケーション：ネパール編】エベレストBC撤退記  ネクストモード 代表取締役社長 里見宗律 2026/10/21](https://info.nextmode.co.jp/blog/everest)
### Category
[» 技術](https://info.nextmode.co.jp/blog/tag/技術) [» Okta](https://info.nextmode.co.jp/blog/tag/okta) [» Notion](https://info.nextmode.co.jp/blog/tag/notion) [» イベントレポート](https://info.nextmode.co.jp/blog/tag/イベントレポート) [» Netskope](https://info.nextmode.co.jp/blog/tag/netskope) [» CrowdStrike](https://info.nextmode.co.jp/blog/tag/crowdstrike) [» Notion AI](https://info.nextmode.co.jp/blog/tag/notion-ai) [» AWS](https://info.nextmode.co.jp/blog/tag/aws) [» Asana](https://info.nextmode.co.jp/blog/tag/asana) [» カルチャー](https://info.nextmode.co.jp/blog/tag/カルチャー) [» ワーケーション](https://info.nextmode.co.jp/blog/tag/ワーケーション) [» 生成AIセキュリティ対策シリーズ](https://info.nextmode.co.jp/blog/tag/生成aiセキュリティ対策シリーズ) [» Oktane25](https://info.nextmode.co.jp/blog/tag/oktane25) [» SaaS](https://info.nextmode.co.jp/blog/tag/saas) [» リモートワーク](https://info.nextmode.co.jp/blog/tag/リモートワーク) [» AI](https://info.nextmode.co.jp/blog/tag/ai) [» re:Invent](https://info.nextmode.co.jp/blog/tag/reinvent) [» Keeper](https://info.nextmode.co.jp/blog/tag/keeper) [» ネクストモードアドベントカレンダー2024](https://info.nextmode.co.jp/blog/tag/ネクストモードアドベントカレンダー2024) [» Oktane24](https://info.nextmode.co.jp/blog/tag/oktane24) [» Oktane23](https://info.nextmode.co.jp/blog/tag/oktane23) [» Oktane26](https://info.nextmode.co.jp/blog/tag/oktane26) [» Asana AI](https://info.nextmode.co.jp/blog/tag/asana-ai) [» OIGシリーズ](https://info.nextmode.co.jp/blog/tag/oigシリーズ) [» Slack](https://info.nextmode.co.jp/blog/tag/slack) [» その他](https://info.nextmode.co.jp/blog/tag/その他) [» 脱Excelシリーズ](https://info.nextmode.co.jp/blog/tag/脱excelシリーズ) [» SysCloud](https://info.nextmode.co.jp/blog/tag/syscloud) [» Oktane22](https://info.nextmode.co.jp/blog/tag/oktane22) [» Google](https://info.nextmode.co.jp/blog/tag/google) [» HubSpot](https://info.nextmode.co.jp/blog/tag/hubspot) [» Zapier](https://info.nextmode.co.jp/blog/tag/zapier) [» Azure AD](https://info.nextmode.co.jp/blog/tag/azure-ad) [» Entra ID](https://info.nextmode.co.jp/blog/tag/entra-id) [» Googleドライブ](https://info.nextmode.co.jp/blog/tag/googleドライブ) [» SentinelOne](https://info.nextmode.co.jp/blog/tag/sentinelone) [» セキュリティ対策](https://info.nextmode.co.jp/blog/tag/セキュリティ対策) [» ゼロトラスト](https://info.nextmode.co.jp/blog/tag/ゼロトラスト) [» DocuSign](https://info.nextmode.co.jp/blog/tag/docusign) [» Jamf](https://info.nextmode.co.jp/blog/tag/jamf) [» トラブルシューティング](https://info.nextmode.co.jp/blog/tag/トラブルシューティング) [» 利用者目線](https://info.nextmode.co.jp/blog/tag/利用者目線) [» 運用](https://info.nextmode.co.jp/blog/tag/運用) [» GitHub](https://info.nextmode.co.jp/blog/tag/github) [» GitHub Gist](https://info.nextmode.co.jp/blog/tag/github-gist) [» JOUG](https://info.nextmode.co.jp/blog/tag/joug) [» Notion Calendar](https://info.nextmode.co.jp/blog/tag/notion-calendar) [» Proflly](https://info.nextmode.co.jp/blog/tag/proflly) [» kintone](https://info.nextmode.co.jp/blog/tag/kintone)
[](https://nextmode.co.jp/)
Service
- [生成AIセキュリティ](https://nextmode.co.jp/services/ai/security/)
- [SaaSライセンス＆サポート](https://nextmode.co.jp/services/saas/)
- [Oktaライセンス＆サポート](https://nextmode.co.jp/services/saas/okta/)
- [Netskopeライセンス＆サポート](https://nextmode.co.jp/services/saas/netskope/)
- [Notionライセンス＆サポート](https://nextmode.co.jp/services/saas/notion/)
- [Asanaライセンス＆サポート](https://nextmode.co.jp/services/saas/asana/)
- [SysCloudライセンス＆サポート](https://nextmode.co.jp/services/saas/syscloud/)
- [CrowdStrikeライセンス＆サポート](https://nextmode.co.jp/services/saas/crowdstrike/)
- [Keeperライセンス＆サポート](https://nextmode.co.jp/services/saas/keeper/)
- [AWS総合支援](https://nextmode.co.jp/services/aws/)
- [AWS導入コンサル・構築](https://nextmode.co.jp/services/aws_consulting/)
- [AWS運用・保守代行](https://nextmode.co.jp/services/aws_operation/)
Company
- [会社情報](https://nextmode.co.jp/company/)
- [サービス一覧](https://nextmode.co.jp/services/)
- [導入事例](https://nextmode.co.jp/casestudy/)
- [お知らせ](https://nextmode.co.jp/news/)
- [サステナビリティ](https://nextmode.co.jp/sustainability/)
- [採用](https://nextmode.co.jp/recruit/)
- [私たちの働き方](https://nextmode.co.jp/workstyle/)
- [カルチャー](https://nextmode.co.jp/culture/)
Contact
- [お問い合わせ](https://nextmode.co.jp/contact/)
- [資料請求](https://info.nextmode.co.jp/request/)
Media
- [セミナー](https://info.nextmode.co.jp/seminar)
- [ブログ](https://info.nextmode.co.jp/blog)
- [ホワイトペーパー](https://info.nextmode.co.jp/white-paper/)
- [](https://www.youtube.com/channel/UCeW8ocoe9C3E0GOINh167MA)
- [](https://twitter.com/Nextmode_Inc)
[English](https://nextmode.co.jp/en/)
- [NTTグループカスタマーハラスメント基本方針](https://group.ntt/jp/group/customer_harassment/)
- [就活ハラスメント防止方針](https://docs.nextmode.co.jp/nextmode_recruit_harassment.pdf)
- 運用アシスタント利用規約([AWS](https://docs.nextmode.co.jp/nextmode-unyo-assistant-aws-terms-of-use.pdf)/[Azure](https://docs.nextmode.co.jp/nextmode-unyo-assistant-azure-terms-of-use.pdf))
- [日中運用支援定型約款](https://docs.nextmode.co.jp/nextmode-nittyu-unyo-shien-terms-of-use.pdf)
- [定型約款](https://docs.nextmode.co.jp/nextmode-standard-contracts.pdf)
[プライバシーポリシー](https://nextmode.co.jp/company/privacy.html)
Copyright(c) Nextmode, Inc.
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "鮎澤耕平",
"url" : "https://info.nextmode.co.jp/blog/author/ayu"
},
"dateModified" : "2026-07-29T09:23:14.319Z",
"datePublished" : "2026-07-29T09:23:14.000Z",
"headline" : "【入門】NotionのHTMLブロックとは？ミニゲームやROI計算ツールも作れる新機能を試してみた｜Nextmode Blog",
"image" : [ "https://info.nextmode.co.jp/hubfs/Notion%20Blog-1.png" ],
"mainEntityOfPage" : {
"@id" : "https://info.nextmode.co.jp/blog/notion-html-block-tutorial",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://info.nextmode.co.jp/hubfs/nm_l_color.png"
},
"name" : "ネクストモード株式会社"
}
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://nextmode.co.jp/#organization",
"@type" : "Organization",
"alternateName" : "Nextmode, Inc.",
"logo" : "https://nextmode.co.jp/assets/images/common/logo_white.svg",
"name" : "ネクストモード株式会社",
"sameAs" : [ "https://www.youtube.com/channel/UCeW8ocoe9C3E0GOINh167MA", "https://twitter.com/Nextmode_Inc", "https://info.nextmode.co.jp/" ],
"url" : "https://nextmode.co.jp/"
}
```