使用量リセットのモーションビデオデザイン

正方形フレームの構成

Usage resetビデオは、中央揃えの3段構成です。上部に太字の見出し、中央に角丸四角形のOpenDesignロゴ、下部の帯に水平バー2本を配置しています。すべて広い余白の内側で中央揃えまたは端揃えにしており、1080x1080のフレームに適しています。

途中のバーから、保持される完了状態へ

序盤のフレームでは、パーセンテージがそれぞれ異なります。最初のフレームではバーが12%と9%、ポップアートのフレームでは56%と55%です。最終状態ではどちらも100%になります。値がずれていることで、収束するまで2本のバーが区別されます。

1. ニュートラルな状態で始める

   明るい背景、暗いロゴ、オレンジのアクセントが、最も低いパーセンテージとともに基準の状態をつくります。

2. スタイルを切り替える

   リングが進み続ける間に、ロゴは青と黄の絵画風、モノクロスケッチ、ハーフトーンのコミック調ポップアート、ヴェイパーウェイブのネオン、グラフィティの色へと変化します。

3. 完了させて保持する

   約3秒で見出しが完了表示に変わり、リングとバーが緑になってチェックマークが現れ、紙吹雪が短く舞い、残りの時間は静止します。

レイアウトを動かさずにスタイルを変える

ポップアートのフレームが最も賑やかな瞬間です。青いハーフトーンのロゴ、黄色の輪郭、赤い手、WHAAM!のバーストが、赤いティックとバーのあるクリーム色の背景に載っています。それでも、見出し、リングの直径、バーの位置はオープニングのフレームと一致しています。

01

色は状態に従う

オレンジと赤のアクセントは進行中のフレームのもので、緑は完了専用です。そのため、色だけでも結果が伝わります。

02

トレードオフ：見せ場と読みやすさ

数値が別の、ごちゃつかない帯にあるため、中央のアートワークが賑やかでも問題ありません。より控えめにするなら、リングの端に重なるバーストを最初に削るのがよいでしょう。

放射状ティックと直線バーの違い

リングとバーは異なる役割を担っています。リングは雰囲気づくりで、いくつかは長い多数の小さなティックがロゴの周りで点灯し、クリップに勢いを与えます。数値はありません。一方、バーは正確で、それぞれに名前とパーセンテージがあります。

両方を使うことで、アニメーションに活気を持たせつつ、2つの値を一目で比べられます。ただしリングが3つ目の指標と誤解される恐れがあるため、ラベルを付けず装飾にとどめることが重要です。

完了の確認と静かな終わり方

最終フレームでは、緑の見出し強調、すべて緑になったティックリング、両バーのチェックマーク付き100%、ピンク、シアン、黄、オレンジ、紫の紙吹雪という複数の方法で成功を重ねて伝えます。紙吹雪は持続的な効果ではなく短いバーストなので、最後の数秒は落ち着いています。

ビデオにはサウンドトラックが付いていますが、音声についてこれ以上の詳細は示していません。

このイラストレーションの範囲

これはOpenDesignによる、例示を目的としたレンダリングアニメーションです。ウィンドウやパーセンテージは創作上の内容であり、実際に動作するクォータのリセット、実際のリセットポリシー、現在の上限を示すものではありません。特にラベルを実際の数値に置き換える場合は、この区別を保ってアレンジしてください。