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

Notion自体の機能でWebサイト公開するか、Super, Wraptasなどのサードパーティ公開ツールを使うか？

NotionをWebサイトとして公開したい場合、公開方法の大きな分け方として以下の2つがあります。

Notion自体の機能を利用して公開する
Super, Wraptasなどのサードパーティーツールを利用して公開する

まず、Notion自体の機能を利用して公開する方法についてご紹介していきます。

Notion自体の機能でページを公開

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

Publish Notion pages to the web

Public pages & web publishing

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

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

独自ドメインで公開したい場合にはCloudFlareなどのCDNを介する必要あり

Notionページをそのまま公開する場合の注意点として、公開時にNotionドメイン(URL)となってしまう点が挙げられます。

ただしこの点は、CloudFlareなどのCDNを介することで独自ドメインで公開することで解決可能。（ひと手間かかります）

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

Notion自体でサイト公開した場合、検索画面にインデックスさせるには$4/月の有料プランに加入する必要あり

Notionページは無料プランのままだと、本体機能によりWebサイトとして公開した場合でも検索結果に表示されることがありません。これは無料プランにおいてはGoogleからのインデックスを拒否する設定となってしまうためです。

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

Pricing – Notion

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

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

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

実際には検索表示させたい場合が多いでしょうから、Personal Proプランの月額$4の料金を想定することになるでしょう。

外部公開しない会員制サイトであれば、Notionそのままが便利

外部一般公開せず検索インデックスが必要ない、内輪メンバー・社内メンバー向けのみの会員制Webサイトを作る場合、Notionをそのまま会員制サイトとすることで十分かもしれません。

Notionを会員制サイトとして利用。非公開・一般公開の2つの方法

Notionについて参考記事一覧:

📚

Notion

Super, Wraptasなどのサードパーティーツールを介してNotionをWebサイトとして公開する

続いて、サードパーティーツールを介してNotionをWebサイトとして公開する方法。長くサービス運営されかつ多くのユーザーがついているものに”Super”（英語・海外）と “Wraptas”（日本のサービス）の2つがあります。

Notionをサイト化するサードパーティーツールは有料のものがほとんどだったのですが、"Super"において、2021年6月のアップデートにより無料プランが誕生しました。

Notion自体を必要最低限で公開させ、検索画面にも表示させたい場合にはNotionの無料プラン×Superの無料プランを利用すれば完全無料で可能となっています。

分け方として、シンプルな運用としたい場合にはNotion純正での有料プラン、とにかく無料でサイト形式で公開したいという場合にはNotion × Super無料プラン、高いSEO効果や柔軟なカスタマイズを求める場合にはNotion × 有料サードパーティー、という分け方が良いでしょう。

また、Super, Wraptasなどの各サードパーティ製アプリの場合、いずれも有料プランにて独自ドメインの設定が可能です。

ただしサードパーティ製アプリを介した場合、Notion純正で公開する場合とは異なり、コメント機能はそのままでは実装されません。

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

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

SuperとWraptasがそれぞれ主張している機能・特徴の概要

以下からは、サードパーティ製アプリで有力なSuperとWraptasについて、それぞれ解説していきます。

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>タグに任意のコードや文字列を追加可能
用意された欧文フォントを選択して適用可能

ページ単位で下書き・非公開設定が可能（Manual Publishing） 2022/11/11追加

ただし、本機能を利用するにはProプラン（月額$28）に契約することが必要

Superに関する参考記事一覧:

⚡

Super.so

Superは2021年6月にSuper 2.0として大型アップデートが行われ、大きくパワーアップしたようです。

Super 2.0 - Build websites with the simplicity of Notion | Product Hunt

SuperはURL同期機能がうまく働かず、不具合がでる可能性も

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

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

下記に、SuperにおけるURL運用においての回避策・代替方法を記載しました。

参考:

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

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

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

Wraptas(旧Anotion) が訴求している機能・特徴の概要

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

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

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

かんたんにSNSシェアボタンの導入が可能
1サイトにつき月額1,078円（税込）

WraptasはSuperのプリティURL（URL同期）方式とは異なり、特に設定をしなければURLは独自ドメイン/Notion UUID（NotionのページID）が振り分けられます。

UUID方式のほうがページタイトルが日本語でも不具合が起こりにくいので、SuperもUUID方式に対応してほしいところ…！

以下から、SuperとWraptasのそれぞれについて、実際に一定期間触っての感想を記載します。

Superを利用してみて感じた特徴・感想を詳細に

まずはSuperから詳細を記載。

