Zennライクな記事プラットフォームを自作する - Part 1: プロジェクト概要と技術スタック

こんにちは、今回から全10回にわたって、Zenn や note.com のような記事投稿・課金プラットフォームを自作した過程をシリーズでお届けしていきます。

プロジェクト名は Sync です。リッチテキストエディタで記事を書き、無料・有料（買い切り）・サブスク限定の3段階で公開できるプラットフォームを、Next.js 16 を中心としたモダンな技術スタックで構築しました。

この Part 1 では、プロジェクトの全体像と採用した技術スタックについてお伝えします。

この記事で学べること

Zenn や note.com は非常に優れたサービスです。しかし、プラットフォームに依存するということは、デザイン・機能・収益モデルのすべてがそのサービスのルールに縛られるということでもあります。

自分専用のプラットフォームを持つことで、以下のようなメリットがあります。

このプロジェクトのもうひとつの大きなテーマは、Claude Code を活用した AI 駆動開発の実験です。

従来のソフトウェア開発では、設計・実装・テスト・デプロイのすべてを人間が主導していました。しかし、AI コーディングアシスタントの登場により、開発のワークフローが大きく変わりつつあります。

Sync の開発では、Claude Code をペアプログラミングのパートナーとして積極的に活用しました。コンポーネントの実装、API の設計、デバッグ、リファクタリングなど、開発プロセス全体で AI のサポートを受けながら進めています。

この経験を通じて分かったのは、AI は「コードを書く」だけでなく、「設計を議論する相手」としても非常に優秀だということです。特に、Next.js の App Router のような比較的新しいパターンについて、ベストプラクティスを確認しながら実装を進められるのは大きな利点でした。

Sync が提供する主な機能は以下のとおりです。

リッチテキストエディタ: Tiptap v3 ベースの WYSIWYG エディタで、見出し・太字・リンク・画像・コードブロックなどを直感的に編集
Zenn フォーマット対応: YAML フロントマター付き Markdown をペーストすると、title / emoji / type / topics を自動抽出してメタデータに反映
カバー画像: アップロードまたは OG 画像 API による動的生成
シリーズ管理: 記事をシリーズにまとめて順序付けて公開