NotionにHTMLや外部コンテンツを埋め込む方法|Embed・bookmark比較
- 執筆
- 小幡十矛
- 公開日
- 更新日
NotionでHTMLを扱う方法は2系統です。2026年7月1日に追加されたHTMLブロックは、Notion Agentsが計算ツールやクイズなどの操作できる画面をつくる方法です。外部サイトや動画、フォームを表示する場合は、従来どおり「/embed」へhttpsのURLか埋め込み用リンクを貼ります。
要点:Notion内で操作できるものを新しくつくるならHTMLブロック、外部コンテンツをページ内で見せるならEmbed、リンク先をカードで紹介するならWeb bookmark、文章の流れに短く置くならlink mentionです。用途から逆算すると迷わず選べます。
2026年7月、NotionにHTMLブロックが加わった
Notion公式の2026年7月1日リリースでは、Notion AgentsがインタラクティブなHTMLブロックを作成できるようになったと案内されています。作ったブロックはNotionの中に置かれ、チームで使いながら更新できます。
公式が紹介している例は、ROI計算ツール、社内向けクイズ、組織図です。情報を読むだけのページから、その場で入力、計算、確認まで進めるページへ広げられます。
HTMLブロックは、既存の外部ページを表示するEmbedとは役割が異なります。HTMLブロックはNotion Agentsと新しい操作画面をつくる用途、Embedは外部で公開されている内容をNotionに表示する用途として分けると整理しやすくなります。
HTMLブロック・Embed・bookmark・link mentionを比較
| 方法 | 見え方 | 向いている用途 |
|---|---|---|
| HTMLブロック | Notion内で操作できる画面 | 計算ツール、クイズ、組織図 |
| Embed | 外部コンテンツをページ内へ表示 | 動画、地図、フォーム、ウィジェット、PDF |
| Web bookmark | タイトル、説明、URLのカード | 参考記事、外部資料、後で開くリンク |
| Link mention | 文章内の短いリンク | 議事録、仕様書、会話の流れを保つ参照 |
Notion公式ヘルプでは、外部コンテンツをEmbed、bookmark、link mentionとして扱う方法を分けています。その場で操作するか、内容を見るか、リンク先へ移動するかを先に決めると選びやすくなります。
外部コンテンツをEmbedする手順
- 埋め込み元で、httpsから始まる公開URLか埋め込み専用リンクを取得する
- Notionの新しい行で「/embed」と入力し、Embedを選ぶ
- URLを貼り付けて表示する
- 左右のハンドルで幅を調整し、閲覧する端末で確認する
iframeタグ全体ではなく、埋め込み元が発行するURLを使います。Notion公式は、動画、音声、地図、フォーム、デザイン、コードリポジトリなど、1,900を超えるドメインの外部コンテンツをIframely経由で扱えると案内しています。
公開前に確認する4つのポイント
埋め込み元が外部表示に対応しているか
Webサイト側の設定によって読み込みエラーが出る場合は、Web bookmarkへ切り替えるとリンク先を案内できます。
ログインが必要か
Notion公式によると、外部サイトへのログインが必要な埋め込みは、Notionのデスクトップアプリとモバイルアプリでは表示方法が限られます。チームが使う端末に合わせ、ブラウザでも確認します。
公開範囲が合っているか
Google Driveやカレンダーなどは、元サービス側の共有設定が表示範囲を決めます。Notionページと埋め込み元の両方で、見せたい相手に合う設定を選びます。
外部通信を理解しているか
Notion公式は、表示に必要な範囲でIframelyや埋め込み先サービスが閲覧者のIPアドレスを受け取る場合があると説明しています。公開ページでは、便利さと外部通信を一緒に確認します。
30秒で選べる判断フロー
- Notionの中で入力や計算まで進めたいなら、HTMLブロックを検討する
- 動画やフォームをページ内で見せたいなら、Embedを使う
- 参考資料をカードで紹介したいなら、Web bookmarkを使う
- 文章の流れを保って参照先だけ示したいなら、link mentionを使う
一つのページに多く置く前に、「読む」「入力する」「判断する」のどれを担うか決めると、情報が次の行動につながります。
一次体験:埋め込みを増やす前に、役割を一つ決める
僕もNotionを使い始めた頃、便利なウィジェットや外部サービスを見つけるたびにページへ置いていました。見た目は豊かになります。同時に、情報が増えるほど、どこを見れば次の行動が決まるかが見えにくくなることもありました。
今は、自社サイト、アプリ、業務フローを創るときも、画面ごとに役割を一つ決めます。Notionの埋め込みも同じです。「今日の予定を知る」「入力する」「判断材料を見る」のどれか一つを持たせると、外部ツールが情報の飾りではなく、実際に使われる導線になります。
次に読む記事
よくある質問
NotionにHTMLを直接貼り付けて表示できますか?
2026年7月1日から、Notion AgentsがインタラクティブなHTMLブロックを作成できます。外部で公開されているHTMLページを表示するときは、iframeタグ全体ではなく、httpsから始まるURLか埋め込み用リンクをEmbedへ貼ります。
NotionのHTMLブロックとEmbedは何が違いますか?
HTMLブロックはNotion Agentsと計算ツールやクイズなどの操作画面をつくる方法です。Embedは、外部サイト、動画、フォームなど、別の場所で公開されているコンテンツをNotionページ内へ表示する方法です。
NotionのEmbedとWeb bookmarkは何が違いますか?
Embedは外部コンテンツをページ内に表示します。Web bookmarkはリンク先のタイトル、説明、URLをカードとして表示し、閲覧時はリンク先へ移動します。
Notionで埋め込みが表示されないときは、何を確認しますか?
埋め込み元の外部表示設定、埋め込み用URL、ログインの有無、ネットワークやブラウザ拡張の設定を順に確認します。ページ内表示よりリンク案内が合う場合は、Web bookmarkへ切り替えます。
ログインが必要なサービスもNotionへ埋め込めますか?
Notion公式ヘルプでは、外部サイトへのログインが必要な埋め込みはデスクトップアプリとモバイルアプリで表示方法が限られると案内されています。利用端末と公開範囲を先に確認します。
外部ツールを、更新と判断が続く情報設計へ
Notion、AI、Webサイトを横断する情報が増えてきたら、どこを正本にし、誰が更新し、何を見て次へ動くかを一枚に整理できます。