クリック可能なプロトタイプの作り方

[(原文) How to Create Clickable Prototypes](https://www.uxpin.com/studio/blog/create-interactive-prototypes/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)

![image.png](https://lh4.googleusercontent.com/Zev1l5sLY-aJwyDgCJT8sqGiVcxzVKz1Yz4XxB3NGEVT1d0ZGhsq_AYBvL20uQ9twBAQOG71w1JAPOwNsfHnHGHEioW3jZemm0MK_qfZ1atOozGO7TWSRxreKrX0gaTRKNluSMjQ)

インタラクティブプロトタイピングは、製品が計画通りに動作することを確認するのに役立ちます。製品を一般公開する前にプロトタイプをテストできないと、思わぬネガティブなフィードバックを受ける可能性があります。クリック可能なプロトタイプを作成する方法を学ぶことで、物語をコントロールし、ユーザーを何度もリピートさせることができます。

## インタラクティブ機能はユーザーに心理的効果を与える

最も成功しているアプリの中には、ユーザーを夢中にさせるためのインタラクティブな機能に依存しているものもあります。例えば、ソーシャルメディア業界は、人々がアプリを使い続けることを促す数々の心理的特徴を利用する方法を学んできました。インスタグラムとフェイスブックは、「行動デザイン」を利用して、人々が携帯電話を[中毒性のある薬のように扱うよう](https://www.businessinsider.com/facebook-has-been-deliberately-designed-to-mimic-addictive-painkillers-2018-12)条件付けしていると非難されています。

![image.png](https://lh4.googleusercontent.com/ij_ci0w5REY7caM6rMIVjhMYllxzXBAMt0_koH7Cw08y_y3Lz4jX9AEXATXcOXJWGXB_OTN_CdpwNnWf5jscBa3zn5Rk6fyyaZfVPNdDxIYUC7oUuFs0Yo3JFltvBJZoX1yo6bM3)

もちろん、カジノゲームでも同じように非難の声を上げることができます。競争の激しい業界では、デザイナーは製品をできるだけ魅力的なものにする方法を見つけるでしょう。それは、人間の世界との関わり方を利用することかもしれません。それは不公平なことなのか、それともただのグッドデザインなのか。

クリック可能なボタンやアイコンなどのインタラクティブな機能は、人とアプリの間に物理的なつながりを生み出します。受動的に画面上のコンテンツを見るのではなく、何が起こるかの役割を担うようになるのです。これは、ユーザーにやりがいのある感情を与える明白な心理的効果を持っています。

## インタラクティブな機能でアプリをより使いやすく

インタラクティブプロトタイピングは、単にユーザー脳内の快感神経伝達物質("いいね👍")の存在感を高めるだけではありません。また、人々が製品を使いやすくするための[有益な情報を提供する](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)ことができ、ユーザー体験全般を向上させることができます。

ウェブサイトやアプリにマイクロインタラクションを追加することができます:

* ユーザーが必要な機能を見つけられる場所を明確にすることで、ナビゲーションを改善します。
* ユーザーがどのようにアクションを完了するかを示す即時フィードバックを提供します。
* ユーザーの注意を他の機能、ツール、コンテンツに誘導します。

最終製品を顧客にリリースするときに、インタラクティブな機能を持たせたいと思っています。なぜインタラクティブプロトタイピングを使って、それらの機能が意図した通りに動作することを確認しないのでしょうか？

## 第一印象が重要なので、製品をリリースする前にプロトタイプをテスト

インタラクティブプロトタイピングでは、ユーザーレビューに直面する前に、製品のモックバージョンを体験することができます。これにより、製品が完璧に動作することを確認するために、細部までチェックする機会が得られます。正直なところ、あなたはいくつかの小さなディテールを見落としているかもしれません。心配しないでください。ユーザーが見つけた欠陥については、あなたに知らせてくれます。

![image.png](https://lh6.googleusercontent.com/UXu0YQFlzx7MhY5CTgxKbmM_DksJka5DTvhazvoa8hRGQ4A-07C9c2YdpdOJ2Hz_J8qK8ED7DU4TqMu9f5RLigQ9qEI_GkpLY2JNo4W1zVTv9h4pMoT3vzoO625qnRHlo7WIIuqU)

プロトタイピングの段階では、現実世界とほぼ同じ環境でアイデアをテストします。UXPinでは、実際のデータをツールに追加することで、クリック可能なプロトタイプをより簡単にテストすることができます。例えば、[データソート機能をシミュレート](https://www.uxpin.com/studio/blog/make-sortable-table-rows-uxpin/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)して、実際のデータを追加して情報が正しくソートされるかどうかを確認することができます。

偽データやLorem ipsumを使用しても、同じレベルの精査は受けられません。テーブルの中に無意味なデータがあると、コマンドをクリックしても望む結果が得られるかどうか判断できません。列の名前はアルファベット順に並べ替えられたのでしょうか？それともプロトタイプは文字をランダムに並べ替えたのでしょうか？

ユーザーから得られる最初のフィードバックは、他の人があなたの製品をダウンロードしてインストールするかどうかに影響を与えます。正しく動作しないインタラクティブ機能に遭遇した場合、ユーザーは他のユーザーに警告を発し、製品に近づかないようにします。その時点では、製品をアップデートすることはあまり重要ではないかもしれません。一部のユーザーは、すでに他の場所に移動するように影響を受けています。

インタラクティブなプロトタイピングは、初期のユーザーを悩ませる主要な問題を簡単にキャッチすることができます。新しいリリースがポジティブなレビューを得られれば、より多くの人が製品をインストールして体験することができます。

## インタラクティブなプロトタイピングでコストを削減

ウェブサイトやアプリの開発にかかる費用は、そのサイズ、必要な機能、そして誰を雇うかによって大きく異なります。米国労働統計局の推定では、ソフトウェア開発者は1時間あたり[約51.69ドル(約5,517円)](https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm)となっています。それはあなたがまた、しかし、給付金を受け取るフルタイムの従業員を使用することを前提としています。実際には、デザイナーや開発者のコアチームに加えて、いくつかのフリーランサーを使用することになるでしょう。

アメリカでアプリ開発者を雇う場合、1時間あたり[約121ドル(約12,912円)](https://www.codementor.io/blog/app-development-costs-6gdnah10b7)の報酬が見込まれます。東欧の開発者を雇うことで費用を大幅に節約できますが、言語、時間、地理的な壁があるかもしれません。6～9時間先のタイムゾーンに住んでいる人と協力して仕事をするのは難しいですね。

どのオプションを選択しても、製品の設計、開発、テストに多くのお金を費やすことになります。これには、新規ユーザーを獲得するために使用する可能性のあるマーケティングも含まれていません。

クリック可能なプロトタイプを作成できるインタラクティブなプロトタイピングツールで、時間とお金を大幅に節約できます。グラフィックデザイナーの給料は、ソフトウェア開発者の[約半分](https://www.bls.gov/ooh/arts-and-design/graphic-designers.htm)であることを考慮してください。グラフィックデザイナーに仮想環境で機能を作成・テストさせることで、コストのかかる開発者の費用をできるだけ抑えられます。

最終的には、[アプリのための最新のコーディング言語](https://www.uxpin.com/studio/collaboration-2/coding-languages-to-know-in-2020/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)を使用する方法を知っている人が必要になるでしょう。それまでは、グラフィックデザイナーに頼ることでお金を節約することができます。

## クリックできるプロトタイプは、より多くの人にデザインプロセスに参加してもらうことが可能

[機能横断的なチーム間のコラボレーション](https://www.uxpin.com/studio/blog/free-and-seamless-collaboration-for-cross-functional-teams/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)は、アプリ開発において有用なトレンドとなっています。製品を完成させたい場合、できるだけ多くの人からフィードバックを得ることは理にかなっています。クリック可能なプロトタイプを使えば、製品が完成して市場に出回る前に、リードデベロッパーからグラフィックデザインのインターンまで、誰もが簡単に製品で遊ぶことができます。

![image.png](https://lh6.googleusercontent.com/e5CSGTvngM0mpRR_ic3eYTJq-cupM0-8W4VFNmj9_r0MGr4hXaVar6SywdBPgtwxYrAF3OUinCa9YtDZmVXBI0OdlPHMjqz3QcLtvWVBU4BIvaSECgvqtnAYf7fA4tNhTCURT2Nq)

チームがプロトタイプと対話することができない場合、機能が動作すると仮定することしかできません。隅に「共有」ボタンがある場合、それを押すとソーシャルメディアやメールでコンテンツを共有しなければなりません。その機能は実際に機能するのでしょうか？それは本番になるまで誰にもわかりません。クリック可能なインタラクティブなプロトタイプを使えば、潜在的な問題を今すぐに特定して解決できるので、制作プロセスの各ステップを合理化することができます。静的なプロトタイプでは、何度も更新をしなければならないかもしれません。

## UXPinでクリック可能なプロトタイプを作成

UXPinを使えば、クリック可能なプロトタイプの作成とテストを簡単に行うことができます。UXPinでのインタラクティブプロトタイピングは[コーディングすら必要ありません](https://www.uxpin.com/studio/blog/interactive-prototype-setting-user-interactions-without-coding/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)。UXPinキャンバスで作業しているときは、マウスを数回クリックするだけでインタラクションを追加することができます。プロトタイピングの段階でも、同じレベルの機能を得ることができます。

UXPinのリアルタイムのコラボレーション環境は、チームメンバーがクリック可能な機能を同時に作業できることを意味します。信頼できるインターネット接続さえあれば、Google Docsと同じように簡単にコラボレーションすることができます。

## UXPinでインタラクティブなプロトタイプを作成!

UXPinでのインタラクティブプロトタイピングの仕組みを見てみませんか？[無料トライアルにサインアップ](https://www.uxpin.com/studio/prototyping-jp/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)して今すぐ始めましょう。クレジットカード情報を提供する必要はありませんので、自動的に請求される心配はありません。UXPinでインタラクティブプロトタイピングがどれだけシンプルになるかを見たら、あなたとあなたのチームがすべての機能にアクセスできるようにアカウントを作成することをお勧めします。

**本記事は2021/02/25投稿を翻訳したものです**