Cloudでプロトタイプを作成してみましょう。今回はプロトタイプ機能をどのような目的で利用するのか説明します。Cloudで作れるプロトタイプ3.目的1:アイデアの発散・収束4.目的2:ユーザーテスト5.目的3:開発者への共有1.プロトタイプとはプロトタイプとは日本語で「試作品」という意味です。自動車の開発などでは新しいモデルのデモンストレーション用に組み立てた試作品のことを呼びますが、ソフトウェア開発においてはシステム開発の初期段階にユーザーに動作を確認してもらうための仮組みの成果物のことを呼びます。最近のスマートフォンのアプリやWebサービスの開発では、短期間でこのようなプロトタイプを繰り返し作って検証を行うことで、より顧客体験の良い製品を目指す手法が用いられます。Cloudではこのようなプロトタイプを簡単に制作することが出来るだけでなく、URLを共有するだけで他のステークホルダーにプロトタイプを見せてコメントを書き込んでもらう機能が備わっています。CloudではPhotoshopやSketchなどで作ったデザインのデータを取り込んで、どこの箇所をクリック・タップしたら画面が切り替わり、どの画面に遷移するのか、遷移する際のアニメーションを再現することができます。※クリック・タップできる箇所のことを「ホットスポット」と呼びます。Cloud上ではボタンや画像・テキストの配置などをして画面のデザインを作ることはできません。他のソフトウェアを使って画面デザインのデータを作成する必要があります。Cloud上にデータをアップロードするのが一般的です。Studio」を使ってデザインを作成することも可能です。Cloudでプロトタイプを作る目的を3つ紹介したいと思います。3.目的1:アイデアの発散・収束InVision上にデータをアップし、実際にクリック・タップして画面が切り替わる試作品をもとに新しいアイデアを出したり、意見をまとめたりするために利用します。画面に印をつけてコメントをつけて議論ができたり、ホワイトボードのような使い心地のフリーハンドのプロジェクトに画面を表示して手書きで印やコメントをつけることもできます。Cloudで作ったプロトタイプについては開発者間だけではなくテストユーザーに共有することも可能です。URLを共有すればブラウザ上で試しに動かすことができるだけでなく、InVisionのiOSアプリを使えばよりネイティブに近い形の動作をスマホ上で試してもらうことができます。コメント機能も使えますので、ユーザーが感想を書き込んだり、使いづらかったところを指摘することもできます。Cloudにはインスペクトモードというモードがあります。これはWebのフロントエンドやiOS・AndroidのView周りを実装するエンジニアが、画面上のデザインのサイズ・位置・色などを読み取ることができる機能です。このインスペクトモードでは、Sketchで作ったレイヤーがそのまま反映されており、書き出し用に設定した画像のダウンロードにも対応しています。余白のサイズを確認するオブジェクトのサイズ(横幅・高さ)を確認する文字の色・サイズ・フォントの種類を確認するアセット素材(画像)をダウンロードするCSSやSwiftによるコードも一部出力されるので、コーディングの手間を省くこともできる機能です。このようは開発者用の共有機能のおかげで、デザイナーが実装用の設計書のようなドキュメント作成がいらなくなりました。Cloudのプロトタイプ機能の利用目的になります。それでは実際にプロジェクトを作成して、デザインデータをアップロードしてみましょう。