NotionをWebサイト化できる連携サービス10選

今回はNotionを使って簡単にWebサイトを作成できるサービスを 10個 紹介します。

Notionには作成したページをWebページとして公開する機能があります。この機能を使えば自分の作成したNotionのページを他の人に簡単に見てもらうことができます。

この機能はとても素晴らしいのですが、以下のような点で少し物足りないと思う方もいるのではないでしょうか。

• 独自ドメインをつけたい
• 見た目をカスタマイズしたい（ CSSを使いたい）
• Notionでは対応していない外部サービスを埋め込みたい（インスタなど）
• 検索結果の上位に表示されるように対応したい（SEO対策をしたい）
• Google Analyticsなどでアクセス解析をしたい
• ページ内検索機能をつけたい
• 一部のページにパスワードでロックをかけたい
• コメント機能をつけたい
• SEOを強くしたい

上記のような機能は、サードパーティ製の連携サービスを使用することで簡単に実現することができます。今回は、Notionのページを簡単にwebサイト化して、様々な機能を付けることができるサービスを 実際に10個使った上で紹介します。

記事の最後には、それぞれのサービスのプランの比較、細かい機能の特徴などを比較した比較表をスプレッドシートで配布します。企業でwebサイトの構築を検討している方、個人でポートフォリオやブログを作ろうと思っている方など、ぜひ参考にしてみてください。

参考：SEOとは？SEO対策完全ガイド｜東京SEOメーカー｜英語圏やアジア圏などの海外SEOにも強いSEOコンサルティング会社

目次

• 1. Wraptas
• 1-1. 管理画面
• 1-2. 導入事例
• 1-3. 特徴まとめ
• 2. Super
• 2-1. 管理画面
• 2-2. 導入事例
• 2-3. 特徴まとめ
• 3. Popsy
• 3-1. 管理画面
• 3-2. 導入事例
• 3-3. 特徴まとめ
• 4. Potion
• 4-1. 管理画面
• 4-2. 特徴まとめ
• 5. Simple.ink
• 5-1. 管理画面
• 5-2. 導入事例
• 5-3. 特徴まとめ
• 6. HelpKit
• 6-1. 管理画面
• 6-2. 導入事例
• 6-3. 特徴まとめ
• 7. Notaku
• 7-1. 管理画面
• 7-2. 導入事例
• 7-3. 特徴まとめ
• 8. feather
• 8-1. 管理画面
• 8-2. 特徴まとめ
• 9. Fruition
• 9-1. 導入事例
• 9-2. 特徴まとめ
• 10. STUDIO
• 10-1. 導入事例
• 10-2. 特徴まとめ
• おわりに（比較表配布）

1. Wraptas

Wraptasは日本製のサービスで、Notionのページを簡単にWebページに変換してくれます。また、管理画面からデザインの変更も簡単にできたり、CSSを使ってちょっと凝ったデザインも実現することができます。日本製のサービスなので、ドキュメントが全て日本語で読みやすく、Wraptas公式の使い方ガイドや ヘルプ・よくある質問がとても充実しており、公式ページを見るだけで詰まることなくWebサイトを作ることができると思います。また、WraptasユーザーのDiscordコミュニティがあり、例えば 「CSSでデザインを変えたいけれどどうしたらいいかわからない」という場合でも開発者の方が素早くレスポンスを返してくれます。
機能面でもかなり細かく機能を用意してくれており、他のサービスと見比べても足りない機能はほぼありません。他のサービスにはない特有の機能としては、「HTMLの埋め込み機能」があります。この機能は任意の場所にHTMLやScriptを埋め込むことができるので、例えばNotionでは対応していないインスタグラムの埋め込みも簡単に実現できます。

価格面に関しても他のサービスと比べて安いです。他のサービスは海外製のサービスが多く、現在のような円安の為替では相対的に安くなります。

1-1. 管理画面

Wraptasの管理画面は以下です。右側がNotionのページをwebページに変換した様子で、プレビューとして表示されています。このプレビューを確認しながら、デザインを変更していくことができます。

