1.0ハイブリッドテクノロジーズhttps://hybrid-technologies.co.jp/blogHT Blog Adminhttps://hybrid-technologies.co.jp/blog/author/ht_admin_blog/rich600338<blockquote class="wp-embedded-content" data-secret="8D6tAG9bEK"><a href="https://hybrid-technologies.co.jp/blog/knowhow/20230426/">プロトタイピングとは？重要性や具体的な手法、注意点を解説</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://hybrid-technologies.co.jp/blog/knowhow/20230426/embed/#?secret=8D6tAG9bEK" width="600" height="338" title="“プロトタイピングとは？重要性や具体的な手法、注意点を解説” — ハイブリッドテクノロジーズ" data-secret="8D6tAG9bEK" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript"> /* <![CDATA[ */ /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://hybrid-technologies.co.jp/blog/wp-includes/js/wp-embed.min.js /* ]]> */ </script> https://hybrid-technologies.co.jp/blog/wp-content/uploads/2023/04/202304_blog_5_1-1-thumbnail-min.jpg312312例え開発者側にとって良いアイデアを盛り込んで作った製品・サービスでも、必ずしもユーザーのニーズを満たせるとは限りません。的確にニーズを押さえた製品・サービスを作るには、「プロトタイピング」を実施することが重要です。今回はプロトタイピングの概要や手法の種類、メリット、注意点など詳しく解説します。 ハイブリッドテクノロジーズの開発サービスはこちら プロトタイピングとは プロトタイピングとは、実際に製品・サービスの開発に着手する前に必要最低限の機能やデザインを実装した試作品を作って検証することをいいます。試作品を通して完全に開発のうえリリースされたものと同等の体験をしつつ、フィードバックを得ながら必要に応じて軌道修正を行い、よりユーザーの満足度を高める製品・サービスに仕上げることが可能です。 どんな分野においても、1度の設計で良質なデザインが完成することはありません。また、開発・製造者側にとって都合の良い製品・サービスに仕上がっても顧客のニーズにマッチしていなければビジネスとして発展させることは困難です。その問題を解決するために、プロトタイピングが必要になります。 プロトタイピングという手法は建築・ソフトウェアデザイン・インダストリアルデザインなどの「モノづくり」から、形のない「サービス開発」まで様々な分野で用いられています。特に製品量産化の事前検証が必要不可欠な製造業で重視されていましたが、近年はIT業界においてもプロトタイピングが一般化しています。 プロトタイプの意味と特徴 プロトタイピングにおいて、試作品のことを「プロトタイプ」と呼びます。アプリやソリューションなどに含めたい機能をすべて実装したプロトタイプを作ることで、完成した製品と同様の体験が可能となります。プロトタイプを作る目的はニーズやプロジェクトの段階によって変わるものですが、どのように活用するかは開発者次第です。また、プロトタイプは画面設計ツールやスケッチタイプのデザインツールなど、分野によって様々なツールを使って設計されることも特徴です。中には、ステークホルダーからのフィードバックをサポートする機能や、初期のワイヤーフレーム作成に役立つアイデア出し機能などを備えたツールもあります。 なお、一口にプロトタイプといっても複数の種類があります。検証したい内容に適したプロトタイプの種類を選択することで、プロトタイピングの価値を最大限まで引出し安くなります。主なプロトタイプの種類は、以下の通りです。 ペーパープロトタイプ：紙や画面にペンで描いたプロトタイプ（スケッチ） モックアップ：ProttやFigmaなどのツールを活用し、機能や画面を表す静止画を繋ぎ合わせて作ったプロトタイプ テクニカルプロトタイプ：コーディングで機能を実装しながら作成し、実際に操作できるプロトタイプ ペーパープロトタイプやモックアップのように静的なプロトタイプは素早くアイデアを具体化させてフィードバックへつなげる、テクニカルプロトタイプは時間をかけてアイデアを忠実に再現できるというメリットがあります。 IT業界でのプロトタイピングの普及 先述したように、従来は製造業で重視されていた手法のプロトタイピングですが、近年はIT業界でも普及が拡大しています。 事前に設計や開発工程を完全な形に固めてから開発に着手する「ウォーターフォール開発」から、最低限の機能を実装してテストするという短いサイクルを繰り返す「アジャイル開発」が一般化している傾向からもプロトタイピングの普及が見て取れます。開発期間の短縮や、多様な顧客ニーズに柔軟に対応できるというメリットがあるからです。 プロトタイピングはUI/UXの事前検証に有効 UI（ユーザーインターフェース）とはシステムや製品のレイアウトやデザインといった、ユーザーにとっての操作性・機能性に直結する要素のことです。一方でUX（ユーザーエクスペリエンス）は、システムや製品を通してユーザーがどんな体験をするかに関わる要素のことを指します。この2つを混同して考えられるケースも多いですが、実際は「UXという大きな括りの中にUIが含まれている」ことになります。 このUIやUXに関わる事前検証にも、プロトタイピングは有効的です。 UIやUXについてはそれぞれ以下の記事で詳しく解説していますので、併せてご覧ください。 関連リンク：UX/UIとは？意味やUIとUXの違い、デザインの改善ポイントを解説 | ハイブリッドテクノロジーズ プロトタイピングの開発手法 プロトタイピングを作成するにあたって、その手法も様々な種類があります。プロトタイピングにおける主な作成方法は、以下の通りです。 ①ワイヤーフレーム ワイヤーフレームとは、その名の通り製品全体の「骨格」を意味する言葉です。主にWebサイトのレイアウト設計などで用いられており、サイトの各画面構成要素を線画で表したものになります。チームのメンバー間で開発イメージをひと目で共有できることが特徴です。 ②ストーリーボード ストーリーボードは、完成したシステムを使用するユーザーの利用状況をストーリー形式で可視化する手法です。特定の悩みを抱えたユーザーが自社製品・サービスを利用し、どのような結果になったか……といった簡易的なストーリーを主にイラストで表します。頭の中で描いたイメージや文章だけでは気づけなかった問題点などを発見できる場合もあるため、アイデアを整理したいタイミングで活用すると役立ちます。 ③カードソーティング カードソーティングは、製品・サービスに必要な機能について付箋やポストイットなどに1枚ずつ記載し、それらをグループ分け・関連付けして分類の妥当性を検証する手法です。まさにカードを順序だてて並べるこの手法は、画面構成や各項目の整理に役立ちユーザーにとってわかりやすいUIをデザインするためのヒントに気づけます。 ④ペーパープロトタイピング システム開発において、開発するシステムの画面を描き出した紙で紙芝居のようにユーザーテストを行う手法です。早い段階で実際の使用感をシミュレーションできるため、実装前にシステムの課題点を洗い出したりユーザーからフィードバックを得たりしたいときに役立ちます。 ⑤デジタルプロトタイピング ペーパープロトタイピングと同じようにユーザーテストを行う手法ですが、紙ではなくデジタル形式の画像を用いるという違いがあります。デザインソフトを使って画像を作成し、フォントやページの色合いなど完成品イメージに限りなく近い状態で確認ができます。また、アニメーションを付けるなど紙ではできない表現方法も可能な点がメリットです。 ⑥コードプロトタイピング 実際にコーディングで必要な機能を実装したシステムを使い、ユーザーテストを実施する手法です。最初から完成品を目指すのではなく、必要最低限の機能のみ実施してユーザーの反応を確認します。これにより、ユーザーのニーズを満たせるようなシステムになるかどうかを段階的に検証することが可能です。 ⑦オズの魔法使い 「ウィザード法」とも呼ばれており、製品やシステムのプロトタイプを人間が裏側で操作しながらテストを実施する手法です。童話の「オズの魔法使い」に登場する、魔法使いのふりをした老人をプロトタイプに見立てたことが名前の由来となっています。ペーパープロトタイピングのように早い段階でユーザーの反応を得られる他、システムを疑似体験させることができるため使用感に関してリアルな意見を取り入れやすいです。 以下の記事ではプロトタイプ開発の詳細やプロトタイプ開発に向いているケースなども解説していますので、参考にしてみてください。 関連リンク：【2022年最新】プロトタイプ開発とは？概要やメリット・デメリットをわかりやすく解説 Hybrid Technologies Co,Ltd プロトタイピングの目的とメリット プロトタイピングは以下のように様々なメリットがあることから、ユーザーより高い満足度を得るための製品・サービスづくりに欠かせない工程です。 認識を統一できる 要件定義書のように書面上でのみ仕様を共有すると、開発チームのメンバー間で認識の齟齬が生じる可能性があります。そこでプロトタイプを作成して仕様を「見える化」することで、デザイナーやエンジニアが現状の課題を共有したり認識を擦り合わせたりしながら開発を進めやすくなります。 また、途中から参加したチームメンバーもあらかじめ作成されたプロトタイプを見れば、具体的なイメージをひと目で掴むことができます。メンバーの参加時期にズレがあるプロジェクトでも、全員が足並みをそろえて業務を進めることが可能です。 作業の手戻りがなくなる […]