タッチスクリーンプロトタイピングの力を活用して、デザインのアイデアを開発者や経営層に効果的に伝えましょう。
このチュートリアルでは、タッチスクリーンインタラクションを使って、完全に動作するセルフサービス・キオスクのプロトタイプを作成し、視聴者を惹きつける方法をご案内します。下のデモで、プロトタイプ全体が実際に動作する様子をご覧ください。
このプロトタイプを完全に再現し、複数デバイス間の通信を可能にするには、ProまたはEnterpriseプランでProtoPie Connectにアクセスする必要があります。
準備はいいですか？始めましょう！
要点
ステップ1：FigmaからProtoPieへのデザイン書き出し
ステップ2：タッチスクリーンインタラクションの作成
ステップ3：支払いプロセスのプロトタイピング
ステップ4：スムーズな引き継ぎのためのインタラクション録画の作成
ステップ1：FigmaからProtoPieへのデザイン書き出し
FigmaからProtoPieへのデザイン書き出し
まず最初に、FigmaですべてのUIを作成し、Figma用ProtoPieプラグイン。を使用してProtoPie Studioへ書き出しました。このプラグインを使えば、Figmaのデザインをインタラクティブなプロトタイプに変換するのがとても簡単です。
ProtoPieとFigmaの違い、そして高度なプロトタイピングで各ツールをどのように使い分けられるかを詳しく学びましょう。
このプロトタイプを再現したい場合は、下記の完成済みPieファイルをご覧ください。
タッチスクリーンキオスクのPieファイル 支払いのPieファイル
ステップ2：タッチスクリーンインタラクションの作成
このプロトタイプは非常にシンプルなインタラクションで構成されていますが、それらを組み合わせることで、仕上がりは非常にリアルになります。
ProtoPieは、引っ張る、ドラッグ、ピンチなど、さまざまなジェスチャーインタラクションをサポートしており、それらはすべて、プロトタイプを高精細な作品へと変えるタッチスクリーンインタラクションです。
私たちのキオスクプロトタイプでは、画面を軽くスワイプして選択肢を切り替えるインタラクションを実装しました。
そのために、主にChain triggersとScale、Opacityのレスポンスを組み合わせ、選択されたサイドとドリンクを強調しました。
💡 豆知識：セキュリティが気になる方もご安心ください。このプロトタイプは自己完結型のソリューションで、完全オフラインで動作するため、ネットワーク接続は不要です。
このプロトタイプを実際の製品と見分けがつかないレベルにするという目標を達成するために、ProtoPie Connectを使用しました。ProtoPie Connectは、プロトタイプとあらゆるハードウェア、API、またはアプリの間のギャップを埋めることができます。
ノートパソコンの画面でご覧のとおり、各項目が選択されると、その情報がProtoPie Connectに共有され、そこで複数デバイスにまたがって情報を活用できます
この無料オンラインコースで ProtoPie Connectの使い方を学びましょう。
ステップ3：支払いプロセスのプロトタイピング
マイクロインタラクションやその他のアニメーションも簡単に実現できます。動画でご覧のとおり、支払いプロセスをシミュレートするために、Scaleレスポンスを使ったStart triggerと、MoveおよびRotateレスポンスを使ったDetect triggerで、シンプルなレシートアニメーションを作成しました。
モバイルデバイスでは、長押しジェスチャーを使って指紋認証の効果を簡単に再現できます。
Long PressもProtoPieでサポートされているジェスチャートリガーの一つであり、現代のタッチスクリーンデザインに幅広く活用できます。
ステップ4：スムーズな引き継ぎのためのインタラクション録画の作成
チームで作業している場合は、ProtoPie Cloudを使ってPieを共有し、インタラクションを記録することで、推測に頼らず開発チームへスムーズに引き継げます。
引き継ぎ機能について詳しく学び、それを使ってデザインのアイデアを効率的に伝える方法を確認しましょう。
以上です！
お疲れさまでした！タッチスクリーンプロトタイピングを使って、ご自身のキオスクプロトタイプを作成するノウハウが身についていれば幸いです。
ProtoPie Connectの使い方についてさらに助けが必要なら、ProtoPie GuruのJeffが登場するこの無料ProtoPie Connectコースをお見逃しなく。
ProtoPieでインタラクティブなタッチスクリーンプロトタイプを作成しましょう
ProtoPieは、インタラクティブなタッチスクリーンプロトタイプを作成するのに最適なツールで、デザインのアイデアを効果的に見せるのを簡単にします。無料で始めると、自分だけのタッチスクリーンインタラクションを作成しましょう。
#MadeWithProtoPieを付けて、あなたの作品を私たちにシェアしてください。どんなものができるのか楽しみにしています。楽しいプロトタイピングを！
