Notionをウェブサイトとして公開する方法
Notion自体の機能で公開
Notionそのものにも、公開・非公開の切り分け・公開機能(シェア機能)は備わっている
また、見た目だけをWebサイト風にデザインしたいのであれば、Notion Template Galleryにいくつかテンプレートがあり、こちらを無料で利用できる。
ただしNotion自体の機能だけで公開した場合、レスポンシブ設定がうまく効かないことが多い。
ただし、そのまま公開するだけだと公開時にはNotionアカウントに割り当てられた、Notionドメイン(URL)となってしまう。
CloudFlareなどのCDNを介することで独自ドメインで公開することができる。
ただし、検索可能な状態としてGoogleにインデックスさせるには、Notionの有料プラン(Personal Pro $4/月)に加入する必要あり
Googleなどの検索エンジンに表示させるためには「Search engine indexing」をオンにする必要があります。 こちらは有料プラン（PERSONAL PRO）を契約している必要があるので、有料プランの方は「オン」にしましょう。 オフの場合は検索エンジンに表示されないので、URLを知らないとアクセスできません。
Personal Proプランは$4 per month
必要最低限の機能で公開させたい、ということならNotion自体の機能で無料で可能。
実際には検索表示させたい場合が多いだろうから、Personal Proプランの月額$4の料金。
また、後述する"Super"は2021年6月のアップデートにより、無料プランが誕生。
Notion自体を必要最低限で公開させ、検索画面にも表示させたい場合にはNotionの無料プラン×Superの無料プランで対応可能に。
サードパーティ製アプリを介して公開
いずれも有料プランにて、独自ドメインの設定が可能。
ただしサードパーティ製アプリを介した場合、コメントさせることは不可。
Notion自体の機能で公開する場合、デフォルトでコメント機能あり。
ただしコメントするにはGoogleアカウント等によるログインが必用。一般的なブログに対するコメントに比べると訪問者にとってややハードルは高そう。
下記どちらも基本的なテーマテンプレートはNotionのテンプレートを利用することで、サイトデザインの大枠を作っていくイメージ。
SuperにはWebサイト用のテーマテンプレートが数多く公開されている。有料・無料のものがある。
[Super — Market](https://super.so/market)
Super
- 公開ページを静的化。高速表示が可能
- Analyticsスクリプトの挿入が可能。アクセス解析ができるように
- SEOに配慮したmetaタグを設置可能
- URLがページタイトルから自動で生成される
- ただし、タイトルに英字が含まれる場合のみ。英字部分を拾って自動的にURLにしてくれる
- パンくずリストの自動生成・設置
- XML sitemapの自動生成
- 公式などでは特に情報を発見できませんでしたが、公開URL/sitemap.xmlにアクセスするとサイトマップの存在を確認できます。
- （XMLサイトマップをSearch Consoleに登録したほうが良い・しない方が良いには争いがありますが、サイト立ち上げ当初はインデックスを加速させる効果があると思うので、基本的にはサイトマップは登録したほうが良い派です。）
- ページ単位でパスワード保護が可能
- 1サイト公開につき月額$12
- 2021年6月から無料プランもあり。無料プラン内でも下記のことができる。
- Superが付与するTLD、 .super.siteでの公開。任意のドメイン名をつけることができる。
- 独自ドメインを利用したい場合には有料プラン
- サイト内検索機能の追加
- Global Site Codeとして、<head>タグ、<body>タグ直下、<style>タグに任意のコードや文字列を追加可能
- 用意された欧文フォントを選択して適用可能
Superは2021年6月にSuper 2.0として大型アップデートが行われ、大きくパワーアップしたようです。
ただし、Superは現時点ではURL同期が日本語タイトルから上手く働かず、URLが重複となり表示に不具合がでるなど、日本語環境での利用は難しいようです。
Super側で個別にURLを登録・対応していくなら利用はできますが、Notionで1ページ追加するたびにSuperで操作を行うのは面倒だなと感じます。
私のほうでもSuperサポートフォーラムにWishlistとしてチケットを上げましたが、いつ解決されるかは明示されず開発ロードマップにもありません。
Wraptas(旧Anotion)
- Notion連携のための国産サードパーティ製アプリ。日本語。
- CSSの書き方まで教えてくれるなど、サポートが手厚い
- デザイン面の実装が比較的やりやすい
- オリジナルヘッダー・オリジナルフッターを挿入・カスタマイズできる
- 1サイトにつき月額1,078円（税込）
SuperとWraptasの違い・差は？（詳細）
SuperとWraptas、どちらも実際に一定期間触っての感想です。
Super
- 高速表示が可能
- URLにおいて、サイトの階層化が可能
- たとえば間に一覧ページ等がある場合、URL.com/contents/page のように階層化できる
- ページ単位でのパスワード保護機能あり
- デザインというより機能に特化している印象
- デザインもSuperによるテンプレートが素晴らしい
- CSSカスタマイズを同一画面で反映画面を見ながらライブプレビュー可能
- カスタマイズした箇所が即座に反映されるので、コードを利用したカスタマイズがやりやすい
- Super 2.0になっても、たまに挙動が安定しない
- ライブプレビューが反映されないときがある
- Sync Pages機能が動作せず、公式がうたっている「自動的にURLを割り振る」機能が動作しないというエラーに見舞われた
- 無料プランあり
Wraptas
- 国産・日本語対応。フォーラムも活発なようでサポートが受けやすい
- デザイン設定のしやすさはWraptasのほうが高そう？
- たとえば、オリジナルヘッダー・フッター機能はSuperにはない
- ライブプレビューは同一画面ではなく、別途ウインドウが立ち上がる形
- プレビュー反映にタイムラグが生じる場合がある
- 高速表示は特にうたっていない
- 言及はないものの、最近のアップデートで「独自ドメイン接続を行うことで高速表示されるようになった」との情報あり
- (4) Notionを使えばWeb制作もできちゃう - AnotionとNotionの使い方 - YouTube
- 料金がSuper（$12）より若干安い（税込1,078円）。ただし為替の状態にもよる。
Superについて
Super は有料サービスとなりますが、独自ドメインを割り当ててくれるだけでなく、 ✈️Notion の公開ページを独自に静的化して高速ロードを可能にする ⏱Analytics スクリプトを挿入可能 🤟任意の Google Font を適用できる 💪将来的な機能強化 🔧SEO に配慮した meta タグを追加可能 🌐下層ページに任意のページ名を割り当てられる 🙌メンテナンスフリー 😀Notion 用独自アイコンセット を提供してくれます。
MemberSpaceとSuperを連携させ、会員制サイトとして運用することも可能
NotionとSuperを連携させてWebサイトとして公開させる手順・方法リンク
NotionとSuperを使って爆速でWebサイトを公開する
上の記事では、Superで作った場合にはLighthouseスコア98点。
Speed Indexは1.3秒、LCPとCLSの基準も満たしており、悪くなさそう。
Superではサイト全体、およびページ単位でのカスタマイズにも対応。
Headタグ、Bodyタグ直下、CSSをそれぞれカスタマイズできます。
NotionをWordPressブログの下書きとして利用、本稿の前にとりあえずの形で公開する場合などには、重複コンテンツとしてGoogleに認識されることを防ぐ必要があります。WordPressでの本稿公開後にSuper側でページ単位でHeadタグ内にcanonicalタグまたは301リダイレクトを設置すると良いでしょう。
Wraptasについて
Wraptas契約ユーザーの声
スタタイは現在Anotionを使って運用しているのですが、それ以前は半年ほどSuperを使っていました。 解約した1番の理由は、まったくアップデートされないことです。正確には、いつになるか聞いてみても「数週間以内に」「すぐに」というあいまいな答えは返ってくるものの一向に実装されないことに不満を感じていたからです。
海外のサービスなので少々のコミュニケーションの齟齬は仕方ないと思ってはいたのですが、他にも複数の方が同じような問題に困られていて、しかし代替手段がないから仕方なく使っているという状態だったように思います。 他にも若干バグが起こりがちだったり、サポート体制が万全でなかったりしたため、Anotionに移行することにしました。
たしかに、実際Superを利用していてバグのような事象に遭遇しました。
Superのサポート体制は改善されつつあり（おそらくCSメンバーが着任した）、コミュニケーションに関しては問題なく可能です。ただリソースが限られているだろうことから、サポート対応については細かなものは望めないでしょう。
Anotionは日本の方が運営されているサービスなので、私たち日本人にとっては非常にコミュニケーションがとりやすいですし、分からないことがあればDiscordグループで質問すればすぐにお答えいただけます。しかも質問した内容がニーズの高いものだったり、あまりに複雑なものでもなければすぐに実装していただけるというスピードも感動ものです。おまけに200円ほど月額料金が安いのも嬉しいです。
SuperやAnotionのようなサービスの特徴として、ただNotionに独自ドメインを付与するだけではなく、HTMLとCSSを追加することができます。Anotionでは、自分の実現したいデザインを運営にお伝えするとご丁寧にCSSを教えてくださったりするので、Notionで運用しつつもデザインも綺麗なサイトを運営したい、という方にはAnotionはうってつけのサービスだと思います。
やはりAnotion最大の魅力は、「サポート体制」および「コミュニティ」にありそうです。
英語が得意ではない方、Webの知識についてあまり詳しくない方はAnotionのほうが安心かもしれません。
ほかユーザーの声
私の場合
ほかにもある。Notionを利用してWebサイトとして公開させるサードパーティ製アプリ
Notion blog
notion2site
Next.js製でGitHubに公開されている。
Hostnotion
極めてシンプルな機能のみ。独自ドメイン接続と高速化、アクセス解析の設置やカスタムフォント機能。CSSを操作したりはできなさそう。
月額$5という格安がウリ。
Notelet
シンプルな機能だが、一連のことはできる。redditの投稿でも書かれていたが、"Superと何が違うのか？"が不明。
表示スピードが違う、とのコメントもあったが現在のsuper 2.0では表示速度も大いに改善されている。
Noteletは基本的にはSuperの廉価版というイメージ。
月額$7で利用可能。
No Code Pages
現在ではサービスをクローズしたとのこと。利用不可。
その他について参考: 【プログラミング不要】Notionをブログとして公開する方法を徹底解説