Notion に HTML ファイルを貼ると動かない。ページとして見せる方法

Claude や ChatGPT に作ってもらった操作できるグラフや計算ツールを、仕様書を書いている Notion のページに入れたい。HTML ファイルをドラッグすると、ファイル名の付いた添付が 1 つ増えるだけで、グラフは出てきません。

このページでは、Notion に HTML ファイルを入れたときに何が起きるか、HTML を URL にして Notion に貼る手順、埋め込みブロックで表示したいときに知っておくこと、共有範囲と更新のしかたを順に説明します。Notion の内容は、2026 年 10 月 20 日に Notion のヘルプセンター（日本語版）で確かめました。Notion の画面では試していないので、メニューの名前はヘルプの表記のまま書きます。

Notion に HTML ファイルを入れるとどうなる

Notion のヘルプ「画像、ファイル、メディア」は、Notion が対応しているファイル形式として、画像（JPEG、PNG、GIF、SVG など）、PDF、MD、音声（MP3、WAV、OGG）、動画（MP4）を挙げています。HTML はこの一覧にありません。

HTML ファイルを貼ったときに Notion がしてくれるのは、「ファイル」ブロックとして保管しておくことです。開いた人はファイルをダウンロードして、自分のブラウザで開くことになります。フリープランでアップロードできるのは 1 ファイル 5 MB までです。

HTML のコードを Notion のコードブロックに貼った場合も、コードが文字として並ぶだけで、ボタンもグラフも動きません。Notion の中でページとして見せる方法は、ヘルプには書かれていません。

Notion には URL を貼る

HTML をページとして見てもらうには、先に HTML をインターネットに公開して URL にします。Notion には、その URL を貼ります。

貼り方は、Notion のヘルプ「埋め込み、ブックマーク、リンクメンション」に 2 つ書かれています。

• ブックマーク: URL を貼り付け、出てきたメニューで「ブックマークとして貼り付け」を選びます。ページのタイトル、説明、URL が入ったカードになります。
• リンクメンション: 文章の中に、文字と同じように並ぶリンクです。ブックマークより目立ちません。

仕様書の中で「このツールを開いて」と案内するならブックマークが向いています。AI に HTML を作ってもらうときは、ページのタイトル（<title>）と説明文も入れてもらいましょう。カードに何のページかが出やすくなります。

HTML ファイルを URL にして Notion に貼る 4 つの手順

1. HTML ファイルかコードをボックスに入れる

このページのボックスに、.html か .htm のファイル（2 MB まで）を「ファイルから」で選ぶか、「コードから」に切り替えてコードを貼り付け、「プレビューのリンクをつくる」を押します。登録もメールアドレスもいりません。

できたプレビューのリンクは 3 分間だけ開けます。見た目を確かめるためのリンクで、安全のためページのスクリプトとフォームは止まっています。グラフやボタンが動くのは、公開したあとです。

2. ページを受け取る

「このページを受け取る（無料・カード不要）」を押して登録すると、ページがそのままアカウントに入ります。

3. 公開して URL をコピーする

ページの画面で「公開する」を押します。はじめて公開するときは「公開プランを選ぶ」で、無料で公開するか、Pro 1年パス（¥4,400・1 回払いで 365 日間、自動更新なし）か、Pro の月額プランかを選びます。無料で公開すると、ページの下に Convika のバナーが出ます。

公開したら「URLをコピーする」で URL をコピーし、自分のブラウザで開いて、グラフやボタンが動くことを確かめます。

4. Notion に貼って「ブックマークとして貼り付け」を選ぶ

Notion のページに URL を貼り付け、メニューから「ブックマークとして貼り付け」を選びます。Notion を開いた人がカードをクリックすると、ブラウザで同じページが開きます。

埋め込みブロックで表示したいとき

Notion には「埋め込み」ブロックもあります。/埋め込み と入力して URL を貼ると、ほかのサイトのページを Notion の中に表示できます。ヘルプによると、Notion は Iframely というサービスを通じて 1,900 以上のドメインのコンテンツを埋め込めます。

ただし、ヘルプには「Webサイトの中には、他の場所にコンテンツを埋め込むことを禁止しているものがあります」とあり、そのときは「読み込みに失敗しました」と表示されると書かれています。

Convika で公開したページは、ほかのサイトの中に表示させない設定（frame-ancestors 'none'）にしています。このため、Convika のページを埋め込みブロックに貼っても、Notion の中には表示されません。Convika のページを Notion で見せるときは、ブックマークかリンクで貼ってください。

Notion の共有範囲と、HTML の URL は別

Notion のページを誰に見せるかは、Notion の共有の設定で決まります。けれども、Notion に貼った URL の先にある HTML のページは、Notion の設定とは関係なく開けます。Notion のページを社内の人だけに共有していても、URL がコピーされて外に出れば、受け取った人もページを開けます。

検索結果に出るかどうかも、Notion の設定とは別です。Convika では、公開するときの確認画面で「一般公開」か「限定公開」を選びます。無料の一般公開にしたページは、検索結果や Convika のギャラリーに出ることがあります。社内の仕様書に貼るページなら、限定公開（Pro・1年パス）を選んでください。Convika はページを検索結果に出さないよう検索エンジンに伝え（noindex）、サイトマップにもギャラリーにも載せません。

どちらを選んでも、Convika で公開したページは、リンクを知っている人ならだれでも開けます。見せる相手を絞りたいときは、Pro プラン（1年パスを含む）で、「サイト設定」の「閲覧パスワード」からページにパスワードをかけ、パスワードは Notion とは別の経路で伝えてください。かけ方はHTML のページにパスワードをかける方法で説明しています。

更新したいとき

HTML を直したら、Convika のページの画面の「新しいバージョンのアップロード」から、直したファイルを入れます。新しい版を公開すると、同じ URL のまま新しい版に切り替わります。Notion に貼ったブックマークは、貼り直さなくてかまいません。

Notion の「ファイル」ブロックに HTML を添付した場合は、直すたびに添付し直すことになり、前の版をダウンロードした人の手元には古いファイルが残ります。

自分で開いて見たいだけのとき

人に見せるのではなく、手元の HTML ファイルの中身を確かめたいだけなら、公開しなくてもかまいません。HTML ビューアにファイルを入れると、ブラウザの中で表示できます。

よくある質問

Notion に html ファイルを埋め込める？

HTML ファイルをページとして埋め込むことはできません。Notion のヘルプが挙げる対応ファイル形式に HTML はなく、貼っても「ファイル」ブロックの添付として置かれるだけです。HTML を公開して URL にすれば、Notion にはブックマークやリンクとして貼れます。

Notion で html を表示するには？

HTML をインターネットに公開して URL にし、その URL を Notion に貼ります。Convika なら、HTML ファイルをアップロードして Free プランで公開すると URL になります。Notion で「ブックマークとして貼り付け」を選ぶと、タイトルと説明の入ったカードになり、クリックするとブラウザでページが開きます。

Notion に iframe を使える？

iframe のコードを書くかわりに、Notion の「埋め込み」ブロックに URL を貼ると、ほかのサイトのページを Notion の中に表示できます。ただし、埋め込みを禁止しているサイトは表示されず、Notion のヘルプによれば「読み込みに失敗しました」と出ます。Convika で公開したページも、ほかのサイトの中には表示されない設定なので、リンクで貼ってください。

出典

• 画像、ファイル、メディア（Notion ヘルプセンター） (2026 年 10 月 20 日に確認)
• 埋め込み、ブックマーク、リンクメンション（Notion ヘルプセンター） (2026 年 10 月 20 日に確認)