#author("2020-09-12T15:20:30+09:00","default:inoue.ko","inoue.ko") #author("2023-06-16T12:51:32+09:00;2020-09-12T15:20:30+09:00","default:inoue.ko","inoue.ko") *プロトタイピング [[DesignThinking]] ~ プロトタイピング（Prototyping）とは、実際に目で見て、手で触れることができるモノを作ること、ソフトウエアで言えば、入力から出力までの一連のプロセスを確認できる試作品を制作することを意味します。 プロトタイプ、モックアップ、試作品・・ざっくり言えば似たようなものです。 ~ ***プロトタイピングの目的 プロトタイピングの目的は、アイデアに対するユーザーの反応を見ることにあります。構想中のアイデアの「全体像」がある程度具体的なカタチになることで、ユーザーは「これが完成すれば面白い！」、「便利！」、あるいは逆に、「説明がわかりにくい」、「使いづらい」といった感想を持つことができます。プロジェクトメンバーが気付けなかった点について、ユーザー目線で直感的な意見をもらうことで、ディスカッションが活性化します。 -利用者（ターゲット層）にアイデアを具体的なカタチで説明するため。 -開発メンバー間でアイデアを具体的なカタチで見て議論するため。 -最小限の投資で''早期に多くの失敗を体験''するため。 -最小限の投資で ''早期に多くの失敗を体験'' するため。 ~ ***プロトタイピングの要点 -短時間でつくることができるものを使う -修正・改善しやすいものを使う -お金をかけずにつくる -利用者が全体を見て・触ることができるようにつくる（プロダクト） -利用者が全プロセスを体験できるようにつくる（Web・ソフトウエア） -プロトタイプで何を確認したいのかを明確にする --大きさを確認したい ＞ 大きさに忠実な模型を作る --手触りを確認したい ＞ 素材を忠実使う（さわる部分的のみ） --操作性を確認したい ＞ インターフェイス部分のみ再現（その他はダミー） ~ ***プロトタイピングツール 建築、プロダクト、ソフトウエア・・分野によって、プロトタイピングは様々ですが、ここでは、Webデザインを例にとって、そのツールを紹介します。 &color(red){Webサイトのプロトタイプは誰もが簡単に制作できる時代になっています。}; ~ -トランジション型 プロダクト全体の画面遷移・操作フローを確認したい場合に使います。 --''Figma''：https://www.figma.com/ [[YouTube:Figma]] --sketch：https://www.sketch.com/ --Prott：https://prottapp.com/ --InVision：https://www.invisionapp.com/ --Adobe XD：http://www.adobe.com/jp/products/experience-design.html -インタラクション型 画面内の細かなアニメーションや動きを確認したい場合に使います。 --Origami Studio http://origami.design/ -複合型 トランジション型とインタラクション型の両方ができるタイプです。 --Indigo.Design：https://jp.infragistics.com/products/indigo-design --ProtoPie：https://www.protopie.io/ --Framer X：https://framer.com/ -AIを使ったプロトタイピングツール AIを活用したプロトタイピングツールも登場しています。AIプロトタイピングツールでは、手書きのイメージをスマホで取り込めば、すぐにコーディングされたアプリを生成することが可能です。 [[Top 5 AI-Based Prototyping Tools For UI And UX>https://www.analyticsindiamag.com/top-5-ai-based-prototyping-tools-for-ui-and-ux/]] ~ ~ ***プロトタイピング関連参考イメージ -[[GoogleImage:台割]] -[[GoogleImage:束見本]] -[[GoogleImage:ワイヤーフレーム]] ~ ~