🙆
広告業界のニッチなニーズに合わせたディスプレイ広告画像作成ツールを Next.js で作った話
個人開発を組織化しようとしている北村です。
ディスプレイ広告画像作成ツール「ディスプレイ広告デザイナー」を作成したので、開発の進め方などを紹介します。
ツールの紹介はこちらです。
開発方針
- 北村は開発にできるだけ携わらない
- 要件定義、コードレビュー、ガードレールの作成(GitHubのブランチプロテクションなど)はするが、実装はしない
- 実装はエンジニア歴約1ヶ月の社員(門倉ジョネス)に任せる
- AIを可能な限り活用する
AI活用
コーディング
v0でざっくり作成して、細かいところはCopilotとChatGPTで整えていきました。
デザイン
ロゴは、ChatGPTに「クロップ」をイメージさせるデザインを依頼し、PNG画像として作成しました。
アイコンは、背景をPhotopeaという無料のグラフィックツールで緑色のグラデーションを作成し、作成した背景とロゴをFigmaに取り込み、影をつけて立体的に見せました。
技術スタック
- Next.js
- 複雑なことはせずにSSRとCSRのみ
- Tailwind CSS + shadcn/ui
- v0と相性のいいので選択
- HTML Canvas(画像編集)
- Volta（Node.jsバージョン管理）
- Prettier（コード整形、ガードレール）
- GitHub Actions(CI/CD)
- Vercel（デプロイ用）
- v0（AIコーディング支援）
- Google Analytics(分析用)
機能と開発期間
ログイン機能などは作成せずに最低限の機能を作ってリリースすることを目指しました。
2025年5月28日にGitHubのRepositoryを作成して、2025年6月17日にリリースアナウンスをしているので開発期間は約3週間です。
北村が1日1時間程度チャットや口頭でサポート、門倉が平日5日フルタイムで開発しました。
SEO対策
基本的な内部対策は実施の上、sitemap.xml、robots.txtを追加しました。
今後の展望
さくっと文言だけ修正したいというケースに対応するためには「ログインして、過去に作成した画像の履歴から複製できる」などがあるといいなーとか考えています。
フィードバックを元に機能開発をしていこうと考えているので、機能リクエストをお待ちしています！
さいごに
作成したディスプレイ広告デザイナーはこちらです！
個人開発(?)楽しい！！
Discussion