ペーパープロトタイプ

  • 標準的なユーザーインターフェースの実践について学ぶ
  • アプリのペーパープロトタイプを作成する
  • プロトタイプを使ってユーザーのフィードバックを得る

プロトタイピング

ミニマムバイアブルプロダクトのアイデアが浮かんだら、次はプロジェクトがどのようなものになるかを考え、いくつかのアイデアを紙に書いてみましょう。

プロトタイプとは、何かの初期モデルのことです。

アプリ開発者は一般的に、コーディングを始める前にアプリのプロトタイプを紙で作ります。 

ペーパープロトタイプは、アプリのユーザーインターフェイスがどのように見えるかを手描きで表現したものです。通常、アプリの各画面の図面が含まれ、さまざまな状態を示す図が描かれます。

アプリ画面のペーパープロトタイプ

なぜプロトタイプなのか?

以下のビデオでは、他のTechnovation Girls チームがどのようにペーパー・プロトタイプやデジタル・プロトタイプを作成したかを紹介します!

ベストプラクティスベストプラクティス 学生に紙や段ボールのプロトタイプを紹介する際には、アイデアをテストするためにシンプルで低コストのモデルから始めることの重要性を強調する。例えば、「紙や段ボールのプロトタイプは、デザインの下書きのようなものです。最終版を作る前に、アイデアの外観や動作を確認するのに役立ちます。このようなシンプルなモデルによって、素早く変更を加え、何が最も効果的かを把握することができます"

ペーパープロトタイプは、潜在的なユーザー(家族、他のメンター、友人、コミュニティメンバーなど)からのフィードバックを得るために使用することができます。このフィードバックは、最終提出資料に含まれるフィードバックの一部となります。

以下のビデオでは、ハードウェアを伴うプロトタイピング・プロジェクトの例(左)と、ペーパー・プロトタイプによるテストの過程(右)を紹介する。

生徒に質問するためのガイディング・クエスチョン

最終製品を作る前に、紙やボール紙で簡単なプロトタイプを作ることがなぜ有用なのでしょうか?

紙や段ボールで模型を作ることは、デザインの向上にどのように役立つのでしょうか?

ペーパープロトタイプをテストすることで、他の方法ではわからないようなことがわかるかもしれない? 

メンターTipsは、AmeriCorpsから提供されたものです。

様式化されたA、ネイビーでAmeriCorpsのロゴ

プロトタイプの要素

これらのことをを念頭に置いて、ペーパープロトタイプを作成しましょう。各カードの上にカーソルを置くと、詳細を見ることができます。

ユーザー

ユーザー

ユーザーを第一に考えたデザインを心がけましょう!アプリはシンプルで、使いやすくなければなりません。

デバイスの種類

デバイスの種類

あなたのアプリはiPhoneとAndroidでどのように見えるでしょうか?
スマートフォンとタブレットではどうでしょうか?

一貫性

一貫性

画面のレイアウトを統一することで、ユーザーが画面間で何を期待できるか理解しやすくしましょう。

ユーザーインターフェース

プロトタイプを作成する際のポイントは、ユーザーがアプリとどのようにやり取りをするかということです。これをユーザーインターフェース(UI)と呼びます。UIには、ボタン、テキストボックス、スライダーなど、ユーザーがアプリを使用するためのすべての要素が含まれます。

デジタル製品を設計するためのもう一つの用語は ユーザー・エクスピリエンス(UX)です。それぞれの意味は以下で説明します。

ユーザーインターフェース

ユーザーがアプリとどのようにやり取りをするかということで、ボタン、テキストボックス、スライダーなど、ユーザーがアプリを使用するためのすべての要素が含まれます。

UIデザインは、アプリを視覚的に魅力的で、直感的で、使いやすくすることに重点を置いています。

ユーザー・エクスペリエンス

ユーザーがアプリをどのように体験するかということで、UIも含まれますが、それ以上にユーザーの感情、態度、行動に関するものです。

UXデザインは、ユーザーのニーズと目標、そして全体的な体験を向上させることがポイントです。

ユーザーインターフェース機能

以下は、モバイルアプリのユーザーインターフェイスの主要な部分です。

ナビゲーション

ナビゲーションは、ユーザーがアプリの中で探しているものを見つける方法です。ここでは、ナビゲーションオプションの例をいくつか紹介します。

コンテナ

これらのコンポーネントは、コンテンツをまとめることができます。画面の一部をデザインしたり、一部を隠したり見せたりするときに役立ちます。

インプット

