Tips

7

分で読める

Prototype with Sensors in ProtoPie

Learn how to build prototypes with sensors without a line of code.

Tony Kim、 CEO & Co-Founder

新しいスマートデバイスは毎年、あるいは毎四半期ごとに登場するため、まったく新しいデバイスでユーザー体験を設計することの重要性は増しています。スマートデバイスは世代を重ねるごとに賢くなっており、メーカーやサービス提供者は、ユーザーが入力する前からそのニーズを把握しようと試みています。Google Now は、そのようなシステムの好例で、ユーザーの行動や位置情報を収集し、状況に応じた情報を提示します。

状況に応じた情報を提供するには、ユーザーに関連するコンテキスト情報を取得する方法が3つあります。

  • 直接のユーザー入力

  • 過去のサービス利用履歴

  • 間接情報の分析

センサーによって収集された情報は、ユーザーからの直接入力がなくても、ユーザーのコンテキストを間接的に分析するうえで大きな役割を果たします。センサーは、すでに人々が持ち歩くスマートフォンに組み込まれており、ときにはビーコンのようにスマートフォンの外側に配置され、スマートフォンに情報を伝えます。これらのセンサーは、現在地、動きの情報、移動速度、周囲の騒音レベル、空間内でのスマートフォンの座標、その他さまざまな情報を取得できます。では、これらすべての情報をどのように処理し、サービスや製品に活用できるのでしょうか。これはデザイナーにとって興味深い冒険であるだけでなく、日を追うごとに答えるのがますます難しくなっている問いでもあります。

プロトタイピングは、開発前にコンセプトの有効性と実現可能性を見極め、開発コストを抑えられるため人気が高まっており、センサーを組み込んだプロトタイピングへの需要も増えています。

スマートフォンのセンサー

Apple の iPhone 6s には次のセンサーが搭載されており、他のメーカーのスマートフォンにも同様のセンサーがあります:

  • Touch ID 指紋センサー: 指紋認証で認証します

  • 気圧計: 気圧を測定します

  • ジャイロスコープ: スマートフォンの傾きの角度と方向を測定します

  • 加速度計: スマートフォンの加速度を測定します

  • 近接センサー: スマートフォンを覆っている物体と、その物体との距離を確認します

  • 環境光センサー: 周囲環境の明るさを測定します

  • コンパス / 磁力計: 向きの方向を示します

Apple の iPhone 6s と iPhone 6s+ では、タッチスクリーン上での物理的な入力の圧力を測定する 3D Touch センサーが使われています。Huawei では Knuckle Touch と呼ばれる機能を採用しており、指先での入力と指関節での入力を区別します。

ProtoPie を使ったセンサープロトタイピング

センサーを使用するには、センサーによって収集された信号を、プロトタイピングツールが認識できる形式に変換する必要があります。これは Arduino、Raspberry Pi、またはFramer with JSON などのツールを使って実現できますが、ある程度のコーディング知識が必要です。

ProtoPie では、よく使うセンサーを簡単に活用できます。センサーを実装するには、さまざまな Trigger の中から Sensor Trigger を選択します。センサーで受け付ける値の範囲を設定し、目的のインタラクションを割り当てます。できあがり!

さまざまな Trigger の中から Sensor Trigger を選択します。


Select the Sensor Trigger


さまざまな Trigger の中から Sensor Trigger を選択します。

(ProtoPie のインタラクションは、Trigger、Response、Object の 3 つの基本要素で構成されています。詳細は この記事を参照してください。)

ProtoPie で作成したプロトタイプは、マイクで拾った音の大きさに応じてレイヤー内のプロパティを変更できます。必要なのは、音量の最小値と最大値を設定し、Response をレイヤーのプロパティの変化に対応付けることだけです。


Set values for loudness and the Response


音量の最小値と最大値、および Response を設定します。

サンプルファイルをダウンロード

傾き

横長の画像を読み込み、横スクロールできる Scroll Container を作成します。Scroll Container のサイズをデバイスと同じに設定し、読み込んだ画像を Scroll Container にドラッグしてサブレイヤーにします。


Drag into the Scroll Container


読み込んだ画像を Scroll Container にドラッグします。

Tilt Trigger を選択し、Y 軸を選びます。Tilt Trigger の下に Scroll Response を追加し、スマートフォンを左右に傾けたときに画像がどれだけスクロールするかの値を設定します。


Set a value for tilting


傾きによって画像がどれだけスクロールするかの値を設定します。

サンプルファイルをダウンロード

傾きを使うと、さらに楽しいプロトタイプを作れます。以下は、ProtoPie Launching Party で Joon-won Lee によって紹介されたダンベル運動アプリです。

コンパス

他のセンサー Trigger を追加したのと同じように、Compass Trigger を追加します。Compass Trigger に Rotate Response をリンクし、磁場の方向に基づいて回転を生成します。次のスクリーンショットのように値を入力すると、簡単にデジタルコンパスを作成できます。この例は Jailene Liu によって作成されました。


Input the values to generate rotation


磁場の方向に基づいて回転を生成するための値を入力します。


サンプルファイルをダウンロード

デバイス間のインタラクション(Send & Receive)

ProtoPie を使えば、複数のデバイス間で通信できるプロトタイプを作成できます。Send Response と Receive Trigger を使うことで、あらかじめ設定したメッセージを送受信し、デバイス間にリンクを確立できます。以下のスクリーンショットでは、あるスマートフォンでボタンをタップしたときに、Send Response を使って「transfer」という単語を文字列として送信する方法を示しています。受信側のスマートフォンで Receive Trigger がその単語を受け取ると、Trigger にリンクされた Responses が起動します。


Send Response


Send Response: 事前に設定したメッセージを別のデバイスに送信する


Receive Trigger


Receive Trigger: 別のデバイスからメッセージを受信したときに Responses を起動する


サンプルファイルをダウンロード

3D Touch

ProtoPie は、Apple の iPhone 6s と iPhone 6s+ に搭載されている 3D Touch をサポートしています。3D Touch はセンサーを利用しますが、3D Touch は Touch Interaction に分類され、Touch Screen Trigger にリンクできます。3D Touch は 0 から 7 までの圧力レベルを検出でき、最大値は 6.7 に設定することを推奨します。


3D Touch is capable


3D Touch は 0 から 7 までの圧力レベルを検出できます。

サンプルファイルをダウンロード

サンプルファイルをダウンロード

未来のインタラクションはどのようになるでしょうか?

今日では、タッチスクリーン搭載のスマートフォンやタブレット、その派生製品が一般的に見られ、使われています。しかし、未来はどうでしょうか。インタラクションはどのような形になるのでしょうか。たとえば未来のインタラクションは、Amazon Echo のようにバックグラウンドで静かに待機し、ユーザーの要求に応じて情報を検索する存在との会話になるかもしれません。あるいは、ユーザーを継続的に追跡し、ユーザーが要求する前に、その人が求める種類の情報を先回りして提示する形になるかもしれません。センサーがユーザー理解においてますます重要な役割を果たすにつれ、デザイナーはセンサーを使いながらデザインのアイデアを表現する方法を学ぶ必要が高まるでしょう。