1-2. 導入事例

Wraptasの公式ページや、Notionっぽくない以下のようなページもWraptasで作成されています。Wraptasの公式ページにはさまざまな導入事例が掲載されているので、興味のある方は見てください。

1-3. 特徴まとめ

• 月額 1,078円（税込）
• 日本製のサービス
• html挿入機能でNotionには対応していない外部サービスを任意の位置に埋め込める
• 他のサービスと比較して足りない機能はほぼない
• 独自ドメインを使用できる
• Wraptasのサブドメインも使用可能
• サイト全体、もしくはページごとにCSSやScriptを適用可能
• 検索エンジンにIndexされる
• Google Analytics対応
• 検索機能あり
• パスワードによるロック機能は対応していない
• チャット機能やコメント機能は外部サービスを埋め込めば対応可

2. Super

Superは海外製のサービスで、NotionをWebサイト化するサービスの中でもWraptasと並んで有名なサービスです（日本に限る、世界的にはSuperの方が有名）。ユーザー数が多いので、安心感があり、アップデートも継続して行われています。Web上に情報も多いですが、言語が英語なので若干情報が探しづらいかもしれません。

機能面に関してはWraptasと同じくらいの機能が備わっています。

価格面に関しては無料プランと有料プランがあります。有料プランに関しては、 Wraptasよりも若干高くなっています。大きな特徴としては、無料プランでも十分使うことができる点です。無料プランでは、CSSやScriptを使ってのカスタマイズができないことと、Googleなどの検索エンジンにはindexされないなどの制限はありますが、基本的な機能は十分使うことができます。個人で使う場合には自分のポートフォリオやブログをSuperで作って、Twitterなどのプロフィールにリンクを貼っておくという使い方ができそうです。

2-1. 管理画面

Superの管理画面は以下です。Wraptasと同様に、右側がNotionのページをwebページに変換した様子で、プレビューとして表示されています。左側のメニューから様々な設定が可能です。

2-2. 導入事例

Superの公式サイトには以下のような導入事例が掲載されてます。

2-3. 特徴まとめ

• Wraptasよりも料金は高め
• 一部の機能の制限はあるが、無料プランがあるのでおすすめ
• 充分な機能が備わっており、管理画面も使いやすい
• 有名なサービスでユーザー数も多いので安心感がある
• 独自ドメイン使用可能（有料プラン）
• 無料プランの場合はSuperのサブドメインのみ使用可能
• サイト全体、もしくはページごとにCSSやScriptを適用可能（有料プラン）
• 検索エンジンにIndexされる（有料プランのみ）
• Google Analytics対応（有料プランのみ）
• 検索機能あり

3. Popsy

WraptasやSuperほど細かいデザインの設定ができず機能は絞られていますが、その分管理画面がシンプルで使いやすい所が特徴です。

機能面に関しては上記でも説明したように、機能は絞られていますが必要最低限の機能は備わっています。WraptasやSuperと比較して実装されていない機能としては以下が挙げられます。

• ページごとのCSSやScriptが設定できない
• フッターの設定ができない
• パーマリンクが設定できない
  価格面に関しては、月額 $8 なのでSuperよりも安くなっていますが、Wraptasと比較すると現在の為替では少し高くなっています。

3-1. 管理画面

Popsyの管理画面は以下です。設定項目がシンプルで使いやすい管理画面です。

3-2. 導入事例

Popsyの公式サイトには導入事例が掲載されていませんが、NotionアンバサダーのReiさんがポートフォリオを作成されています。

3-3. 特徴まとめ

• Superよりも料金が安い。為替次第ではあるが、Wraptasよりは高い
• 機能が若干絞られているが、必要最低限の機能は備わっておりシンプルな管理画面が使い易い
• テンプレートがおしゃれでかわいい
• 独自ドメイン使用可能
• Popsyのサブドメインも使用可能
• サイト全体を対象にCSSやScriptを適用可能
• 検索エンジンにIndexされる
• Google Analytics対応
• 複雑な設定にこだわらず、手っ取り早くおしゃれなサイトを作りたい人におすすめ

