Notionで作成したドキュメントは、WEBサイトとして独自ドメインを使って公開できます。わざわざNotionで作ったドキュメント内容をホームページ制作ツールに移しなおす必要がないため便利です。

ここではNotionを独自ドメインで公開する4つの方法に加え、Cloudflareを用いた詳細な方法を説明します。

チャット一括管理アプリ「OneChat」が今なら初月無料!!

OneChatのダウンロードはこちらから

Notion上のコンテンツは独自ドメインで公開できる!

Notion上のコンテンツは独自ドメインで公開できる!

オリジナルなURLを取得するために、独自ドメインを使っている企業や個人も多いのではないでしょうか。Notionで作ったコンテンツも、独自ドメインで公開可能です。

Notionを独自ドメインで公開するためには4つの方法があります。そのうちCloudflareを用いる方法では5つのステップで独自ドメイン化が行えます。

なお、独自ドメインの設定以外にもなお、当サイトではNotionに関するさまざまな情報を発信しています。ぜひ参考にしてみてください。

今すぐ使える!Notionテンプレート10選 + 使い方解説! – OneChat Blog

Notionを独自ドメインで公開する4つの方法

Notionを独自ドメインで公開する4つの方法

Notionを独自ドメインで公開するために、活用できる代表的なサービスは次の4つが挙げられます。

  • Super
  • Cloudflare
  • Popsy
  • Fruition

それぞれの方法を詳しく説明していきます。

1.Super

Superの魅力は公開までの時間が速いWEBサービスであることです。

ただし1サイトごとに約1,400円かかるため、独自ドメイン化サービスの中では高額な点がデメリットだといえます。もし公開までの読み込みが多少遅くても、安くしたい場合はCloudflareがおすすめです。

Superを活用すると、自動的なSSL設定やSEO対策、OGP画像、NextJSでの爆速表示など、さまざまな効果が挙げられます。

Superのアカウント登録は、公式ページにアクセスして行いましょう。

1.Super

引用:https://super.so/?via=nxo

2.Cloudflare

Cloudflareは無料で独自ドメインをNotionに紐づけられるWEBサービスです。

Cloudflareの詳しい使い方は後述しますが、まず独自ドメイン取得サービスで独自ドメインを取得し、Notionで独自ドメインを使って公開したいページを選択、もしくはまだなければ作成します。

次にCloudflareで独自ドメインを登録し、Fruitionでスクリプト作成するといった流れで行います。

3.Popsy

Popsyは使いやすいテンプレートが揃っているのが特徴的なWEBサービスです。Popsyを使い、Notionで制作したドキュメントをWEBサイトとして公開できます。
ではPopsyの使い方を説明していきます。まずPopsyのトップページにあるTemplatesをクリックしましょう。

3.Popsy

引用:Popsy

Templatesをクリックすると、以下のようにさまざまなテンプレートが表示されます。

Templatesをクリックすると、以下のようにさまざまなテンプレートが表示されます。

引用:Popsy

テンプレートを選択したら、詳細画面に記載されているGet this templateをクリックします。

テンプレートを選択したら、詳細画面に記載されているGet this templateをクリックします。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

すると、Notionドキュメントが表示されます。

すると、Notionドキュメントが表示されます。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

次にNotionを開いて複製をクリックすることで、先ほどのテンプレートの内容がNotionにコピーされます。

次にNotionを開いて複製をクリックすることで、先ほどのテンプレートの内容がNotionにコピーされます。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

コピー以外にも、テンプレートを基にして編集も行えます。

コピー以外にも、テンプレートを基にして編集も行えます。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

テキストや画像の位置などは自分が見やすいように編集できます。一から作ることもできますが、手間がかかったり、初心者には難しかったりするため、テンプレートの活用をおすすめします。

テキストや画像の位置などは自分が見やすいように編集できます。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

