てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

プロトタイピングを活用した開発プロセス

こんにちは、デザイナーの小川です。
本記事ではfotowaにおけるプロトタイピングを活用した開発プロセスについてご紹介します。
プロトタイピングに興味はあるけど、まだやったことがない方の参考になれば幸いです。

fotowaとは

f:id:masahiro-ogawa:20170731114818j:plain fotowaはプロの出張撮影フォトグラファーを簡単予約できるサービスです。
代表的な利用シーンとしては、七五三やお宮参り、結婚式や誕生日などがあります。 撮影事例はこちらをご覧ください。

プロトタイピングとは

プロダクトを作り込む前に、アイデアを可視化した実験用モデルを作りテストすることです。

プロトタイピングのメリット

  • チームメンバーと認識を合わせることができる

    まず要件定義を議論し仕様を詰めていきますが、これだけでは実際のプロダクトのイメージがつきません。プロトタイプをチームメンバーに共有することで認識のズレを合わせることができ、議論を行い、適切に改善したり方向性を修正することができます。

  • 無駄を省くことができる

    プロダクトがユーザーの需要に応えられているか計るために、必要最小限の機能で仮説検証をしていきます。プロトタイプを確認することで不要な機能が含まれていないか気づくことができます。

  • 開発の効率化

    プロトタイプを共有することで、エンジニアさんが事前にどういうものが必要になるかイメージしやすくなるため、開発の効率化に繋がります。

プロトタイピングを活用した開発プロセス

1.要件定義

課題見つけ、それをどう解決するかユーザーストーリーを考え主要な機能を定義します。

2.UIデザイン

f:id:masahiro-ogawa:20170731115026j:plain 要件定義を元に実際のプロダクトに近いデザインを作っていきます。
fotowaの開発では、全体のデザインをSketch、Sketchでは表現できない画像加工にはPhotoshopを使用しています。

使用するツールについては、操作性や共有のしやすさを考え自分にあったツールを選ぶと良いと思います。

3.プロトタイプ作成

f:id:masahiro-ogawa:20170731115041j:plain 完成したデザインからProttというツールを使い、プロトタイプを作成します。
Sketchとの同期は「Prott Sketch Plugin」というプラグインを使うことで、簡単にデザインをProttに同期することができます。

同期が完了したら画面遷移のトランジションやジェスチャーを設定し、プロトタイプが完成します。

4.プロトタイプの共有

f:id:masahiro-ogawa:20170731115056j:plain 完成したプロトタイプをチームメンバーに共有して認識を合わせ、実装を進めていきます。
以上がプロトタイピングを活用した開発プロセスになります。

まとめ

プロトタイプ(具体的にアイデアを可視化したもの)を使って、チームメンバーに共有することで、プロダクトの完成形がイメージしやすくなり、認識を合わせることができます。そこから最適なユーザー体験になっているかをチームで考え議論することが、より良いプロダクトにするための手段になると思います。

デザイナー/エンジニア募集

ピクスタでは、新規事業 fotowa の成長を加速してくれるデザイナー/エンジニアを募集しています!