4. Potion

上記で紹介したサービスと機能や価格が似ています。

大体の機能は備わっていますが、以下の機能に対応していません。

• フッターの設定ができない
• ページごとのCSSやScriptの設定ができない
  Potionの特徴としては、無料プランでも検索エンジンのIndex対象になることです（ Superは有料プランからIndex対象にできる）。

価格面に関してはSuperとほぼ同じですが、3サイト以上を運営する場合はプランによってSuperよりもPotionの方が安くなります。ただし、Wraptasの方が安いです。

無料でサイトを公開したい場合で、検索エンジンにIndexしたい場合はPotionが選択肢として挙がってきます。

4-1. 管理画面

Potionの管理画面は以下です。問題ないレベルですが、管理画面の使い勝手はWraptasやSuperに劣ります。

導入事例

Potionの公式サイトには以下のような導入事例が掲載されてます。Potionの公式サイトもPotionを使って作られています。

4-2. 特徴まとめ

• 機能面ではWraptasやSuperと大きく変わらないが、細かい機能はWraptasやSuperの方が豊富
• 料金プランはSuperと近い
• 独自ドメイン使用可能（有料プラン）
• 無料プランの場合はPotionのサブドメインのみ使用可能
• サイト全体にCSSやScriptを適用可能。ページごとの設定は不可（有料プラン）
• 検索エンジンにIndexされる（無料プランでも対象）
• Google Analytics対応（有料プランのみ）
• 検索機能あり
• パスワードによるロック機能有り（有料プランのみ）
• 無料でサイトを検索エンジンにIndexさせたい場合はおすすめ

5. Simple.ink

WraptasやSuperと似たようなサービスではありますが、管理画面にプレビュー機能がなく、すっきりしています。また機能については大きく差はありませんが、無料プランでできることが他のサービスより多く、逆に他のプランの無料プランでできることができないなど、料金プランによる機能差で他のサービスと差別化している印象です。

• 無料プランでもサイト全体、ページ毎にCSSやScriptを適用できる
• 無料プランでも検索エンジンのIndex対象
• パーマリンクの設定は有料プランのみ
• サイトマップが有料プランのみ
  機能面では他のサービスと大きく差はありませんが、WraptasやSuperには若干劣る印象です。

価格面に関しては、SuperやPotionとほとんど同じです。

5-1. 管理画面

Simple.inkの管理画面は以下です。プレビュー機能がなく、すっきりしています。管理画面の使い勝手はWraptasやSuperに劣ります。

5-2. 導入事例

Simple.inkの公式サイトには以下のような導入事例が掲載されてます。

5-3. 特徴まとめ

• 機能面ではWraptasやSuperと大きく変わらないが、細かい機能はWraptasやSuperの方が豊富
• 料金プランはSuperやPotionと近い
• 独自ドメイン使用可能（有料プラン）
• 無料プランの場合はSimple.inkのサブドメインのみ使用可能
• サイト全体、もしくは ページごとにCSSやScriptを適用可能（無料プランでも可）
• 検索エンジンにIndexされる（無料プランでも対象）
• Google Analytics対応（無料プランでも可）
• 検索機能あり
• パスワードによるロック機能有り（有料プランのみ）
• 無料プランでもCSSやJavaScriptでがっつりサイトをいじりたい場合はおすすめ

6. HelpKit

上記で紹介したサービスは、NotionのページをそのままWebサイトに変換し、管理画面から自由にデザインなどをカスタマイズできるというサービスでしたが、ここから紹介するサービスは少し毛色が変わります。まずはHelpKitです。

HelpKitは「ヘルプセンター」や「ドキュメンテーション」に特化したサイトを作れるサービスです。「ヘルプセンター」とは、ユーザーのよくある質問や困りごとに対して、ユーザー自身が答えにたどり着くように作られたサイトを指します。例えば、ツイッターのヘルプセンターは以下のような内容です。

