使いやすいモーショングラフィックステンプレートを作成するための6つのベストプラクティス #Adobe Stock

モーショングラフィックステンプレート（MoGRT）は、優れたモーションデザイン、After Effectsのパワフルなクリエイティビティ、効率的なユーザーエクスペリエンスをPremiere Pro内で利用できるようにパッケージ化したファイルです。プロジェクト用の美しいモーショングラフィックをどなたでも簡単に作成できるようにするのが目的です。ユーザーが扱いやすいMoGRTを作成するには、コントロールを標準化し、階層構造を利用して、エッセンシャルグラフィックスパネルで迷わないようにする仕組みが大切です。ここではそのベストプラクティスを紹介しましょう。

1.「親切設計」でユーザーを迷わせない

ユーザーにとってわかりやすいデザインにしましょう。そうすればデザインの美しさを保ち、MoGRTのパフォーマンスを最適化しつつも、ユーザーが適切なデザインを選びやすくなります。またMoGRTのカスタマイズはすべてエッセンシャルグラフィックスパネル（EGP）でおこないますが、EGP内のコントロールはMoGRTに必要なものに絞りましょう。ここにはテンプレートの目的に沿ったコントロールや、ビジュアルスタイルに不可欠なコントロールだけを含めるようにします。EGPにあらゆるコントロールを追加しておけばユーザーが自由に利用できるだろうと思うかもしれません。ですが、それでは処理に負荷がかかりすぎてMoGRTのリフレッシュレートが低下し、レンダリングに時間がかかるため、ユーザーは進捗が妨げられイライラしてしまいます。MoGRTをデザインするときには、ユーザーにとって最適なデザインを選択するようにしてください。例えばフラクタルノイズでいうと、コントロールをすべてEGPに追加してしまうのではなく、背景のカンプをいくつか作成してからレンダリングと置換を実行し、処理した背景オプションを利用できるようにします。そうすればMoGRTのパフォーマンスが改善し、グラフィックのデザインも確実に良くなるでしょう。
エレメントには適切な表示位置があります。例えば、テキストはタイトルセーフティ内に表示されたり、画面の下部にテロップのような形で表示されたりします。テキスト揃えとアンカーポイントも必ずその位置に応じて設定しましょう。エレメントのサイズや整列を変えるたびに位置を調整しなくてはいけないとなると、ユーザーは煩わしさを感じてしまいます。

テキストにアンカーポイントが正しく設定されていれば、テキストのサイズを変更しても位置を調整する必要はありません。

同じ種類のコントロールは、グローバルコントロールを使用してひとつにまとめましょう。例えば、MoGRTを3色の補色でデザインする場合、EGPで使うコントロールも3色に絞ります。そうすることでデザインのバランスが保たれ、冗長さも最小限に抑えることができます。

左：7色のコントロールが3つのグループにバラバラに配置され長くなったEGP | 右：3色のコントロールがひとつにまとまっているEGP

2.適切なコントロールを使用する

適切なコントロールを選択すれば、EGPが使いやすくなります。前バージョンのMoGRTではスライダーコントロールがメインのコントロールでしたが、2020年リリースのPremiere ProおよびAfter Effectsでは様々なコントロールが使えるようになりました。それぞれのコントロールに最適な用途は次のとおりです。

１, 角度：回転など、あらゆる円形のもの。

2, チェックボックス：オン／オフの切り替え。

3, カラー：ひとつのコントロールに複数のカラーをリンク（全体のテキストカラーなど）。

4, ドロップダウンメニュー：説明が必要な選択肢（アニメーションが動く方向やスタイルなど）。

5, スライダー：最小値および最大値（不透明度など）。

• 範囲を編集して制限を設定します。

6, ポイント：リンクされていないxとyの値。

7, ソーステキスト：テキスト入力。

• 長文のテキストを使用して、長い名前を段落を揃えて構成すれば、テ長文のテキストを使用して、長い名前を段落を揃えて構成すれば、テキストを正しく出力できます。キストを正しく出力できます。

• Premiere Pro 14では複数行のテキストを入力できるため、行間のコントロールを追加するとよいでょう。

• MoGRTでの必要に応じて、フォントプロパティ（フォントの代用、フォントサイズの調整、疑似スタイル）を有効にするかどうかを検討します。テキストでフォントサイズの調整を有効にしておけば、アンカーポイントのエクスプレッションを利用できて便利です。

ユーザー側から見たPremiere Proでの各種エクスプレッションコントロール

レイヤーにネイティブ対応したトランスフォームプロパティを使用できる場合、エクスプレッション制御の代わりに使用することでCPUの負荷を抑えられます。不用意にエクスプレッションを多用すると、MoGRTの再生やレンダリング時間に悪影響が出ます。すべてのトランスフォームプロパティがEGPで使用できるわけではなく、値は固定ではないので、その点はあらかじめ理解しておきましょう。

