SIOS Tech. Lab | エンジニアのタメになるOSS・クラウド・認証の技術トピックス 
デザイナーのみならず、企画、開発に携わる方々へ「プロトタイピング」をオススメします。
目次
プロトタイピングのメリット
プロトタイピングとは
本格的に実装行う前に、サービスに登場する画面の下書き（プロトタイプ）を作ります。アプリケーションを「紙芝居」として作ってみるのがプロトタイプとも言えます。
その画面を、実際のアプリのように操作をしてみて、サービス内容、使い勝手の検討、検証を行う工程が、アプリケーション開発でのプロトタイピングです。
静止画では想像できないことがある
ワイヤーフレームや仕様書で、要件定義や設計を進めることは可能です。
しかし、プロトタイピングをしてみると「操作しているとどうしてもこの画面でつまずく」など、静止画では気づかなかった点が見えてくると思います。
つまり、時間軸を加味して、サービスの体験を検証することができます。
やり直せるから意見が出しやすい
もし、プロとタイピングせず、概ね完成したアプリケーションの使いづらさに気がついたとしても「わかりにくいけれど、もう作ってしまったから伏せておこう…」と思いとどまってしまうかもしれません。
プロトタイピングの段階であれば、改善点を気軽に挙げることができるでしょう。
プロトタイピングを行う際、被験者が感じたことを素直に語ることができる環境づくりも大切です。
プロトタイピングツールの紹介
プロトタイプを作成するためのツールをご紹介。
ペーパープロトタイピング
コンピューターを使わず、紙とペンを使って行う手法です。
モニターを見ながらではなく、人が向き合って取り組むワークショップとなるので、チームの雰囲気を醸成することにも役に立つかもしれません。
企画の初期段階に、発想が有効かどうかを、すばやく試すことができます。
開発の段階でも、迷う点があれば、部分的にペーパープロトタイプで検証することもできるでしょう。
参考記事（外部サイト）：ペンとふせんで！スマホUIのアイデアプロトタイピング
ザックリから始められる「Prott」
紙に描いた手書きの画面を、Prottのスマートフォンアプリで取り込んで、簡単にプロトタイプを作成することができます。
また、ボタン類など用意されたUIパーツの組み合わせでワイヤーフレームを描くことができるので、プレゼンスライドを作成する感覚で、デザイナーではなくても、扱いやすいサービスです。
画面の仕上げまでできる「Figma」「Sketch」「Adobe XD」
>これらのサービスは、ワイヤーフレーム、モックアップ（カンプ）、プロトタイプ、などの作成をひとつのサービスで行うことができます。
プログラム実装者に、これらのツールで作成した素材を提供すれば、開発作業もスムースに進められます。
もちろん、クラウドにてメンバー間の共有が可能です。
https://www.figma.com/
https://www.sketch.com/
https://www.adobe.com/jp/products/xd.html
かゆいところに手が届く「InVison」
画面遷移の細かい指定、チームでのコラボレーション、ワークフロー、他サービスとの連携、バージョン管理、などなど、多機能のプロトタイプ制作管理ツールです。
プロトタイプをhtmlで書き出すこともできます。
各サービスは無償で試すことができます。
企画、設計会議が煮詰まってきたときなど、気軽にプロトタイピングを試してみてはいかがでしょう。
（上坂 デザイナー）
引用画像の出典: 各サービスサイト と Amélie Mourichon
Be the first to comment