はじめに: ログインは単なる開始点ではありません
UXリサーチのセッションで、参加者がログイン画面に到達した瞬間に立ち止まり、「これで合ってる？」と視線を上げる瞬間があります。その一瞬で、彼らは「これは実際のアプリではない」と気づき、以降のすべての行動はその認識によって歪められます。金融アプリではさらに深刻です。残高が合わない、どんな値でも受け付けるフィールドを見れば、参加者は即座に不信感を示し、テストは「デモ」に成り下がります。
この問題の解決策は思ったより狭い範囲にあります。参加者の信頼が形成される瞬間を見つけ、そのインタラクションを「本物」にすることです。銀行アプリでは、その瞬間はログインです。このチュートリアルでは、コード不要で、実際の認証、エラー状態、ネイティブな生体認証アニメーションを備えたログインフローをProtoPieで実装する方法を解説します。
必要なもの
- Figma（または対応デザインツール）で作成したログインUI
- ProtoPie Studio（無料プランで全ての機能が利用可能）
- Face IDアニメーション用のLottieファイル（こちらのものを使用）
- 完成版Pie Bankプロトタイプファイル（参考用）
このチュートリアルは、ProtoPieブログのFinTech Prototypingシリーズの一部です。ダッシュボード、送金ロジック、カメラ統合を扱う他の章もございますので、シリーズ全体もご参照ください。
Step 1: FigmaからSceneとしてインポート
FigmaでProtoPieプラグインを開き、ログインフレームを選択した状態でSceneとしてエクスポートします。Flattenedはすべてを単一画像にまとめますが、Sceneはレイヤー階層を保持し、各要素を個別に操作できます。
重要: エクスポート前にすべてのレイヤー名を意味のある名前に変更してください。「Rectangle 14」ではなく「Input Username」のように。後で数式で参照するため、曖昧な名前は時間の無駄になります。
Step 2: 静的フィールドを実際に入力できるInputレイヤーに置き換え
ProtoPieのネイティブInputレイヤーは実際のキーボード入力を受け付けます。
1. テキストツール → Inputレイヤーを選択
2. キャンバスにドラッグし、ユーザー名フィールドグループ内にネスト
3. プレースホルダーを「Username」に、背景色とフォントをデザインに合わせて設定
プレビューを実行し、フィールドをクリックして入力してみてください。プロトタイプが実際のアプリのように動作します。このレイヤーを複製し、パスワードフィールドグループにネストします。
Step 3: パスワードマスキングの設定
複製したレイヤーのプレースホルダーを「Password」に変更し、TypeをText Passwordに設定します。ProtoPieが自動的にマスキング処理します。カスタムロジックは不要です。
Step 4: 目的地シーンの作成
新しいシーンを追加します。ProtoPieで最もよくある間違いは、目的地シーンなしにナビゲーションを接続しようとすることです。まずシーンを作成しましょう。
Step 5: ボタンの接続（ただし、まだ不十分）
ログインボタンにTapトリガーを追加し、応答としてJumpを設定してダッシュボードシーンへ移動させます。トランジションはSlide in from right to leftに設定します。
[ロジックツリー] Log In → Tap → Jump → Dashboard
プレビューでタップすると移動しますが、入力がなくても通過します。まだプロトタイプはユーザーを騙しています。次の2つのステップが解決策です。
Step 6: 変数を追加して入力値を保存
ProtoPie左下で、テキスト型の変数usernameとpasswordを追加します。それぞれのInputレイヤーにバインドします。
username = input("Input Username").text
password = input("Input Password").text
デバッグアイコンを有効にすると、入力時に変数の値がリアルタイムで表示されます。この値が見えればバインドは成功です。
Step 7: 正しい資格情報のみを通す条件を追加
ログインボタンのTapトリガーにConditionを追加し、2つのルールが両方とも真の場合のみJumpが実行されるようにします。
username equals alex.c@gmail.com
password equals ABC123
誤った資格情報、空欄、形式が異なる入力はすべて拒否されます。これで参加者は実際にログインする必要があります。この制約が、以降のテストセッションの質を変えます。
Step 8: エラー状態の実装（多くのプロトタイプが省略している部分）
エラーメッセージレイヤーを見つけ、名前をError Textに変更し、初期不透明度を0に設定します。次に、最初の条件の逆の条件を追加し、その中でError Textの不透明度を100に変更するChange Property応答を入れます。
[ロジックツリー] Log In → Tap → Condition (Invalid) → Change Property (Error Text opacity=100)
これで、誤った入力ではエラーが表示され、正しい入力ではダッシュボードに移動します。2つの結果があることで、真のテストが可能になります。
Step 9: Face IDアニメーションの追加
メディア → Lottieレイヤーをドラッグし、Face IDファイルをロードします。iPhoneフレームの上、オフスクリーンに配置します。「Login with Face ID」ボタンにTapトリガーを追加し、順番に4つの応答を設定します。
1. Move: Lottieコンテナ Y=60
2. Playback: Seek time 0s（アニメーションリセット）
3. Playback: Play Lottieファイル
4. Jump: ダッシュボード
Step 10: タイミング遅延でネイティブな感覚を実現
遅延がないと、すべての応答が同時に実行され、アニメーションが再生される前に画面が遷移します。各応答に遅延を追加します。
| 応答 | 遅延 |
|---|---|
| Move | 0s |
| Seek | 0s |
| Play | 0.5s |
| Jump | 1s |
Jump時にReset selected scenesオプションを有効にしてください。有効にしないと、戻ってきたときにアニメーションがY=60で固定されたままになります。
プレビュー: Face IDボタンをタップすると、アニメーションが降りてきて再生され、その後画面が遷移します。実際のiOS生体認証と見分けがつきません。
注意点と制限
- このチュートリアルはデザインプロトタイプのレベルです。実際のセキュリティ認証（サーバー検証、トークンなど）を実装するものではないため、実サービスのセキュリティ要件を代替するものではありません。
- ProtoPieの無料プランには一部機能制限がある場合があります。チーム向けの高度な機能（共同作業など）は有料プランが必要です。
- Lottieファイルのサイズと最適化によってアニメーションのパフォーマンスが異なります。大きすぎるファイルはモバイルデバイスでカクつく原因になるため、軽量に保ちましょう。
まとめ: ログインが本物になると、テストで得られるデータが変わります
実際の認証が動作すると、エラー状態は真のリサーチポイントになります。ユーザーがメッセージを理解しているか、再試行するか、Face IDを好むかなどを知ることができます。偽のログインでは決して得られない洞察です。
また、ステークホルダーレビューでは、このフローは言葉で説明しなくてもそれ自体で説得力があります。エンジニアリングハンドオフでも、インタラクションパネルに条件ロジック、変数バインディング、タイミングが文書化されているため、エンジニアが意図を正確に把握できます。
次のステップの学習方向:
- ProtoPieでの送金ロジックの実装を学んでみましょう。
- データ駆動の意思決定のために、Spotifyのコンテキストキュレーションアーキテクチャを参照してください。
- 最新のクラウドインフラストラクチャトレンドがプロトタイピングに与える影響を理解するには、KubeCon EU 2026で発表されたMSのKubernetes & AIインフラストラクチャアップデートをご覧ください。
このチュートリアルが役に立ったなら、ProtoPie FinTechシリーズの他の章も学習を続けてください。ダッシュボード、送金、カメラ統合までをカバーし、より完成度の高い金融アプリプロトタイプを作成できます。
この記事はSmashing Magazineの原文を基に再構成したものです。