ProtoPieが使いやすい！インタラクションも作れるプロトタイピングツール

いまやモバイルアプリをデザインする現場では、静的なモックアップだけに頼ってはいられません。それではモバイル体験で大切な「インタラクション（ユーザーの操作に対し、アプリが何らかの反応を返すこと）」を提供できていないからです。モックアップ段階でもインタラクションを実装し、実際のエンドプロダクトに近い形でプロトタイプを作成すべきでしょう。

『ProtoPie』は、1行のコードすら書くことなく、デザイナーが複雑なアニメーション効果を作成できるツールです。ProtoPieの優れたポイントは、インタラクションの作成がデザイナーの思いのままなところにあります。

この記事では、ProtoPieで作れる基本的なインタラクションを4つご紹介します。

1. ハンバーガーメニュー

ハンバーガーメニューはモバイルアプリにおいて最も多く使われているUI要素のひとつです。UXの専門家は「ハンバーガーメニューは優れたUXか否か」をいまだに議論していますが、5つ以上のナビゲーションオプションがある場合には特に有効なメニューです。

では、ProtoPieを使ってハンバーガーメニューを作成してみましょう。ProtoPieのチュートリアルページからハンバーガーメニュー用のアセットをダウンロードし、ProtoPie上で開いてください。

hamburger_btnにTapトリガーを追加すると、ユーザーがボタンをタップした際にナビゲーションドロワーが開くようになります。この効果はMoveを使って作成可能です。

インタラクションをユーザーにとってスムーズな感覚にすることは重要です。イージングを調節し、durationを0.3に変えてみましょう。

また、不透明度を設定してナビゲーションドロワーの下にレイヤーを作る必要があります（下のページが有効でないことをユーザーに対し明確にするため）。

ではここでプレビューしてみましょう。ProtoPieの右上にあるPreviewボタンをタップすると、インタラクションの動きが確認できます。

インタラクションは正常に機能していますね。しかし、ユーザーがホームスクリーンに戻れないという重要なポイントを見過ごしてしまいました。もうひとつのTapトリガーを指定して、この問題を解決しましょう。

ユーザーがナビゲーションドロワーを開き、その隣のエリアをタップすると、メニューが隠れるようにしなければなりません。このプロトタイプでは、メニューが当初の位置に戻る必要があります。Position Move Toを使ってXを「-260」にしましょう。

また、Rectangleの不透明度を0に戻します。

再びPreviewをタップしてインタラクションを確認しましょう。

無事にメニューを元の位置に戻せましたね！

2. スクローリング

スクローリングはモバイルユーザーが行う基本的な動きです。このインタラクションをプロトタイプに取り入れるやり方を知っておけば、非常に役立つでしょう。ProtoPieを使えば、1分であなたのコンテンツにスクローリング効果を作成できます。

先程同様、まずはProtoPieのチュートリアルページから既成のアセットをダウンロードし、ProtoPie上で開きます。

ProtoPieには、Scrolling Containerと呼ばれるスクローリング用の特別なコンテナがあります。これをプロトタイプに追加してみましょう。

コンテナのサイズを変更し、ビューポートの有効な部分をすべて選択します。

次に、コンテナに属する要素を選択しましょう。このプロトタイプの場合、リストのすべてのリスト要素がこれにあたります。

これでスクローリング効果が作成できました。インタラクションの見た目を確認してみましょう。

綺麗にスクロールが作成できました！

3. リアルデータの入力

プロトタイプが実際のプロダクトに似ているほど、ユーザビリティテストで得られるフィードバックはよりリアルなものになります。

大抵のプロトタイプはユーザー入力項目が未設定のままです。ダミーテキストやあらかじめ決められたデータを見ると、ユーザーは自分が扱っているのが実際のプロダクトではなくプロトタイプだということを明確に感じてしまいます。しかしProtoPieなら、ユーザーが抱く印象を容易に変えられるのです。

ProtoPieには、デバイスのキーボードを使ってリアルデータが入力できるInput layerという要素があります。この機能を使うと、プロトタイプ上でユーザーがデータを入力できるのです。ユーザーに名前の入力を要求するシンプルな入力フォームを想像してください。ユーザーがネイティブキーボードを使って名前を入力し、「送信」ボタンをタップします。すると、アプリ上に名前入りのあいさつが表示されます（例：「こんにちは、ジョン」）。

