ほぼすべてのユーザビリティテストで、参加者がログイン画面で一瞬立ち止まり、何かを入力してから上を見上げる瞬間があります。「これで合っているか」と確認しているのです。その一瞬の躊躇こそが明確なサインです。参加者はすでに「これは本物のアプリではない」と気づいており、それ以降に収集されるすべてのデータは、その認識に影響されています。

ほぼすべてのユーザビリティテストで、参加者がログイン画面で一瞬立ち止まり、何かを入力してから上を見上げる瞬間があります。「これで合っているか」と確認しているのです。その一瞬の躊躇こそが明確なサインです。参加者はすでに「これは本物のアプリではない」と気づいており、それ以降に収集されるすべてのデータは、その認識に影響されています。

金融プロダクトのテストでは、この問題はより深刻です。金融ユーザーは、残高が合わない、どんな値でも入力できるフィールドなど、何かおかしいと感じることに慣れています。銀行プロトタイプで本物の認証をスキップすると、参加者は単に離脱するだけでなく、セッションの途中でそれを指摘してしまいます。チームが得られるのは、実プロダクトでの行動ではなく、デモでの行動を反映した結果です。

解決策は思ったよりシンプルです。参加者の信頼が確立される瞬間を見つけ、その操作を本物にすることです。銀行アプリでは、それがログインです。

このチュートリアルでは、検証可能な認証情報、リアルタイムのエラー表示、ネイティブのような生体認証アニメーションを、コードなしで構築します。

作成するもの：出荷された製品のように動作するログイン

モバイルバンキングプロトタイプ「Pie Bank」をベースにしたログイン画面には、機能するテキスト入力、マスクされたパスワードフィールド、認証情報の検証、リアルタイムのエラー表示、iOSと区別がつかないタイミングのFace IDアニメーションが含まれています。

必要なもの：

  • Figma（または対応するデザインツール）のログインUI
  • ProtoPie Studio — 無料で開始可能、このチュートリアルの内容はすべて無料プランで動作します
  • Face IDアニメーション用のLottieファイル（使用したのはこちら）
  • 完成したPie Bankプロトタイプファイル — 並行して操作するためにダウンロードするか、作成後に参考にしてください

ステップ1：Figmaからインポート — Sceneを選択（Flattenedではない）

Figmaでログインのフレームを選択した状態でProtoPieプラグインを開き、エクスポート時にSceneを選択します。Flattenedはすべてを単一の画像にまとめてしまいますが、Sceneはレイヤー階層を保持するため、ProtoPieではすべての要素が個別に操作可能なレイヤーとしてインポートされます。

先に進む前に：すべてのレイヤーに意味のある名前を付けましょう。「Input Username」ではなく「Rectangle 14」など。数式でこれらの名前を参照することになるため、曖昧な名前は時間のロスにつながります。

ステップ2：静的なフィールドを実際に入力を受け付けるInputに置き換える

ProtoPieのネイティブなInputレイヤーは、実際のキーボード入力を受け付けます。参加者はプレースホルダーをタップするのではなく、実際のテキストを入力できます。Text → Inputに移動し、Inputレイヤーをキャンバスにドラッグして、ユーザー名フィールドグループの中にネストします。ビジュアルを合わせます：プレースホルダーテキストはUsername、背景の塗りつぶしとフォントはデザインに合わせます。

プレビューを起動します。フィールドをクリックして入力してください。プロトタイプが「アプリを描画する」のではなく「アプリのように振る舞い」始めます。

このレイヤーをInput Usernameとリネームし、複製してパスワードフィールドグループの中にネストします。

ステップ3：1つのプロパティ変更でパスワードをマスクする

複製したレイヤーで、プレースホルダーテキストをPasswordに変更し、TypeをText Passwordに設定します。ProtoPieが自動的にマスキングを処理するため、カスタムロジックは必要ありません。

両方のフィールドをプレビューしてください。ユーザー名はテキストが表示され、パスワードはドットで表示されます。条件を1つも書いていないのに、すでに本物のように感じられます。

(Image credit: ) (Large preview)

ステップ4：ナビゲーションを配線する前に、遷移先のシーンを先に作成する

新しいシーンを追加します（空白でも構いません）。ProtoPieで最もよくあるミスは、遷移先が存在しない状態でナビゲーションのレスポンスを配線しようとすることです。まず遷移先を作成してください。

