✍️

注意事項

ご注意ください!Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。

エクスポート

アニメーションが完成したり、テストする準備ができたら、フルレンダリングされた動画ファイル、またはアニメーションファイルとして書き出すことができます。通常はデザインの完了時に使用されますが、ファイルのコピーをオフラインで保存しておきたいときにも役立ちます。

ファイルのエクスポート

エクスポートメニューへのアクセス方法の様々な方法。

  1. Phase のキャンバスで、右上隅にある青色の エクスポート ボタンをクリックします。または、左側のハンバーガーメニューからエクスポートを選択します。
  2. 表示された画面でエクスポートの設定を行います。詳細については下記を参照してください。
  3. エクスポート を押します。GIF形式、またはMP4形式でエクスポートする際は、ロード画面が表示され、エクスポート中はエクスポートのタブが一時停止されます。
エクスポートメニューには、場合に応じてプロジェクトをカスタマイズするための、様々なエクスポートオプションがあり、アニメーションを様々な形式でエクスポートすることができます。エクスポートできる形式には、共有可能なGIF、高画質のMP4、またはインタラクティブなWebアニメーションに適した2種類のLottieファイル形式(JSONおよびdotLottie)があります。JSONファイルは、テキストベースであるため、様々なプラットフォーム間でのアニメーションの共有が比較的容易である一方、dotLottieファイルは、アニメーションデータを圧縮し、すべての必要なリソースを1つのファイルに格納するため、結果としてファイルサイズが小さくなります。
各形式には、いくつかの共通オプションがあります:
  • ファイル名: 他のファイルと区別しやすくするために、アニメーションに認識しやすい名前を付けます。
  • 再生速度: アニメーションを元のタイムラインよりも速く、または遅く再生します。オプションは以下の倍率から選択できます: 0.25倍速、0.5倍速、1.0倍速、1.25倍速、1.5倍速、および2.0倍速。
  • フレームレート: フレームレート(またはFPS)を調整することによって、アニメーションの滑らかさを変更します。オプションには、24、30、50(GIFのみ)、または60(LottieまたはMP4のみ)があります。
  • 開始時間: アニメーションを先頭から切り抜き、異なる開始時間を設定します。初期設定では0で、通常は変更する必要はありません。
  • 終了時間: 開始時間の類似機能で、終了時点から戻って切り取ります。これによってアニメーションの最大時間を事前設定できますが、通常は変更する必要はありません。
エクスポートは比較的単純ですが、各形式について、留意すべき重要な違いがいくつかあり、下記の項目で解説しています。

GIFおよびMP4のエクスポートメモ

GIFオプション

MP4オプション

GIFおよびMP4は、上述された共通カスタムオプションを持っていますが、いくつかの違いがあります。
GIFに関しては、アニメーションの一部を透過させることができます。完全に透過された(不透明度0%)すべてのピクセルは、アニメーションで表示されません。この機能を利用するには、画面の塗りが削除されているか、または画面の塗りの不透明度が0%に設定されている必要があります。
加えて、GIFは自動的にループ再生するように設定することができます。この設定は、通常はGIFがホストされている場所で調整されますが、初期設定をグラフィック自体に適用することができます。
MP4では、動画の画質を操作できます。オプションは、グラデーションや細かな表現があるコンテンツに適した高画質および良画質、または色彩を圧縮する低画質および中画質から選択することができます。

Lottie形式のエクスポートメモ

Lottieエクスポートメニュー.

Lottieを選択すると、エクスポート画面が変更されます。Lottieファイルがエクスポートされると、再生ボタンとスライダートラックがあるプレビュー画面が表示されるため、アニメーションをエクスポート前にプレビューすることができます。また、ファイルサイズの推定値も表示されます。
Lottie形式には固有の機能がいくつかあり、その中にはPhaseに対応していないものもあるため、プレビュー画面のアニメーションは、レンダリングが行われる画面内に表示されるアニメーションとは見え方が異なる可能性があります。この2つのアニメーション間での差異は、アニメーションを調整することで解決する場合があります。

Lottieプレビューの制限

アニメーション制作を始めましょう

無料のウェブベースプラットフォームで始めます。