Adobe XDで
Matt Raeによる作品
Adobe XDは、画像やベクトルグラフィック、音楽やオーディオファイルなど、さまざまな種類のメディアをサポートし、美しいデジタル体験を簡単にデザインしてプロトタイプ化できます。
このガイドでは、TikTokとInstagram Reelsに似たソーシャルビデオ共有アプリケーションをプロトタイプ化するために、ビデオとLottieの2種類のメディアを活用する方法を学習します。スタータファイルをダウンロードし、このチュートリアルに従って Adobe XD で開きます。
Adobe XDへのビデオとLottieの追加
チュートリアルを開始する前に、Adobe XDでのビデオおよびLottieメディアの機能を理解するとことは役立ちます。画像やベクトルグラフィックと同様に、ビデオファイルやLottieファイルをコンピュータのファイルシステムからキャンバス上にドラッグできます。キャンバス上でファイルを移動し、デザインモードでプロパティインスペクタ内から設定を調整できます。
画像と同様に、これらのファイルの種類の1つをベクトル図形またはパスにドラッグすると、図形の境界内で自動的にマスクされ、プレースホルダ図形にビデオやLottieコンテンツを簡単に埋め込むことができます。これは、高精度アセットを使用してワイヤフレームレイアウトを設定する場合に非常に役立ちます。ビデオファイルまたはLottieファイルを図形に追加した後、マスクをダブルクリックすると、マスク内でのファイルの位置を調整できます。
Adobe XDは現在、15 MB以下のサイズのMP4ビデオファイルをサポートし、速度とパフォーマンスを最適化しています。LottieファイルはJSON形式で受け入れられ、LottieFilesからダウンロードしたり、After EffectsのLottieFilesプラグインを使用してAdobe After Effects.から書き出すことができます。
上記のスターターファイルには、このチュートリアルプロジェクトで使用できる複数のビデオファイルとLottieファイルを含むフォルダがあります。
提供されているスターターファイルには、短いビデオクリップを参照するモバイルビデオエクスペリエンスの設計とプロトタイプ作成に使用する多数のアセット、コンポーネント、およびUI要素が含まれます。このガイドでは、ビデオファイルとLottieファイルの追加に重点を置いています。このため、既にレイアウトされており、操作の準備が整っている複数のページが表示されます。
アプリのログインフローの作成
最初に作成するのは、このモバイルエクスペリエンスを使用してユーザーが移動を開始するログインフローです。このフローは、開始画面でアプリロゴをアニメーションにして開始し、バックグラウンドでビデオの自動再生を含むログインシーケンスに進みます。
アニメーションアプリロゴ
まず、ドキュメントアセットパネルからアニメーションロゴコンポーネントを探し、最初の画面にインスタンスをドラッグして、アートボードの中央にある長方形のプレースホルダーを置き換えます。このコンポーネントには、After Effectsで作成され、Adobe XDに読み込まれたLottieファイルが含まれます。
ロゴのアニメーションを自動的に再生するには、再生設定をプロパティインスペクターで更新する必要があります。インタラクティブメディアセクションで、ドロップダウンメニューから自動再生を選択します。デザインをプレビューすると、プレビューウィンドウを開いたときにLottieアニメーションが自動的に再生されます。
このロゴアニメーションはアプリのロードをシミュレーションするので、アニメーションが完了したら次の画面に進みます。これを行うには、Lottieアニメーションをもう一度選択し、プロトタイプモードに切り替えます。インタラクションメニューで+選択し、再生終了トリガーを使用して新しいインタラクションを追加します。時間トリガーは、アニメーションが自動的に再生される原因になるので、このトリガーを無効にしないでください。
トリガーとして再生終了を選択し、宛先をログインフローの最初の画面に設定します (ホーム画面のローディング)。これにより、アニメーションが完了した後にプロトタイプを進行させることができます。
背景ビデオ
次に、サインアップフローの背景としてビデオファイルを追加します。このサインアップフローには複数の画面があるので、1つの画面に背景を設定し、コピーして他の画面に貼り付けると便利です。
最初の画面で、レイヤーパネルからレイヤービデオプレースホルダーを選択し、スタックの最上部に移動します（これにより、ビデオを簡単に追加でき、キーボードショートカットを使用できます）。次に、ファイル「HomeScreen.mp4」をサンプルファイルフォルダからドラッグし、長方形の形に配置します (長方形が青に変わったら離します)。
必要に応じて、長方形内をダブルクリックしてマスクを調整します。適切な位置に移動したら、プロパティインスペクターに移動してビデオ設定を開きます。この場合、ビデオはループするので、ループ切り替えをクリックして有効にします。ビデオ設定のドロップダウンメニューで、自動再生を選択します。
次に、このビデオ要素をクリップボードにコピーし、サインアップフローの残りのアートボードを選択して貼り付けます（XDは選択したすべてのアートボードに自動的に貼り付けます）。
最後に、各インスタンスを各アートボード上のレイヤースタックの背面に移動します (キーボードショートカット、Shift + 「)。このサインアップフローのアートボードは既に自動アニメーションで接続されているので、プレビューをクリックすると、ビデオが自動的に再生され、プロトタイプがナビゲートされたまま再生されます。最後の2つのアートボードで、ビデオの再生を「再生なし」に設定します。これは、ビデオがっこうした画面で表示されないためです。
荷重インジケータの作成
サインアップが完了すると、アプリが読み込まれ、アプリのホームページに移行するように表示されます。これを作成するには、サインアップとホームの間に別のLottieアニメーションを追加します。
「アプリの読み込み」というタイトルのアートボードで、インジケータの読み込み Lottieファイルをドキュメントアセットからプレースホルダの長方形にドラッグします。アニメーションロゴと同じ方法で、アニメーションを「自動再生」に設定し、再生が完了したら、中段階のアートボードに移動します。このアートボードは、自動的にホーム画面に移動します。
前の画面から滑らかなトランジショを作成するには、サインアップフローの最後の画面にロードインジケーターのコピーを置きますが、サイズを小さくして、不透明度を0%に設定します。「自動アニメーション」でページトランジションが行われると、展開のためにロードインジケーターが表示され、再生を開始されます。
縦型ビデオカルーセルの作成
サインアップフローが完了すると、アプリケーションのメインホーム画面を完了できます。この画面は、再生が完了すると次のビデオにスクロールする縦型のビデオカルーセルのように動作します。このカルーセルは、Adobe XDを使用して画像ベースのカルーセルと同様に作成され、対話型要素を作成します。ただし、この場合、ビデオの再生は一度に1つのビデオを再生し、ビデオが完了すると自動的にカルーセルを進めるように制御されます。
ビデオコンポーネントの作成
この要素のコンポーネントは既に作成されています。練習ファイルのコンポーネントセクション内のメインコンポーネントを探します。フィードに含める4つのビデオのそれぞれに対して、1つのインスタンスが作成されました。
まず、Post Elementというラベルの付いた最初のインスタンスを選択し、前と同じようにプレースホルダイメージの長方形を選択します。ビデオ「Berg.mp4」をアセットフォルダからドラッグし、必要に応じてマスクを調整します。これらはコンポーネントの各状態で調整されるので、他の設定の調整は気にしないでください。
この手順を、ページ上の他の3つのインスタンスと繰り返し、ビデオ「Walk.mp4」、「Dive.mp4」、「River.mp4」をビデオプレースホルダに追加します。
最後に、これらのビデオ要素を上下に重ね合わせ、ビデオフィード.
と呼ばれるコンポーネントを形成して、各ビデオ要素を1つのコンポーネントにします。
このビデオフィードでは、次のビデオに進むためのドラッグ操作と、ビデオ再生の最後に自動的に進行するドラッグ操作があります。これを実現するには、コンポーネントの状態を使用するのではなく、個々のアートボードを使用し、コンポーネントの位置を上下に移動するだけで、どのビデオを再生するかに基づいて決まります。
コンパイル済みコンポーネントの配置
まず、コンパイル済みコンポーネントのインスタンスを取得し (各コンポーネントにはオーバーライドが設定されるため)、ホームフィードの最初のアートボードに配置します。角括弧のキーボードショートカット、またはレイヤーパネルを使用して、レイヤースタックの一番下に配置し、コンポーネントの一番上 (スタック内の最初のビデオ) が一番上に配置されていることを確認します。
次に、コンポーネント内をダブルクリックし、最初のビデオのビデオ再生を自動再生に設定します。各アートボードでは、ビュー内のビデオのみを自動再生に設定する必要があります。したがって、これらの変更をコンパイル済みコンポーネントのインスタンスに適用し、メインコンポーネントには適用しないでください。
プロトタイプビデオインタラクション
最後に、ビデオを一緒に接続するには、それぞれに2つのインタラクションを作成します。最初のインタラクションはビデオ自体に適用されます。最初のビデオでは、レイヤーパネルでビデオを選択します。プロトタイプモードで、再生終了トリガーと、連続する次のアートボードの宛先との新しいインタラクションを設定します。アクションの種類として自動アニメーションを使用し、選択したイージングを選択します。この操作は、最初のビデオの再生が完了すると、自動的に次のビデオに移動します。
ビデオが長い場合や、スキップして次のビデオに移動する場合は、ドラッグインタラクションを追加できます。これを行うには、コンパイル済みのビデオコンポーネントを選択し、プロトタイプモードでドラッグトリガーとのインタラクションを追加します。もう一度自動アニメーションを使用して、連続する次のアートボードを選択します。ユーザーがビデオコンポーネントをドラッグアップすると、プロトタイプは次のビデオをアニメ化し、次のビデオにスクロールアップして進みます。
残りのアプリケーションの接続
追加のアートボードはカンバスで利用でき、これらに埋め込まれたビデオで完成します。提供されたアセットを試して、プロファイルページからビデオの詳細ビューを作成するか、独自のアセットを作成してビデオのアプリケーションエクスペリエンスを完成させます。
Adobe XDによるプロトタイプと、プロトタイプのチュートリアルを使用してその他のエクスペリエンスを作成する方法を説明します。