HelpKitはNotionのデータベースから、高機能で洗練されたデザインのヘルプセンターをとても簡単に作ることができます。HelpKitで用意されているNotionのデータベースを複製しただけで以下のようなページを作れます（見た目は2種類選べます）。

ヘルプセンターとしてだけではなく、ドキュメンテーションとしても使用可能です。

コンテンツを増やしたい場合は、Notionのデータベースのページを増やしてページ内に内容を記載していけば、Webサイトに反映することができます。今までに紹介してきたサービスはNotionのページを自由に作ることができましたが、HelpKitは あらかじめ用意されたNotionのデータベースの形を変えてはいけません。以下は公式が用意しているデータベースです。このデータベースを複製して使います。

ヘルプキットはとても高機能で以下のような機能が実装されています。

• 独自ドメインとHelpKitのサブドメインを選択可能
• CSSやScriptでカスタマイズ可能
• 検索機能
• フィードバック（コメント機能）
• ウィジェット機能
• コンタクトフォーム
• アナリティクスの数字を管理画面で確認
  例えばフィードバック機能（コメント機能）に関しては、ページ下部の3つの絵文字を押すことでフィードバックを送信できます。

絵文字を押すと、以下のようなウィジェットが現れるので、コメントとメールアドレスを入力して送信できます。

送信されたフィードバックは、下記の様にダッシュボードで確認できます。

他にも様々な機能がありますが、全て紹介すると長くなってしまうのでここでは割愛します。

価格に関しては少し高めですが、機能やデザインを考えると十分な価値があります（$19 ドルのプランがありますが、25ページまでしか作成できず、機能も制限されているので $39 のプランがおすすめです）。

6-1. 管理画面

HelpKitの管理画面は以下のようになっています。高機能でデザインも美しく、とても使いやすいです。

6-2. 導入事例

HelpKitの公式サイトには以下のような導入事例が掲載されてます。HelpKitは海外のサービスですが、日本の企業の導入事例も掲載されています。

6-3. 特徴まとめ

• デザインが美しく、高機能なヘルプセンターやドキュメンテーションサイトが簡単に作れる
• フィードバック（コメント機能）やコンタクトフォーム機能、ウィジェット機能など様々な機能が実装されている
• 独自ドメインを使用できる
• HelpKitのサブドメインも使用可能
• CSSやScriptも適用可能（サイト全体の一括設定）
• 検索エンジンにIndexされる
• Google Analytics対応
• 検索機能あり
• パスワードロック機能に対応。ただし、サイト全体のロック。
• 管理画面もデザインが洗練されており、使いやすい
• 導入事例も多く、企業でヘルプセンターやwikiページ などを作るのにおすすめ

7. Notaku

Notakuは様々な種類のWebサイトを作れることが特徴のサービスです。作れるサイトは以下の6種類です。

• ドキュメンテーション
• ブログ
• チェンジログ
• シンプルレイアウト
• ロードマップ（2022/11/20 時点でβ版）
• ヘルプデスク（2022/11/20 時点でβ版）
  

  

ドキュメンテーションは、Helpkitのドキュメンテーションと見た目が良く似ています。機能面もそれほど差はありません。

ただし少し細かい違いですが、Notion側のページ構成がHelpkitとNotakuでは違います。Helpkitは上記でも説明した用に データベースを使ってページを作っていきますが、Notakuの場合はデータベースは使用せずに子ページを作っていくことでWebページを作っていきます。

ブログも作ることができます。ブログの場合は、HelpKitのようにNotakuが用意しているNotionのデータベースから作成できます。シェアボタン、目次機能、検索機能、ダークモード、フィードバック機能、RSSフィードなど、高機能でかっこいいブログを作ることができます。

チェンジログページもNotakuが用意しているNotionのデータベースから簡単に作れます。この機能は他のサービスでは現状見当たりません。

