概要
はじめに
Pieを作成する手順に入る前に、こちらで用意した必要なデザイン素材にすべてアクセスできていることを確認してください：
ProtoPie クイックスタートガイドを開いてください。
手順付きの開始用Pieファイルにアクセスしてください。
ファイルリンクをクリックし、ProtoPie Studioで開いてください。
スクロールインタラクションの作成
まずは基本中の基本、スクロールインタラクションから始めましょう。プロトタイピングの過程で何度も使うことで、リアリティと奥行きを加えられます。
手順：
スクロールさせたいグループレイヤーを選択します。
Containerをクリックし、Scrollを選択します。
Direction（縦または横）を設定します。
クイックヒント：よりスムーズなインタラクションのために、スクロールコンテナ内にコンテンツをまとめてください。
トリガーとレスポンスを極める
次に、ユーザー入力（Triggers）を視覚的な動き（Responses）に結び付けましょう。
例：コーヒーサイズセレクター（Curto、Medium、Venti）
Curtoカードを選択します。
Tapトリガーを追加します。
Borderレスポンスを追加し、Curtoの枠線の不透明度を100に設定します。
さらに2つのBorderレスポンスを追加し、MediumとVentiの枠線を0に設定します。
同じ手順をMediumとVentiでも繰り返します。
ヒント：枠線の不透明度をリセットすることで、選択状態がわかりやすくなります。
条件とロジックの使用
ここでは、トッピング選択のようなトグルインタラクションを、条件とロジックを使って効果的に追加しましょう。
例：ホイップクリーム & アイスの選択
ホイップクリームカードを選択します。
Tapトリガーを追加します。
Conditionを追加します：
枠線の不透明度 = 0 の場合は、100に設定します。
それ以外の場合は、不透明度を0に設定します。
Iceでもロジックを繰り返します。
ヒント：条件と変数は、トグルの要です。
変数の設定と価格計算
真のハイフィデリティプロトタイプを作るには、Pieに見た目の反応だけでなく、もっと多くの要素が必要です。ほとんどのプロトタイプには、物事をつなぎ合わせるためのロジックが必要です！
ProtoPieでは、変数と動的計算を使って選択状態を簡単に管理できます。
手順：
シーン固有の変数を追加します：CURTO、MEDIUM、VENTI、WhippedCream、Ice、total_price。
デバッグモードを有効にして、変数の値を確認します。
変数の割り当て：
サイズ（CURTO、MEDIUM、VENTI）：選択中を1、その他を0に設定します。
トッピング（Whipped Cream、Ice）：最初は変数を1に設定し、再度選択されたら0に戻します。
合計価格を計算する：
各トリガーの下に次の式を設定します：
(CURTO * 4.59 + MEDIUM * 5.39 + VENTI * 6.79) + (WhippedCream * 3.06) + (Ice * 2.00)
total_priceに連動したTextレスポンスを追加します。
ボタンの色を強調表示（オプション）：
total_priceの変化を検出して、選択状態を強調表示します（例：色 #D8FF99）。
ヒント：デバッグコントロールを使って、ロジックを確認してください。
特別オファー
あなたのクリエイティブなプロトタイプを共有して、1か月目のProtoPie Proプランを無料で！を手に入れましょう！
方法：アンケートから送信するか、SNSでハッシュタグ #SimplePie を使ってください！
