Zenn
📑

Webメディアの新規立ち上げをNotion+Superで行ってみた。

2021/10/12に公開
Web
Notion
#
super
#
webメディア
idea

こんにちは、現在私はあたらしいWebというWeb3.0(仮想通貨、暗号資産、ブロックチェーン等)の情報を初心者でも分かるように解説などをするWebメデイアの立ち上げにフルスタックエンジニア兼ライターとして参加させてもらっています。

そして、今回メディアの立ち上げに少し普通とは違うようなやり方を行ってみたのでそれを共有しようと思います。

今回立ち上げに使用したのは高性能ノートソフトウェアのNotionとNotionを独自ドメイン化し、SEO対策などを行うことが出来るSuperです。

Superに似た日本製サービスに最近株式会社ペライチが買収したWraptasというサービスがありますが、公式サイトがSuperのほうがかっこいい事とWraptasは公式サイトのパフォーマンスが悪いので使用したサイトも悪くなるのではと思いSuperを選びました。

Superを使っている企業等

  • 株式会社ソウゾウ
    メルカリの社長がやっている会社です。
    ソースを見たらわかるのですが、Superを使用して作成されています。
    公式サイト

  • 株式会社ポインティ
    TikTokで人気な佐伯ポインティという人の運営している会社です。
    これも同様ソースを見るとSuperを使用していることがわかります。
    公式サイト

Notion+Superでの立ち上げ方法

Superではheadの一番上、bodyの一番上、cssの一番下(上書き)にしか独自コードを配置することが出来ません。
なのでfooter等を作成する場合にはbodyの一番上にfooterを書くのにcssで一番上に配置する必要があります。(ここで苦労しました...)

このような一覧のページを作成する場合はNotionのSynced block機能を使用して書かないとコピーが色々な所に乱立するようになり、パーマリンクなども設定が困難になります。

記事内などの画像以外のOGPファイルなどはVPSに配置して配信しています。

WordPress等のCMSを使わなかった理由

これは簡潔に言うと「管理がめんどくさくなるから」です。
WordPress等を使用するとPHP等でWordPress等の関数などを使用しテーマを開発する必要があります。
それだと変えるためにいちいちVSCodeやPHPstorm等を開き、コードを変更し、ZIPファイルに圧縮し、WordPressの管理ページからアップロードして有効化するという手間がかかります。
記事を書く際にも管理ページに移動して記事を入力していく必要があります。
Notion+Superであれば変えたければHTML/CSSを変更し、Superにコピペするだけ、記事の作成もNotionのアプリ内だけで完結することが出来ます。(しかもMarkDown対応！)

Deepに記事を書いていく場合や色々な機能を追加するメディアならばWordPressのほうが最適だと思いますが、この『あたらしいWeb』には初心者に見やすいデザインでわかりやすい記事を提供することができれば大丈夫なのでNotion+Superで十分と判断しました。(それともし必要であればVPSに.jsファイルを配置してheadで読み込ませて処理行ったりも出来る！)

これらの理由で今回はWordPressを使用し、Notion+Superという珍しい構成でWebメディアの立ち上げを行いました。

短いですが今回の記事はこのあたりで終わろうと思います。
ここまで読んでいただきありがとうございました。

Discussion