前の記事
NotionをWebサイト化できる連携サービス10選
Notion 公式アンバサダー / 株式会社 TEMP 代表
2024年7月のアップデートで、独自ドメインを付けて Web サイト化する新機能がリリースされました。詳しくは下記の記事をご覧ください。
今回は Notion を使って簡単に Webサイトを作成できるサービスを 10個 紹介します。
Notion には作成したページを Webページとして公開する機能があります。この機能を使えば自分の作成した Notion のページを他の人に簡単に見てもらうことができます。
この機能はとても素晴らしいのですが、以下のような点で少し物足りないと思う方もいるのではないでしょうか。
- 独自ドメインをつけたい
- 見た目をカスタマイズしたい（ CSS を使いたい）
- Notion では対応していない外部サービスを埋め込みたい（インスタなど）
- 検索結果の上位に表示されるように対応したい（SEO対策をしたい）
- Google Analytics などでアクセス解析をしたい
- ページ内検索機能をつけたい
- 一部のページにパスワードでロックをかけたい
- コメント機能をつけたい
上記のような機能は、サードパーティ製の連携サービスを使用すれば簡単に実現することができます。今回は、Notion のページを簡単に webサイト化して、様々な機能を付けることができるサービスを 実際に10個使った上で紹介します。記事の最後には、それぞれのサービスのプランの比較、細かい機能の特徴などを比較した比較表をスプレッドシートで配布します。企業で webサイトの構築を検討している方、個人でポートフォリオやブログを作ろうと思っている方など、ぜひ参考にしてみてください。
1. Wraptas
Wraptas は日本製のサービスで、Notion のページを簡単に Webページに変換してくれます。また、管理画面からデザインの変更も簡単にできたり、CSS を使ってちょっと凝ったデザインも実現することができます。日本製のサービスなので、ドキュメントが全て日本語で読みやすく、 Wraptas 公式の使い方ガイド や ヘルプ・よくある質問 がとても充実しており、公式ページを見るだけで詰まることなく Webサイトを作ることができると思います。また、Wraptas ユーザーの Discord コミュニティがあり、例えば 「CSS でデザインを変えたいけれどどうしたらいいかわからない」という場合でも開発者の方が素早くレスポンスを返してくれます。
機能面でもかなり細かく機能を用意してくれており、他のサービスと見比べても足りない機能はほぼありません。他のサービスにはない特有の機能としては、「 HTMLの埋め込み機能 」があります。この機能は任意の場所に HTML や Script を埋め込むことができるので、例えば Notion では対応していないインスタグラムの埋め込みも簡単に実現できます。
価格面に関しても他のサービスと比べて安いです。他のサービスは海外製のサービスが多く、現在のような円安の為替では相対的に安くなります。
管理画面
Wraptas の管理画面は以下です。右側が Notion のページを webページに変換した様子で、プレビューとして表示されています。このプレビューを確認しながら、デザインを変更していくことができます。
導入事例
Wraptas の公式ページや、Notion っぽくない以下のようなページも Wraptas で作成されています。Wraptas の公式ページにはさまざまな 導入事例 が掲載されているので、興味のある方は見てください。
特徴まとめ
- 月額 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 などのプロフィールにリンクを貼っておくという使い方ができそうです。
管理画面
Super の管理画面は以下です。Wraptas と同様に、右側が Notion のページを webページに変換した様子で、プレビューとして表示されています。左側のメニューから様々な設定が可能です。
導入事例
Super の公式サイトには以下のような 導入事例 が掲載されてます。
特徴まとめ
- Wraptas よりも料金は高め
- 一部の機能の制限はあるが、無料プランがあるのでおすすめ
- 充分な機能が備わっており、管理画面も使いやすい
- 有名なサービスでユーザー数も多いので安心感がある
- 独自ドメイン使用可能（有料プラン）
- 無料プランの場合は Super のサブドメインのみ使用可能
- サイト全体、もしくはページごとに CSS や Script を適用可能（有料プラン）
- 検索エンジンに Index される（有料プランのみ）
- Google Analytics 対応（有料プランのみ）
- 検索機能あり
3. Popsy
Wraptas や Super ほど細かいデザインの設定ができず機能は絞られていますが、その分管理画面がシンプルで使いやすい所が特徴です。
機能面に関しては上記でも説明したように、機能は絞られていますが必要最低限の機能は備わっています。Wraptas や Super と比較して実装されていない機能としては以下が挙げられます。
- ページごとの CSS や Script が設定できない
- フッターの設定ができない
- パーマリンクが設定できない
価格面に関しては、月額 $8 なので Super よりも安くなっていますが、Wraptas と比較すると現在の為替では少し高くなっています。
管理画面
Popsy の管理画面は以下です。設定項目がシンプルで使いやすい管理画面です。
導入事例
Popsy の公式サイトには導入事例が掲載されていませんが、Notion アンバサダーの Rei さんが ポートフォリオ を作成されています。
特徴まとめ
- Super よりも料金が安い。為替次第ではあるが、Wraptas よりは高い
- 機能が若干絞られているが、必要最低限の機能は備わっておりシンプルな管理画面が使い易い
- テンプレートがおしゃれでかわいい
- 独自ドメイン使用可能
- Popsy のサブドメインも使用可能
- サイト全体を対象に CSS や Script を適用可能
- 検索エンジンに Index される
- Google Analytics 対応
- 複雑な設定にこだわらず、手っ取り早くおしゃれなサイトを作りたい人におすすめ
4. Potion
上記で紹介したサービスと機能や価格が似ています。
大体の機能は備わっていますが、以下の機能に対応していません。
- フッターの設定ができない
- ページごとの CSS や Script の設定ができない
Potion の特徴としては、無料プランでも検索エンジンの Index 対象になることです（ Super は有料プランから Index 対象にできる）。
価格面に関しては Super とほぼ同じですが、3サイト以上を運営する場合はプランによって Super よりも Potion の方が安くなります。ただし、Wraptas の方が安いです。
無料でサイトを公開したい場合で、検索エンジンに Index したい場合は Potion が選択肢として挙がってきます。
管理画面
Potion の管理画面は以下です。問題ないレベルですが、管理画面の使い勝手は Wraptas や Super に劣ります。
導入事例
Potion の公式サイトには以下のような 導入事例 が掲載されてます。Potion の公式サイトも Potion を使って作られています。
特徴まとめ
- 機能面では Wraptas や Super と大きく変わらないが、細かい機能は Wraptas や Super の方が豊富
- 料金プランは Super と近い
- 独自ドメイン使用可能（有料プラン）
- 無料プランの場合は Potion のサブドメインのみ使用可能
- サイト全体に CSS や Script を適用可能。ページごとの設定は不可（有料プラン）
- 検索エンジンに Index される（無料プランでも対象）
- Google Analytics 対応（有料プランのみ）
- 検索機能あり
- パスワードによるロック機能有り（有料プランのみ）
- 無料でサイトを検索エンジンに Index させたい場合はおすすめ
5. Simple.ink
Wraptas や Super と似たようなサービスではありますが、管理画面にプレビュー機能がなく、すっきりしています。また機能については大きく差はありませんが、無料プランでできることが他のサービスより多く、逆に他のプランの無料プランでできることができないなど、料金プランによる機能差で他のサービスと差別化している印象です。
- 無料プランでもサイト全体、ページ毎に CSS や Script を適用できる
- 無料プランでも検索エンジンの Index 対象
- パーマリンクの設定は有料プランのみ
- サイトマップが有料プランのみ
機能面では他のサービスと大きく差はありませんが、Wraptas や Super には若干劣る印象です。
価格面に関しては、Super や Potion とほとんど同じです。
管理画面
Simple.ink の管理画面は以下です。プレビュー機能がなく、すっきりしています。管理画面の使い勝手は Wraptas や Super に劣ります。
導入事例
Simple.ink の公式サイトには以下のような 導入事例 が掲載されてます。
特徴まとめ
- 機能面では 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 のプランがおすすめです）。
管理画面
HelpKit の管理画面は以下のようになっています。高機能でデザインも美しく、とても使いやすいです。
導入事例
HelpKit の公式サイトには以下のような 導入事例 が掲載されてます。HelpKit は海外のサービスですが、日本の企業の導入事例も掲載されています。
特徴まとめ
- デザインが美しく、高機能なヘルプセンターやドキュメンテーションサイトが簡単に作れる
- フィードバック（コメント機能）やコンタクトフォーム機能、ウィジェット機能など様々な機能が実装されている
- 独自ドメインを使用できる
- 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数（ページビュー数）に制限があるので、本格的に運用する場合は注意が必要です。
管理画面
Notaku の管理画面は以下のようになっています。こちらの管理画面もとても使いやすいです。
導入事例
Notaku の公式サイトには以下のような 導入事例 が掲載されてます。
特徴まとめ
- 複数のタイプの Web サイトが簡単に作れる
- デザインが美しく高機能
- 無料プランがあり、複数のサイトを作成可能なので試しやすい
- PV数に制限があるので、本格的に導入する場合はプランに注意
- 独自ドメイン使用可能
- Notaku のサブドメインを使用可能
- CSS や Script も適用可能（サイト全体の一括設定）
- 検索エンジンに Index される
- Google Analytics 対応（自身で<head>タグに貼り付け）
- 検索機能あり
- パスワードロック機能に対応
- 管理画面もデザインが洗練されており、使いやすい
8. feather
Notion で簡単に高機能のブログを作ることができます。作れるのはブログのみですが、ブログに関する機能は大体そろっており、管理画面も WordPress の管理画面のように高機能で使いやすいです。feather が用紙いている Notion のテンプレートを複製するだけで、以下のようなブログを作ることができます。
記事ページ以外に、固定ページを作ることもできます。例えば、ホーム画面を作ったり、ポートフォリオページを作ってヘッダーにリンクを貼っておくこともできます。また、タグページなども作ることができます。私の場合は WordPress を使ってブログを運用していますが、WordPress 製のブログと比較しても遜色のないブログがこんなに簡単に Notion でできてしまうのかと感動するレベルでした。
特徴的な点として、Notion 側のデータベースを 4つ使って記事を管理します。
- Content データベース
- Pages データベース
- Tags データベース
- Authors データベース
Content データベースは、記事を作成するデータベースです。データベースのページに記事を書き、このページが投稿記事として掲載されます。
Pages データベースは、固定ページを作成するデータベースです。
Tags データベースは タグを管理するデータベースで、Content データベースとリレーションして使います。任意のタグの記事一覧ページも作成することができます。
Authors データベースは投稿者を管理するデータベースで、こちらもContent データベースとリレーションして使います。任意の投稿者が投稿した記事一覧ページも作成することができます。
価格面に関しては、以下のようなプランになっています。プランで違うのは PV数の制限だけなので（機能制限はない）、安いプランを使っておいて PV 数が多くなってくれば、プランを上げて対応するのがおすすめです。
管理画面
feather の管理画面は以下のようになっています。
feather の管理画面もかなり高機能で、例えばアナリティクス画面がとても充実しています。
導入事例
feather の公式サイトには以下のような 導入事例 が掲載されてます。
特徴まとめ
- ブログ特化でデザインがとても美しい
- WordPress と比較しても遜色のない高機能なページや管理画面
- 独自ドメインを使用できる
- feather のサブドメインも使用可能
- サイト全体、もしくはページごとに CSS や Script を適用可能
- 検索エンジンに Index される
- Google Analytics 対応
- 検索機能あり
- パスワードによるロック機能は対応していない
9. Fruition
残り 2つは今までのサービスと違って番外編的な扱いです。
まずは Fruition です。こちらは Notion の公開ページに Cloudflare という無料のサービスを使って独自ドメインを割り当てることのみに目的を絞ったサービスです。基本的に見た目は Notion のページのままです。追加機能としては以下があります。
- Notion 公開ページの右上の「複製」や「Notionを開く」を消せる
- アナリティクスを導入できる
- ライトモードとダークモードの切り替えができる
少し設定が難しいですが、Fruition の公式サイトに詳しく手順が載っています。できるだけ安くサイトを公開したいけれど、独自ドメインは割り当てたいというときに選択肢に入ってくるサービスです。
価格面は先ほども述べた通り、独自ドメイン代のみになります。
管理画面もありません。
導入事例
Fruition の公式サイトには以下のような 導入事例 が掲載されてます。
特徴まとめ
- 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 の紹介になり、今回の趣旨とはずれてしまうので割愛します。
導入事例
Notion API を使った STUDIO の Web サイトはまだ少ないですが、YouTube チャンネルの Notion 座談会のページ が掲載されています。
特徴まとめ
- Notion API を使って Notion のデータベースから簡単にデータを引っ張ってノーコードで 自由度高く Web サイトを作成できる
- 無料プランで十分使えるので手軽に試せる
- Notion API 連携はまだ β版なので、今後のアップデートに注目
おわりに（比較表配布）
ということで、今回は Notion を簡単に Web サイト化できるツールを 10個紹介しました。
個人的なオススメとしては、企業サイトや個人でもしっかりと運用したい場合は圧倒的に Wraptas がおすすめです。細かい機能までどんどんアップデートされるのも素晴らしいですが、何よりサポートが手厚く、日本語のドキュメントも充実しているという点が非常に魅力的です。
無料で Web サイトを作ってみたいという場合は、Super か Simple.ink がおすすめです。Super は使いやすさが魅力的ですが、無料だとカスタマイズできる幅が限られています。Simple.ink は 無料でも CSS や Script を使うことができるので、がっつり自分でカスタマイズしたい方はこちらがおすすめです。
最後に、スプレッドシートで作成した比較表のリンクを貼っておきます。もし、Notion を使って Web サイトを作成しようと思っている方は参考にしてください。