3つ目の個人開発でいろいろ学んだ
はじめに
個人開発してみました。
カメラと被写体のレイアウトをカスタマイズし、位置関係を可視化/編集できるツール「Dokocam」です。
Dokocam使ってレイアウトを編集する図
PC環境での閲覧/操作を想定しています。よければ見てみてください。
本記事では、本サービスを開発した上で気づいたことをまとめます。自分のメモも兼ねています。
世界中の誰かの助けになれば幸いです。
作ろうと思った背景
私が欲しかったからです。
私自身、もともと映像製作が趣味ですが、大掛かりな撮影をする前には準備が必要です。その準備の一つとして、 「どのカメラで、誰を、どこから撮影する、といった位置関係を図示」 することがあります。これによって撮影時のイメージを掴むことができます。
このような位置関係を図示する際はこれまで、紙に手書きしたり、パワポで簡易的に図示したりして作成していました。しかし、「もっと使い勝手の良い専用のアプリがあれば、作業効率UPが見込めるな」とも感じてもいました。
ターゲット
私のような個人の映像製作者が、YouYube撮影、MV撮影、SNS撮影などの準備段階で使用することを想定しています。今後もし機能が増えていけば想定ターゲットも変わっていきます。
MVP
サービスとしてのMVPを下記のように定めました。
- 俯瞰図のキャンバス
- カメラオブジェクトと人物オブジェクトの追加/移動/削除が可能
- カメラから矢印が伸びて、人物オブジェクトと結合できる。（撮影被写体を図示）
- 視野角（ズーム）の調整
アプリの主な機能
上記のMVPを達成するため、以下の機能を用意しました。必要最低限の機能を設けています。
ページ構成
- ホームと使い方ページのみのシンプルな構成です。
- 今後拡張する可能性あり
初期画面
初期画面
- カメラと人物が3つずつデフォルトで配置されています
- それぞれの位置は自由に変えられます
- キャンバスは拡大縮小が可能です
追加/削除
各ボタン
- カメラと人物は追加/削除ができます
- 右下のボタンで追加
- オブジェクト選択時にDeleteキー押下で削除
カメラと対象の接続
カメラから線が伸びる
人物と接続
- Step 1 : カメラの三角形部分（先端）をクリック
- Step 2 : マウスを移動すると点線が表示されます
- Step 3 : 人物またはポイントをクリックして接続完了
視野角の表示と調整
視野角の調整
- 個別表示 : カメラを選択すると視野角が表示されます。マウスホイールで視野角の増減が可能です。
- 一括表示 : 「Show All View Angles」トグルをONにするとすべてのカメラの視野角を表示
- 撮影画角に入っていると、人物は緑に、カメラは赤に塗りつぶされます。これにより、正しく人物が撮影されるか、不要なカメラが映り込まないかを確認できます。
UI/UX
- shadcn/uiによる統一されたデザインシステム
- TailwindCSS 4によるスタイリング
- lucide-reactによるアイコン
- Sonnerによるユーザーフレンドリーな通知システム
プラン構成
MVPの機能を爆速で作ろうと思ったので、ひとまず有料プランなどは設けていないです。
今後の拡張によってはどこかでプレミアムプランなどを作ろうかとも模索中です。
今後の拡張
どこまで作り込むかは決めていませんが、拡張としては下記のようなことをぼんやりと考えています。
- レスポンシブデザイン対応（モバイル・タブレット・PC）
- レイアウト図のエクスポート
- 複数レイアウトの可視化（複数シーンの概念）
- ユーザログインによる、プロジェクト作成/保持/参照
- ユースケース/カメラ台数/被写体数などを自然言語で指示すると、最適なカメラ配置を提案してくれるLLMシステム
技術スタックとか
技術スタック
- FW : Next.js 15.5.3 / TypeScript
- スタイル: Tailwind CSS / Shadcn/ui / Shadcn.io / lucide-react
- キャンバスUI : React-Konva
- デプロイ : Google Cloud Run
- CDN/DNS : Cloudflare
その他
- エディタ：vscode
- コード生成：Claude Code Proプラン
各技術について感じたこと
使用技術は前回と同様なので、感想については前回まとめた記事をご参考ください。
感じたこととか気づき
v0が使えそうって話
- 今回のDokocameはClaudeCodeで作成しました。
- ただ、もっと効率的に開発できるツールを模索して、同じような機能を持ったアプリをv0で作れるのかを試してみました。
- 結果、めっちゃ速攻で作ってくれた。しかもシンプルでクールな見た目。
- これでいいじゃん。コンポーネント作成アプリだと思ってたけど、無料枠でこれなら、、v0に可能性を感じた。
問い合わせの方法
- 一つ前に開発したサービスではコンタクトページを用意しましたが、今回は設けていません。
- サービスごとにバラバラに管理するのもどうかと思い、今回は、メール送ってください形式にしました。
- ただし、ユーザ視点では「メアドをコピーして、メールアプリを開き、文章を考えて、送信する」というフローとなるため、サイト内コンタクトページと比べてハードルが高くなる。今後は要検討。
スクラップ活用
- 前回に引き続き、開発進捗をスクラップに書き残し、それを元にこの記事を作成しました。
- Zennで当初から想定されている理想的な使い方ができたと思います。
- 懸念としては、開発するサービスごとにスクラップを区切っているので、サービスに依存しない知見なども散らばってしまっている点です。後で見返した際にみやすいように要調整。
マーケ
- 今はXとZennで紹介しただけですが、今後機能が増えた段階で何かするかも。
- catnoseさんの「プロダクトよりマーケの勝負の時代になったと思ってたけど、プロダクトの質を上げないとふつうにマーケの効率が悪い」という言葉に心底納得。
- 個人的にデザインやUI/UXが好き（できるとは言ってない）なので、凝りすぎてしまう節がある。ただそれだといつまで経ってもリリースができないので、「ひとまずMVP」という宗教に入った。
- 私のようなひよっこ個人開発者は、どれくらいの塩梅で開発し、リリースし、マーケを進めるべきか、ちょっと戦略を模索中（迷走中、、）
さいごに
世界中の誰かの助けになれば幸いです。
今回作ったアプリ
前回作ったアプリ
X
Discussion