1週間でAIツールまとめサービスを開発した話
開発したアプリ
リンクはこちら👇
開発のきっかけ
- いつでも見返せるような「ストック型」のAIツールまとめが欲しかった
- 海外のAIツールも抵抗なく使いたい
いつでも見返せるような「ストック型」のAIツールまとめが欲しい
近年、AI技術の急速な進展により、最新のAIツールやプロダクト情報を追いつくのが難しくなった。
TwitterなどのSNSでは日々新しいAIツールが紹介されていますが、これらは「フロー型」のアプリケーションで、大半の情報は瞬く間に流れてしまいます。
多くの場合、私たちは気になる情報を「いいね」やブックマークで保存しますが、情報の流れは速く、結果としてほとんどの情報を見直すことができません。
そういった中で、「ストック型」のAIツール紹介サービスがあれば便利だと考え、開発を始めました。
海外のAIツールも抵抗なく使いたい
AIツールの大部分は海外製で、英語が苦手な人にとってはなかなか利用しにくいのが現実です。
この問題に対処するため、ツールの機能や使用方法、特性などを日本語で紹介し、より多くの人が海外のAIサービスを抵抗なく活用できるようにすることを目指しました。
システム構成と使用技術
1週間でりリースをしたかったので簡易的かつ費用がそこまでかからない構成にしました。
システム構成
使用技術
フロントエンド
- Next.js
- TypeScript
- tiptap
サーバーサイド(API)
認証
画像保存
データベース
ホスティング
- Vercel
開発スケジュール
週末は一日中、平日は仕事の前後に作業を行いました。
1週間でのリリースを目指したため、以下のようなスケジュールで進行しました。
- 1日目: 要件定義と設計
- 2日目: UIの設計
- 3日目~6日目: 開発
- 7日目: ツールの公開
1日目: 要件定義と設計
1週間でリリースすることを前提に、機能の洗い出しや設計をしました。
具体的には、GitHubでissueを作成し、要件を箇条書きで明記しました。
通常はスプレッドシートなどを使用してまとめますが、このプロジェクトは個人開発だったため、ドキュメンテーションの大部分をGitHubで管理しました。
そして、ER図は以下のように作成しました。
2日目: UIの設計
UI設計では、複雑な機能は最小限に抑え、ユーザーが必要な情報を効率的に取得できることを前提としました。
私はデザイナーではないため、他のアプリを参考にUIを設計しました。
参考にした記事は以下の通りです：
UI設計で特にこだわった点はカテゴリーの絞り込み部分です。
最初は単純なボタンだけを設置する予定でしたが、視認性が低いことと、表示できる項目数が限られていることを考慮し、アイコン付きの見やすいUIに変更しました。
当初の想定は以下の通りです。
また、余白の設定は8の倍数を基本とし、一般的なデザインの原則に従いました。
3日目~6日目: 開発
1週間でのリリースを目指していたため、「新しい技術を試すのではなく、得意なものだけを使用して開発する」という原則を設けて開発を進めました。
また、SEOとパフォーマンスを考慮し、以下のような対策も施しました。
- SSRで開発（SEO対策として）
- スケルトンローディングの導入
- 画像の圧縮
開発については、一部、勉強会で出会った他の個人開発者にも支援してもらいました（詳細は後述）。
7日目: ツール投稿
最新のAIツールかつ実用性があるものだけを抽出し20コンテンツ分を最初は投稿しました。
今は一部GPTを使っていますが、将来的には自動で記事投稿までできる仕組みを作りたいと思っています。
機能
1週間でリリースすること前提にしていたので、機能は最小限に絞って開発をしました。
1次フェーズ
- Google認証
- 記事一覧・詳細
- 記事投稿、編集、削除 (管理者)
- カテゴリー絞り込み
- マイページ
- ブックマーク
| 記事一覧 | 記事詳細 |
|---|---|
 |
 |
| カテゴリー | ブックマーク |
|---|---|
 |
 |
| 管理画面 |
|---|
 |
2次フェーズ
- マイページの編集
- 管理画面のアップデート
- いいね・コメント機能
- GPTの導入で自動化
等...
開発での学び
- 期間を設定することの重要性
- 必要な機能の絞り込み
「1週間でリリースする」という期間を設定したことにより、無駄に開発時間を長引かせることなく、開発すべき機能に対する選択と優先順位付けが行えたと思います。
技術的にはすでに慣れ親しんでいるものを主に採用したため、新たな学びは少なかったですが、今後はGPTとの連携を進める予定で、そのためにも新しい技術を積極的に取り入れていきたいと思っています。
今後の改善点
- 表示速度
- ローディングの導入
- いいねやコメント機能の追加
- GPTとの連携
- ユーザーからのフィードバックに基づく機能の改善や追加
開発協力者
勉強会で知り合った、学生個人開発者のもつんさんに開発の一部を手伝ってもらいました。
もつさん本当にありがとうございました。
もつんさんの記事です👇
最後に
他にも色々な記事を書いているので合わせて読んでいただけると嬉しいです。
Discussion
素敵なプロダクトだと思います！
マネタイズとしては後に掲載依頼を受けるような形でしょうか？