Notion x Superでブログを作ってみる

概要

今まで、Blogは Hugo + Netlify で運用していたのですが、Notion x Superでブログを作って移行しました。

移行した理由

最初ちょっと、高いかなと思いましたがPCでもiPadでもNotionで記事を簡単に編集できるのは良いかなと思いました。

またコミュニティも活発みたいで、機能追加もそこそこあるのでこれからもっとよくなることも期待して移行しました。

メリット&デメリット

メリット
- 使い慣れたNotionで編集できる
- 独自ドメインを割り当てられる
- JavaScriptやCSSを注入できる。
  - これによって、Google Analyticsとうの設定が可能
デメリット
- 1月12ドルかかる
- Notion x Superに完全に依存してしまってカスタマイズできる範囲が限られる

Super.soの料金プラン

2021年時点でのSuperの料金は月$12（年払いで月$10相当）で1サイト分のプランが基本だった。複数サイトを持ちたい場合はプランを追加する形になる。

Hugoなどの静的サイトジェネレーターと組み合わせたNetlify無料枠と比べると確かに費用がかかるが、「Notionで書くだけで公開できる」という運用コストの低さを考えると、個人ブログとしては十分に許容できる範囲だと判断した。

Superは後発の類似サービス（Feather、Potion.soなど）との競争もあり、機能追加の速度が比較的早い。コミュニティフォーラムでの要望対応も活発だった。

カスタマイズの実例（CSS/JS注入）

SuperはNotionの見た目をそのままウェブに出すだけでなく、管理画面からカスタムCSSとJavaScriptを注入できる。これが地味に便利で、たとえば以下のようなカスタマイズが可能だ。

CSSの例

/* フォントをGoogle Fontsに変更 */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

/* ヘッダー画像の高さを調整 */
.notion-page-cover {
  height: 300px !important;
}

JavaScriptの例

<!-- Google Analytics 4 の設置 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXX');
</script>

他にもコメント機能（Disqusやgiscus）の埋め込み、Twitter Widgetの表示なども同様の方法でできる。Notionのブロック機能だけでは実現できない部分を補える点がSuperの強みのひとつ。

SEO対応

NotionページをそのままURLで公開するだけだとSEO的に弱いが、Super経由で公開するといくつかのSEO対応が加わる。

カスタムドメイン対応: xxxx.super.site ではなく自分のドメインで公開できる
メタタグのカスタマイズ: ページごとにtitleタグ・descriptionタグを設定できる（管理画面から）
OGP（SNSシェア用画像）: Notionのページカバー画像がOGP画像として設定される
サイトマップ自動生成: 記事ページが自動でサイトマップに含まれる

ただし、Googleがページをクロールするにはある程度の時間がかかるし、Notionのページ構造はSEOに最適化された設計ではないため、SEO特化で考えると他の選択肢に軍配が上がる。

表示速度について

Hugoで生成した静的HTMLと比べると、Superのページはやや読み込みが遅い。Notionのコンテンツを取得してレンダリングする仕組みのため、どうしてもオーバーヘッドが生じる。

PageSpeed InsightsでLCP（Largest Contentful Paint）が3秒を超えることがあり、純粋な静的サイトと比べるとパフォーマンスは落ちる。画像の最適化や遅延読み込みはSuperが自動でやってくれるが、それでもHugo+CDN構成には及ばない。

速度を最優先にするなら静的サイトジェネレーター（Hugo, Astro, Next.jsのSSGモードなど）が向いている。

他のプラットフォームと比較して選ぶ基準

プラットフォーム	向いているケース
Notion x Super	Notionを日常的に使っている、書くことに集中したい
Hugo + Netlify	速度・SEO重視、Gitベースの管理が好き、無料で済ませたい
WordPress	プラグインで柔軟に拡張したい、既存資産がある
Zenn / note	とにかく楽に始めたい、技術系・日本語コンテンツ中心

NotionをメインのPKM（個人知識管理）ツールとして使っていて、そこで書いた内容をそのまま外に出したい、という人にはNotion x Superは非常に合っている選択肢だ。技術的なセットアップの手間を最小化しながら、ある程度の見た目とSEOも確保したい場合にちょうどいいバランスだと思う。

解説動画

前提として、Super.soとNotionのアカウントは作成済みであること。