Superを利用してみた感想

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

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

ページ単位でのパスワード保護機能あり
デザインの触りやすさよりは機能・SEOを優先している印象

ただデザインもSuperによるテンプレートが素晴らしい。 Webサイト用の有料・無料テーマテンプレートが数多く公開されています。
自身でCSS・JSを記述することでデザインはカスタマイズ可能です。

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

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

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

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

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

無料プランあり

上記のほかにも、下記のようなユーザーの声がありました。

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

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

Superは高速表示・SEO面で定評がある

特にWebサイト高速表示は近年、テクニカルSEO面で強く言われていることです。Page Speed Insightsの実測データ: フィールドデータでLCP, FID, CLSの各3つの項目（Core Web Vital）をクリアさせることが重要ですが、その際に最もネックになるのがサイトの表示速度（最大コンテンツの描画速度: LCP）でしょう。

Superを利用している本サイトにおいても、Google Page Speed Insights においてLCP・FID・CLSの項目すべてがグリーンになっていることが分かります。

本サイトTOPページのフィールドデータ数値

フィールドデータ改善はSuperなどのインフラ要素だけでなく、大きすぎる画像を（特に最初に）配置しない、画像のサイズ・数を減らすなど、コンテンツやページ構成も影響しています。

もしSuperで上記フィールドデータにおけるCore Web Vital各数値がグリーンにならないという場合、コンテンツ・ページ構成を見直してみるのが良いでしょう。少なくとも、Super側に低速になる要因はないと思われます。

フィールドデータの下にはパフォーマンスが表示され、〇〇点のスコアが表示されますが、これは米国サーバー計測による「改善余地」を示しているだけでSEO上の直接影響はありません。

ただし、SuperもSEOにおいて完璧という訳にはいきません。何と比べるか？によりますが、たとえばWordPressと比べてしまうとプラグイン等SEOのエコシステムが揃っているWordPressよりは見劣りします。

WordPressとのSEO比較記事:

Super.so × NotionブログのデメリットとテクニカルSEO面2つの不満

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をSuper.soで公開したときのタイトル・meta初期設定について

Superに関する関連記事一覧:

⚡

Super.so

Super.soにはRSSフィード機能は搭載されていない

本記事をお読みになった方からDMにて教えていただきました。

Super.soにはRSSフィード機能が搭載されていないため、たとえば企業サイトのフロントをSTUDIOで構築し、お知らせなどの更新記事部分のみSuperで更新したものをRSSフィードで反映させる、といった使い方は現時点では出来ないようです。

Questions: RSS Feed for Blog | Super Community

対するWraptasはRSSフィード標準搭載。

フィード(RSS Feed)を設置したい | Wraptas

Wraptasについて触ってみた感想・特徴を詳細に

触ってみてのWraptasの特徴を詳細に

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

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

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

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

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

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

料金がSuper（$12）より若干安い（税込1,078円）。ただし為替の状態にもよる。
RSSフィードが搭載されている

フィード(RSS Feed)を設置したい | Wraptas

Wraptas契約ユーザーの声

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

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

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

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

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

参考:

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

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

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

コーディングせずにカスタマイズをしたい、日本語による分かりやすいマニュアル・サポートを受けたい場合はWraptasがおすすめ

下記Anotion = Wraptasと読み替えてお読みください。

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

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

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

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

英語に抵抗がある方や、Webの知識や設定について自信がない方はWraptasのほうが安心かもしれません。

たとえば、下記の場合にはSuperよりもWraptasが第一選択になるでしょう。

サイト高速表示に特にこだわりがない（Wraptasも十分に高速という話もききます）
日本のサイトデザインっぽくサイト公開したい
Notionから記事を公開するときにいちいち管理画面は触りたくない
CSS・JSなどのコーディングを行うことなくヘッダー・フッターのカスタマイズをしたい（コーディングによるカスタマイズも可）
マニュアル・操作方法を日本語で確認したい
手厚いサポート・親身なコミュニティでサイト運営の疑問を解決していきたい

Wraptasに関するほかユーザーの声: anotionを1日使ってみて思ったこと

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

ほかにもある。Notionを利用してWebサイトとして公開させるサードパーティ製アプリ

Simple.ink

Notion Website Maker: Create A Free Website Built In Notion

We're a completely bootstrapped, fiercely independent company. We're funding this with the revenue we make from customers. That's it. No VCs, no investors, or any other people decide the direction of Simple.ink - besides you and us. We're trying our best to make Simple.ink better day by day, without losing our way, just like many products out there have done.