Notionのページをそのまま公開する機能も用意されています（シンプルレイアウト）。こちらはWraptasやSuperと同じようにNotionのページをそのままWebサイト化し、管理画面やCSSでデザインをカスタマイズします。

WraptasやSuperに無い特徴としては、ライトモードとダークモードを切り替えるボタンがついています。

続いてロードマップです。こちらは β版ですが、他のサービスにはない機能です。

NotionのページはNotakuが用意したデータベース（ボードビュー）で作成します。

最後にヘルプデスクです。こちらはHelpKitと内容はほぼ同じで、Notion側のデータベースもHelpKitとほぼ同じ構成です。こちらも現状は β版になります。

価格面に関しては、HelpKitと近いプランになっています。ただし違いとして、Notakuには無料プランがあり複数サイトを作ることも可能なので、試しにいろいろなサイトを作って試すことも可能です。ただしPV数（ページビュー数）に制限があるので、本格的に運用する場合は注意が必要です。

7-1. 管理画面

Notakuの管理画面は以下のようになっています。こちらの管理画面もとても使いやすいです。

7-2. 導入事例

Notakuの公式サイトには以下のような導入事例が掲載されてます。

7-3. 特徴まとめ

• 複数のタイプのWebサイトが簡単に作れる
• デザインが美しく高機能
• 無料プランがあり、複数のサイトを作成可能なので試しやすい
• PV数に制限があるので、本格的に導入する場合はプランに注意
• 独自ドメイン使用可能
• Notakuのサブドメインを使用可能
• CSSやScriptも適用可能（サイト全体の一括設定）
• 検索エンジンにIndexされる
• Google Analytics対応（自身でタグに貼り付け）
• 検索機能あり
• パスワードロック機能に対応
• 管理画面もデザインが洗練されており、使いやすい

8. feather

Notionで簡単に高機能のブログを作ることができます。作れるのはブログのみですが、ブログに関する機能は大体そろっており、管理画面もWordPressの管理画面のように高機能で使いやすいです。featherが用紙いているNotionのテンプレートを複製するだけで、以下のようなブログを作ることができます。

記事ページ以外に、固定ページを作ることもできます。例えば、ホーム画面を作ったり、ポートフォリオページを作ってヘッダーにリンクを貼っておくこともできます。また、タグページなども作ることができます。私の場合はWordPressを使ってブログを運用していますが、WordPress製のブログと比較しても遜色のないブログがこんなに簡単にNotionでできてしまうのかと感動するレベルでした。

特徴的な点として、Notion側のデータベースを 4つ使って記事を管理します。

• Contentデータベース
• Pagesデータベース
• Tagsデータベース
• Authorsデータベース
  

  

Contentデータベースは、記事を作成するデータベースです。データベースのページに記事を書き、このページが投稿記事として掲載されます。

Pagesデータベースは、固定ページを作成するデータベースです。

Tagsデータベースは タグを管理するデータベースで、Contentデータベースとリレーションして使います。任意のタグの記事一覧ページも作成することができます。

Authorsデータベースは投稿者を管理するデータベースで、こちらもContentデータベースとリレーションして使います。任意の投稿者が投稿した記事一覧ページも作成することができます。

価格面に関しては、以下のようなプランになっています。プランで違うのはPV数の制限だけなので（機能制限はない）、安いプランを使っておいてPV数が多くなってくれば、プランを上げて対応するのがおすすめです。

8-1. 管理画面

featherの管理画面は以下のようになっています。

featherの管理画面もかなり高機能で、例えばアナリティクス画面がとても充実しています。

導入事例

featherの公式サイトには以下のような導入事例が掲載されてます。

8-2. 特徴まとめ

• ブログ特化でデザインがとても美しい
• WordPressと比較しても遜色のない高機能なページや管理画面
• 独自ドメインを使用できる
• featherのサブドメインも使用可能
• サイト全体、もしくはページごとにCSSやScriptを適用可能
• 検索エンジンにIndexされる
• Google Analytics対応
• 検索機能あり
• パスワードによるロック機能は対応していない