入力コンポーネントは、ユーザーがアプリに情報を入力するためのものです。以下にいくつかの例を挙げます。

インフォメーション

これらのコンポーネントにより、アプリはユーザーと情報を共有することができます。

標準要素を使用する

競合他社に差をつけるために、アプリの見た目を変更したいと思うかもしれません。しかし、標準的な要素を使用することで、ユーザーがアプリの使い方をより早く理解することができます。

例えば、ほとんどのユーザーはドロップダウンメニューに慣れています。新しいタイプのメニューをデザインすることもできますが、ユーザーを混乱させるかもしれません。ユーザーにとって使いやすいように、馴染みのあるコンポーネントにこだわりましょう。

STOP & TRY<br>

  1. 今すぐアプリストアから新しいアプリをダウンロードしましょう。 
  2. インスピレーションが必要なら、AllTrails (iOSまたは Android)やBlinkist(iOSまたは アンドロイド)を試してみてください。
  3. 上記のどのコンポーネントを使用していますか? 
  4. 5分ほどアプリを使ってみてください。 
  5. 使い方がわかるまでどのくらいかかりましたか?

GoogleのMelissa PowelとMariam Shaikhによるスケッチとペーパープロトタイピングに関する短いビデオをご覧ください。

アクティビティ1:ペーパー・プロトタイプ

所要時間:60分

アプリの画面をスケッチする

ユニット4のMVPワークシートにある機能を設計してください。 これらのことを考慮してください:
  • ユーザーはどのように画面から画面へと移動するのか?
  • アプリに必要な情報をどのように入力するのか?
  • 情報はどのように表示されるのか?
  • どうやって使いやすいキレイなレイアウトをするのか?
  • 配色、フォント、ロゴを考える
ワークシートのコピーを作成し、必要に応じて編集することができます。
ワークシートを開く

フィードバックを得る

ソリューションを表す物理的なものができたので、次はユーザーからのフィードバックを得る番です!

潜在的なユーザーに試してもらい、正直なフィードバックを提供してもらう必要があります。

ユーザーとのテストから何を学びたいのか? 

一つの方法として:

  • アプリで行う一連のタスクをユーザーに与え、介入なしにユーザーがそれを行うことができるかどうかを確認する。 
  • チームメンバーの1人が"コンピューター "として機能できる 
    • ユーザーとのやり取りに基づいて、画面または画面の一部を変更する。
  • メモを取る のは別のチームメンバー
    • ユーザーの行動やコメント、反応を書き留める。
  • 許可があれば、テストセッションを録画することもできる。 
プロトタイプ例

テスターはあなたを助けるためにいます!彼らのやりとりを判断したり、介入したりしないようにしましょう(「コンピューター」が反応したり、行動に基づいてプロトタイプを更新したりする以外)。

感謝の気持ちを持って彼らのフィードバックを受け留めましょう。

自転車修理店アプリのユーザーテストの素晴らしい例を紹介します。

アクティビティ 2:フィードバックを得る

所要時間30分

ペーパープロトタイプを2-3人のユーザーでテストする

  1. プロトタイプをユーザーに見せます。
  2. ユーザーにプロトタイプを使ってタスクを実行してもらいます。
  3. 助けなしでそのタスクを試してもらいましょう。
  4. チームメンバーは "コンピューター "として行動し、彼らの行動に反応することができます。
  5. もう1人または2人のチームメンバーが、ユーザーの行動やコメント、反応をメモします。

振り返り

紙のプロトタイプは保存しておくことをお勧めします。プロジェクトを作り上げていく過程で、それを参照する必要が出てきます。また、プロトタイプの写真も撮っておくとよいでしょう。

電話と紙での試作
ミニマムバイアブルプロダクトに必要のない機能は見つかりましたか?
ユーザーから有益なフィードバックはありましたか?
フィードバックの結果、アプリにどのような変更が必要ですか?
前のスライド
次のスライド

主な用語のおさらい

  • プロトタイプ- 製品の初期モデル
  • ペーパープロトタイプ - アプリの外観を手描きで表現したもの
  • ユーザーインターフェース(UI)- ユーザーがモバイルアプリと物理的にどのように相互作用するか
  • ユーザー・エクスペリエンス(UX)- ユーザーがモバイルアプリを使用する前、使用中、使用後にどのように感じるか

追加リソース

プロトタイピングには紙を使うのが好ましい方法ですが、特に最初のステップとして、デジタルツールを使ってアプリのプロトタイプを作成することもできます。

多くのツールは有料ですが、機能やプロジェクトを限定して使える無料版もあります。以下はその一部です。