今日のデジタル環境では、アプリ内メッセージングアプリは現代のコミュニケーションに欠かせないものとなっており、このような体験を高忠実度でプロトタイピングすることは、シームレスで魅力的なユーザーインタラクションを作成、テストし、完成させるために不可欠です。
このチュートリアルでは、2台のデバイスを使ってアプリ内メッセージング体験を作成する方法を紹介します。例として、Snapchat の in-messenger アプリを使います。
このチュートリアルで何を作るのか、下のデモ動画をご覧ください。
最新のクロスデバイス・プロトタイピングニュースに登録しましょう。
完成済み Pie ファイル（送信側）完成済み Pie ファイル（受信側）
概要
まずはプロトタイピングを始めましょう
ステップ1: Snapchat の UI を用意し、デザインを ProtoPie に書き出す
ステップ2: 最初の Pie のプロトタイピングを始める
ステップ3: メッセージングインタラクションを作成する
ステップ4: 2つ目の Pie へ進む（メッセージを受信する）
ステップ5: ProtoPie Connect を使ってデバイス間通信を行う
ProtoPie でプロトタイピングのプロになろう
ProtoPie を初めて使う方も、このガイドを通して ProtoPie の力を活用しながら、デバイス間体験の世界へ飛び込むお手伝いをします。
注: この記事では、Snapchat アプリ全体を完全にはプロトタイプ化していません。その代わり、1つのデバイスから別のデバイスへメッセージングインタラクションをプロトタイピングすることに焦点を当てました。ご自身のプロジェクトでも、特定の機能を強調したい場合があるでしょう。そのため、タイミングに関する期待値を適切に管理し、ステークホルダーに何を正確に見せたいのかを明確にすることが重要です。
プロトタイピングを始めましょう！ 🍴
ステップ1: Snapchat の UI デザインを ProtoPie に書き出す
Figma から ProtoPie にデザインを書き出します。
ProtoPie Studio で、新しい Pie を作成します。プロトタイピングの流れに入る前に、ProtoPie ページの Figma Community に画面を用意しています。ご自身のアカウントで Figma ファイルを開けば、編集権限を取得できます。その後、Figma から ProtoPie へデザインを直接書き出して、プロトタイピングを始められます。
まだ ProtoPie Plugin をダウンロードしていない場合は、お好みのデザインツールで検索するか、下のボタンをクリックして見つけることができます。
次に、画面を選択して ProtoPie Plugin を開き、Export Screens をクリックしてデザインを ProtoPie に移動します。デザインを書き出す方法の詳細を確認するか、この動画をご覧ください。
この体験では、2つの Pie を作成します。1つは送信側、もう1つは受信側です。どちらも双方向にメッセージを送れます。
画面の準備が整ったので、ProtoPie Studio に進みましょう。まずは最初の Pie（プロトタイプ）から始めます。2つの画面を選択し、Plugin を開いて Export をクリックします。
ステップ2: 最初の Pie のプロトタイピングを始める
プロトタイピングを始めます。
まずは最初の Pie から始めます。これはメッセージを送信する Pie です。体験の流れはプロフィールページから始まり、ユーザーがメッセージアイコンをタップすると、メッセージ画面が開きます。
タップトリガー。
ProtoPie の用語では、*trigger* は Tap で、response はこの場合、メッセージング UI がある別の画面への **Jump** です。
Jump 応答。
Jump 応答では、さまざまな種類のトランジションを使えます。このケースでは、Snapchat で起こるような似たインタラクションを再現したいので、Slide Out の Left to Right を使います。
Slide Out トランジション。
これで最初の画面は完了です！
プロトタイプの最初の画面が完成しました。
ステップ3: 2つ目の画面でメッセージングインタラクションを作成する（メッセージを送信する）
2つ目の画面。
次は 2つ目の画面 です。ここでメッセージングインタラクションが行われます。
前のシーンから Jump した後、Start トリガーを追加しました。シーンが読み込まれると、このトリガーが関連付けられた応答をすべて実行します。
このシーンでは、読み込み直後にいくつかのトランジションを追加したかったので、Move と Focus 応答. の両方を使いました。
最新のクロスデバイス・プロトタイピングニュースに登録しましょう。
Move と Focus の応答。
新しく刷新された イージングオプション をぜひ活用してください。独自のカスタムプリセットも作成できます！
カスタムプリセット。
Move トランジションのアニメーションが終わると、次の 応答 は Focus です。
Snapchat のメッセージの仕組みを見ると、最初の画面で Message アイコンをタップして 2つ目の画面へ移動すると、入力欄がメッセージ送信の準備完了状態になり、入力とスマホのキーボードが有効になります。そのため、同じような結果を得るために Focus を使います。
Focus 応答。
Input Layer。
Focus の注意: これを動作させるには、Text Field グループ内に Input Layer を追加する必要があります。Text → Input に移動し、デザインのサイズに合うようにボックスを描きます。デザインを Snapchat のテキストフィールドのデザインに合わせて調整します。
Focus のプレビュー。
次は何をするのでしょう？ ここから、別のスマホにメッセージを送って受信できるようにします。まず、メッセージが何か、つまり入力欄に何が入っているかを把握する必要があります。そのために Detect. Detect と呼ばれる機能を使います。Detect は、選択したオブジェクトのプロパティの変化を監視し、その下に置いた応答は、そのプロパティが変化するたびに実行されます。
ここでの Detect トリガー は、Input レイヤー内のテキストを監視します。
Detect トリガー。
そのために、テキスト変数を Assign する式を使います。なぜでしょう？ 入力したテキストは、変数 に「保存」されるからです。つまり後でメッセージを送るとき、その変数に「保存」されたテキストが送信されます。
ProtoPie Studio の左下で、このシーン用の変数を作成するには、Variables の横にある「+」をタップし、Text タイプを選択してください。Detect トリガーの下に、新しく作成した変数へ Assign 応答を追加します。式は 'Input 1'. text を使います。
Assign 応答。
どのように動作するかをプレビューで見てみましょう。
Messenger アプリのプレビュー。
これでテキストは送信可能な状態になりました。ただし、メッセージを書いたあとにキーボード上の「send」をタップしたときだけ送信されます。そのために Return トリガー を使いましょう。
キーボード上の「send」をタップすると、次のアクションが トリガー されます。
送信と受信の Pie。
「Send Response」は、あとで別のデバイスで受信されるメッセージを送信します。
送信したメッセージのテキストが画面に表示されます。（そのために Text response を使用します。）
テキストと一緒に UI も表示されます。本物のアプリと同じ効果にするため、シンプルな Opacity トリガーを使います。
入力欄を再び編集可能にするために、もう1つ Focus トリガーを追加します。
入力欄に以前入力したテキストを削除するために Reset を使います。
別の変数「Text 2」も作成して、2つ目の Pie からのテキストを受け取れるようにしました。
テキスト変数。
この Pie の編集を仕上げるために、Pie 2 から送信されるテキストを Pie 1 で表示する Text response を追加し、Opacity response を 100% に設定します。
ステップ4: 2つ目の Pie へ進む（メッセージを受信する）
2つ目の Pie は、最初の Pie の前の「Screen 2」と同じ原則で進めます。
ProtoPie Studio で、新しい Pie を作成します。前の Pie と同様に、Figma から「Adri」というタイトルの Screen をインポートします。
ここでも Start トリガー が UI に作用し、キーボードに合わせて下部シートを移動させ、入力欄をテキスト入力可能な状態にします。
もう一度 2つの変数、「Text 1」と「Text 2」を作成して、最初の Pie と一致させる必要があります。
Detect トリガー は変数「Text 2」で動作します。これは Pie 2 の情報を保存して Pie 1 に送るためです。一方、変数「Text 1」はその逆を行います。この Pie の残りのトリガーと応答をたどると、前回と同じ手順を行っていることがわかります。
重要: Send と Receive を使う場合は、メッセージが必要です。これらのメッセージは、Pie 1 のメッセージと 一致している必要があります。
Pie 1 が送信、Pie 2 が受信 - メッセージ「SENT」。チャンネル: ProtoPie Studio
Pie 2 が送信、Pie 1 が受信 - メッセージ「SENT 2」。チャンネル: ProtoPie Studio。
ステップ5: ProtoPie Connect を使ってデバイス間通信を行う
いよいよクロスデバイス体験をテストするときです。そのためには ProtoPie Connect を使う必要があります。表示はこのようになります。
ProtoPie Connect。
ProtoPie Cloud に 2つのプロトタイプを保存し、ProtoPie Enterprise を使っていない場合はダウンロードしてください。その後、ローカルのプロトタイプを Connect にアップロードすると、互いに「通信」できるようになります。
2つの Pie をアップロードしたら、デバイスアイコンでプレビューを開くこともできますし、スマホの ProtoPie Player App で QR コードをスキャンすることもできます。各デバイスで QR コードをスキャンする必要があります。
これで完了です。メッセンジャーアプリをプロトタイプ化できました。お疲れさまでした！
ぜひ作品を私たちと共有してください。#MadeWithProtoPie のタグを忘れずに使って、ギャラリーページ に掲載され、Pie of the Month に選ばれるチャンスをつかみましょう。
ProtoPie でプロトタイピングのプロになろう
この体験のプロトタイピングを楽しんでいただけたなら嬉しいです。ここで学んだインタラクションは、さらに探求するための素晴らしい土台になります。もっと学びたい方は ProtoPie school に登録するか、ProtoPie を無料でダウンロードして、すぐに始めましょう。
