はじめに
webアプリ開発の初心者ですが、勉強とアウトプットを兼ねて、アプリが完成するまで毎日投稿してみます！
厳密には 「毎日1コミット」 することをマイルールにしてみます。
コミットした内容を進捗報告のように記事にしてみます。
また、Chat GPTにはめちゃくちゃお世話になる予定です。
作りたいアプリ
題材
今回の題材は「写真をアップロードしたらInstagramのサムネイルを自動生成してくれるアプリ」です。
最近カメラを新調したため写真モチベが高く、Instagramで写真用のアカウントを作ってみたりしたのですが、いざ投稿してみると以下のような課題を感じてしまいました。
- 横長の写真のサムネイルが縦長に切り取られてプロフィールのトップページに統一感がない
- キャプションにカメラ情報（機種、レンズ、F値、ISO、シャッタースピード）を入れるのがめんどくさい
要件
上記の課題を解決できるように以下のようなアプリを作ってみようと思います。
- 画像をアップロードするとインスグラムのサムネイルの比率に合わせてフレームを作ってくれる
- フレームは白色で、下部に写真のexif情報からカメラの機種、レンズ、F値、ISO、シャッタースピードを表示する
- キャプション用に写真のexif情報から抽出したカメラの機種、レンズ、F値、ISO、シャッタースピードのテキストを作成する
- 上記のテキストにはカメラの機種、レンズのハッシュタグも追加する
Chat GPTに相談
自分の構想がお門違いかどうかも分からないのが初心者ってやつです笑
なのでChat GPTに実現可能性を聞いてみます！
また、上記のアプリですが、ぶっちゃけ類似機能を持ったアプリはすでに存在しています。
なので類似アプリと差別化するにはどうしたらいいのか、も聞いてみたいと思います。
質問内容
webアプリを作ろうと思ってます。要件は以下のとおりです。
・画像をアップロードするとインスグラムのサムネイルの比率に合わせてフレームを作ってくれる
・フレームは白色ですが、下部に写真のexif情報からカメラの機種、レンズ、F値、ISO、シャッタースピードを表示する
・キャプション用に写真のexif情報から抽出したカメラの機種、レンズ、F値、ISO、シャッタースピードのテキストを作成する
・上記のテキストにはカメラの機種、レンズのハッシュタグも追加する
上記アプリの実現可能性と類似アプリを教えてください。
類似アプリがある場合はどうやって差別化したら良いかアドバイスをください。
回答
あなたの構想しているWebアプリは十分に実現可能です。以下に要件の実現性と類似アプリ、および差別化の方向性を解説します。
✅ 実現可能性の評価
要件1：画像アップロード＋Instagram比率のフレーム作成
実装難易度：低〜中
Instagramのサムネイル比率（1:1 または 4:5, 16:9 など）にリサイズ＆キャンバスに余白追加。
HTML5 Canvas や画像処理ライブラリ（例: Sharp、Pillow）を使えばOK。
要件2：白フレーム下部にEXIF情報表示
実装難易度：中
EXIF情報の抽出は exif-js（フロント）や piexifjs、バックエンドでは exifread（Python）や exiftool で可能。
表示位置やデザインはCSSで調整可能。
要件3：EXIF情報からキャプション自動生成
実装難易度：中
機種名やレンズ名などからテンプレート文を生成（例：「Sony α7 IV + FE 24-70mm F2.8｜f/2.8, ISO 100, 1/200s」）。
プレーンテキスト出力なので難易度は低め。
要件4：キャプションにハッシュタグ付与
実装難易度：低
機種名やレンズ名を定義済み辞書で変換してハッシュタグに（例：「α7 IV」→ #α7IV）。
🔍 類似アプリの例
1. Frame.io（とは無関係）系のEXIF表示加工ツール
一部の写真好き向けツールに、EXIFオーバーレイを画像に焼き込むものがあります。
例: ExifShot（EXIF入りの画像生成）
例: LensTagger（Lightroom用プラグイン）
2. インスタ投稿支援アプリ
投稿前に画像加工＋キャプション支援してくれるアプリ（例：UNUM, Preview）
ただしEXIF連動型ではない
✨ 差別化のポイント
差別化軸 具体的なアイデア
自動化 EXIFを元に完全自動でフレームとキャプション生成（既存アプリは手動が多い）
デザイン性 Instagram投稿用に映える「余白付きの美しいテンプレート」提供
クリエイター向け特化 カメラ・レンズ愛好家向けUI（例：「FUJIFILM風フレーム」「Leica調」など）
SNS共有の最適化 自動でハッシュタグ生成、コピー用UIなどSNS運用支援要素追加
クラウド保存 写真＋キャプションのセット保存・再ダウンロード機能など
🛠 技術スタックの例（参考）
フロント：Next.js + Tailwind CSS + exif-js
画像処理：Canvas API or sharp (Node.js)
バックエンド：Node.js / Python (Flask) + ExifTool
キャプション生成：テンプレートエンジン (Handlebars風)
デプロイ：Vercel / Render / Firebase Hosting
✅ まとめ
実現可能性は高い。画像処理とEXIF抽出は既存ライブラリで対応可能。
類似ツールはあるが、EXIF→フレーム＋キャプションまで自動化しているものはほぼなし。
差別化の鍵は「写真愛好家視点でのデザイン性」と「投稿補助機能の強化」。
結論
いけそう！
類似アプリとも何かしらで差別かできそうですね
改めて要件を整理
改めて実現したいことを整理してみます。
- 主な機能
- アップロードされた画像に自動でInstagramのサムネイルサイズに合わせたフレームを作成する
- フレームは白色
- フレームにはカメラのExif情報（カメラの機種、レンズ、F値、ISO、シャッタースピード）を記載する
- キャプションを自動生成する
- カメラのExif情報（カメラの機種、レンズ、F値、ISO、シャッタースピード）を記載して、機種とレンズについてはハッシュタグも記載する
- アップロードされた画像に自動でInstagramのサムネイルサイズに合わせたフレームを作成する
一旦現時点ではこんな感じですかね！
開発都合で要件が変わったら都度対応していければと思ってます。
おわりに
毎日Web開発をやってみることにしました。
できるかな、、、不安ですがChat GPTに助けてもらうながら無理のない範囲でやっていきます！