動的なユーザーエクスペリエンスデザインの世界では、高精度のプロトタイプを作成することは、アイデアを形にし、関係者とコンセプトを検証するうえで不可欠です。経験豊富なプロフェッショナルでも、初心者でも、スキルを高めたい方であれば、ProtoPie を使いこなすことで、コーディングなしでインタラクティブかつリアルなプロトタイプを作成でき、デザインプロセスを大幅に効率化できます。
この記事では、実践的な演習として役立つ、再現しやすい10個のプロトタイプを紹介します。これらの例では ProtoPie のいくつかの主要機能を示しますが、これはまだ始まりにすぎません。さらに探求して学ぶべきことはまだたくさんあり、その可能性を最大限に引き出して、自信を持って魅力的で使いやすいインターフェースを作成できるようになります。
概要
初級レベル: シンプルなインタラクション
1. ジャンプ: スマートな画面遷移
2. 縦方向の3Dスクロール
3. フォームフィールド
4. 複数選択の写真
中級レベル: 再現するプロトタイプ
5. ホリデーカードメーカー
6. スキャンして料理
7. 絵文字キッチン
8. Tinderアプリ
上級レベル: Connect を使ったインタラクション
9. 映画データベース API
10. Google マップ API
初級レベル: シンプルなインタラクション
それでは、強力なインタラクションから始めましょう！このセクションでは、チュートリアルと Pie のサンプルを紹介します。ProtoPie School では、さらに多くのステップごとの簡単なチュートリアルをご覧いただけます。
1. ジャンプ: スマートな画面遷移
Smart Jump は、Jump response の一部である遷移タイプのインタラクションです。マッチするオブジェクトを自動でアニメーションさせることで、シーン遷移をすばやく作成できます。
2. 縦方向の3Dスクロール
縦方向の3Dスクロールは、ユーザーがコンテンツを縦にスクロールする際に奥行き効果を生み出すインタラクション手法です。Scroll container、Chain trigger、いくつかの3Dレスポンスを使うことで簡単に実現できます。
3. フォームフィールド
フォームフィールドのバリデーションは、あらゆるアプリやWebのUXデザインの中核です。送信前に、ユーザー入力が必要条件を満たしていることを確認します。次のチュートリアルでは、範囲チェック、パスワードとメールの検証など、さまざまなフィールド検証の作成方法を学びます。
4. 複数選択の写真
画像は、今日の多くのデジタル製品で活用されている強力な要素です。コンポーネント、変数、数式を使って、複数の写真を選択・選択解除し、それらが自動で並び替わって論理的な番号順を保つ方法を学びましょう。
中級レベル: 再現するプロトタイプ
この次のセクションでは、一連のインタラクションを組み合わせて機能的なアプリを作成するプロトタイプを紹介します。Pie をダウンロードして Studio で開き、そのロジックを確認し、各部分を分解して、インタラクションを再現して自分だけのプロトタイプを作成しましょう。再現できるプロトタイプは ProtoPie ギャラリーでさらに見つかります。
5. ホリデーカードメーカー
インタラクティブなクリスマスカードで、祝祭の雰囲気を体験しましょう。このカードには、楽しいアニメーション、タッチインタラクション、そして魅力的なホリデーデザインが備わっており、伝統的なクリスマスカードにデジタルなひねりを加えています。
6. スキャンして料理
IoTプロトタイピングの世界を探索し、スマートホームソリューションを作成しましょう。このキッチンプロトタイプでは、レシピカードや食品パッケージのQR/バーコードをスキャンして詳細な調理手順と材料リストにすぐアクセスできるほか、2つの Pie 間でシグナルを送受信できます。
7. 絵文字キッチン
このインタラクティブなプロトタイプでは、ユーザーがさまざまな絵文字を組み合わせて、新しくて楽しく、ユニークな絵文字を作成できます。
8. Tinderアプリ
このインタラクティブな Tinder アプリのプロトタイプは、スワイプしていいねする機能を再現しており、滑らかなアニメーションと完全なオンボーディングフローを備えています。
上級レベル: Connect を使ったインタラクション
この最後のセクションでは、Connect API プラグイン を使って2つの素晴らしいプロトタイプを作成する方法を学びます。これを実現するには、Connect Core または Enterprise へのアクセスが必要です。Connect の各プランはこちらをご覧ください。
9. 映画データベース API
実際のデータをデザインプロジェクトに取り入れましょう。Connect API プラグイン、セルフホストメディア、The Movie Database（TMDB API）を使って、実際の映画・TV番組データを備えた映画データベースWebサイトを作成します。
10. Google マップ API
デザイナーは、Google Maps API を使って初期段階のデザインを検証することもできます。Connect API プラグインとセルフホストメディア機能を使って、Google Maps をプロトタイプに統合しましょう。
さらに無料のプロトタイピングリソースを入手する
ProtoPioneers に参加して他の ProtoPie ユーザーとつながり、ヘルプを得て、体験を共有しましょう。
ProtoPie School に登録して、プロトタイピングスキルを向上させる無料コースを受講しましょう。
過去のライブ配信を見ることで、Meta、Warner Bros Discovery、MBition（Mercedes-Benz）などの専門家からベストプラクティスを学べます。
