Notionで高速ブログを作る方法とは？

TL;DR

NotePressでは、指定のNotionデータベースを共有し、そのURLと希望するサブドメインを登録すれば、約1分でブログを構築できる。Next.js、Neon、Clerk、GitHub API、Vercel APIを組み合わせ、執筆管理と高速表示を両立している。

Transcript

ついにこの時が来ましたはいどうもしん ですえ今回ですねようやく私ノートプレス というサービスをリリースできましたまX の方でもですね昨日ですねポストしたん ですけどもまこんな感じでありがたいこと にですね1.6万のインプレッション リツイートいいねしてくださった皆様本当 にありがとうございますえ感謝でござい ますはいということでですね今回の動画は ですねえまずえこのノートプレがどういう サービスなのかえそしてこれをなぜ作ろう と思ったのかでどういう技術スタックで 作ったのかまAI駆動とかで作ったんです けどもえそういった諸々全てね皆さんにお 伝えしていきたいと思いますま皆さんの 個人開発してる方ねいらっしゃると思い ますまそういった時の参考にえなればいい かなと思っておりますでまA駆動開発し... Read More

Key Insights

• NotePressは、指定されたNotionデータベースを記事編集画面として利用し、その内容を独自のサブドメイン上にブログとして構築するサービスである。
• ブログ作成手順は、テンプレートの選択、Notionデータベースの複製と共有、共有URLの登録、ビルド完了の待機という流れで構成される。
• ミニマリストテンプレートは現時点で無料提供され、追加予定のデザイン性が高いテンプレートは買い切りの有料販売が検討されている。
• 表示性能は、話者が実施したPageSpeed Insightsの計測でパソコンが99点、携帯電話が96点となり、レスポンシブ表示にも対応している。
• 個人開発のアイデアは、自分が過去に解決した悩みや現在感じている不便を記録し、同じ課題を持つ人向けの機能へ変換することで見つけられる。
• 中核技術は、Next.jsとTypeScriptで構築したクライアントとサーバー、データ保存を担うNeonという3要素の組み合わせである。
• 技術選定は、利用者が内部構成を通常は意識しないため、PythonならDjangoなど、開発者が得意な言語やフレームワークを基準に決めてよい。
• 認証は、ユーザーごとの利用テンプレートや購入情報を保存する場合に必要であり、閲覧中心のまとめサイトなどでは省略できる場合がある。
• 🎬 このチャンネルの他の動画:
  • Claude Coworkで業務を効率化する方法
  • CursorでWebアプリをバイブ開発する方法
  • Claude Code Skillsを作成・活用する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Notionでブログを作る方法は？

NotePressでアカウントを作成し、希望するサブドメインとミニマリストテンプレートを選びます。次に、提供されたNotionデータベースを自分の環境へ複製して共有状態にし、コピーした共有URLを登録します。完了ボタンを押すとビルドが始まり、話者の実演では約1分後にブログが公開されました。

Q: NotePressとは何ですか？

NotePressは、Notionのデータベースを記事管理画面として使い、その内容をWebブログとして公開できるサービスです。用意された形式のデータベースでは、記事のタイトルや本文に加え、タグ、公開日時、公開状態も設定できます。現時点ではミニマリストというテンプレートが無料で提供されています。

Q: 独自のNotionデータベースを使えますか？

独自に設計したNotionデータベースは、正常に表示できない可能性があるため、動画内では提供されたサンプルを複製して使うよう案内されています。そのデータベースを共有状態にしてURLを取得し、NotePressの設定画面へ登録することが、実演された構築手順です。

Q: NotePressの記事を更新する方法は？

公開後の記事は、構築時に複製したNotionデータベースから管理します。新規ページを作成してタイトルと本文を書き、必要に応じてタグ、公開日時、公開状態を設定します。Notionを日常的な執筆環境として使いながら、ブログの記事を運用できる仕組みです。

Q: NotePressの技術スタックは何ですか？

中核には、クライアントとサーバーを構築するNext.jsとTypeScript、データ保存を担うNeonが使われています。認証にはClerk、ブログ用リポジトリの複製にはGitHub API、ビルドとデプロイにはVercel APIを利用する構成です。ランディングページにはBolt.newが使われています。

Q: 個人開発のアイデアを見つける方法は？

自分が過去に抱えていた悩みと、その悩みをどう解決したかを書き出す方法が紹介されています。現在感じている不便も記録し、Webアプリで解決できる問題を選びます。NotePressも、Notionで執筆しながら高速な個人ブログを運用したいという、話者自身の過去の課題から生まれました。

Q: 個人開発ではTypeScriptを使うべきですか？

必須ではなく、アプリの規模や目的に応じて選べばよいというのが話者の見解です。TypeScriptは型エラーによってバグを未然に防ぎやすい一方、単一機能を検証するMVPでは準備に時間がかかる場合があります。そのため、小規模な初期検証ではJavaScriptを選ぶ案も示されています。

Q: 個人開発でデータベースは必要ですか？

ユーザーが投稿や情報追加を行うサービスでは、データベースが必要になりやすいです。一方、運営者が用意したデータを表示するだけのサイトやまとめサイトなら、Markdown形式のファイルなどを利用し、データベースを省略できる場合があります。必要性はアプリケーションの要件で判断します。

Q: Webアプリに認証を導入する理由は？

認証は、どのユーザーがどのテンプレートを使ったか、または購入したかといった利用者別の情報を管理するために導入します。NotePressではClerkが採用され、登録イベントをWebhookで受け取り、データベースへユーザー情報を保存する処理をNext.js側に作れると説明されています。

Q: 有料テンプレートの決済はどう実装する予定ですか？

将来の有料ブログテンプレートは、Stripeによる買い切り決済が検討されています。動画では、決済用ライブラリやドキュメントが充実していることが採用候補の理由とされ、決済後の情報をデータベースへ保存する構成が示されています。日本向けの候補としてPAY.JPにも触れています。

Summary & Key Takeaways

• NotePressは、普段使っているNotionをブログの編集環境として利用できるWebサービスである。用意されたデータベースを自分のNotionへ複製し、共有URL、サブドメイン、テンプレートを設定すると、バックグラウンドでビルドとデプロイが実行される。現時点のミニマリストテンプレートは無料で、タイトル、本文、タグ、公開日時、公開状態をNotion上で管理できる。

• アイデアの起点は、話者自身がWordPressや各種CMSを試し、使い慣れたNotionで記事を書きながら、Next.jsで高速表示したいという過去の悩みを解決した経験である。個人開発の題材は、過去に解決した不便や現在抱えている悩みを書き出し、同じ問題を持つ人へ提供できる機能に変換することで見つけられると説明されている。

• 中核構成は、Next.jsとTypeScriptによるクライアントとサーバー、Neonのデータベースである。Clerkが認証を担い、ユーザー単位のテンプレート情報などを管理する。さらにGitHub APIでブログ用リポジトリを複製し、Vercel APIによるビルドとデプロイへ接続する。将来の有料テンプレートにはStripeの買い切り決済を導入する構想も示されている。