cover image

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

Created
2021/5/22 14:49
date
2021/05/23
title
Anotion × NotionでWebサイトを公開する方法
category
オリジナル
タグ
みなさんこんにちは。スタタイ編集部です。
 
みなさんはNotionを利用しているでしょうか?最近ではその便利さ・カスタム性の高さから女子大生のなかでも講義ノートとして人気になってきているようです。
 
InstagramでNotionと検索した結果(Link)
InstagramでNotionと検索した結果(Link
 
Notionの使い方はブログやYouTubeなどで多数出ているので割愛し、ここではNotionを使ってWebサイトを公開する方法を解説していきたいと思います。
 

 
目次
 

 

契約するサービス

 
契約する必要があるサービスは2つです。
 
独自ドメインとして公開するため、Google Domainお名前.com でお好きなドメインを取得します。これが1つ目です。ちなみにスタタイのドメインはGoogle Domainで取得していますが、どこで取得しても大差はありません。
料金は安いものだと年間1,500円程度です。
 
次に必要なのが、NotionをWebサイトとして公開するサービスで、有名なのはSuperAnotionです。これはサーバーも兼ねているので、別途サーバーをレンタルする必要はありません。
料金はSuperの場合、1サイトあたり月額12ドルで、Anotionの場合は税別980円です。
 
というわけで、NotionをWebサイトとして公開した場合にかかる1ヶ月あたりのランニングコストは1,500円ほどです。もちろんドメイン代次第では変わってきますので、ご自身のニーズに合ったドメインをお選びください。
 
まずドメインを契約できたら、次にNotionをWebサイトとして公開してもらうために、SuperかAnotionを契約します。
 

SuperとAnotion、どっちが良いの?

 
Anotionをおすすめします。
 
 
スタタイは現在Anotionを使って運用しているのですが、それ以前は半年ほどSuperを使っていました。
 
解約した1番の理由は、まったくアップデートされないことです。正確には、いつになるか聞いてみても「数週間以内に」「すぐに」というあいまいな答えは返ってくるものの一向に実装されないことに不満を感じていたからです。
 
海外のサービスなので少々のコミュニケーションの齟齬は仕方ないと思ってはいたのですが、他にも複数の方が同じような問題に困られていて、しかし代替手段がないから仕方なく使っているという状態だったように思います。
 
他にも若干バグが起こりがちだったり、サポート体制が万全でなかったりしたため、Anotionに移行することにしました。
 
Anotionは日本の方が運営されているサービスなので、私たち日本人にとっては非常にコミュニケーションがとりやすいですし、分からないことがあればDiscordグループで質問すればすぐにお答えいただけます。しかも質問した内容がニーズの高いものだったり、あまりに複雑なものでもなければすぐに実装していただけるというスピードも感動ものです。おまけに200円ほど月額料金が安いのも嬉しいです。
 
SuperやAnotionのようなサービスの特徴として、ただNotionに独自ドメインを付与するだけではなく、HTMLとCSSを追加することができます。Anotionでは、自分の実現したいデザインを運営にお伝えするとご丁寧にCSSを教えてくださったりするので、Notionで運用しつつもデザインも綺麗なサイトを運営したい、という方にはAnotionはうってつけのサービスだと思います。
 
AnotionのCSS追加ページ
AnotionのCSS追加ページ
 

契約したらあとは公開するだけ!

 
Anotionを契約すると、Webサイトとして公開したいNotionページのURLをAnotionのダッシュボードにペーストします。
 
スタタイのAnotionダッシュボード
スタタイのAnotionダッシュボード
 
基本的にはこれだけです。非常に簡単です。
 
あとはちょっとした細かい設定(Twitterシェアボタンを置くかどうか、ダークモードを適用するかどうか、HTML/CSSを追加で設定するかなど)はありますが、公開するにはこれだけでOKです。
 

Anotionを使うとどれくらい変わるの?

 
以下、同じサイズでスクリーンショットしてみました。1枚目がAnotionを使って独自ドメインで公開しているサイトで、2枚目がオリジナルのNotionページです。
 
Anotionを使って公開したサイト
Anotionを使って公開したサイト
オリジナルのNotionページ
オリジナルのNotionページ
 
まず気付く点としては、大きいカバー画像の有無、ヘッダーの有無などがあります。カバー画像とページタイトルはCSSで見えないようにしており、ヘッダーはAnotionの設定で追加することができます。他にも、上記の比較でわかる部分としては、カードの影の具合なども変えています。
 
もちろんフォントサイズや行間サイズの変更もできますし、以下のように、ただの蛍光ラインをおしゃれなアンダーラインに変更することもできます。
Anotionを使って公開したサイト
Anotionを使って公開したサイト
 
オリジナルのNotionページ
オリジナルのNotionページ
そして、元のNotionさえ準備できていれば、ここまでやってきた公開からデザイン変更までは1日でできてしまいます。
 
わざわざWordPressを使ったサイト作成を学ぶ必要もなければ、高いお金を払ってサイト作成を外注する必要もありません。Notionさえ使えたら、十分デザインの良いサイト作成ができます。
 
最近は企業HPや採用サイトをNotionで運営している会社さんが多くなってきたように感じますが、1ヶ月のランニングコスト数千円程度かければ独自ドメインのおしゃれなサイトを自分たちの手で楽々運営できることを思えば、導入はかなりおすすめできます。
 

まとめ

 
まとめです。
  • 必要なのは2つ。ドメインの契約と、Super or Anotionどちらかの契約
  • スタタイはSuperとAnotionを両方使ってきたうえで、Anotionを激推ししている
  • 月あたりのコストは1,500円程度。少しでも公開してみたいページがあるのなら、気軽に公開してみるのがおすすめ
 
Notionを使ってウェブサイトを公開するのをおすすめする他の理由として、使ったことがある方は共感していただけると思うのですが、ページ遷移が爆速です。ここまでのスピードを実現しているサービスは他にないのではないかと思います。高速で動くサイトはユーザーフレンドリーですし、SEOにも有利なので、そういった観点からもおすすめできます。
 
というわけで、今回はスタタイ編集部がAnotion導入のススメを書いてみました。最後まで読んでいただき、ありがとうございました。