ほとんどのプロトタイプのログイン画面は近道です。ボタンをタップすると画面が切り替わり、認証情報が重要だったことにしたまま全員が話を合わせます。問題は見た目ではありません — 偽のログインは偽のフィードバックを生むのです。テスト参加者がそのインタラクションが本物ではないと分かると、行動が変わり、集めるデータもそれに合わせて変わってしまいます。
このチュートリアルでは、本物を作ります：
その結果、完成品と見分けがつかないログインフローが、ProtoPie だけでコード不要で構築できます。
見ながら学びたいですか？ 完全版チュートリアル動画が、各手順をリアルタイムで案内します。
読む→実行タイプですか？ 両方使いましょう。動画で全体像をつかみ、このガイドで後から見返したい手順を確認できます。
必要なもの：
Figma またはお好みの UI ツールからインポートしたログイン UI
Face ID アニメーション用の Lottie ファイル（このチュートリアルで使用しています）
まず完成版を見てみたいですか？ 第 1 章のプロトタイプファイルは、このチュートリアルの শেষেでダウンロードできます。
ProtoPie は初めてですか？ 無料アカウントから始めて、作りながら一緒に進めましょう。
ステップ 1：Figma からログイン UI をインポートし、レイヤー構造をそのまま保つ
Figma でプラグインパネルを開き、ProtoPie を検索して起動します。ログインフレーム全体を選択したら、Flattened ではなく Scene を選びます。Scene はレイヤー階層を保持し、Flattened はすべてを 1 枚の画像にまとめてしまうため、後から個々の要素を操作できなくなります。
エクスポートをクリックすると、レイヤーは Figma での構造どおりに ProtoPie に表示されます。
💡 次に進む前に、すべてのレイヤー名をわかりやすく変更しておきましょう。『Rectangle 14』のような曖昧な名前は、インタラクションを組み始めた瞬間に時間のロスになります。
Figma のレイヤーをそのまま ProtoPie にインポート — レイヤー構造は維持され、すぐにプロトタイプ作成を始められます。
ステップ 2：静的な入力フィールドを、実際にテキストを受け付けるものに置き換える
これは、現実的なプロトタイプとクリックできるだけのモックアップを分けるステップです。ProtoPie のネイティブ Input レイヤーは実際のキーボード入力を受け付けるため、テスターはシミュレーションではなく本物のテキストを入力します。
Text → Input に移動し、Input レイヤーをキャンバスにドラッグします。レイヤー階層の username フィールドグループ内に配置し、見た目をデザインに合わせます：
プレースホルダーテキストを Username に設定する
背景の塗りをフィールドの背景に合わせる
フィールド端の不要な余白がある場合は Padding のチェックを外す
元のテキストレイヤーから 16 進コードをコピーして Input レイヤーのプレースホルダー色に貼り付け、フォントとサイズも合わせる
プレビューして、フィールドをクリックして入力します。これでユーザー名入力がライブになりました。
💡 複製する前に、このレイヤーを Input Username と名付けておきましょう。
ステップ 3：パスワードフィールドをマスクして、本物のアプリのように動作させる
Input Username を複製し、コピーをパスワードフィールドグループ内に配置します。パスワードフィールドにするには 2 つ変更します：
プレースホルダーテキストを Password に変更する
Type を Text から Text Password に変更する
Text Password は入力した文字を自動的に点でマスクするので、カスタムロジックは不要です。
両方のフィールドをプレビューしてください。Username には入力した文字が表示され、Password には点が表示されます。ユーザーが期待する動作そのものであり、ユーザーテストの場でこのプロトタイプに信頼性を持たせる理由そのものです。
Type を Text Password に切り替えるだけでフィールドはマスクできます — カスタムロジックは不要です。
ステップ 4：ナビゲーションを配線する前にダッシュボードシーンを作成する
ProtoPie で新しいシーンを追加します。これがダッシュボードになります。この時点では空でも構いません。重要なのは、ログインボタンを配線する前に、ナビゲーションの遷移先として存在していることです。
💡 遷移先シーンのないまま Jump レスポンスを設定しようとするのは、ProtoPie 初心者のビルドで最もよくある順序ミスです。
ステップ 5：ログインボタンでダッシュボードに移動させる
あなたの Log In ボタンレイヤーを選択します。Tap トリガーを追加し、レスポンスを Jump に設定、ダッシュボードシーンをターゲットにします。トランジションはネイティブアプリらしさを出すために Slide in from right to left に設定します。
プレビューしてタップします。シーンが切り替わります。ボタンは機能しますが、入力欄の中身に関係なく動いてしまいます。次のステップでそれを修正します。
Tap トリガーを Jump に接続 — これでログインボタンはダッシュボードシーンに移動します。
ステップ 6：変数を使ってユーザーの入力を記録する
変数は、このプロトタイプに記憶を与えるものです。変数がなければ、入力欄は見た目だけのフィールドで、アプリのロジックとつながっていません。
ProtoPie インターフェースの左下で、ログインシーンに 2 つの変数を追加します。どちらも Text タイプに設定すると、文字、数字、特殊文字を扱えます。
次のように名前を付けます：
username
password
式を使って、それぞれの変数を対応する入力レイヤーにバインドします。username 変数を選択し、Use Formula をクリックして、次を入力します: input("Input Username").text
password も同様です: input("Input Password").text
各変数の横にあるデバッグアイコンをオンにします。画面上に緑の変数オーバーレイが表示され、入力に合わせてライブの値が見えます。これで、上にロジックを組む前にバインドが機能していることを確認できます。
無料プランですか？ このチュートリアルの内容はすべて作れます。もっと必要になったら — 無制限のプロトタイプ、チームコラボレーション、追加シーン — こちらが利用できます。
ステップ 7：条件ロジックを追加して、有効な認証情報だけがログインできるようにする
ログインボタンの Tap トリガーに戻り、Condition を追加します。次の 2 つの条件が同時に true である必要があります：
username が alex.c@gmail.com と等しい
password が ABC123 と等しい
この Condition ブロックの中に Jump レスポンスを移動します。これでシーン遷移は、両方の値が完全に一致したときだけ実行されます。間違った認証情報、間違ったメール形式、空のフィールド — どれも通りません。
Jump レスポンスは、両方の条件が満たされたときだけ実行されます。間違った認証情報は通りません。
ステップ 8：ログイン失敗時のエラー状態を作成する
エラー状態のないログインフローは、ログインフローではありません — 一方通行の入口です。エラーメッセージのレイヤーを見つけて Error Text に名前を変更し、読み込み時には見えないように不透明度を 0 に設定します。
ログインボタンのトリガーに、最初の条件の逆となる 2 つ目の条件を追加します：
username が alex.c@gmail.com と 等しくない
password が ABC123 と 等しくない
この条件の中に、Error Text を対象にした Change Property レスポンスを追加します。不透明度を 100 に設定します。
フロー全体をプレビューします。間違った認証情報ならエラーメッセージが表示され、正しい認証情報ならダッシュボードへジャンプします。これでログインには 2 つの明確な結果ができ、テストしやすく、関係者にも見せやすくなります。
ステップ 9：Face ID アニメーションを追加する — これで本物らしく感じられる細部
生体認証ログインは、テスターが立ち止まって「これは本当にアプリ？」と聞きたくなるインタラクションです。作り方は次のとおりです。
Media に移動し、Lottie レイヤーをキャンバスにドラッグします。Face ID の Lottie ファイルを読み込み、グループを iPhone フレームの上、画面外に配置します。着地させたい Y 座標を覚えておきましょう — Y: 60 は着地点としてちょうどよい値です。
あなたの Login with Face ID ボタンを選択し、Tap トリガーを追加します。メインのログイン用トリガーと区別できるよう、Tap Face ID に名前を変更します。
次の 4 つのレスポンスを順番に追加します：
Move — Lottie コンテナをターゲットにし、Y を 60 に設定します。これで画面内に下りてきます。
Playback: Seek — Lottie ファイルをターゲットにし、時間を 0 秒に設定します。これでアニメーションがリセットされ、必ず最初から再生されます。
Playback: Play — Lottie ファイルをターゲットにします。
Jump — ダッシュボードシーンへ、右から左へスライドします。
ステップ 10：タイミングを順番に設定して、シーンが切り替わる前にアニメーションを再生する
遅延設定がないと、4 つのレスポンスが同時に実行され、アニメーションが再生される前にシーンがジャンプしてしまいます。タイムラインの遅延コントロールを使って、順番をずらしましょう。
推奨遅延：
Move：0 秒（タップ直後に即時実行）
Seek：0 秒（即時実行）
Play：0.5 秒（Lottie が始まる前に Move アニメーションを完了させる）
Jump：1 秒（遷移前に Lottie アニメーション全体を再生する）
Reset selected scenes にチェックを入れておきます。これで、ユーザーがログイン画面に戻ったときに Face ID アニメーションが開始位置に戻ります。
完全なフローをプレビューしてください。Face ID でログインをタップすると、アニメーションが表示されて再生され、画面が切り替わります。これなら、どんな関係者やテスト参加者の前でも通用する生体認証ログインです。
このログインフローで可能になること
実際の認証情報を検証し、ライブのエラー状態を表示し、生体認証をシミュレートするログインは、見た目が印象的なだけではありません。プロトタイプでできることそのものを変えます。
テスト参加者は、実際のプロダクトと同じ感覚でこれに触れます。集めるフィードバックは本当の行動を反映し、「ただのデモです」という前提に合わせたものではありません。関係者は、認証フローを説明されるのではなく、自分で体験します。そしてロジックがここまで正確になると、プロトタイプは視覚的な参考資料ではなく、エンジニアリングチームが基にする仕様書へと変わります。
それが、Pie Bank の土台です。チュートリアル 2 では、ダッシュボードの設定、変数が各画面をまたいで金融状態を保持する仕組み、そしてプレミアムアプリ特有の触感を生み出すスクロール動作の作り方を紹介します。
完成したログインシーン — すべてのインタラクションが接続され、条件が設定され、実際のアプリのように正確にプレビューできる状態です。
ProtoPie で一緒に進めましょう
第 1 章のプロトタイプファイルをダウンロードしてください — ログインシーンは完全に構築済みで、すべてのインタラクションも接続されています。このチュートリアルと並べて開き、各ステップがどうつながるか確認することも、手元のビルドをチェックする参照として使うこともできます。
まだ ProtoPie を使っていませんか？
まだ ProtoPie を使っていませんか？ 無料で作り始めましょう。このチュートリアルの内容はすべて無料プランで使えます。
このレベルのプロトタイピングをチームに導入したいですか？
チームが複雑なプロダクト体験に取り組んでいて、この精度でプロトタイプを作る必要があるなら、私たちの Creative Technologists がデザインチームと直接連携し、より早く実現します。