9. Fruition

残り 2つは今までのサービスと違って番外編的な扱いです。

まずはFruitionです。こちらはNotionの公開ページに Cloudflare という無料のサービスを使って独自ドメインを割り当てることのみに目的を絞ったサービスです。基本的に見た目はNotionのページのままです。追加機能としては以下があります。

• Notion公開ページの右上の「複製」や「Notionを開く」を消せる
• アナリティクスを導入できる
• ライトモードとダークモードの切り替えができる
  少し設定が難しいですが、Fruitionの公式サイトに詳しく手順が載っています。できるだけ安くサイトを公開したいけれど、独自ドメインは割り当てたいというときに選択肢に入ってくるサービスです。

価格面は先ほども述べた通り、独自ドメイン代のみになります。

管理画面もありません。

9-1. 導入事例

Fruitionの公式サイトには以下のような導入事例が掲載されてます。

9-2. 特徴まとめ

• Notionの公開ページに独自ドメインをできるだけ安く割り当てたい
• 見た目はほぼNotionのサイトのまま
• 設定が若干難しい

10. STUDIO

STUDIOは日本製のサービスで、ノーコードでWebサイトを簡単に作成できるサービスです。Notionのみに対応したサービスではありませんが、2022/09 にNotion APIとの連携機能が発表されました。まだ β版ではありますが、STUDIOを使ってノーコードで自由度高くWebサイトを作り、コンテンツの中身はNotionで管理するということができるようになりました。

実際にSTUDIOでNotion APIを使う様子を紹介します。例えば以下のようなNotionのデータベースがあるとします。

このデータベースをSTUDIOと連携し、画像を引っ張ってくることが簡単にできます（もちろん、画像以外も可）。ただし注意点としてデータを引っ張れるのはデータベースのプロパティのみで、ページ内のブロックは引っ張れません。

価格面に関しては以下の通りですが、無料でもほとんどの機能を使うことができます。無料プランの制限は 月間PV数が 10,000 PVまでなので、個人で使うには十分です。

Wraptasと同様、日本のサービスでサポートも手厚いのでおすすめです。ただし、Notion API連携は現状は無料プランで使用できますが、以下の通り将来的には使えなくなる可能性もあるのでご注意ください。

管理画面に関してはSTUDIOの紹介になり、今回の趣旨とはずれてしまうので割愛します。

10-1. 導入事例

Notion APIを使ったSTUDIOのWebサイトはまだ少ないですが、YouTubeチャンネルの Notion座談会のページが掲載されています。

10-2. 特徴まとめ

• Notion APIを使ってNotionのデータベースから簡単にデータを引っ張ってノーコードで 自由度高くWebサイトを作成できる
• 無料プランで十分使えるので手軽に試せる
• Notion API連携はまだ β版なので、今後のアップデートに注目

おわりに（比較表配布）

ということで、今回はNotionを簡単にWebサイト化できるツールを 10個紹介しました。

個人的なオススメとしては、企業サイトや個人でもしっかりと運用したい場合は圧倒的にWraptasがおすすめです。細かい機能までどんどんアップデートされるのも素晴らしいですが、何よりサポートが手厚く、日本語のドキュメントも充実しているという点が非常に魅力的です。

無料でWebサイトを作ってみたいという場合は、SuperかSimple.inkがおすすめです。Superは使いやすさが魅力的ですが、無料だとカスタマイズできる幅が限られています。Simple.inkは 無料でもCSSやScriptを使うことができるので、がっつり自分でカスタマイズしたい方はこちらがおすすめです。

最後に、スプレッドシートで作成した比較表のリンクを貼っておきます。もし、Notionを使ってWebサイトを作成しようと思っている方は参考にしてください。

参考：無料で始められる！NotionでWebサイトが作れるサービス8選｜プロトアウトスタジオ

参考：検索エンジンに評価されたいなら「楽」は避けたほうがよい