思いつきのサービスを形にする

何を作るか

どんなものを作るか？何パターンかプロジェクト案を出し、その中から綿100%素材を簡単に探せるサービスに決めた。

選定理由

ターゲット層が明確（敏感肌、感覚過敏、乳幼児、高齢者など）
ニーズの解像度が高い（自分がターゲット層）
収益までの距離が短い（アフィリエイト）

やるからには収入にならねば意味がない。本当に作りたいものも思いつきはしたが、まずはシンプルに購買に繋がる（と思いたい）サービスを作ることにした。

自分が感覚過敏持ち、汗かき、家族がアトピーなどで綿100の服を選んで買っていることもあり、より検索体験をよくしたいという、よくなるだろうかという挑戦の気持ちもあった。

技術選定

どうせなら未経験の技術を使いたい。学びはいくらあってもいい。

やりたいこと

複数ショッピングサイトの商品を一度に検索
お気に入り商品の登録ができる
ユーザー認証でデバイス間でお気に入りを維持
商品属性でのフィルタリング
余計な装飾を省き検索機能に集中できる

商品データを外部APIから取得する、データベースに保存する、認証機能…などから以下を選定

使う技術

Next.js
Supabase
Tailwind CSS

UIフレームワークも試したが調整が面倒になり途中でやめた。

AIとの共同開発

結果的に2ヶ月ほどで基本は完成した。Reactもほぼ初めてではあったが、わからないことは公式ドキュメントとAIの力で何とか乗り越えた。

AIはClaude,Geminiをアプリやvscode拡張のroo codeなどを併用。喧々諤々、喧嘩しながらもフィードバックを得られることのモチベーションは大きかった。

コード生成もかなり任せているが、コードベースの肥大化に伴って一貫性の維持が難しくなる。随時設計ドキュメントを書かせ、それを参照しながら作った。ドキュメントはAIにはもちろん、知識が浅く忘れっぽい自分には役に立った。

ちなみにドキュメント作成用のプロンプトは以下のようなもの。

今回の実装内容についてドキュメントを作成してください

流れの例：設計思想、メリット、仕組み、データフロー、拡張方法、今後の改善点、まとめ

注意点：
適宜mermaid図などを組み込み視認性も意識すること
文章は冗長にならず簡潔に伝わるようにすること。
具体的なコード内容はできるだけ避け、最低限に留めること（可読性を著しく下げます）
コードではなく目的や内容について説明してフォローする。
口調は桜井政博氏のように論理的かつ簡潔に要点を伝えるようお願いします。

AIの出力したコードをAIに批評させたり（コピペで検証させ合う）、何度も公式ドキュメントを見ろと指示するなど、AIとの協働についても学びがあった2ヶ月だった。

公開しても、認知されない

https://www.cotton1000p.com

本日2025/06/01、綿1000%を正式公開した。構造化データのマークアップもした。サーチコンソールにサイトマップも登録した。ページの表示速度も問題なさそうだ。Twitterのアカウントも開設した。

当然だがアクセスはまったく無い。これからどうやって展開していくのかが大きな課題としてのしかかっている。そういうの、苦手なんだ。