本記事を読んでほしい人
- NotionのURLを「独自ドメイン化」したい人
- Notionの「Webサイト化」し、公開したい人
- 独自ドメインを「無料」でNotionに紐付ける方法を知りたい人
- 「Cloudflare」と「Frution」を使ってNotionを独自ドメイン化したい人
情報共有ツール、ノートアプリとして人気のNotion。
作成したページを簡単に共有することができますが、URLが下記のように長くなってしまうため、「独自ドメインにしたい」と考えている人も多いようです。
NotionのURLだと長い
▼
独自ドメイン化したURLだとすっきり
Notionに独自ドメインを割り当てるサービスはいくつかあり、なかでもSuperが有名ですが、そのSuperが2020年末に「月4ドル」から「月12ドル」に値上げをしました。
そこで今回は、FruitionとCloudflareというサービスを使い、独自ドメインを無料でNotionに紐付け、Webサイト化する方法をご紹介します。
関連
本記事の概要・目次
本記事の編集者
大まかな手順
計5ステップとなります。
少し細かいですが、順番通り進めれば誰でも確実にできます。
- 好きなドメインを「ドメイン取得サービス」で取得
- Notionで公開したいページを作成
- Cloudflareで独自ドメインを登録
- Fruitionでスクリプトを生成
- NotionでURLを確認
参考にした記事
Step1: 独自ドメインを取得する
まず独自ドメイン（好きなURL）を持っている必要があります。
既に独自ドメインをお持ちの方は「Step2: Notionで公開ページ」に進んでください。
ドメイン取得サービスは正直どこでも良いです。
料金やサービス内容に多少の違いはあれど、一概に「◯◯がオトク」とは言えないからです。
とはいえ…という方には、私も利用している「ムームードメイン 
」を使ってみてください。
「ムームードメイン」はGMOペパボが運営しており、初心者でも簡単に使えます。
では、ムームードメインでの独自ドメイン取得方法を解説します。
ムームードメイン にアクセスし、検索窓に取得したいドメインを入れてください。
すると取得可能なドメインがズラッと出てくるので、好きなものを選んでください。
ドメインによって値段が変わりますが、100円未満と格安なものも多くあります。
「カートに追加」し「お申し込みへ」と進むと、アカウント作成画面に移ります。
初めての場合、「新規登録する」からアカウントを発行しましょう
アカウントを発行すると、次はドメイン設定画面に移ります。
必要な情報を埋めていくのですが、ドメインに関して詳しくない場合は下記の通り設定すれば問題ないので安心してください。
- WHOIS公開情報：弊社の情報を代理公開する
- ネームサーバー（DNS）：ムームーDNS
- ロリポップ！（ハイスピードプラン）：チェック外す
- ムームードメイン for WPホスティング：チェック外す
- ムームーメール：チェック外す
- クーポンコード：空欄
- ドメイン契約年数：1年（最低利用期間が1年）
- お支払い方法：お好きな方法を選んでください
入力が完了したら「次のステップへ」をクリックしてください。
登録内容を確認し、問題なければ「取得する」をクリック。
この画面が表示されたら、独自ドメインの取得は完了です。
Step2: Notionで公開ページを設定する
Notionで独自ドメインを割り当てるページを作成します。
つまり、公開したいページを用意します。
Notionで公開したいページを選び、画面右上の「Share」をクリックします。
下記の通り共有設定を行ってください。
- Share to web：オン（他人にシェア＝公開するか）
- Allow editing：オフ（他人にページを編集させてもよいか）
- Allow comments：オフ（他人にコメントをさせてもよいか）
- Allow duplicate as template：オン（他人にページをコピーさせても良いか） ※1
- Search engine indexing：オフ（検索エンジンに表示させるか） ※2
※1
Googleなどの検索エンジンに表示させるためには「Search engine indexing」をオンにする必要があります。
こちらは有料プラン（PERSONAL PRO）を契約している必要があるので、有料プランの方は「オン」にしましょう。
オフの場合は検索エンジンに表示されないので、URLを知らないとアクセスできません。
※2
「Allow duplicate as template」をオンにすると、他のユーザーがそのページを「テンプレート」として利用することもできます。
コピー機能だと思ってもらえればOKですが、避けたい場合はオフにします。
Step3: Cloudflareで独自ドメインを登録
Cloudflareでアカウントを作成
Cloudflare（クラウドフレア）というCDNサービスを利用し、Notionを独自ドメイン化します。
早速ですが、Cloudflare（https://dash.cloudflare.com/sign-up）にアクセスしてアカウントを作成します。
CDNとは…
CDNはコンテンツ・デリバリー・ネットワーク（Content Delivery Network）の略称で、Webサイトを高速・安定的に提供できるようにするサービスです。
Cloudflareの注意点
CloudFlareは無料で使えますが、Cloudflare側で障害が起きるとNotionの公開ページにもアクセスできなくなります。
滅多に起こることではありませんが、認識だけしておくと良いと思います。
Cloudflareにアクセスしたら、ページを日本語化するために言語設定を変更します。
画面右上の「English（US）」を「日本語」にしてください。
それからメールアドレスとパスワードをそれぞれ入力し、「アカウントを作成」をクリック。
「+ サイトを追加する」をクリック。
取得した独自ドメインを入力し、「サイトを追加」をクリックしてください。
（例：shin-hack.info）
「Free」という無料プランを選択し、「続行」をクリック。
興味がある方は「Pro」など有料プランを選択してください。
ただ、個人利用の場合は無料プランで問題ないです。
DNSレコードを追加するため、「+ レコードを追加」をクリック。
下記3項目を入力し、「保存」をクリック。
- タイプ：A
- 名前：取得した独自ドメイン
- IPv4 アドレス：1.1.1.1
レコードに情報が追加されたことを確認し、「続行」をクリック。
これでCloudflareのアカウント作成は完了です。
ネームサーバーを設定
次にドメイン取得サービス（例：ムームードメイン）上でネームサーバーを変更します。
前のStepが完了すると、「ネームサーバーを変更」という画面になります。
「4. Cloudflareのネームサーバーを追加します」にある2つの項目（赤枠）をコピーします。
このページを開いたまま、次はドメイン取得サービスのアカウントページに移動します。
今回はムームードメインを例にしています（他のサービスでも基本的に同じ流れです）。
ドメイン操作 > ネームサーバ設定変更 で取得した独自ドメインの「ネームサーバ設定変更」をクリック。
- ネームサーバ1：先程コピーした「Cloudflareのネームサーバー」の上を入力
- ネームサーバ2：先程コピーした「Cloudflareのネームサーバー」の下を入力
上記を入力したら「ネームサーバ設定変更」をクリックし、Cloudflareに戻ります。
Cloudflare上で「完了しました、ネームサーバーをチェックしてください」をクリック。
これでネームサーバーの設定は完了です。
ドメイン設定を構成
続けて、ドメイン設定をしていきます。
①セキュリティの改善 > HTTPSの自動リライト：オン
①セキュリティの改善 > 常にHTTPSを使用：オン
※通信を暗号化した「HTTPS」を利用することで、セキュリティが担保されます。
②パフォーマンスを最適化 > Auto Minify：すべてチェックマーク
※JavaScript、CSS、HTMLをそれぞれMInify＝圧縮・軽量化することで、Webサイトを早くすることができます。
②パフォーマンスを最適化 > Brotli：オン
※Brotli=圧縮アルゴリズムのことで、Webサイトのロード時間を高速化することができます。
Brotliをオンにしたら、「保存」を押してください。
設定が下記のように設定されていることを確認できたら、「終了」をクリック。
- HTTPSの自動リライト：ON
- 常にHTTPSを使用：ON
- Auto Minify：JS, CSS, HTML
- Brotli：ON
設定が反映されるまで少し待ちます。
Cloudflareのトップページをリロードし、「素晴らしいニュース！Cloudflareは現在お客様のサイトを保護しています」が表示されたら完了です。
独自ドメインを連携
設定完了までもう一息です。
最後に「Workers」という機能を使って、独自ドメインをCloudflareにデプロイします。
Cloudflareのメニュータブ「Workers」から、「Workersを管理する」をクリック。
取得した独自ドメインの「.com」や「.net」の前の部分を入力し、「続行」をクリック。
例えば「shin-hack.info」の場合、「shin-hack」と入力します。
Freeの無料プランを選択。
個人で利用するのであれば有料版は不要かと思います。
「Workerを作成」をクリック。
このようなコードの画面に移動します。
このページを開いたまま、次はFruition（https://fruitionsite.com/）にアクセスします。
Fruitionでスクリプトを生成し、その後このページに戻ります。
Step4: Fruitionでスクリプトを作成する
Fruition（フリューション）というサービスを使い、Cloudflareに登録するためのスクリプトを生成します。
Fruitionにアクセスすると、上記のようなページが表示されます。
「Get Started」という文字が見えるまで、少し下にスクロールします。
「Step2: Customize and generate the script」でスクリプトを生成します。
赤で囲った下2つの枠に下記を入力します。
- Your Domain：取得した独自ドメインを入力（例：shin-hack.info）
- Notion URL：Notionで用意した公開ページのURL（例：https://www.notion.so/shin-hack-865869652f974a91a8d6455f05d7d94c）
入力したら、「COPY THE CODE」をクリックし、スクリプトをコピーします。
その後、先程のCloudflareのコードのページに戻ります。
左側の赤枠で囲ったところに、先程コピーしたスクリプトを貼り付けます。
貼り付けたら、「保存してデプロイする」をクリック。
このような確認画面が表示されるので、もう一度「保存してデプロイする」をクリック。
画面左上の独自ドメイン名をクリックし、アカウントページに戻ってください。
上段のメニュータブから「Worker」を選び、「ルートを追加」をクリック。
下記2つの情報を入力し、ルートを追加します。
- ルート：「取得した独自ドメイン」 + 「/*」 （例：shin-hack.info/*）
- Worker：▼マークをクリックし、表示されたものを選択してください（aaaa-bbbb-1234のような英数字）
入力したら、「保存」をクリック。
Step5: NotionのURLを確認する
独自ドメインをブラウザの検索バーに入力し、Notionのページに飛ぶか確認しましょう。
上記のように独自ドメイン化されたNotionページが表示されたら成功です。
このページにたどり着いた人は、もともと「Super」を利用してNotionの独自ドメイン化を考えていた方が多いのではないでしょうか。
Superが月額料を値上げしたため、別の手段を探していた方にはCloudflareとFrutionを利用した方法が最適かと思います。
独自ドメインさえ持っていれば、無料でNotionと紐付けることが可能です。
是非試してみてください。
関連
