NTTテクノクロス Advent Calendar 2025 シリーズ2 7日目の記事です。
もう一週間経ちました...?時は残酷ですね。
本日は日曜ですが、皆様いかがお過ごしでしょうか。
そんなわけで、こんにちは、NTTテクノクロスの青栁です。
初めての自社アドベントカレンダー参加ですが、お題に迷走し数万字をボツにした結果、今回はがっつり業務外での取り組みについて書いていきます！
とはいえ、個人開発を通して、業務に還元できる気づきをたくさん得られたので、少しばかりでも記録として残しておきたいと思った次第です。
ここでは、私が個人で開発・リリースした Web アプリ版『いんすたんとアルバム』と、現在開発中で Web アプリ版をお見せするのが恥ずかしく思ってしまうほどに、全面的な改善と機能を大幅パワーアップさせている iOS アプリ版について、企画から開発、リリース（予定）までをご紹介できればと思います。
プロダクト概要と背景
『いんすたんとアルバム』は、チェキ・配信スクリーンショット・ライブ写真など、推し活で日々増えていく画像と、その時の思いを時系列で記録できる「推し活専用・自分だけのアルバムアプリ」として開発した個人プロダクトです。
私自身、一時期はライブ(現場)には、足しげく通っていました。(フレックス勤務なので平日イベントにも頑張れば間に合う！なんていい会社なんだ！ﾁﾗｯ)
その中で、私を含め、ライブで知り合った知人の多くが、推し活において次のような潜在的な課題を抱えていました。
- チェキの撮影日や場所を後から思い出せないことがある
- 配信スクショがスマホ内に大量に溜まり、目的の画像を探すのが大変
- 通常の写真アプリでは、推し活に関する画像だけを集中的に管理できない
- メモ（何があったか、当日の気持ち）を残す手段がバラバラで、その時の気持ちを残しづらい
これらの課題を解決すべく、『いんすたんとアルバム』では、アナログなアルバム、チェキ帳では実現しづらい、次のような体験を実現しました。
- チェキ・スクショ・画像などを「推し活専用のデジタルチェキ帳」のような形でまとめて保存できる
- 画像、日付、推しの名前(グループ)、金額＋場所(ライブハウス名)、メモなどを、1つの記録として簡単に残せる
- 時系列順に一覧表示され、推しの活動の流れを振り返りやすい
- タイムライン形式で後から思い出を再確認しやすい
- 通常の写真アプリとは独立した「推し専用アルバム」を構築できる
→ 親が子供や家族のアルバムを作る気持ちがなんとなく理解できたかもしれません笑 - 統計管理や収支管理も可能で、自分の推し活を可視化できる
→ スマホのメモでお金の計算してませんか？見返した時によく分からなくなってませんか？
推し活は、ただその時を楽しむだけでなく、ファン同士の新たな交流など、人生の中で積み重ねていく貴重な体験でもあります。いわゆる「コト消費」というやつです。
その活動を、簡単にしっかりと思い出として残したい、あなたのために作ったのが『いんすたんとアルバム』です。
AIを「共同開発者」として扱った開発アプローチ
ひよっこ🐥エンジニアが個人でフルスタックアプリを作るにあたり、今回の開発では AI（Claude Code, Codex）を、何度もクォーター制限にかかるほど活用していました。
GPT 系は企画構想・市場リサーチ・仕様作成・SEO などのマーケティング寄りの領域で、Claude 系は実際のコード生成や UI/UX 検討といった実装寄りの工程で、それぞれのモデルの得意分野に応じて使い分けていました。
AI を「共同開発者」として扱うことで、「やりたいこと」が「実際にできること」に変わっていきました。(やれない理由はAIが潰してくるので、あとはもうやるしか無いわけです。)
仕様作成の高速化
個人開発では、実装だけでなく、「何を作るか」「どのように動くべきか」を言語化する工程が重くなりがちです。
そこで、GPT や Claude を利用し、画面構成・動作仕様・API 設計の叩き台作成と整理を、AI と一緒に進めていきました。
一例ですが、短時間で次のようなアウトプットを得ることができました。
- 画面一覧と画面遷移図の初稿
- 画像アップロードフローの整理
- データ構造の整理
- 想定されるエラーケースの洗い出し
AI が作ってくれた叩きをベースに、自分でブラッシュアップすることで、「仕様決めフェーズで挫折しがち」という個人開発あるある(※当方比)を乗り越えることができました。
また、こういった仕様作成や設計を自分主導で行う機会は、私のこれまでの業務では機会がなかったため、このプロセスそのものが実践形式での勉強になりました。
AI が、ある種 OJT のような役割も果たしてくれるわけです。
コード生成とレビューの活用
実装フェーズでは、AI がなければ「ぶん投げて諦めていたレベル」で、AI の存在が大きく効果を発揮しました。
React（Vite） を使った Web アプリ、SwiftUI を使った iOS アプリの双方で、画面構成やコンポーネントの生成をまず AI に任せました。そこから実際の構成や動きを質問しながら理解を深めつつ、追加の要望や細かな仕様を対話形式やmarkdownファイルや画像を入力に用いて伝えていき、最終的な形に仕上げていきました。
この工程のポイントは、「いかに AI に対して詳細かつ誤解のない指示を出せるか」 です。
とはいえ、これは人間同士で開発するときにも同じく重要なことなので、結果的に「言語化の良い練習」になりました。
また、AI にコードレビューをお願いすると、以下のような観点で改善案が返ってきました。
- 分離されていないコンポーネント構造の指摘
- 例外処理や未考慮パターンの補完
- パフォーマンス面での改善余地の指摘
- UI 部分の命名や階層構造の再設計案
ひよっこ🐥エンジニアとして開発していると気づきにくい部分や、そもそも知識が足りていない領域も補ってくれるため、品質の底上げに直結しました。
技術的チャレンジと意思決定
今回の開発では、まず Web アプリからスタートし、その後 iOS アプリの開発に着手する、という流れになりました。
個人開発ではハードルの高い「複数プラットフォーム開発（展開）」ですが、AI と協働することで、実現可能なラインまで一気に引き下げることができます。
Web から iOS へ：バックエンドを共通化
初期リリースは Web アプリでしたが、その時点では将来的な iOS 展開までは明確に見据えていませんでした。
しかし、後から iOS アプリを作ろうとした際、AI の助けを借りて既存の API やデータ構造を整理し直し、ドキュメントとして整備することができました。
iOS アプリはフロントエンドのみを SwiftUI で新規構築し、バックエンドは改修を行いつつも、容易に共通化することができました。
これにより、プラットフォームを追加する際のコストを大幅に抑えられたのは、大きな収穫でした。
iOSアプリ開発特有のハードル
iOSアプリ開発では、プライバシー設定や権限まわり、そもそも Xcode と Swift の学習コストが掛かるといった、Web にはない独自のルールやハードルがあります。
SwiftUI での開発は完全に初挑戦でしたが、AI にサンプルコード生成や構造改善の提案、Xcode の操作方法、Swift に関する基礎的な質問などを投げかけることで、物理的・心理的なハードルを常に低く保ちながら、挫折することなく進めることができました。
技術スタック
今回のプロダクトを支える技術スタックは、以下の通りです。
| カテゴリ | 技術 |
|---|---|
| バックエンド | Cloudflare Workers（Hono / TypeScript） |
| データベース | Cloudflare D1（リレーショナル DB） |
| 画像ストレージ | Cloudflare R2 |
| キャッシュ | Cloudflare KV（セッション・集計キャッシュ） |
| 非同期処理 | Cloudflare Queues / Cron（将来的な非同期処理・バッチを想定） |
| 課金 | Stripe |
| フロントエンド | React + Vite + Tailwind CSS（Cloudflare Pages 配信） |
フロントエンドは React + Vite 構成の SPA を Cloudflare Pages にデプロイし、
ブラウザからの API リクエストは Cloudflare Workers にリバースプロキシする構成にしています。
画像のアップロードはブラウザから直接 R2 に行いつつ、メタデータや課金・ユーザー情報などは Workers 経由で D1 / KV / Stripe に連携する形です。
アーキテクチャの全体像
アーキテクチャの全体像は、ざっくりと以下のようになっています。
Cloudflare の無料～低額プランでもここまでの構成が組めるため、個人開発でも「それなりにちゃんとしたバックエンド＋課金付き」の構成を現実的なコストで運用できています。
UI/UX デザインでこだわった点
推し活の写真管理では、「大量の画像をどう整理するか」がすべてと言っても過言ではありません。
その観点から、UI/UX では次のポイントに特に注力しました。
- とにかく記録が早く終わる導線
- 複数枚の画像を扱う際の操作性
- 写真の EXIF 情報を活用した日時・場所の登録
- カード型・タイムライン型のレイアウトによる見やすさ
- 思い出が振り返りやすく、探しやすい工夫
また、UI/UX の調整にも AI を活用しました。
「この並び順だと視線の流れが悪い」「ラベル名がイケてない」「ここは操作が分かりづらい」などといった、操作体験に関わる改善点を洗い出しながら、実装・テスト・改善のサイクルを超高速で回すことができました。
広範な改善計画も AI にまず案を出してもらい、その案を見ながら優先順位を付け、AIと一緒に詰めていくような進め方をしています。
個人開発から得た学びと、業務への還元
今回の個人開発は、思っていた以上に「単なる趣味」の範囲を超え、業務改善やプロダクトづくりに直結する学びや、新たな視点の獲得が非常に多い取り組みになりました。
小さく作り、早く出すことの価値
モノを作っても、リリースして実際に使ってもらわなければ、結局何も始まりません。
業務ではなかなかそう単純にはいきませんが、「小さく作って早く出す」ことの重要性を改めて実感しました。
AI によるプロトタイプ作成のハードルが下がった現在では、顧客提案の際にも「実際に動くもの」を見せられると、顧客側もイメージがしやすくなり、提案としての説得力も上がるのではないかと個人的には考えています。
AI による開発プロセスの高速化
AI を最初から開発プロセスに組み込むことで、仕様・実装・レビューが連続的につながり、個人開発とは思えないスピードで開発を進めることができました。
その結果、Web アプリのリリースまで漕ぎ着けることができたのは、まさに AI の後押しがあったからだと感じています。
おわりに
個人が Web と iOS の両方でアプリを作り切ることは、少し前までは非常にハードルの高いチャレンジでした。
しかし、AI を活用することで、そのハードルは物理的にも心理的にも大きく下がっています。
『いんすたんとアルバム』は、「個人でもプロダクトを構築し、継続的に改善していける時代になった」ということ、そして「業務では難しいけれど、とにかくまずはやってみることの大切さ」、そこから見えてくるものの多さを、実感・体験・実践形式で勉強させてくれたプロジェクトになりました。
今後は、まず iOS アプリのリリースを目指します。
現在、iOS アプリは Web アプリよりもかなりリッチな体験になってしまっているため、Web アプリ側のフロント改善にも取り組みつつ、さらに使いやすいユーザーフレンドリーな「推し活専用アルバム」へと進化・育成していきたいと思っています。
もし「どんな雰囲気のアプリか気になる」という方は、ぜひ触ってみてください。
完全な余談
最近ではAI中心の開発が謳われているが、人間が読むことのできるプログラミング言語を使っている時点で、それは本当にAI中心と言えるのだろうか。コンピューターにとってネイティブなのは人間が読めない機械語であり、人間にとって読みやすいプログラミング言語は、コンピューターからすれば外国語のようなものではないか。
結局のところ、AI中心と言いつつも、人間が読める言語で書き、人間が品質を確認できる状態を前提にしている限り、真にAI中心の開発には踏み込めていないのではないか。
AIという暴れ馬をうまくコントロールし、どう手綱を握るかを、頭の良い人も含めて試行錯誤しているのだと思う。しかし、結局のところ、人間は馬にはなれないのだ。
宣伝
明日以降も、NTTテクノクロス Advent Calendar 2025は続いていきます！
8日目は@suszukimaさんが「ブラウザで音楽やろうよ！ライブコーディング環境 Strudel のすすめ」というグルーヴ感が強そうな記事です！
楽しみですね！！！