Astro-Notion Blog アップデート

Astro と Notion API。この 2 つを組み合わせた astro-notion-blog は、開発の楽しさと表現力を両立させてくれる、本当に強力な構成です。

2026年2月16日、当ブログは大規模なアップデートを実施しました！

今回のメンテナンスでは、デザインの刷新や、標準のスターターをさらに一歩進めた SEO 強化を盛り込んでいます。
その全貌を、記録していこうと思います。

🏗️ Powered by astro-notion-blog

まずは、このブログの土台を支えてくれている素晴らしいツールのお話から。
当ブログの基盤には、otoyo (おとよ) 氏が開発・公開している astro-notion-blog を採用しています。

Notion をヘッドレス CMS として活用するためのスターターキットとして、これ以上ないほど完成度が高く、カスタマイズするのも本当に楽しいツールです。こんなに便利なものをオープンソースで提供してくださっている Otoyo 氏に、この場を借りて心からの「ありがとうございます！」を伝えたいと思います。

💡 そもそも、CMS とは？

ちょっと専門的なお話になりますが、CMS（Content Management System） とは、サイトのテキストや画像をまとめて管理してくれるシステムのことです。

このブログで使っている Notion は、その中でも 「Headless CMS」 と呼ばれる、管理機能に特化したスタイルです。

📦 なぜ Notion を CMS に選ぶの

数ある CMS の中で、なぜ Notion なのか？
それは、単なる「メモの延長」ではない、圧倒的なメリットがあるからです。

究極の執筆体験: ブロックを組み替える感覚で記事が作れる Notion は、一度使うと離れられません。
データベースの力: 公開日や SEO 用の抜粋などを、表形式でポチポチと設定できるのが本当に便利です。
Astro とのタッグ: 執筆は Notion で楽々。表示は Astro で「爆速」。このいいとこ取りが、この構成の最大の魅力ですね。

🤖 AIエージェント「Antigravity」による共創プロセス

今回のアップデート、実はきっかけはAntigravity。
システムの構築、設定の最適化、さらには SEO 対策のコード修正まで、すべてを AI エージェントAntigravity へ全面的に任せて進めました。

「ここをこうしたいな」という対話を通じて、Agent が自律的に動き、驚くほどスピーディーに以下の環境が整いました：

環境の最適配置: node_modules で Vault が重くならないよう、ディレクトリ構成を再編。
SEO 実装の全自動化: JSON-LD や robots.txt、サイトマップの生成を Agent がサクッと完了。
開発ログの洗練: 実装の記録からこの記事のリライトまで、対話の中で形にしていきました。

AI はもう「便利なツール」の一歩先、一緒に作りたいものを作る創造神のパートナーになったんだな、と実感しています。

🎨 デザインの刷新：Pastel Aurora Glassmorphism

外観を大幅に変更しました。

それもAntigravityに

🍮

もっとオシャレにしたい。

👾

わかりました。

で提案してくれたのを軸に壁打ちして作り上げました。

AIが言うには

ガラスのような透明感とオーロラの色彩.メインの視覚コンセプトとして Pastel Aurora Glassmorphism を採用。背景に淡いオーロラのようなグラデーションを配し、各要素に透明感のあるぼかし（Backdrop Filter）を適用することで、プレミアムで幻想的な体験を提供します。

/* グラスモーフィズムを実現するCSS */
.post-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.post-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.12);
}

だそうです。

グリッドレイアウト: 記事一覧をモダンなタイル形式に変更し、情報の密度と美しさを両立。
プロフィールエリア: 筆者のアイデンティティを際立たせる新しいカードレイアウト。

🛠 技術的 SEO の強化：検索結果をリッチに

検索エンジンに好まれ、SNS でも「映える」ブログへと技術面からアプローチしました。

1. JSON-LD (構造化データ) の実装

検索結果に公開日や著者情報がリッチに表示されるよう、BlogPosting スキーマを自動生成するように強化しました。

<!-- src/layouts/Layout.astro -->
<script type="application/ld+json" is:inline set:html={JSON.stringify({
  "@context": "<https://schema.org>",
  "@type": "BlogPosting",
  "headline": siteTitle,
  "description": siteDescription,
  "image": [ogImage],
  "datePublished": publishDate,
  "author": {
    "@type": "Person",
    "name": "AuthorName",
    "url": Astro.site
  }
})} />

API 認証の刷新: 内部インテグレーション・トークンの再設定によるセキュアなアクセス。
Node.js v20+ への最適化: Astro ビルド時に標準の -env-file フラグを使用し、環境変数の読み込みを確実にしています。

/* package.json */
"scripts": {
  "build": "node --env-file=.env ./node_modules/.bin/astro build"
}

💡 これからの運用フロー

今回のアップデートで、記事を書くのがもっと楽しくなりそうです。

Notion で自由に書く！
要約（Excerpt）を添えて SEO 対策！
push して、爆速公開！

技術、デザイン、そして AI との共創。
この最高の土台の上で、これからもワクワクするような発信を続けていきたいと思います！

ロンギの家