🔥

個人開発を下火にさせてなるものか！！個人開発を支える裏方サービスをAI駆動で作った話

に公開
AI
Next.js
TypeScript
個人開発
Claude
idea

KoeLoopというWebサービスを作りました

KoeLoop

KoeLoop は、プロダクトに超簡単に組み込めて、フィードバック・FAQなどの裏方機能を追加することができるサービスです。
ウィジェットを表示するためのスニペットを貼るだけで、こんなことができます。（鋭意追加開発中です）

  • 📝 ユーザーの声（フィードバック）を収集
  • ❓ FAQ をまとめて表示し、サポートの手間を削減
  • 👍 投票機能で「どの要望が多いか」を可視化

イメージはこんな感じで、各プロダクトに内包される形で機能を組み込むことが可能です。

KoeLoopWidget Desktop

KoeLoopに対する想い

KoeLoopを作った背景や熱意・パッションについては、

https://note.com/koeloopnote/n/n947cbab218bb

に詳しい想いを綴っています。ZennやQiitaは、技術寄りの情報を、Noteには、パッション寄りの情報を載せてていきます。よろしければ、是非こちらもご覧ください。

なにを作ったの？

筆者は、普段WebアプリやElectron製のデスクトップアプリなど、あれこれと個人開発をしています。個人開発のプロダクトの初版をリリースした後、できれば組み込んでおきたい、共通の機能があり、毎回どうしようか悩まされていました。

例えば

  • FAQを管理したり
  • ユーザーからのフィードバックを集めたり
  • お知らせを発信したり

などなどです。

これらは、プロダクトを改善し続ける上で重要な要素ですが、一方で、開発コストがかかるため、なかなか手が回らないことも多いです。

また、この手のサービスは、既存のSaaSを利用することもできますが、

  • 個人開発者向けではなく、エンタープライズ向けで高機能すぎて使いこなせない
  • 価格が高い($20/月などはざら)
  • 日本語対応が不十分
  • 自分のプロダクトに合わない
    • 自分のプロダクトから一度離脱する必要があるなど、ユーザー体験が損なわれてしまう
    • テーマカラーなどが異なり、デザインが合わない

などの理由で、導入をためらうことも多いです。

そこで、個人開発者や小規模チーム向けに特化した、シンプルで使いやすいフィードバック収集＆FAQ管理ツールを作ることにしました。

その名も KoeLoop です。 👇️

https://koeloop.dev/ja

なにができるの？

エンドユーザに向けた機能提供

ウィジェットを、自分のプロダクトに組み込むことで、FAQの表示や、フィードバックの収集ができるようになります。
また、この手のサービスにありがちな、ユーザーが外部のサイトに飛ばされることはなく、自分のプロダクトの中で完結するように設計しているため、ユーザー体験を損なうこともありません。
また、プロダクトのテーマカラーに合わせて、ウィジェットの色をカスタマイズすることもできるため、デザインの一貫性も保てます。

例えば、組み込んだウィジェットは、以下のように表示されます。

KoeLoopWidget for FAQ Mobile

これは、FAQを表示している例ですが、フィードバック収集フォームを表示したり、開発者からエンドユーザーに向けて、次に開発しようとしている機能アイディアに対して投票する機能などもあり、今後もお知らせ管理機能など、裏方で支える系の機能を追加していく予定です。

開発者に向けた管理ダッシュボード

開発者は、KoeLoopの管理ダッシュボードにアクセスすることで、収集したフィードバックの確認や、FAQの管理、投票結果の確認などができます。

KoeLoop Dashboard Overview

複数のプロダクトに対する、フィードバックの一元管理やFAQの管理が、直感的にできるように設計しています。

なぜ作ったの？

個人開発をしている人（筆者自身含む）がなるべく開発を継続できるように支援したい！！という思いが強くありました。

個人開発をしていて、「僕が考えた最強のプロダクト」を世に送り出すことはできたものの、実際には使ってくれたユーザーの声をうまく拾い上げられず、改善に活かせていなかったり、ユーザーの反応が見えにくいと、モチベーションの維持も難しくなります。

最近は、個人開発は下火であるといった話も聞こえており、そんな悲しい話を聞かなくてすむように、少しでもユーザーの声を拾いやすくし、開発者のモチベーションのプロダクトの改善に役立ててもらいたいと考えました。

筆者自身は、個人開発をやっているときの大きなモチベーションアップポイントの一つが、ユーザーの反応が見えることでした。ユーザーからのフィードバックを受け取り、それをもとにプロダクトを改善していくことが、なによりもやりがいにつながっています。特に、直接的なユーザーの声が聞けると、次の改善案がどんどん浮かんできて、開発が楽しくなります。
そんな開発者もユーザーもハッピーになれるサービスを目指しています。

KoeLoopという名前の由来

KoeLoopの名前の由来は、「Koe」は日本語の「声」から、「Loop」は「循環」を意味しています。 また、「Koeru」は「超える」という意味も含んでいます。
コエループは、ユーザーの声を開発者に届け、その声を開発者がプロダクトに反映し、その改善ループを促進することで、より良いプロダクトになり、みんながハッピーになっていく可能性を高めたいという思いを込めています。