最後にNotionとPopsyの連携が必要です。まずNotionで作ったドキュメントを公開しましょう。公開は右上のshareをクリックし、URLをコピーします。

公開は右上のshareをクリックし、URLをコピーします。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

Popsyのトップページで、NotionでコピーしたURLを貼り付けて完了です。

Popsyのトップページで、NotionでコピーしたURLを貼り付けて完了です。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

その後無料のユーザー登録やWEBサイトの名前を設定、カテゴリーなどを選び、テーマを選択したら連携完了です。

その後無料のユーザー登録やWEBサイトの名前を設定、カテゴリーなどを選び、テーマを選択したら連携完了です。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

連携が終了したら、Popsyの管理画面においてPublishをクリックしたらWEBサイトを公開できます。

連携が終了したら、Popsyの管理画面においてPublishをクリックしたらWEBサイトを公開できます。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

最初に取得したドメインを設定するようにしましょう。

最初に取得したドメインを設定するようにしましょう。

引用:独自ドメインもOK!無料でNotionドキュメントをWebサイトに変換する「Popsy」を使ってみた!

4.Fruition

Fruitionはドメイン代以外の費用は不要で、簡単に設定できるWEBサービスです。

Fruitionの使い方ですが、Notionでドキュメントを作った後、Fruitionを活用して独自ドメインをNotionに割り当てていきます。

まず、Cloud Flareでアカウントを作りましょう。次のページからWEBサイトを追加します。

まず、Cloud Flareでアカウントを作りましょう。次のページからWEBサイトを追加します。

引用:Notionの独自ドメインWebサイトを無料で作る方法

取得していている独自ドメインを入力して、無料プランを選びます。

取得していている独自ドメインを入力して、無料プランを選びます。

引用:Notionの独自ドメインWebサイトを無料で作る方法

さまざまなプランがありますが、無料で利用可能です。

さまざまなプランがありますが、無料で利用可能です。

引用:Notionの独自ドメインWebサイトを無料で作る方法

プラン選択後はIPアドレスを設定します。

プラン選択後はIPアドレスを設定します。

引用:Notionの独自ドメインWebサイトを無料で作る方法

Cloudflareのネームサーバー名の右側にあるClick to Copyをクリックして、コピーします。

Cloudflareのネームサーバー名の右側にあるClick to Copyをクリックして、コピーします。

引用:Notionの独自ドメインWebサイトを無料で作る方法

後はドメインを取得したサイトに戻り、今回活用する独自ドメインにおけるネームサーバーの設定を変更してください。

CloudflareでDone、 check nameserversをクリックしたあと、lways Use HTTPSに変更します。

CloudflareでDone、 check nameserversをクリックしたあと、lways Use HTTPSに変更します。

引用:Notionの独自ドメインWebサイトを無料で作る方法

ネームサーバーの設定完了は、数時間から1日かかります。設定が反映されると、「Cloudglare is now protecting your site」と表示されます。

Notionを「Cloudflare」で独自ドメイン化する際の5ステップ

Notionを「Cloudflare」で独自ドメイン化する際の5ステップ

NotionをCloudflareで独自ドメイン化する場合は、次の5ステップで行います。

  • 独自ドメインを取得する
  • Notionで独自ドメインを割り当てるページを作成する
  • Cloudflareで独自ドメインを登録する
  • Fruitionでスクリプトを生成する
  • Notionのページに飛ぶか確認する

それぞれのステップについて説明していきます。

ステップ1.独自ドメインを取得する

独自ドメインとは、共通ドメインではなく、個人や企業などが独自に登録しているものを指します。独自ドメインは世界に1つしかありません。

NotionをCloudflareで独自ドメイン化する場合は、どのドメイン取得サービスでも特に大差はありません。それぞれ好みのドメインサービスを選びましょう。GMOパペポが運用しているムームードメインでの取得が簡単でおすすめです。

