製品を開発する際、デザインチームは楽ではありません。特にモーションデザインとなると、デザインプロセスの中で後回しにされがちです。
しかし、ユーザーのペインポイントやステークホルダーの懸念は、自然に解決されるわけではありません。そのため、差し迫った締め切りの中で優れたユーザー体験を生み出すには、モーションデザインが必要です。
これを誰よりもよく知っているのが、Warner Bros. Discovery のモーションデザイナー、Mia Vidamourです。彼女は、同社のブランド製品2つを担当する国際チームの一員として働いています。
最近のウェビナーで、Miaは、自分の仕事が製品デザインとモーションデザインの交差点にあると語ってくれました。そして、この領域こそがProtoPieを最も価値あるものだと感じている場所です。彼女のチームが当社のツールを使って最近のアプリ案件のプロトタイプをどのように作成したのか—最終的には、完成した成功プロダクトとまったく同じ見た目になりました—その方法をぜひご覧ください。
モーションデザインは、デザインプロセスにおける重要だが見過ごされがちなツールです
人は自然に、アニメーションする形や動きに社会的な意味を見出します。つまり、モーションデザインに表現を持たせるつもりがなくても、最終的なユーザーはそれを解釈に使うことができるのです。
その点を踏まえ、Warner Bros. Discovery のチームはモーションデザインを次の目的のためのツールとして活用しています。
目を引くこと、サイトやアプリ上のオブジェクトやページ要素へ。
ユーザーの方向感覚を整えること、サイトやアプリ上で、または特定のオブジェクトやページ要素間の空間的な関係を示すことで。
複雑なデザイン課題を解決すること、動きによって強調や意味付けができるためです。
ブランド表現、彼らの分野ではブランディングが非常に重要だからです。そのためチームは、新機能を開発する際にブランドを伝えられる、表現力があり、活き活きとしていて、鮮やかなモーションデザインを作ることが重要だと考えています。
しかし前述のとおり、モーションデザインはデザインプロセスの中で優先度が下げられがちな要素でもあります。
では、その価値を証明するために、モーションデザインをどのように推進し、その重要性を訴えるのでしょうか。
Warner Bros. Discovery では、早い段階から始めることが解決策です。モーションデザインがデザインプロセスの早い段階で解決策として特定できれば、スケジュールやリリース日が厳しくなるプロジェクト終盤まで待つよりずっと容易になります。
モーションデザインを使って優れた UX 製品を作る
最近のプロジェクトの一つで、チームは2〜5歳の子ども向け番組枠である Cartoonito アプリのデザインを刷新しました。
このプロジェクトは完全にモーション主導で進められ、チームのインタラクティブで革新的なアプローチを伝えるために、高精細プロトタイプに大きく依存していました。
彼らの課題は、2〜5歳向けアプリでの新しいコンテンツ発見の方法を探ることでした。対象ユーザーを念頭に置き、ナビゲーションバーを特に問題のある領域として特定しました。その理由は次のとおりです。
2〜5歳の子どもがみな文字を読めるわけではない。
アイコンがかなり小さかった。
ナビゲーション全体のUIには、ユーザーがアプリを探索し、発見することを促すために、より多くのビジュアルとインタラクティブ機能が必要でした。
全体として、このアプリは、最終ユーザーが優れたコンテンツを直感的かつ簡単に見つけられるよう、よりユーザー中心で整合性のあるものにする必要がありました。
ユーザー調査の後、チームは次のことが必要だと判断しました。
タッチインタラクションを制限し、画面端に大きなナビゲーション矢印を配置して、UI を簡素化する。
子どもはテキストよりも物理的なフィードバックに強く依存するため、ビジュアルをさらに追加する。
子どもは、画面上のキャラクターと音やアニメーションでやり取りできることを期待するため、より多くのインタラクションを追加する。
チームは2つのアイデアを作成し、右矢印を押すと世界が回転して新しいセクションへ移動する「回転する世界」のコンセプトを採用することにしました。その結果、インターフェースはユーザーにとってより分かりやすくなり、将来的にさらに多くのイラストやインタラクションを追加するための余地も生まれました。
しかし、新しいナビゲーションシステムはユーザー視点ではよりシンプルな一方で、製品デザインとイノベーションの段階では考慮すべき複雑な要素が多くあります。
たとえば、新しいナビゲーションシステムには、単色の選択状態と、ユーザーが移動する際に滑らかな遷移を可能にするグラデーションの過渡状態があります。
また、ナビゲーションオーバーレイ、静的なページ要素、イラストとタイトル、回転する動的要素、背景、そして単色の静的要素など、複数のレイヤーがあります。
そのため、チームは、関係者自身に仕組みを体感してもらえるよう、プロジェクトで提示できる、より具体的なものを必要としていました。
要するに、必要だったのは高精細プロトタイプであり、それをまさに ProtoPie で実現できたのです。
次の動画を見て、Warner Bros. Discovery のチームが ProtoPie をどのように活用しているかをさらにご覧ください。
Warner Bros のデザインスタジオがワークフローで ProtoPie をどのように活用しているか
ProtoPie を使って、Mia のチームは以下のような方法で複雑なプロトタイプを簡単に作成できました。
統合プラグインを使って Figma からすべてを取り込む。
試行錯誤の末にナビゲーションシステムをゼロから構築する。
カスタムメイドのキャラクターアニメーションを追加し、プロトタイプ上に配置して、アプリのインタラクティブな要素を強調すること。下のイラストで分かるように、右矢印を押すたびに世界が回転します。これにより、ユーザーはワクワクする没入感のあるセクションへ移動できます。
それでも、最初のイテレーションでは、実際のコンテンツにアクセスするために2回タップが必要だったため、いくつか懸念がありました。しかし、このアプリはゲームのライブ配信に使われるものなので、ユーザーはコンテンツを正面中央で見る必要がありました。
そこで、チームは研究開発の段階に戻りました。最終的に次のように決定しました。
上部にインタラクティブなメニューを追加する。
いくつかのイテレーションを調整する。
一部のメニュー要素の配置を変更する。
カードを画面下部に配置し、ユーザーがクリックしてアプリ内を探索・発見しやすくする。
これら2つのイテレーションには、裏側に多くの複雑な要素を持つシンプルなナビゲーションシステムであるため、プロトタイプが必要でした。
プロトタイプを作成したことはチームにとって非常に価値がありました。なぜなら、拡張性のような課題を特定できたからです。もし最初のイテレーションにさらにコンテンツを追加するなら、スクロールする位置を調整する必要がありました。そのため、プロジェクトの最終デモでは、コンテンツを常にアクセス可能に保つためのインタラクション機能を追加しました。
ProtoPie でこれを行う際の最大の利点は ProtoPie Player でした。これにより、開発不要でプロトタイプをチームメンバーの手元に実際に届けることができました。この機能を使えば、リンクを持っている人なら誰とでもプロトタイプを共有できます。
彼らは国際チームであるため、ラテンアメリカのチームメンバーは自分のスマートフォンに ProtoPie Player をダウンロードでき、それがコンセプトを強く印象づける大きな転換点となりました。
ProtoPie Player に加えて、チームは特に次の3つの機能を高く評価しました。
ProtoPie-LottieFiles の統合
条件
変数インタラクション
LottieFiles 統合による高精細プロトタイピング
LottieFiles は、AfterEffects からアニメーションを .json ファイルとして書き出せる AfterEffects プラグインです。
この機能は多くのプロトタイピングアプリが対応しているわけではありませんが、ProtoPie は例外であると言えて嬉しく思います。
Warner Bros. Discovery のチームにとって、この機能はとても役立ちました。開発者に渡す前に .json ファイルをテストできたからです。
下のイラストは、Warner Bros のデザインスタジオが ProtoPie を使った高精細プロトタイピングに LottieFiles をどのように実装したかを示しています。
5つの異なる LottieFiles が見られます。2本のループするヤシの木と、インタラクションポイントで組み立てられることを意図した紙吹雪が含まれています。さらに、アニメーションキャラクターをタップすると、待機状態から少しひねる動きをします。
ProtoPie で複雑なインタラクションを構築する
回転する世界コンセプトの機能を示すために、上部の UI レイヤーをスクロールするとイラストレイヤーも下に移動する必要がありました。
彼らは、連鎖反応を使い、ページングコンテナのスクロールを world レイヤーのオフセットにマッピングすることで、このインタラクションを実現しました。これにより、両方のレイヤーがリアルタイムで下に移動しているような錯覚を生み出せました。
同じインタラクションで、スクロールアニメーションも組み込めます。スクロールが途中まで進むと、スクロールによってトリガーされる2つのボタンが表示されます。
もう一つ望んだ機能は、フィルターボタンを動画ページのみに表示することでしたが、これも条件を使って実現できました。
ドキュメント化と引き継ぎの簡素化
ドキュメント化と引き継ぎの段階で、ProtoPie は Warner Bros. Discovery のモーションデザインチームにとって本当に時間の節約になりました。
プロトタイプには多くのインタラクションが重なっており、操作しづらくなることがありました。AfterEffects を使ってこれらの要素の一部を引き継ぐには、1秒に何フレームあるかを計算してミリ秒に変換する必要がありました。
ProtoPie なら、その作業は数秒で自動的に完了します。
全体的なドキュメント化プロセスの一環として、デザインチームはすべてを Confluence にアップロードしています。そこには次の内容が含まれます。
ページの導入文
埋め込み Figma ファイル
Lottie インタラクションの録画
ProtoPie プロトタイプ
アニメーションのタイムラインやその他のアセット。
このページはすべての情報の単一の信頼できる情報源として機能し、Jira と連携して、プロダクトマネージャー、開発者、品質アナリストの参照ポイントとなっています。チームは、これが引き継ぎを記録する強力な方法だと考えており、ProtoPie は彼らのワークフローにうまくフィットしています。
引き継ぎが成功した後、刷新された Cartoonito アプリは数か月前に公開されました。
結果は？ 満足したステークホルダー、満足したユーザー、そして ProtoPie で作ったプロトタイプとまったく同じ見た目のアプリです。
ProtoPie はモーションデザインとインタラクションデザインを簡単にします
ProtoPie があなたのデザインチームによる高精細プロトタイプの記録的な速さでの作成をどのように支援できるか、ぜひお問い合わせください！
