WraptasでNotionをWebサイト化する！独自ドメインで公開設定もします

今やNOCODEでWebサイトやWebサービスを作れてしまう時代になってしまったけれども、実はNotionでもWebサイトを作ることができる。Notionがどういったものかは以下の記事で書いたからNotionってなんなん？って場合は見てみてください。

今回はこのNotionを使ってWebサイトを作るっていうことをやっていきたい。NotionだけでもページをWeb上に公開することができるけど、今回はWraptasっていうサービスを使っていく。独自ドメインも指定できるから、独自ドメインでの公開もしてみるよ。

Wraptasとは

Wraptas

WraptasはNotionで書いたページをそのままWebサイトにすることができるサービス。デザインはCSSを使ってカスタマイズできるからちょっとしたデザインは自分で作れる。Wraptasの導入事例もサイトにいくつか載っているので、どんなサイトがあるのかみてみるといいですよ。

ちなみに料金は月額980円（税抜）で以下のような機能が使える。

30日間のトライアル期間は無料で使えるから、最初ちょっと試してみて良い感じだったらそのまま使えば良さそうです。では登録してやっていこう。

WraptasでNotionからWebサイトを作る

登録する

まずはWraptasを使うために登録しよう。有料のサービスだけど30日間無料で使うことができるからいいね。

登録はGoogleアカウントかメールアドレスで行うことができる。好きな方で登録しておこう。

登録してログインするとダッシュボードを見ることができますね。決済情報を登録しないとサイトを登録することができないからまずは決済情報を登録する。

決済情報を登録したら新規サイト登録を行おう。

サイト登録はサイトIDとサイト名、トップページへ表示するNotionページURLの3つが必要だね。

サイトIDは後から変更できないから注意。トップページへ表示するNotionページURLっていうのは、Notionの共有ボタンから見ることができるこれ。

サイトに表示したいページをNotionで作成して、共有ボタンからコピーして貼り付けてやればいいです。サイト登録が終わったらダッシュボードに登録したサイトが表示される。

サイトを見るに表示されているリンクをクリックすると、作成したサイトを見ることができました。

これめちゃくちゃ楽ですね。表示されているのはNotionで作ったページなんだけどそれが表示されています。Notionでページのどこか変更してちょっとしたら反映されるから楽。面倒なこと考えないでできてしまうのは素晴らしいな。

サイトデータを編集する

ダッシュボードからサイトデータを編集することができるからどういったことができるのか見ていこう。

データ編集は以下のような画面でサイト名や表示するNotionページURLなんかを指定できますね。

Wraptasでページを追加する

データ編集からパーマリンク設定ができるから、それを使ってページを追加することができる。Notionでページを作ってそのページを割り当てて表示するっていう流れ。例えば/managerとかいうものを適当に指定してNotionのページを当ててみる。

これで/managerにアクセスしてみると良い感じに表示されますね。

サイトに表示させたいページをNotionで作って後はデータ編集のパーマリンク設定で好きなものを割り当てればいいだけだから楽ですね。

Meta情報を登録する

データ編集かMeta情報を登録することができる。

設定がないと自動で設定されるんだけど、例えばTwitterのOGPを何も設定していない状態で確認してみるとこんな感じ。

OGP確認

Notionで書いた文言や画像が設定されていますね。meta設定を試しに変更してみるとOGPもそれに伴ってく変わってくれまる。

OGP確認を使ってSNSなんかでどのように表示されるか見ることができるから気になったら試してみるといいですよ。

検索エンジンに表示されないようにすることもできる

検索エンジンに表示されたくなかったら、データ編集の高度な設定から行うことができる。

まああんまり表示されないようにしたい！ってなさそうですけどね。

faviconを設定する

favicon設定はデザイン編集から行うことができる。faviconにしたい画像をアップロードすればOK。

アップロード後ちょっとしてサイトを見てみると無事favicon反映されていますね。

ロゴ画像を表示する

左上はデフォルトだとサイト名だけど、ロゴ画像を表示したかったら画像を設定してやればそれが表示される。[パンくずリストの代わりにヘッダーへロゴ画像を表示する]にチェックを入れるとロゴ画像をアップロードすることができる。

ロゴ画像をクリックした時の遷移先を指定したかったらURLを入れておくといいでしょう。ロゴ画像を指定するとこんな感じに画像が表示されるようになる。

右上にリンクを追加する

サイトの右上にリンクを追加したいっていうときありますよね。こういうやつ。

これは[ヘッダー右側へのリンク追加]から設定することができて、表示するテキストとリンクを設定すればいいだけ。

フッターを設定する

footerも設定することができて、これはNotionのページがそのまま埋め込まれるイメージ。Notionでまずはfooterに表示したいページを作る。

そしたらそのURLをフッター設定に貼り付ければOK。

そうするとサイトの下の方にフッターが追加されますね。

見出しでデザインを構築する

wraptasでは見出しごとにセクションを色分けすることができる。

セクションごとに色分けするデモ

これは使い方によっては結構便利で見出しを設定するだけで、それっぽいデザインになる。ただSEOのことを考えると見出しをデザインのためだけに使うのはやめてほしい。綺麗に並ばないh2やh3になってしまわないように気をつけよう。

SEOラボhタグとは？見出しタグ（h1/h2/h3…）の正しい使い方

ちなみにこの機能はコンテンツリアから行うことができるよ。

Twitterボタンをコンテンツ下に配置可能

Twitterボタンを置きたかったらチェックを入れるだけでOK。

CSSでデザインを整える

デフォルトのデザインが気に入らなかったらCSSを書いて適用することができる。CSS使えるだけでだいぶ違うよね。

コピペで使えるサンプルCSS集っていうのも用意されているから、その中に良い感じのものがないか見てみるといいですよ。ただ自分好みのデザインを求めるとコピペでは済まないと思うから自分で色々いじっていこう。

そしてちょっといじった結果こうなりました。

Notionで適当にしか作っていないからなんとも言えないけど、それっぽいサイトの形は見えてきましたよね。もっと内容追加していけば結構良い感じになるはず。ちなみに使ったCSSはこんな感じ。

.page {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.header__contentsWrapper {
  border-bottom: 1px solid;
  margin: 10px 20px 0 20px;
}

.header {
  position: relative; /* スクロール追従させない */
}
.page {
  padding-top: 0; /* ヘッダーの分コンテンツがかぶらないようにしている幅をなくす */
}

.container {
  max-width: 100%;
  padding: 0;
}
.contents {
  padding: 75px 1em 1em;
  max-width: 800px;
  margin: 0 auto;
}
.notion-full-width .contents {
  max-width: 95%;
}
.footer {
  background-color: #eee;
  padding: 1em;
}
.footer__contentsWrapper {
  max-width: 800px;
  margin: 0 auto;
}