株式会社TEMPのロゴ画像

Notion sites(Notionサイト)で独自ドメインを付けたWebサイトを作る方法

Notion の Web 公開機能が2024年6月に「Notion サイト(Notion Sites)」としてアップデートされました。このアップデートにより、独自ドメインの反映・OGP の設定・ライトモード / ダークモードの固定など、今までよりも柔軟な設定が可能になりました。

本記事では、Notion サイトのアップデート内容や変更点を解説します。

この記事でわかること

  • Notion サイトのアップデート内容
  • Notion サイトの料金
  • Notion サイトでできないこと

サイトのカスタマイズ

Web 公開設定画面に「サイトのカスタマイズ」が追加

Notion ページの「Web 公開設定」→「サイトのカスタマイズ」という項目が追加されました。

Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

今までこの部分に表示されていた「テンプレートとして複製を許可」などの項目は、すべて「サイトのカスタマイズ」内に設定箇所が変更となっています。

OGP 画像の設定・共有プレビュー

X(Twitter)や LINE などで Notion ページを共有した際に表示される画像(OGP 画像)のアップロードができるようになりました。

💡

特にカスタマイズを行わない場合の見た目も、ページのアイコンが表示されるようになり、見やすくなりました。

ライトモード・ダークモードの選択

テーマを固定可能に

ライトモードとダークモードを自由に選べるようになりました。ユーザーのシステムに合わせるシステム設定も選択できます。これにより、サイトの印象をコントロールしやすくなり、ユーザーの環境に依存せずにデザインを統一できます。

ファビコンの設定

ファビコンのアップロード

ファビコン(ブラウザのタブやブックマークしたときに表示されるアイコン)がアップロードできるようになりました。アップロードしない場合、Notion ページに設定しているアイコンがファビコンとなります。Notion ページに設定しているアイコンがない場合は Notion ロゴとなります。

Google Analytics の導入

Google Analytics 設定画面

Google Analytics でのアクセス解析が可能になりました。「G-」で始まる Google タグ ID を入力することで簡単に導入できます。

測定 ID は Google Analytics の設定画面から取得可能

ヘッダーのカスタマイズ

ヘッダー部分のカスタマイズが今までよりも柔軟に行えるようになりました。「テンプレートとして複製」の項目は、従来の箇所からは非表示となり、ヘッダー設定内に移動しています。

新しくカスタマイズ可能になった項目を解説していきます。

「Notion で構築」 の非表示

Notion ロゴの非表示設定

公開ページの右上に表示される「サイトのカスタマイズ」→「ヘッダー」から、「Notion で構築」「Built with Notion」を非表示にできるようになりました。こちらはカスタムドメイン使用時のみ設定可能。カスタムドメインを設定するには別途料金が必要です(後述)

テンプレートとして複製

テンプレートとして複製

元々あった「テンプレートとして複製」が「サイトのカスタマイズ」→「ヘッダー」と、奥まった位置に移動しました。こちらはフリープランでも設定変更が可能です。

ページリンク

ページリンクの設定
ページリンクの設定

ヘッダー部分に、公開ページの子ページへのリンクを表示できるようになりました。ページを追加ボタンをクリックすると、子ページの一覧が表示され、選択した子ページをヘッダーにナビゲーションとして表示させることが可能になります。

階層リンク・検索

階層リンク・検索の切り替え

その他、ヘッダーに表示される階層リンクや検索も表示の切り替えが可能になりました。

検索設定・SEO プレビュー

検索設定・SEO プレビュー画面

「Web 上で検索可能にする」の項目を ON にすることで、Google などの検索エンジンでのタイトル・ディスクリプションを入力して変更することができるようになりました。こちらはプラスプラン以上限定の機能ですが、フリープランでも「ネット検索を許可」自体は引き続き利用可能です。

Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

タイトル(title)と説明(description)は、必ずしも Google の検索結果に反映されるとは限らない点に注意しましょう。ページの内容とあまりにも乖離がある内容だと、Google 側が変更を加える可能性があります。

ドメイン設定関連

カスタムドメイン(独自ドメイン)が使用可能に

カスタムドメインで Web ページが公開できるようになりました。通常、公開ページの URL は xxx.notion.site という形式になりますが、今回のアップデートで自分が所有しているドメインを自由に割り当てることができるようになりました。

独自ドメイン設定方法(限定動画)

Notion ドメイン

フリープランは1つ、プラスプラン以上は5つまでの「notion.site」ドメインをカスタマイズしてサブドメインを利用できます。他の方が利用していないサブドメインに限り、 xxx.notion.site の xxx の部分を取得することが可能となります。

ホームページ設定

Notion 設定の「サイト」から、公開ページの確認や「ホームページ設定」ができます。ホームページを設定することで、ページ ID を含まないスッキリとした公開 URL にすることも可能です。

Notion サイトの料金

今回のアップデートで追加された内容は、 プラスプラン以上の有料プラン限定 の機能になっています。また、カスタムドメインを設定するにはさらに追加料金が必要になります。

月払い 年払い 備考
プラスプラン $12 / 月 $10 / 月 ・カスタムドメイン以外の Notion サイト機能が利用可能に
カスタムドメイン $10 / 月 $8 / 月 ・プラスプランが必要
・1ドメインごとに必要
・別途ドメイン契約料金
・Notion ロゴの非表示が可能に
Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

カスタムドメインを使いたい場合、最低でも月額18ドル + ドメイン契約料金が必要になってきます。

フリープランで使える Notion サイト機能

今回追加されたのはすべてプラスプラン以上限定の機能ですが、フリープランでも以下の通り Notion で Web ページの公開をすることができます。基本的な機能はフリープランでも十分使用可能です

  • Notion サイトの公開数は無制限
  • 「notion.site」サブドメインを1つをカスタム可能
  • 「ネット検索を許可」の有効化・無効化
  • 「テンプレートとして複製」の有効化・無効化

Notion サイトでできないこと

カスタム CSS でのページデザイン変更

カスタム CSS 等によるページデザインの細かいカスタマイズはできません。Notion を使いつつ、デザインにもこだわりたい場合は Wraptas などの外部サービスを利用するのが良さそうです。

Wraptas は独自ドメイン・パスワード保護・カスタム CSS など豊富な機能が準備されており、月額980円から使用可能です。

よくある質問

カスタム HTML や JavaScript の埋め込みはできますか?

現状ではできません。Wraptas を使うことで可能です。

ヘッダー部分に外部ページのリンクを載せることはできますか?

こちらも現状ではできません。

TEMP ブログでよく読まれている記事

もっと Notion を学びたい方へ

初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」を運営しています。会員数は現在300名以上。

  • 分からないことは24時間チャットツールでいつでも質問できる
  • コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
  • 1から学べる Notion 学習ロードマップで初心者からでも学習可能
  • Notion 大学限定の学習動画が100本以上
  • 定期的に開催している有料セミナーへの無料参加券
  • 過去の有料記事・有料テンプレートが全て閲覧可能
コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。

この記事の執筆者

ひのりくのアイコン画像

ひのりく

フリーランス。漫画・イラスト・ゲーム・3D モデリング・DTP など幅広いクリエイティブ業務を請け負う。Notion API を使うために覚えたプログラミングや Notion で個人の業務を効率化している。

Twitter

この記事の監修者

円谷のアイコン画像

円谷

Notion 公式アンバサダー(2021年〜 / 日本で7人目)。アンバサダーとして YouTube や Twitter で発信活動をおこなっている。本業は Web エンジニア。個人で Notion API を使ったアプリケーションを開発中。代表作は Fast Notion。株式会社 TEMP 代表取締役。

Twitter / YouTube