Notionをwebサイトとして公開する方法 : SuperとWraptas（Anotion）

Notionをウェブサイトとして公開する方法

Notion自体の機能で公開

Notionそのものにも、公開・非公開の切り分け・公開機能(シェア機能)は備わっている

Publish Notion pages to the web

Public pages & web publishing

また、見た目だけをWebサイト風にデザインしたいのであれば、Notion Template Galleryにいくつかテンプレートがあり、こちらを無料で利用できる。

Notion Template Gallery

ただしNotion自体の機能だけで公開した場合、レスポンシブ設定がうまく効かないことが多い。

ただし、そのまま公開するだけだと公開時にはNotionアカウントに割り当てられた、Notionドメイン(URL)となってしまう。

CloudFlareなどのCDNを介することで独自ドメインで公開することができる。

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

ただし、検索可能な状態としてGoogleにインデックスさせるには、Notionの有料プラン(Personal Pro $4/月)に加入する必要あり

Googleなどの検索エンジンに表示させるためには「Search engine indexing」をオンにする必要があります。こちらは有料プラン（PERSONAL PRO）を契約している必要があるので、有料プランの方は「オン」にしましょう。オフの場合は検索エンジンに表示されないので、URLを知らないとアクセスできません。

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

Personal Proプランは$4 per month

Pricing – Notion

必要最低限の機能で公開させたい、ということならNotion自体の機能で無料で可能。

実際には検索表示させたい場合が多いだろうから、Personal Proプランの月額$4の料金。

また、後述する"Super"は2021年6月のアップデートにより、無料プランが誕生。

Notion自体を必要最低限で公開させ、検索画面にも表示させたい場合にはNotionの無料プラン×Superの無料プランで対応可能に。

サードパーティ製アプリを介して公開

いずれも有料プランにて、独自ドメインの設定が可能。

ただしサードパーティ製アプリを介した場合、コメントさせることは不可。

Notion自体の機能で公開する場合、デフォルトでコメント機能あり。

ただしコメントするにはGoogleアカウント等によるログインが必用。一般的なブログに対するコメントに比べると訪問者にとってややハードルは高そう。

下記どちらも基本的なテーマテンプレートはNotionのテンプレートを利用することで、サイトデザインの大枠を作っていくイメージ。

SuperにはWebサイト用のテーマテンプレートが数多く公開されている。有料・無料のものがある。