今回はムームードメインでの独自ドメイン取得方法を例に紹介します。ムームードメインの公式ページにある検索窓で、取得を検討中のドメインを入力しましょう。

すると取得できるドメインがリストアップされるので好きなものを選びます。ドメインによって料金が大幅に変わるのでよく確認しましょう。中には100円未満のドメインもあります。

ムームードメインの公式ページにある検索窓で、取得を検討中のドメインを入力しましょう。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

カートに追加、申し込みと進んでアカウントを作ります。初めて利用する場合はアカウントの発行が必要です。

カートに追加、申し込みと進んでアカウントを作ります。初めて利用する場合はアカウントの発行が必要です。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

アカウントを作った後は、選んだドメインの設定画面に移ります。

アカウントを作った後は、選んだドメインの設定画面に移ります。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

「ムームードメイン for WPホスティング」と「ムームーメール」はチェックを外しましょう。

「ムームードメイン for WPホスティング」と「ムームーメール」はチェックを外しましょう。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

ドメイン契約期間は最低期間が1年ですので1年以上で設定してください。

ドメイン契約期間は最低期間が1年ですので1年以上で設定してください。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

内容を確認して修正箇所がなければ「取得する」をクリックしましょう。

内容を確認して修正箇所がなければ「取得する」をクリックしましょう。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

ステップ2.Notionで独自ドメインを割り当てるページを作成する

次にNotionで独自ドメインを割り当てるページを作成していきます。

次にNotionで独自ドメインを割り当てるページを作成していきます。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

公開したいページを選んで、画面右上に表示されている「share」をクリックしましょう。設定では以下3つの項目のみオンにし、他は全てオフにします。

  • Share to Web
  • Allow duplicate as template
  • Search engine indexing

Search engine indexingは無料プランの場合はWEBサイトを検索エンジンに表示すること自体ができないので、オンにする必要はありません。

ただし有料プランの場合はオンにしましょう。オンにすることで、Googleをはじめとした検索エンジンにサイトを認識・してもらい表示してもらうことができます。

ステップ3. Cloudflareで独自ドメインを登録する

Cloudflareで独自ドメインを登録していきます。CloudflareにWEBサイトを追加して、取得したドメインを入力しましょう。有料プランもありますが、無料プランで十分使えます。

レコードを追加をクリックして、DNSレコードを追加します。

レコードを追加をクリックして、DNSレコードを追加します。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

最後にWorkerという機能を使い、独自ドメインをCloudflareにデプロイしてください。

最後にWorkerという機能を使い、独自ドメインをCloudflareにデプロイしてください。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

ステップ4. Fruitionでスクリプトを生成する

次にFruitionでスクリプトを生成していきます。

次にFruitionでスクリプトを生成していきます。

引用:https://fruitionsite.com/

Customize and generate the scriptでスクリプトを生成していきますが、この際、独自ドメインの他にNotionで作ったドキュメントを表すURLが必要です。

Customize and generate the scriptでスクリプトを生成していきますが、この際、独自ドメインの他にNotionで作ったドキュメントを表すURLが必要です。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

スクリプトをコピーし、Cloudflareのページで下の部分に貼り付けましょう。

スクリプトをコピーし、Cloudflareのページで下の部分に貼り付けましょう。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

貼り付けた後は、保存してデプロイをクリックします。

ステップ5.Notionのページに飛ぶか確認する

最後にNotionのページに飛ぶか確認しましょう。

最後にNotionのページに飛ぶか確認しましょう。

引用:【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法

独自ドメインを含めたURLを検索バーに入力し、対象ページに飛ぶか確認してください。Notionページが表示されたら独自ドメインの設定完了です。

なお、当サイトではNotionに関するさまざまな情報を発信しています。ぜひ参考にしてみてください

万能ノートアプリ「Notion(ノーション)」の使い方 入門ガイド – OneChat Blog

【初心者向け!!】 Notionがオールインワンアプリといわれる理由!スマホにインストールする方法も紹介