✍️
注意事項
ご注意ください！Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。
インポート
プロジェクトの始まりは、空白のキャンバスだけではありません。ワークフローの多くは、既存のファイルをインポートすることから始まります。ファイルは、ストックされているグラフィックス、同僚から送られてきたアセット、または他のどこかで制作したデザインなど様々です。当社は、SVGやLottieファイルのインポートを介して、FigmaやIllustrator、After Effectsなどのツールからプロジェクトをアニメーション化できるようにしています。
インポート
- インポートボタンをクリックして、ファイルエクスプローラーからファイルを選択します。
- ブラウザ画面からファイルを選択します。Phaseは、現在SVGファイル、Lottieファイル、画像ファイルおよびPhaseファイルに対応しています。
- 新規ファイルが開きます。
- キャンバス上で編集を開始します。
別の方法として、SVGファイルおよびLottieファイルを、Phaseのダッシュボードに直接ドラッグ&ドロップすることでも、編集を開始することができます。新規ファイルが自動的に作成されます。
SVGファイルのインポートに関するメモ
ご覧の通り、インポートはシンプルです。SVGファイルおよびLottieファイルにおいて最善の結果を得るために、次のヒントを参考にしてください。
ファイルをPhaseにインポートすると、以下のことが起こります:
- タイムライン: 初期状態では、アニメーションの長さは0.1秒ですが、タイムラインの操作によって調整することができます。
- レイヤー階層: Figma/Illustratorのグループ化やレイヤーに付けられた名前は統一され、すべての要素はキャンバス上のコンテナ内に格納されます。
- レイヤーの基準点: レイヤーの基準点は、自動的に左上に設定されます。基準点を中心に設定するには、プロパティパネルの[変形]の基準点グリッドの中心にある点をクリックします。
- グラデーションの適用: グラデーションの位置は、インポートの際に変化する場合があるため、塗りを使用して調整し、希望する視覚表現を制作しましょう。
- テキスト処置: テキストは、インポートの過程でパスに変換されます。曲線の表現において、MP4ファイルやGIFファイルにエクスポートした際に影響する軽微な問題がレンダラーに発生する場合があります。Lottieのエクスポートには影響しません。
SVGファイルは、JavaScriptを利用したインタラクティブな要素やスクリプトに対応していますが、主に静的なグラフィックスに対して利用されます。Lottieと同程度の双方向性やアニメーション性能は表現できない場合があります。
Lottieファイルのインポート
事前に作成されたLottieファイルのアニメーションで制作を開始すると、最初にタイムラインを構築するときや、他のアニメーション制作者から学ぶのに役立ちます。以下に、LottieFiles.com からアニメーションを読み込む方法の例を挙げます。
- LottieFiles.com に移動し、検索バーから好きなアニメーションを探します。または、Products > Free Animations もしくは Marketplace に移動し、アニメーションを閲覧することもできます。
- 好みのアニメーションが見つかったら、選択し、Save to Workspace をクリックします。そこから先に進むには、LottieFiles のアカウントが必要です。一部のアニメーションは、Proライセンスまたは追加料金が必要です。
- Lottie JSON 形式を選択し、ダウンロードします。dotLottie形式でも動作します。
- Phaseのダッシュボードを開き、インポート を選択します。
- JSONファイルを選択して開きます。
- キャンバス上で編集を開始します。
画像のインポート
次の簡単な手順に従って、コンピュータからPhaseのダッシュボードに画像をインポートすることができます。
- ダッシュボードで、新規作成ボタンを押して新規ファイルを作成します。
- 左上隅にある「新規アセットを挿入」ボタンをクリックします。
- 画像（png、.jpgまたは.gif）を閲覧してインポートします。
- キャンバス上で編集を開始します。
コピー＆ペースト
コピー＆ペースト機能は、複数のプロジェクト間で円滑に作業し、Phaseのワークスペース内にあるデザイン要素全体や様々なファイルからのアセットを管理・編集できる機能です。SVGファイルの要素や画像、および読み込まれたLottieファイルのアニメーションにある個々の要素さえもコピー＆ペーストできます。
- 要素をコピーするには、要素を右クリックして、コピーを選択するか、のショートカットキーを入力します。CtrlCまたはCommand ⌘C
- 要素をペーストするには、キャンバス上で右クリックして、ペーストを選択します。または、のショートカットキーを入力します。CtrlVまたはCommand ⌘V
ファイルタイプのインポート
- GIF: GIFは、サイズが小さく、ループ再生するアニメーションに適しており、ウェブサイトへの埋め込みやソーシャルメディアでの利用に適しています。
- MP4: 高画質の動画をエクスポートする際には、MP4が適しています。</Text>
- Lottie（.json）: Lottie JSONファイルは、アニメーションを編集可能なまま小さいサイズに保ちます。様々なプラットフォームやアプリ上でアニメーションをスムーズに実装するのに非常に適しています
- dotLottie（.lottie）: dotLottieファイルは、Lottieファイルのアニメーションをすべて含む単一のパッケージに圧縮し、ファイルサイズを削減します。合理化されたファイル共有や展開に最適です。
アニメーション制作を始めましょう
無料のウェブベースプラットフォームで始めます。