[Super — Market](https://super.so/market)

Super

Super — Build websites with Notion

公開ページを静的化。高速表示が可能
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 2.0 - Build websites with the simplicity of Notion | Product Hunt

ただし、Superは現時点ではURL同期が日本語タイトルから上手く働かず、URLが重複となり表示に不具合がでるなど、日本語環境での利用は難しいようです。

Super側で個別にURLを登録・対応していくなら利用はできますが、Notionで1ページ追加するたびにSuperで操作を行うのは面倒だなと感じます。

参考:

Super.soの日本語タイトルによるプリティーURL同期の不具合を回避する方法

私のほうでもSuperサポートフォーラムにWishlistとしてチケットを上げましたが、いつ解決されるかは明示されず開発ロードマップにもありません。

Sync URLs with Notion UUID (because of Japanese titles) | Super Community

Wraptas(旧Anotion)

Notionに書くだけでWebサイトが作れるWraptas

Notion連携のための国産サードパーティ製アプリ。日本語。
CSSの書き方まで教えてくれるなど、サポートが手厚い
デザイン面の実装が比較的やりやすい

オリジナルヘッダー・オリジナルフッターを挿入・カスタマイズできる

1サイトにつき月額1,078円（税込）

SuperとWraptasの違い・差は？（詳細）

SuperとWraptas、どちらも実際に一定期間触っての感想です。

Superの特徴

高速表示が可能
URLにおいて、サイトの階層化が可能

たとえば間に一覧ページ等がある場合、URL.com/contents/page のように階層化できる

ページ単位でのパスワード保護機能あり
デザインというより機能に特化している印象

デザインもSuperによるテンプレートが素晴らしい

CSSカスタマイズを同一画面で反映画面を見ながらライブプレビュー可能

カスタマイズした箇所が即座に反映されるので、コードを利用したカスタマイズがやりやすい

Super 2.0になっても、たまに挙動が安定しない

ライブプレビューが反映されないときがある
Sync Pages機能が動作せず、公式がうたっている「自動的にURLを割り振る」機能が動作しないというエラーに見舞われた

日本語タイトルから上手くURLに反映できないことが原因

無料プランあり

Wraptasの特徴

国産・日本語対応。フォーラムも活発なようでサポートが受けやすい
デザイン設定のしやすさはWraptasのほうが高そう？

たとえば、オリジナルヘッダー・フッター機能はSuperにはない

ライブプレビューは同一画面ではなく、別途ウインドウが立ち上がる形

プレビュー反映にタイムラグが生じる場合がある

高速表示は特にうたっていない

言及はないものの、最近のアップデートで「独自ドメイン接続を行うことで高速表示されるようになった」との情報あり
(4) Notionを使えばWeb制作もできちゃう - AnotionとNotionの使い方 - YouTube

料金がSuper（$12）より若干安い（税込1,078円）。ただし為替の状態にもよる。

Superについて詳細

Super は有料サービスとなりますが、独自ドメインを割り当ててくれるだけでなく、 ✈️Notion の公開ページを独自に静的化して高速ロードを可能にする ⏱Analytics スクリプトを挿入可能 🤟任意の Google Font を適用できる 💪将来的な機能強化 🔧SEO に配慮した meta タグを追加可能 🌐下層ページに任意のページ名を割り当てられる 🙌メンテナンスフリー 😀Notion 用独自アイコンセットを提供してくれます。

Notion をウェブサイトとして運用してみようじゃないか

MemberSpaceとSuperを連携させ、会員制サイトとして運用することも可能

MemberSpace - Turn any part of your website into members-only with just a few clicks

How to Build a Notion Membership Site

NotionとSuperを連携させてWebサイトとして公開させる手順・方法リンク

NotionとSuperを使ってたった15分でWebサイトをつくる方法メモ

Superを使ってNotionで独自ドメインの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リダイレクトを設置すると良いでしょう。

5分で分かるcanonicalタグとは？URL正規化を知らないと評価が落ちる | PINTO! by PLAN-B

canonical（カノニカル）でURLの正規化をしよう！canonicalタグの必要性と活用方法｜アクセス解析ツール「AIアナリスト」ブログ

JavaScript挿入したrel=canonicalをGoogleは処理できる | 海外SEO情報ブログ

meta refreshによる転送（リダイレクト）を行う方法と注意点 | SEO研究所サクラサクラボ

NotionをSuperで公開したときのタイトル・meta初期設定について

Wraptasについて詳細

Wraptas契約ユーザーの声

スタタイは現在Anotionを使って運用しているのですが、それ以前は半年ほどSuperを使っていました。解約した1番の理由は、まったくアップデートされないことです。正確には、いつになるか聞いてみても「数週間以内に」「すぐに」というあいまいな答えは返ってくるものの一向に実装されないことに不満を感じていたからです。

海外のサービスなので少々のコミュニケーションの齟齬は仕方ないと思ってはいたのですが、他にも複数の方が同じような問題に困られていて、しかし代替手段がないから仕方なく使っているという状態だったように思います。他にも若干バグが起こりがちだったり、サポート体制が万全でなかったりしたため、Anotionに移行することにしました。

Anotion × NotionでWebサイトを公開する方法

たしかに、実際Superを利用していてバグのような事象に遭遇しました。

私が遭遇したバグはURL自動生成機能に起因するもので、Super側では日本語タイトルから自動URL生成する機能に対応しておらず、当面はSuper実装されることがなさそうです。

参考:

Super.soの日本語タイトルによるプリティーURL同期の不具合を回避する方法

Superのサポート体制は改善されつつあり（おそらくCSメンバーが着任した）、コミュニケーションに関しては問題なく可能です。

ただしサポートのリソースが限られているでしょうから、サポート対応について細かなものは望めないでしょう。

Anotionは日本の方が運営されているサービスなので、私たち日本人にとっては非常にコミュニケーションがとりやすいですし、分からないことがあればDiscordグループで質問すればすぐにお答えいただけます。しかも質問した内容がニーズの高いものだったり、あまりに複雑なものでもなければすぐに実装していただけるというスピードも感動ものです。おまけに200円ほど月額料金が安いのも嬉しいです。

SuperやAnotionのようなサービスの特徴として、ただNotionに独自ドメインを付与するだけではなく、HTMLとCSSを追加することができます。Anotionでは、自分の実現したいデザインを運営にお伝えするとご丁寧にCSSを教えてくださったりするので、Notionで運用しつつもデザインも綺麗なサイトを運営したい、という方にはAnotionはうってつけのサービスだと思います。

Anotion × NotionでWebサイトを公開する方法

やはりAnotion最大の魅力は、「サポート体制」および「コミュニティ」にありそうです。

英語があまり得意ではない、Webの知識や設定について自信がない方はAnotionのほうが安心かもしれません。

ほかユーザーの声

anotionを1日使ってみて思ったこと

私の場合

WordPressブログをNotion製Webサイトに移行することにしました | まほウェブ