見せて、言葉で説明しない。
この古典的なライティング手法は、フィクション作家のためだけのものではありません。デザインにも関係があります。デザインプロセスのどこかの段階で、ハイフィデリティプロトタイプに取り組む必要があるでしょう。つまり、最終製品にできるだけ近い見た目と機能を持つプロトタイプです。これにより、開発者やクライアントに対して、推測に頼らなくても済むように、製品がどのように見え、どのように感じられるかを（言葉で説明するのではなく）示すことができます。
理想的には、ユーザーは最終製品を使っているかのようにハイフィデリティプロトタイプを操作できるべきです。つまり、クリックしたり、ホバーしたり、特定のアクションを引き起こしたりできるということです。言い換えれば、あなたのハイフィデリティプロトタイプはインタラクティブであるべきです。
しかし、静的なアセットだけでインタラクティブ性を伝えるのは難しいものです。そこで活躍するのがアニメーション、特に Lottie アニメーションです。
Lottie アニメーションとは？
Lottie アニメーションは JSON ベースのファイル形式で、Web やモバイルプラットフォームを含むほぼあらゆる場所で使用できます。Lottie アニメーションはインタラクティブで軽量なうえ、品質を損なうことなく拡大・縮小できます。
しかも、ゼロから作る必要はありません。LottieFilesには、プロトタイプにも最終製品にも使える無料のカスタマイズ可能なアニメーションが何千点もあります。
なぜプロトタイプで Lottie アニメーションを使うのか？
Web やモバイル向けにデザインしているなら、ユーザーの操作に反応したり、ユーザーの関心を引きつけたりするために、製品にはおそらくアニメーションが含まれるでしょう。プロトタイプにアニメーションを含めることで、開発者やクライアントは、それらを最終製品でどのように表現したいのかを正確に理解できます。また、開発者にとっても、文章や口頭の説明を解釈しようとするより、プロトタイプを参照するだけで実装方法を理解しやすくなります。
そして Lottie アニメーションなら、主に 2 つの大きなメリットがあります。
カスタマイズ可能 – Lottie アニメーションは、モーションデザインについて何も知らなくても、ブランドやビジュアルの美学に合わせて作り込まれたかのようにカスタマイズできます。LottieFiles の Color Palette 機能を使えば色を簡単に変更でき、色、速度、フレームレート、サイズなどをさらに細かく調整したい場合は、無料の Lottie Editor を使えます。
受け渡しが簡単 – Lottie なら、アニメーションの納品は静的アセットの納品と同じくらい簡単です。Lottie アニメーションは JSON ベースの形式なので、各アニメーションごとに 1 つのアセットファイルを渡すだけで済みます。Web、iOS、Android 向けに用意された Lottie libraries で実装できます。開発者がゼロからコードを書く必要はありません。
ProtoPie に Lottie アニメーションを追加するには
嬉しいことに、ProtoPie は Lottie アニメーションをネイティブでサポートしています。Lottie アニメーションをインポートするには、ファイルを ProtoPie にドラッグ＆ドロップするだけです。あるいは、Insert > Layers > Lottie をクリックしてもかまいません。
ご覧ください
ProtoPie で Lottie アニメーションを追加し、使う方法をさらに詳しく学べます。
Lottie アニメーションの追加に慣れたら、プロトタイプで活用できる 5 つの方法を見てみましょう。
1. ローディングアニメーション
読み込み時間が遅いと、収益に直接影響することがあります。Google によると、モバイルサイトの読み込みが 1 秒遅れるだけで、コンバージョン率に影響を及ぼす可能性が最大 20% あるそうです。
解決策は？ サイトの読み込みを速くする最適化に加えて、ユーザーを待たせるために ローディングアニメーション（読み込みスピナーやスケルトンスクリーンなど）を表示する方法があります。ページの読み込み前や、ユーザーがアクションを実行してフィードバックを期待しているときに表示しましょう。これらのアニメーションは、実際のパフォーマンスが向上しなくても、サイトをより速く、より応答性が高いように感じさせます。
Lottie のファイル形式は非常に軽量なので、ローディングアニメーションに最適です。そのため、プロトタイプでも実際のサイトやアプリでも、読み込み時間を増やすことなく高速に読み込まれます。
ProtoPie なら、プロトタイプでローディングアニメーションを簡単に設定できます。特定の遅延の後に次のシーンへジャンプする Jump Response を設定するだけです。その遅延中に Lottie を再生して、ローディングアニメーションを再現しましょう。
2. ブランドアニメーション
デザイナーとして、アニメーションはブランドをより印象的にする機会です。結局のところ、動く画像は静止画よりも思い出されやすいのです。
これを簡単に実現する方法は、一般的なローディングアニメーションをブランドアニメーションに置き換えることです。ロゴのアニメーション版を表示したり、ローディングアニメーションにブランドカラーを使ったり、ブランドマスコットを見せたりしましょう。たとえば、有名な語学学習アプリの Duolingo を使ったことがあるなら、象徴的な緑のフクロウを覚えているはずです。Duolingo は Lottie アニメーションを使って、読み込み画面や完了画面にマスコットを表示しています。
カスタムのブランドアニメーションを作るためのモーションデザインチームがいなくても心配はいりません。無料の Lottie アニメーションをブランドカラーに合わせて簡単にカスタマイズできます。ブランドロゴの SVG 版を用意して、SVG to Lottie tool を使えば、すぐにアニメーション化することもできます。
3. ホバーアニメーション
ボタンやアイコンのような要素の中には、ホバーするとアニメーションするものがあります。これには 2 つの役割があります。
インタラクティブ性を示す – これらの要素にカーソルを置くと、それに反応してアニメーションするのを見て、クリック可能だと分かります。これは、ユーザーにクリックや操作を促すのに役立ちます。
ユーザーエンゲージメントを高める – ただ反応するのを見る楽しみのために、ボタンやアイコンにホバーしたことはありませんか？ アニメーションすると、思わずクリックしたくなるかもしれません。こうしたホバーアニメーションは、より多くのエンゲージメントがより多くの収益につながる CTA ボタンで特に有効です。
Lottie 形式をホバー時にアニメーションさせるのは簡単です。ProtoPie で設定するには、Mouse Over と Mouse Out トリガーを使用します。開発面でも実装が簡単なのはチームにとってありがたいはずです。HTML コードに 「hover」 の値を追加するだけで済むからです。
4. マイクロインタラクションでの視覚的フィードバック
アニメーションは、インタラクションが成功したか、あるいは失敗したかをユーザーに知らせます。たとえば、Twitter のツイートに「いいね」すると、ハートアイコンが赤くなり、紙吹雪が弾けるように表示されます。あるいは、EC アプリの例では、何かをカートに追加すると、空のカートアイコンが中身の入ったカートへとアニメーションするかもしれません。
アクションが起きたことを示すだけでなく、これらのアニメーションは、ユーザーがサイトを操作する中で小さな楽しさを生み出します。
これらをプロトタイプで設定するには、ProtoPie の Tap トリガーを使用して Lottie アニメーションの再生をトリガーします。
5. スクロールアニメーション
Apple 製品についてどう思うかはさておき、彼らのランディングページが素晴らしいことは否定しがたいでしょう。力強いコピー、魅力的なビジュアル、そして製品ストーリーテリングの優れた活用が特徴です。
特に際立っているのが、スクロールアニメーションの使い方です。iPad Pro のこのランディングページを見てみてください。ページを下にスクロールすると、アニメーションや製品画像が画面内に出入りします。
デザインでスクロールアニメーションを活用したいですか？ それらはサイトやアプリをよりインタラクティブに、より魅力的に、そして何よりも印象に残るものにできます。これらをデザインに取り入れる際は、プロトタイプにも含めておくと便利です。そうしないと、開発者やクライアントがどのような見た目になるのか想像しづらいからです。
ProtoPie では、Chain、Detect、Range の各トリガーを使って、Lottie アニメーションの再生をプログラム的に制御できます。開発側では、JavaScript で 「scroll」モード を有効にするだけで、Lottie を使ったスクロールアニメーションを簡単に実装できます。
Lottie についてもっと知りたいですか？
以上の例が、プロトタイプで Lottie アニメーションを試してみるきっかけになれば幸いです。Lottie についてさらに詳しく知るには、LottieFiles の無料の チュートリアルとコースをご覧ください。あるいは、まずはライブラリにある何千もの無料アニメーションを見てみるのもよいでしょう。さあ、お気に入りのアニメーションを選んでカスタマイズし、美しいプロトタイプを作りましょう。
