【簡単】LottieとProtoPieを利用したUIアニメーションの作成
2024/07/17
このチュートリアルに従って、ProtoPieとLottieFilesを使用してUIアニメーションを作成する方法を学びましょう。
プロトタイピングはデザインプロセスにおいて重要なステップです。プロトタイプはデザイナーやステークホルダーがアイデアの実現可能性をテストし、ユーザーの行動を理解し、開発者へのハンドオフを助けます。
コーディングスキルがなくてもリアリスティックなプロトタイプを作成できるのでしょうか？という疑問があるかもしれませんが、ProtoPieがあれば可能です！ProtoPieはキーボード入力、カメラ入力、音声インタラクション、条件、マルチタッチジェスチャー、そしてLottieアニメーションを使用して高品質な体験を作成することができます。シンプルながら強力なツールであるProtoPieをぜひご利用ください。
このチュートリアルでは、飼い主に代わって犬を散歩させるペットケアアプリの簡単なモックアップを作成します。Lottieを使用してペットシッターを雇う楽しい体験を作りましょう。
1. アニメーションの作成
まず、ProtoPieで利用するアニメーションが必要です。LottieFilesから無料アニメーションをダウンロードするか、マーケットプレイスで購入できます。また、Adobe After Effectsで自分で作成することも可能です。始め方がわからない場合、このチュートリアルが役立つでしょう。
このプロトタイプでは犬のキャラクターを作成し、その歩行サイクルをキーフレームで設定します。DuikやRubberHoseなどの人気のAfter Effectsプラグインを利用してワークフローを向上させることもできます。
アニメーションが完成したら、LottieFilesプラグインを利用して.jsonファイルとしてエクスポートします。エクスポート設定で、すべてのエクスプレッションをキーフレームに変換することを忘れないでください。
2. UIデザインとProtoPieへのエクスポート
次に、可愛いアニメーションを配置するためのUIが必要です。ProtoPieで直接デザインすることもできます。初めて利用する場合は、まずこのクイックスタートガイドを確認してください: FigmaとProtoPieでインタラクティブな入力を作成する（英語）
デザインはFigma、Sketch、またはAdobe XDからもインポートできます。レイヤーの名前を適切に整理しておくと、後の作業が楽になります。
3. プロトタイピングを開始
ボタンコンポーネントの作成
デザインには犬のサイズを選択する2つのボタンがあります。コンポーネントを作成すると、要素のカスタム動作を設定しやすくなります。ボタンレイヤーを選択し、上部ツールバーのコンポーネントアイコンをクリックします。
1つのボタンを選択すると、他のボタンが選択解除されます。これを実現するには、コンポーネント内でSendレスポンスとReceiveトリガーを利用します。
背景色を確認する条件とともにTapトリガーをボタンに追加します。グレーであればボタンが選択されている意味です。背景を緑に、フォントの色を白に変更し、ドロップシャドウを表示します。現在のシーンにメッセージを送信して他のボタンを選択解除します。
次に「deselect」メッセージを持つReceiveトリガーを追加します。コンポーネントがこのメッセージを受信すると、ボタンは選択された状態ではなくなります。次に、スタイルを選択解除されたグレーボタンに変更します。
現在、ロジックが少し誤っていることに気付くでしょう。これは2つのアクションが同時に発生するためです。これを解決するには、条件内のスタイリングレスポンスに0.01の遅延を追加します。
Lottieファイルのインポート
ボタンが設定されたら、Lottieファイルを追加できます。Media/Lottieに移動して.jsonファイルを選択します。右パネルの下部で「自動で再生」と「繰り返す」のオプションを選択します。
Tapトリガーの設定
最後に、ボタンをアニメーションキャラクターと接続します。Tapトリガーを使用して、1つのアニメーションをビューポートの外に移動し、他のアニメーションをビューに持ってくることができます。微調整して、マイクロインタラクションの完成度を高めることができます。
最終結果
クリック可能なプロトタイプはここで確認できます。
ProtoPieは、デザイナーが高品質のインタラクティブプロトタイプをコードを1行も書かずに作成できるよう支援します。今すぐ高品質のプロトタイプを開始しましょう。