べくとりうむ.py Written by TicTak(※現在ブログ工事中のため、見づらい点があり申し訳ないです)

Notionページを「独自ドメイン」でホームページ化しよう【自分でLP制作もできる】

Work

こんにちは、ちくたっく(@tictak_py)です。

先日、情報管理ツール「Notion」に関する記事を書いたので、今回は独自ドメインでNotionのページ外部公開する方法を紹介していきたいと思います。

「そもそもNotionってなに?」という方は概要を把握してから読んでみてください。

僕も最初は「Notionでホームページを作成出来るの?」と思ってましたが、結構簡単に出来るんです。しかも、HTMLやCSSのコードを書く必要もないですし、WordPressのようなソフトウェアをサーバー側でインストールする作業なども不要です。

もちろん、その分見た目はシンプルになりますが、シンプルが一番と思っている方には最適な方法です。「ホームページ制作に高額な外注費用をかけたくない人」「LP(ランディングページ)を簡単に作りたい人」などは、今回紹介する方法をぜひ取り入れてみてください。

こんな方に読んで欲しい記事です

  • Notionで作成したページを独自ドメインで公開したいと考えている方
  • superを使ってNotionと連携させる方法を知りたい方

それでは「事前準備→3ステップ→最終確認」のプロセスで紹介していきます。

【事前準備】独自ドメインとsuperアカウントを用意

まずは、事前準備を進めていきましょう。

必要な手続きは、「独自ドメインの取得」と「superアカウントの登録」の2つです。

独自ドメインは、URLで表示するために必要な自分専用のアドレス(例:○○.com)です。日本では「お名前.com」や「ムームードメイン」などが有名ですが、今回は「Google Domains」でドメインを取得していくことにします。

もう一つの必要手続きが、superアカウントの取得です。Notion単体では取得したドメインでWeb公開することが出来ないため、superを利用していきます。

参考程度ですが、費用感はこんな感じです。

  • 独自ドメイン:種類によりますが、大体数千円程度
  • superアカウント:月12ドル/1サイト(たしか初回2週間くらいは無料)

好きな独自ドメインとsuperアカウントを取得した前提で、Notionページを外部公開させていきます。

【ステップ①】Notionで公開したいページを作成する

最初のステップは、外部公開させたいページをNotionで作ることです。

ページは何でもいいですが、以下のようなイメージです。

ステップ①|外部公開させたいページの作成

ページを作成したら、以下画像のように「Share to web」をオンに切り替えて、外部公開設定します。

「Share to web」をオンに切り替えて外部設定する

ステップ①はこれで完了です。
続いて、superにログインした状態で「独自ドメイン」の設定をしていきます。

【ステップ②】独自ドメインの紐づけ設定をする|super側

続いては、superにログインした状態で独自ドメインの設定をしていきます。

ログインすると、「Sites」というのがあると思うので、右側の「New site」をクリックします。

「New site」をクリック

すると、以下のようなページが出てくるので、案内に従って進めていけばOKです。
「Site Method」では2通りの方法から選べるようですが、SEOにも強い左側を今回は選択します。

Super Static側を選択して進める

「Site Settings」では、以下の3つに関する設定を進めていきます。

  1. サイト名の決定
  2. Google Domainsで取得した独自ドメインの設定
  3. 先ほど作成したNotionページのURLの設定
サイト名、独自ドメイン、Notionページなどの設定をする

続いては、「Pretty URLs」の設定になりますが、ここはNotionで生成される長いURLをカスタムしたい方向けです。そのままでも問題ないので、ここは空欄のまま次に進めていきます。

今回は空欄のままContinueで次へ

次に進むと、「DNS Records」の画面にきます。
具体的な設定自体はステップ③で進めていきますが、そのために必要な情報を取得していきます。

以下画面の中に「Google Domains」があるので、これを選択します。

Google Domainsを選択

すると、以下のような画面が出てくるはずです。

ステップ③で必要となる情報の確認

このページを開いたまま、Google DomainsにログインしてDNS設定を進めていきます。

【ステップ③】DNSレコードの設定|Google Domains側

最後のステップとして、DNSレコードの設定をしていきましょう。

詳細は知らなくても問題ありませんが、DNSは「Domain Name System」の略で、ネームサーバーとも言われるものです。IPアドレスを独自ドメインに変換するための役割を担っています。

では実際に、Google Domainsにログインして、DNSレコードの設定をしていきます。
以下画面のように、左側の「DNS」を選択し、カスタムリソースレコードという場所までスクロールしてみてください。

DNSレコードの設定画面

該当箇所を見つけたら、先ほどステップ②で得たDNS情報を上図赤枠に入力して追加していきます。

これで必要な設定はほぼ終わりです。最後に、super側に戻ってメタ情報の設定をしていきましょう。

【参考】メタ情報の設定

最後に、「Super Options」でメタ情報の設定をしていきます。

メタ情報というのは、簡単に言うと検索エンジンにサイト情報を伝えるためのHTMLタグのことを言います。

メタ情報に関する設定

メタ情報の設定自体は任意ですが、SEO対策の観点からは何かしら記入しておいた方がいいでしょう。

・右下:ここにサイト説明文を書いてきます
・左上:Google Analytics 等の設定をしたい場合に追加する項目です。詳しくはコチラ

必要な情報をすべて入力したら以下のような画面が出てきます。

完了画面の表示

あとは、設定が反映されるまで待ちましょう。

設定が反映されたら、自分が取得した独自ドメインでアクセス出来るか確認してみましょう。無事にNotionで作ったページを見ることが出来れば成功です。

さいごに

今回は、Notionで作ったページを独自ドメインで外部公開する方法を紹介してきました。

DNSなど、少しわかりにくい点もあったかもしれませんが、自分で作ったNotion ページが気軽にホームページやLP(ランディングページ)として外部公開出来るのはステキですよね。

少しでもNotionユーザーの参考になれば幸いです。