ユーザーの 声 を聴いて、プロダクトを改善し、今のプロダクトを 超え たプロダクトになっていく、そんなループを続けることで、開発者がそれぞれの最高のプロダクトに仕上げていけるようにと名付けました。

ユーザーの声と開発者のアウトプットが総合に循環するようなイメージで、AIと壁打ちしながらロゴもデザインしました。Claude,Gemini,ChatGTPなどに作ってもらって、コンペ形式で選びました（笑）

KoeLoop Logo

技術スタック

技術についての詳細は、別のzennの記事を執筆中ですが、ざっくりと以下のような構成にしています。
AI駆動開発と相性のいい技術スタックを中心に、以下のような構成にしています。

  • フロントエンド
    • Next.js 15
    • Tailwind CSS
  • CDN兼バックエンド
    • Cloudflare Workers
  • Database
    • Supabase で Postgres
  • 認証
    • Supabase Auth
  • メール配信
    • Resend
  • 決済
    • Stripe

いわゆる「フルサーバレス」な構成を目指しています。
サーバを自分で運用せずに、世界中の開発者にすぐ届けられるのが魅力です。

どうやって作ったの？

筆者自身は、インフラーアーキテクチャ・バックエンド・フロントエンドまで、幅広く手を動かせるフルスタックエンジニアですが、今回は、極力AI駆動で、開発を進めました。（詳細は、別の記事を執筆中です）

  • 企画
    • ChatGPT, Claude, Gemini
    • チャット形式でアイディアを壁打ち
  • デザイン
    • デザインは無し状態から作っていきました
    • ロゴはAIに複数案作ってもらい、コンペ形式で選定
  • 仕様整理・設計
    • SpecKitを使って、設計書を作成して、実装の前に細かい仕様を詰めました
  • 実装
    • フロントエンド、バックエンドともに、ほぼClaudeCodeで実装しました
    • いくつかのフレームワークで作らせてみて、一番良さそうだったのが先程の技術スタックで上げたものでした
  • テスト
    • PlaywrightでE2Eテストを自動生成
  • デプロイ
    • Cloudflare Workersへのデプロイは、wranglerを使って

いろいろ、AI駆動の実践的なノウハウが溜まったので、別記事にまとめる予定です。

導入方法（超かんたん）

ウィジェット設定

管理画面でウィジェットの設定を行います。
テーマ（ライトモード・ダークモード両方）や、アクセントカラー（埋め込むプロダクトのアクセントカラーを設定することで、自分のプロダクトに調和します）、表示する機能（FAQ、フィードバック、投票など）を選択します。

KoeLoop Widget Config

こんな感じで設定すると、ウィジェットのプレビューがリアルタイムに更新されるので、イメージを確認しながら設定できます。
設定すると、ウィジェットを表示するためのスニペットやURLが発行されるので、それをプロダクトに組み込みます。

組み込み方の例

Webアプリの場合

ウィジェットのスニペットを、HTML部分に貼り付けます。

<!-- KoeLoop Widget -->
<div id="koeloop-widget-xxx"></div>
<script src="https://koeloop.dev/widget.js"></script>
<script>
  new KoeLoopWidget({
    productId: "demo",
    containerId: "koeloop-widget-xxx",
    theme: "light",
    primaryColor: "#e38a0d",
    showVoting: true,
    showFeedback: true,
    showFAQ: true,
    locale: "ja",
    apiBase: "https://koeloop.dev"
  });
</script>

ネイティブアプリの場合

ネイティブアプリの場合は、WebViewを使ってウィジェットを表示します。

ウィジェットの設定を行うと、例えば、以下のようなURLが発行されるので、これをWebViewで表示します。

https://koeloop.dev/embed/dummy_product_id?theme=light&locale=ja&primaryColor=%2523e38a0d&showVoting=true&showFeedback=true&showFAQ=true

各プラットフォームのWebViewに上記URLを設定する形になります。

React Native

<WebView source={{ uri: "さきほどのURLを貼る" }} />

Flutter

WebView(initialUrl: "さきほどのURLを貼る")

iOS (Swift)

webView.load(URLRequest(url: URL(string: "さきほどのURLを貼る")!))

Android (Kotlin)

webView.loadUrl("さきほどのURLを貼る")

プランと料金

Freeプラン → プロダクト2件まで無料で利用できます。
（プロダクトがそれより多くなった場合は、Proプラン(月額980円)にアップグレードしてください。）

一通りの機能を無料で試せますので、ぜひ試してみてください。

今後の展望

今後は、以下のような機能を追加していく予定です。

  • お知らせ管理機能
  • AIを活用したフィードバックの自動分類や、FAQの自動生成
  • より詳細な分析機能
  • 他のツールとの連携（例: Slack, Discord、Notion, JIRAなど）

開発者がより本質的なプロダクト開発に集中できるように、裏方で支える系の機能を充実させていきたいと考えています。

おわりに

KoeLoopは、個人開発者や小規模チームが、ユーザーの声を効果的に収集し、プロダクトを改善し続けるための強力なツールです。
ぜひ、あなたのプロダクトにもKoeLoopを組み込んで、ユーザーの声を活かした開発を始めてみてください。

あっ、KoeLoopのフィードバックも管理画面内にKoeLoopウィジェットを組み込んでありますので、ぜひご意見・ご要望をお寄せください！

KoeLoop

Discussion