個人開発を副業・事業として始めるにあたって、私がまず直面したのは「誰と、どうやって作るか」という問題でした。アイデアはある。でも、デザインも仕様もアジャイルに決めていきたい。そんな状況で手探りしながら気づいた、開発フローとツールの話をします。
人によって強みが違う
プロダクトを作るうえで、必要なスキルは一種類ではありません。
- マーケティングやユーザー体験に精通している人
- コードを書いてシステムを構築するのが得意な人
- デザインを作り、人に売り込む営業が得意な人
それぞれが協力して一つのものを作り上げるとき、共通の「フロー」と「ツール」がないと、コミュニケーションコストが跳ね上がります。私自身、この部分を後回しにして痛い目を見ました。
デザインの共有：Figmaで「イメージのズレ」をなくす
頭の中にあるアイデアは、実際に形にしてみることでより具体化されます。Figmaを使ってデザインを共有することで、「相手が作りたいものと自分のイメージが合っているか」を早い段階ですり合わせることができます。
確認すべき項目はこんなところです。
- 使う画像・写真のテイスト
- 色使いやフォントの雰囲気
- ターゲットペルソナに合っているか
私の失敗談をひとつ。「AIがあるから、デザインの方向性を口頭で伝えればそれなりに良いものができる」と思っていたのですが、実際にできたのはいかにもAIっぽいサイトでした。結果、修正に多くの工数を取られてしまいました。
会話ができる相手なら、準備したデザイン案をFigmaで共有しながら議論する。それだけで、後工程のやり直しが大幅に減ります。
仕様の共有：動くモックアップが最速の言語
ページの構成・画面の挙動・SNSシェア時の表示など、仕様のすり合わせは「相手が期待する機能を実装する」ために欠かせません。
ここで私が行き着いた最適解は、AIでモックアップを作り、実際に動くものを見せることでした。すでにサイトを持っていたので、サブディレクトリに何パターンかのモックアップを公開してみたところ、「これじゃなくてこっちのイメージ」という会話が格段にしやすくなりました。
順番の整理をすると、こうなるかもしれません。
- おおまかな仕様を確認する
- AIでモックアップを作り、動くものを共有する
- フィードバックをもとにFigmaでデザインを詰める
- コーディングに入る
まとめ：具体化の解像度が、プロダクトの品質を決める
デジタルプロダクトに限らず、デザインと仕様を可能な限り具体化し、期待するイメージを早期に再現することが重要です。これが曖昧なまま開発を進めると、「思ってたのと違う」という手戻りが必ず発生します。
FigmaとAIモックアップ。この2つのツールを開発フローに組み込むだけで、コミュニケーションコストは大幅に下がります。私はこれらを今後も使い続けながら、プロダクト制作を続けていきます。