ステップ5：ボタンを配線する — 動作はするが、誰でも通してしまう

Log Inを選択し、Tapトリガーを追加、レスポンスをJumpに設定してダッシュボードシーンをターゲットにし、トランジションはSlide in from right to leftにします。

プレビューしてタップしてみてください。遷移はしますが、入力が空でも何でも通ってしまいます。プロトタイプはまだ本当のことを伝えていません。次の2つのステップで修正します。

ステップ6：入力内容を記憶するための変数を追加する

ProtoPieの左下で、Textタイプの変数を2つ追加します：usernameとpassword。各変数を対応する入力レイヤーに数式でバインドします：

input("Input Username").text
input("Input Password").text

デバッグアイコンを有効にすると、入力と同時に変数の値が緑色のオーバーレイで表示されます。入力した内容がリアルタイムで表示されれば、バインドは完了です。

(Image credit: ) (Large preview)

ステップ7：正しい認証情報のみを通す条件を追加する

ログインボタンのTapトリガーに戻ります。Conditionを追加し、2つのルールを両方ともtrueに設定します：

Jumpレスポンスをこの条件の中に移動します。誤った認証情報、空欄、誤った形式 — どれも通れません。参加者は実際にログインしなければなりません。この1つの制約が、以降のすべてのテストセッションの質を変えます。

ステップ8：ほとんどのプロトタイプが省略するエラー状態を構築する

エラーメッセージレイヤーを見つけてError Textとリネームし、初期opacityを0に設定します。最初の条件の逆の条件をもう1つ追加し、その中にChange Propertyレスポンスを入れてError Textのopacityを100に設定します。

誤った認証情報 → エラーが表示。正しい認証情報 → ダッシュボードへ。2つの結果が得られることで、これは「デモ用」ではなく「テスト可能」になります。

ステップ9：テスターに「本物か？」と思わせるFace IDアニメーションを追加する

Mediaに移動し、LottieレイヤーをキャンバスにドラッグしてFace IDファイルを読み込み、iPhoneフレームより上のオフスクリーンに配置します。Login with Face IDボタンにTapトリガー（Tap Face IDとリネーム）を追加し、以下の4つのレスポンスを順に設定します：

  • Move：LottieコンテナをY: 60に移動
  • Playback：Seek: time 0s（常に最初から再生されるようリセット）
  • Playback: Play：Lottieファイルを再生
  • Jump：ダッシュボードへ

ステップ10：タイミングをずらす — これがネイティブな感覚を生む

ディレイなしでは4つのレスポンスが同時に発火し、アニメーションが再生される前に画面が遷移してしまいます。オフセットを追加します：

ResponseDelay
Move0s
Seek0s
Play0.5s
Jump1s

JumpにReset selected scenesを有効にします。有効にしないと、戻ったときにアニメーションがY: 60の位置に残ったままになります。

プレビュー：Face IDをタップすると、アニメーションが降りてきて再生され、画面が遷移します。生体認証ログインが本物と区別がつきません。

Pie Bank, Chapter 1: Login Flowをダウンロードして自由に探索できます。

ここまで本物に近いログインは、プロトタイプから得られる学びを変える

認証が実際に機能すると、エラー状態は本物のリサーチポイントになります。ユーザーはメッセージを理解しているか、再試行するか、代わりにFace IDを使おうとするか。これらは偽のログインでは答えられない質問です。

ステークホルダーレビューでは、フローが自ら語ります。エンジニアリングハンドオフでは、インタラクションパネルに条件ロジック、変数のバインド、タイミングが記録されているため、エンジニアは解釈ではなく意図を理解できます。

これが、FinTechチームがログイン機能自体をテストしていなくてもログインの忠実度に投資する理由です。そこが参加者の信頼が確立される場所だからです。正しく実装すれば、その後のすべての工程でより良いシグナルが得られます。

このチュートリアルは、ProtoPieブログのFinTech Prototyping with ProtoPieシリーズの一部です。このシリーズではPie Bankを4つの章に分けてゼロから構築し、ダッシュボード、送金ロジック、カメラ統合をカバーします。このチュートリアルが役に立った場合は、残りのシリーズもぜひご覧ください。

Smashing Editorial (mnj, il)