ブログはNotionで書いて、チェックひとつで公開する。TAIONサイトの仕組み

こんにちは、TAIONの塚越です。

今回は、このブログそのものがどういう仕組みで動いているのかを書きます。

このブログの記事は、すべてNotionで書いています。書き終えたら「公開」にチェックを入れる。それだけで、数分後にはサイトに載ります。

なぜNotionで書くのか

ふだんのメモも、企画も、AIとのやりとりの記録も、私はほとんどNotionに置いています。記事だけ別の管理画面で書くと、下書きがあちこちに散らばってしまう。それなら、いつも書いている場所をそのまま公開の入口にしてしまおう、と考えました。

もうひとつの理由はAIです。私はClaudeにNotionを読み書きさせています。記事の手直しも、画像の差し込みも、公開日の設定も、Notionの中の作業であればAIに頼めます。実際、このブログの記事も、文章の手直しや画像の差し込みはAIと一緒に進めました。

記事は、Notionの「TAIONサイトブログ」というデータベースに、1記事1ページで書きます。サイトはNext.jsでつくり、Vercelで動かしています。

サイトは5分ごとにNotionを読み直し、「公開」にチェックが入った記事だけを表示します。記事を出すたびにサイトを作り直す必要はありません。Notionで直せば、数分後にはサイトも変わっています。

項目は、必要なものだけにしました。

・タイトル：記事の題名。検索結果やSNSのカードにも出ます。

・スラッグ：URLの末尾に使う英数字。たとえば hubspot-free-setup。

・公開：チェックを入れた記事だけが、サイトに出ます。

・公開日：一覧は、この日付の新しい順に並びます。

・要約：一覧と、記事の冒頭に出す一文です。

・キービジュアル見出し：表紙に大きく出す言葉。空欄ならタイトルを使います。

表紙の画像には、Notionのページのカバーをそのまま使っています。画像の中には文字を入れず、見出しはサイトの側で重ねて表示します。画像をつくり直さなくても、見出しの言葉だけを変えられるようにするためです。

本文は、見出し、段落、箇条書き、引用、区切り線、画像に対応させました。画像の下に書いたキャプションは、サイトでも画像の説明として表示されます。

サイトがNotionを読めるように、Notionの「開発者ツール」でコネクトをつくります。名前は「taion-site」にしました。ここで発行されるAPIトークンを、サイトの設定（環境変数）に入れておきます。

つくっただけでは、サイトはまだ何も読めません。読ませたいデータベースを開き、右上の「…」から「接続」を選んで、「taion-site」をつなぎます。

「公開」にチェックを入れていない記事は、サイトには出ません。だから書きかけの記事も、そのまま同じデータベースに置いておけます。

思いついたときに題名だけ入れておき、あとから少しずつ書き足す。書き上がったら見直して、公開日を入れ、チェックを入れる。下書きの置き場と公開の場所を分けていないので、どこに何を書いたかで迷うことがありません。

公開したあとに直したいときも、Notionのページを直すだけです。誤字ひとつでも、画像の差し替えでも、数分後にはサイトに反映されています。

記事の手直し、画像の差し込み、公開日や表紙の設定は、AIにNotionを操作してもらっています。記事の中の図も、AIに組んでもらってから画像にしました。

公開してよいかどうかは、私が決めます。チェックを入れる手はAIでも、その判断は自分で持っておく。ここは変えないつもりです。

書く場所と公開する場所が同じだと、記事を出すまでの手間がほとんどなくなります。書いて、見直して、チェックを入れる。それだけです。