Zenn
📝

ブログと○○を融合したプラットフォームを個人開発しました

に公開
AWS
Next.js
Vercel
個人開発
webアプリ
idea

概略

先日、初めての個人開発プロダクトをβ版リリースまで持っていくことができました！
本記事では、そのご報告と、主要なコンセプトやこだわりポイントをご紹介します。

作ったもの・開発動機

Webアプリ「ログツー」を作りました。
https://log2.app/

当初のコンセプトは「学習特化ブログ」です。既存のブログプラットフォームは多数ありますが、中高生の学習に特化したものは少ないことに着目しました。

学習に特化したブログプラットフォームがあれば、以下の効果が期待できると考えました。

  • 環境による情報格差の解消
  • 勉強過程や成果の共有によるモチベーション向上
  • 教材作成者と学習者のマッチング
  • 検索エンジンからの流入による教材の普及
  • SNSや動画サイトとは異なり、学習者が気を散らさずに学習コンテンツを探しやすい

これらの需要が見込めると判断し、開発に着手しました。

技術スタック

開発のベースとして、Next.js チームが提供する SaaS Starter テンプレートを利用しました。主要な技術スタックとデプロイ環境は以下の通りです。

主な利用技術:

  • Framework: Next.js (Reactフレームワーク)
  • Database: PostgreSQL
  • ORM: Drizzle ORM (TypeScript ORM)
  • UI Library: shadcn/ui
  • (Payments): Stripe (※課金機能は未提供)

デプロイ環境:

  • Vercel: Next.js アプリケーションのホスティング
  • AWS
    • RDS (PostgreSQL): データベース
    • S3: メディアファイル (画像、PDFなど) のストレージ
    • CloudFront: メディアファイルの高速配信 (CDN)

AWS無料枠により運用するつもりが、少額の課金が発生した件は別の記事にしてあります。
https://zenn.dev/ymsy/articles/df03d4b0e00b1d

ブログ記事の機能

Zennには技術者の方が多いので、データモデリングや検索機能の工夫点に焦点を当てて説明します。

階層タグ

ユーザーの学習分野や目的は多岐にわたるため、目的の記事にたどり着きやすい記事検索機能が重要になります。

「中学生 → 数学 → 図形 → 三平方の定理」のように、カリキュラムに沿ってタグを選択できる仕組みがあれば、目的の記事に容易にたどり着けると考えました。

そこで、タグ機能を以下のように実装しました。

  • 記事には任意の文字列をタグとして設定可能
  • /home ページの検索機能で、タグを階層構造で表示
  • 広いカテゴリから絞り込みながらタグを選択して検索
  • 階層構造は表示用であり、実際のタグには階層情報は含まれない

例えば、「中学生」直下の「数学」タグと「高校生・大学受験生」直下の「数学」タグは同じものです。記事が中学数学か高校数学かは、「中学生」または「高校生・大学受験生」のタグの有無で判断できます。「数学」タグ自体は同一として扱い、階層構造はタグの表示時のみに機能する仕組みです。

以下の画像は、実際のUIです。(階層構造の展開/格納処理はお気に入りポイントです！)
ログツー 記事検索UI(階層的に絞り込んでいくことでタグ選択可能)
ログツー 記事検索UI

除外検索

勉強中の方にも気軽に投稿していただきたいため、記事内容の不正確さにはある程度寛容なプラットフォームを目指しています。しかし、解説記事を求める読者にとっては、不正確な記事はノイズになります。そこで、特定のタグを含まない記事を検索できる機能を実装することで、「学習内容を記録したい人」と「解説記事を読みたい人」のニーズに応えることを考えました。勉強中の場合は「勉強中」タグ、解説記事の場合は「解説」タグを付与してもらうことで、検索機能による棲み分けが可能です。
除外検索UI(タグをクリックすると〇→△→×と切り替わる)
除外検索UI (選択済みタグをクリックすると〇→△→×と切り替わる)

数式やPDFの埋め込み

学習コンテンツ投稿の利便性を高めるため、以下の機能を追加しました。

  • 数式埋め込み機能 (KateX)
  • PDF埋め込み機能 (Adobe PDF Embed API)

PDF埋め込み機能の実装では、一部のPDFで表示が崩れる問題に悩まされ、ライブラリ選定に難航しましたが、Adobe様のAPIを利用することで解決しました。記事ページ内でスライドショーを表示できる便利な仕様を実現し、プリントやスライドの共有を想定しています。

学習ログ管理機能

教科ごとの学習時間を記録するツールも組み込みました。同様の機能のスマホアプリは多く提供されていますが、Webアプリとして提供することで差別化を図りました。

  • 学校のタブレットにアプリをインストールできない
  • 動画教材で学習しているので、パソコンから学習記録したい

といったニーズに応えることができます。もちろん、スマホからの利用にも対応しています。

また、ブログサービスに学習ログ管理機能を組み込むことで、以下の相乗効果が期待できます。

  • 定期的な学習記録のために訪れる学習者をターゲットにした記事を作成できる
  • 記事を「勉強中」に設定し、記事ごとに学習時間を管理できる
  • 著者は自身の記事が学習に利用されているかを確認できる

この『学習ログ管理機能』こそが、記事タイトルの『〇〇』であり、サービスの中心的なコンセプトとしてネーミングにも反映させました。
ログツー 学習ダッシュボード(ストップウォッチ機能、カレンダーやグラフによる学習時間可視化、目標設定画面)
ログツー 学習ダッシュボード

今後

さて、本サービスには一つ、重大すぎる問題が残っています。
今回紹介した工夫が真価を発揮するのは、ユーザーとコンテンツが増えた後です。

...そうです。閑古鳥が鳴いているのです。
次なる壁にぶち当たりましたが、心を折らずに開発・運営を進めていこうと思います。

本サービスに興味を持っていただけた方は、下記リンクから実際の記事ページを覗いてみてください。
https://log2.app/users/official/articles/b92e837c-80a5-5d9a-a627-fd9dd399b363

最後まで読んでいただき、ありがとうございました。
今後ともログツーをよろしくお願いいたします。

Discussion