Notionで作成したページを外部のブログやWebサイトに埋め込む最も基本的な方法は、「Webで公開」機能で取得したURLを、HTMLのiframeタグで囲んで記述することです。これにより、Notionのデザインそのままに、ポートフォリオやお知らせを自分のサイト内に表示できます。この記事では、具体的なコードの書き方と、埋め込み時の注意点を解説します。
1. Notionページを「Webで公開」状態にする
外部サイトに埋め込むための第一歩は、そのページを誰でもアクセスできる状態にすることです。
手順
- 埋め込みたいNotionページの右上にある [共有] ボタンをクリックします。
- [Webで公開] タブを選択し、スイッチをオンにします。
- [リンクをコピー] をクリックしてURLを取得します。
注意: 「ネット検索を許可」をオフにしておけば、Google検索には引っかからず、リンクを知っている人（または埋め込んだサイトの閲覧者）だけが見れる状態になります。
2. iframeタグを使ってサイトに記述する
コピーしたURLをそのまま貼り付けるだけでは、単なる「リンク」になってしまいます。ページそのものを窓のように表示させるには、以下のHTMLコードを使用します。
基本の埋め込みコード
ブログのHTML編集画面などに、以下のコードを貼り付けてください。
HTML
<iframe src="ここにコピーしたNotionのURL" width="100%" height="600px" style="border:none;"></iframe>
- src: コピーしたNotionの公開リンクを貼り付けます。
- width: 横幅です。「100%」にするとスマホでも綺麗に表示されます。
- height: 縦幅です。ページの内容に合わせて「600px」や「800px」など数値を調整してください。
3. Notion埋め込みのメリット・デメリット比較
「リンクを貼るだけ」の場合と「iframeで埋め込む」場合の違いを整理しました。
| 特徴 | リンク共有（URL貼り付け） | iframe埋め込み |
| 見た目 | 文字列のリンクのみ | ページの内容が展開される |
| ユーザー体験 | 別タブに移動が必要 | サイト内で完結する |
| 更新の手間 | なし | なし（Notion側で自動反映） |
| セキュリティ | Notion側の設定に依存 | 一部ブラウザで制限される場合あり |
埋め込み時の注意点とトラブルシューティング
画面がグレーになる・接続が拒否される場合
一部のブラウザやサーバーの設定により、セキュリティ上の理由でNotionの直接埋め込み（X-Frame-Options）がブロックされることがあります。
- 対策: NotionをCMSとして使えるサードパーティ製ツール（Super、Wraptasなど）を使用するか、Embed専用の生成サービスを経由することを検討してください。
デザインの崩れ
iframe内ではNotionのサイドバーなどは表示されませんが、スマホで見た際に横スクロールが発生する場合があります。width="100%" を指定することで多くの場合解決します。
よくある質問（FAQ）
Q. Notionの更新は埋め込み先にいつ反映されますか？
A. ほぼリアルタイムで反映されます。Notion側で編集を行い、埋め込み先のページをリロード（再読み込み）すれば、最新の内容が表示されます。
Q. 無料プランでも埋め込みはできますか？
A. はい、可能です。フリープランであっても「Webで公開」機能は制限なく利用でき、外部サイトへの埋め込みも行えます。
Q. 埋め込んだページのデザイン（フォントなど）は変えられますか？
A. iframeはNotionの見た目をそのまま持ってくるため、サイト側のCSSでNotion内部のフォントや色を直接変更することはできません。見た目を変えたい場合は、Notion側でレイアウトを調整してください。
まとめ
Notionページを埋め込めば、**「更新はNotion、表示はWebサイト」**という効率的な運用が可能になります。
- まずは「Webで公開」してURLをコピー
iframeタグで囲んで貼り付け
この2ステップで、あなたのWebサイトをリッチなコンテンツで彩りましょう。
Next Step: さっそく、ご自身のブログの「プロフィール」や「お知らせ」ページをNotionで作って、テスト環境に埋め込んでみませんか？