3.意味のあるコントロール名を付ける

エッセンシャルグラフィックスパネルのコントロールとパラメーターには、どのような内容なのかがわかる明確な名前を付けましょう。そうすれば、テンプレートとは別にコメントや補足説明を用意する必要がなくなります。コントロールする要素やコントロールの種類、画面上での表示位置に応じて、わかりやすいコントロール名を付けます（「メインタイトル」、「左の長方形のサイズ」など）。可変要素（「黄色いアウトライン」など）をコントロール名にすると、対象のコントロールが変更されるとたときにコントロール名が意味をなさなくなってしまうので、避けるようにしてください。

カラーが変更され意味をなさなくなるコントロール名の例

「拡大・縮小」、「塗り」、「ストローク」、「シード」といった専門用語は、初心者にはわかりにくい場合があります。どのユーザーでも理解できるように、「サイズ」、「カラー」、「アウトライン」、「ランダム」など一般的な用語を使いましょう。
コメントはコントロールの動作内容をユーザーに伝えるのに適しています。ただし、コントロールを説明するのに説明過多になってしまう場合は、コントロール自体がそもそも必要かどうか、またはコントロールの種類が適切かどうかを確認してください。単一のコントロールであれば、名前をわかりやすくするだけで事足りることがほとんどです。なるべくならコメントは使用しないようにしましょう。

4.グループを使用してファミリーを作成する

グループとサブグループを使って構造化すると、ユーザーはEGP内の仕組みを理解しやすくなります。カテゴリではなく関係性によってグループ化することで、ユーザーは画面上で単一の要素を変更する際、複数のグループ間を行き来する必要がなくなります。MoGRTではテキストがカギになることが多いので、まずはEGPをテキストコントロールと背景コントロール（テキストの背後にあるものすべて）という2つの大きなグループに分けます。各グループにテキスト入力用のサブグループを作成し、より細かくコントロールできるようにします。MoGRTのデザインによっては、必要に応じてほかのグループを使用することもあります。

グループとサブグループ

グループとサブグループは、書き出す前にすべて閉じておきましょう。開いた状態になっていると、ユーザーが初めてMoGRTを編集するときに圧倒されてしまうかもしれません。

5.重要度に応じてレイヤーを構造化する

階層構造のメリットは、どのコントロールが最初に使用する最も重要なコントロールなのかが一目でわかる点です。ユーザーは細かい調整に入る前に、どのようなデザインオプションがあるのかをざっと確認できます。レイヤースタックのいちばん上には、最も重要なビジュアルスタイルを配置しましょう。EGPで上から下に向かって順番に作業を進めれば、デザインをどんどん細かく調整していけるようにします。重要なコントロールがEGPの下のほうにあると、デザインの設定が無効になってしまったり、ユーザーが混乱するおそれがあります。
レイヤー構造は標準化して、統一感を出しましょう。例えば、テキスト入力のすぐ下でテキスト配置コントロールを設置するのであれば、MoGRT内のテキスト配置コントロールはすべてそれと同じ構造にしてください。

6.MoGRTをテストする

Premiere ProでMoGRTをテストすれば、アプリで実際にどう表示されるのかをプレビューできるため、パフォーマンスに問題があったり、コントロールに破損や冗長性の問題があったりしても事前に検出できます。最初から最後までMoGRTを何度か再生し、再生パフォーマンスのキャッシュを確認して、評価できるようにしてください。再生がもたついて遅くなるようであれば、重いエフェクトや大きなエクスプレッションを削除して最適化することを検討します。またPremiere Proでテストするときは、すべてのコントロールに対してMoGRTの限界値まで調整してみましょう。長い文字列でテキストを打ち直したり、テキストのサイズを変更してみたりして、テンプレートで一貫性を維持できているかを確認します。エラーが見つかった場合はAfter Effectsに戻って修正しましょう。

今回ご紹介したベストプラクティスに従えば、優れたユーザーエクスペリエンスを構築し、ユーザーがすばやく簡単にMoGRTをカスタマイズできるようなMoGRTをデザインできるでしょう。

ベストプラクティスを実際に活用したMoGRTは、Adobe StockのMoGRTコレクションでご覧いただけます。

・・・

いかがでしたか？ ビデオ編集に必要な映像素材はクレジットパックをご利用いただくと、お得にご利用頂けます。また、映像素材以外にも、お求めやすい写真やイラストなど、「通常アセット」も豊富にご用意しています。現在、通常アセットが毎月10枚利用いただける年間サブスクリプションが1ヵ月無料となるキャンペーンを引き続き継続中です。まだの方はこの機会にぜひお試しください。

また、Adobe Stockで作品を販売したい方は、こちらからコントリビューター登録をおこなってください。皆様の作品をお待ちしております。

この記事は2020年5月８日にTheresa Rostekにより作成＆公開された6 Best Practices for Making User-Friendly Motion Graphics Templatesの抄訳です。