ProtoPieには、ネイティブキーボードのトリガーとなるInputという特別な要素があります。

以下がその仕組みです。

つまりここでは、入力された値を次のスクリーンのvariableとして使います。テキストフィールドnameを使ってユーザー名を表示しましょう。以下の画像でわかるように、この要素は不透明度を0に設定したコンテナ内にあります（ユーザーが名前を入力し、送信ボタンを押すまでは見えない状態です）。

次に、テキスト要素を持つトリガーのReturnを追加します。テキスト要素にはContentセクション内のFormulaオプションを選択しましょう。このFormulaには、入力フィールドのテキストプロパティを使います（input 1から名前を取得する必要があります）。

最後に、inputコンテナを隠し、代わりにresultコンテナを表示する必要があります。これはOpacityを使えば簡単。inputコンテナ用のOpacityとresultコンテナ用のOpacity、合計2つが必要です。

では、インタラクションがどのように機能するかを見てみましょう。名前を入力しReturnキーを押すと、以下のあいさつがスクリーン上に表示されます。

無事に、名前を表示することに成功しました！

4. ユーザーアクションへの視覚フィードバック

モバイルユーザーにとって優れたUXを作り出すためには、ユーザーにとってわかりやすいUI要素を用いたインタラクションを作成することが重要です。例えばボタンをデザインする場合、それがガラススクリーンの向こうにあるピクセルのレイヤーだとしても、ボタンに見えるようなデザインにしなければなりません。

人間とコンピュータ間のインタラクションにおいて、視覚的なフィードバックは重要な役割を果たします。はっきりとしたフィードバックがなくては、ユーザーはシステムが自分のリクエストを受信したかどうかがわかりません。

ProtoPieを使うことで、物理的なオブジェクトのプロパティを使うのがはるかに簡単になります。例えばリップル効果を使うと、ユーザーがタッピングした時の感覚がよりわかりやすくなります。

リップル効果を作成するのに必要なアセットをダウンロードし、ProtoPie上で開きましょう。

まず、選択してサイズを最小にします（サイズを0に設定しましょう）。

次に、button コンテナのTapトリガーを設定します。TapトリガーのScale効果を追加し、リップル効果とつなげます。

ここまでの作業をしたら以下のような見た目になります。

次に、もうひとつのScale効果を追加し、当初の位置に戻します。最初に設定したScale効果向けには1秒の、2つ目には0のdurationも設定しましょう。

さらに、不透明度のレスポンスも2つ必要です。1つ目の不透明度は50、2つ目は0に設定しましょう。ここで使った各効果のタイミングに注目してください。

Previewモードで見ると、効果は以下のようになります。

最後に、リップルレイヤーの色を白に変更しましょう。

ユーザーがボタンをタップすると、以下のようになります。

わかりやすい視覚効果を追加できましたね！

モバイルデバイスで直接インタラクションをテストする

デスクトップの大画面とモバイルデバイスの小さな画面では、インタラクションの見た目が異なる場合があります。モバイルデバイスでテストすることで、デスクトップ上だけでは見過ごしてしまうような点まで突き詰めましょう。

ProtoPie Playerなら、ProtoPieで作成したプロトタイプをiOS・Androidデバイス上でテストできます。プロトタイプをモバイルに移行するのも非常に簡単です。ProtoPieのモバイルアプリを使ってQRコードをスキャンするだけで、モバイルデバイスを接続できます。

▲「Device」をクリックして招待画面を開き、QRコードをスキャンします

ProtoPie StudioでPlayをクリックすると、プロトタイプがProtoPie Playerに送信されます。

まとめ

モーションやアニメーションは、モバイルアプリとユーザーとのコミュニケーションにおいて重要な役割を果たす、いわば言語のようなものです。この視覚的な言語は、プロダクトデザインプロセスに関わるあらゆる人にとって明白でなければならず、インタラクティブなプロトタイプも欠かせません。

プロトタイプを作成するプロセスは効率よく進める必要があります。そのために、リアルなプロトタイプを素早く作成できるツールを選択しましょう。

（原文：uxplanet.org　翻訳：Tamura Yui）

あわせて読みたい！▼