Wraptasを使ってNotionをWebサイト化する方法

みなさんこんにちは！Notion アンバサダーの円谷 です。

Notion がとうとう日本語化されましたね！ローンチイベントもあって、さらに日本国内で Notion が盛り上がりを見せているように感じました。僕もこれからさらに情報発信していきたいと思っているので引き続きよろしくお願いします！

🚀 Notion 日本語版が β リリースされました！今夜のイベントでも日本語化についての最新情報が発表される予定です！お時間ある方はぜひ。（ワイもパネルディスカッションで登場する予定です） https://t.co/eXfP5J9s8S

さて、前回の記事では、Notion API と Next.js（プログラミングのフレームワーク）を活用することで、ご自身のブログを開設する方法について紹介したのですが、非エンジニアの方にはなかなかハードルの高い少しマニアックすぎる内容を紹介してしまったので（すみません🙇）、今回の記事ではもっとライトに Notion を使って Web サイトを公開する方法について紹介したいと思います。

今回紹介するのは Wraptas というサービスです（ちなみに僕の Fast Notion のページ や、僕の経営している会社の採用ページは今回紹介する Wraptas 製で、僕自身もヘビー Wraptas ユーザーです）。

wraptas.com のスクリーンショット

Wraptas は「Notionに書くだけで誰でも簡単にWebサイトが作れる」というキャッチフレーズのサービスで、2020年10月にリリースされたサービスです。キャッチフレーズの通り、Notion に書いた内容（テキストや見出し、トです。ちなみにちょっと前までは Anotion というサービス名でした。

もともとは @nabettu さんという方が個人開発で作られたプロダクトだったのですが、2021年10月にペライチ社に事業譲渡されて、今はペライチさんの運営となっています。

同様の機能を持ったサービスだと海外の Super というサービスもあります。 Wraptas とそこまで大きな機能差分はないのですが、Wraptas は、日本語のマニュアルがある、ユーザーサポートのやりとりが日本語で出来る、月額使用料が微妙に安い（Super は 約1,200円、Wraptas は約1,000円）などの違いがあります。

super.so のスクリーンショット

冒頭でも書いたとおり、僕も Wraptas ユーザーなので、Fast Notion のページの画面がどのように作られているのかについて解説していきたいと思います。

左が Notion のページで、右が Wraptas を使って公開したページです。独自ドメインを当てて、fast-notion.com というページとして公開されているのがわかるかと思います。ページを公開するまでだったら、10分もあれば完了します。ちなみに、30日間はトライアル期間で無料で使うことができるので、雰囲気掴んでみたいという方はまず触ってみてページを開設してみるとラクさが実感できるのでオススメです。

Wraptas で制作した Fast Notion のマニュアルページ（右）

🐈🐈🐈

Wraptas に登録します。メールアドレスまたは Google アカウントで登録をすることができます。決済情報を入力しないと進めないようになっていますが、30日間の無料トライアル期間があるので、その期間内は料金は発生しません。

無料トライアル期間が終了間近になると Stripe （決済システム）からメールが届きます。

登録が完了したら、Notion ページと Wraptas の紐付けを行います。この設定を行うことだけで、Notion を Web サイトとして公開することができます（超簡単）

Wraptas を使って公開したいページの Share to web を ON にして、URL をコピーします。これを Wraptas 内に貼り付けることで公開が完了します。とても簡単ですね。

公開したページは、独自の CSS を当ててスタイルを上書きすることができます。例えば、僕の場合は、Notion 側には要素として存在させているけれども、公開ページ側には表示させたくない要素に、雑に display: none; を当てて非表示にするみたいなことをやっています。

CSS に関しては、コピペで使える CSS のサンプルを沢山用意してくれているので、プログラミングにそこまで詳しくない方でもいい感じのスタイルを当てることができるようになっています。

💁‍♀️ ちょっと脱線ですが、Wraptas はユーザーコミュニティを Discord で運営されており、ここで CSS 等の質問をすることもできます。日本語で質問できるのはとてもありがたいですね…！

fast-notion.com のように独自ドメインを当てることができます。ドメインはお名前ドットコムや Google ドメインなどでご自身でご購入頂いて、ご購入いただいたドメインを Wraptas の管理画面上で入力することで独自ドメインを当てることができます。

裏側で運営の方の作業が入るので、少し時間はかかりますが、僕の場合は本当にすぐ対応していただいて、1時間程度で設定が完了しました（運営の方には頭が上がらない、ありがとうございます）

Notion には標準機能で Google Analytics を仕込む機能は存在せず、ページビュー数をカウントすることができませんが、Wraptas を使用することで、GA のスクリプトを埋め込むことができるようになります。

設定はとても簡単で、Wraptas 内の入力フォームに Google Analytics の ID を仕込むだけです。

Google Analytics の新しいバージョンを使用している場合は、HTML 内に直接タグを埋め込む機能が用意されているので、こちらを使用することになります。Google Analytics から発行したタグをコピーし、Wraptas 内にペーストします。（僕は GA4 を利用しているので、こちらの設定を使っています）

ということで、今回は Notion のページがそのまま Web サイトになる Wraptas というサービスを紹介してみました。

みなさんもぜひ Wraptas を使って自分の Web サイトを公開してみてはいかがでしょうか？不明点あればお気軽に DM ください。

🤟 おまけ

実は、開発者の @nabettu さんとは SNS 上で親交があり、色々意見交換だったりアドバイスもらったりしています（いつもお世話になってます！）

Notionに書くだけでWebサイトが作れるWraptasNotionを使ってWebサイトを作れるWraptas。更新も簡単、デザインも変更できて独自ドメインやパーマリンクの設定もwraptas.com

💡

初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」を運営中。Notion コミュニティとしては国内最大規模で、会員数は現在200名以上となっております。

• 分からないことは24時間チャットツールでいつでも質問できる
• コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
• 1から学べる Notion 学習ロードマップで初心者からでも学習可能
• Notion 大学限定の学習動画が100本以上
• 定期的に開催している有料セミナーへの無料参加券
• 過去の有料記事・有料テンプレートが全て閲覧可能

コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。

　

Notion 大学とは？特徴・料金・参加方法について解説します - Notionラボ

Notion 大学の参加用ページ

https://notion-lab.jp