てくすた

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

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

こんにちは、デザイナーの小川です。
本記事では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に同期することができます。 (InVisionの場合はCraftを利用すると便利です。)

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

4.プロトタイプの共有

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

まとめ

プロトタイプ(具体的にアイデアを可視化したもの)を共有することで、プロダクトの完成形がイメージしやすくなり、メンバー間の認識を合わせ議論ができ、無駄なくプロダクトのブラッシュアップをしていくことができます。
まだプロトタイピングを試したことがない方の実践するきっかけになれば幸いです。

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

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