ShowMotion

Data & Numbers

Animated Map Arcs (マップアークアニメーション)

別名 World Map Animated Lines, Globe Arcs

地図や地球儀の上で、地点と地点の間を線や点が動きます。

使いどころ

グローバル展開を示すビジュアル

バリエーション

  • flat world map
  • 3D globe

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にマップアークアニメーション(Animated Map Arcs)を追加してください。グローブアーク(globe arcs)とも呼ばれます。
ドットの地図上で地点と地点の間に曲線が一本ずつ描かれ、その後目的地へ向かって縮み、目的地では柔らかなリングが脈打つようにしてください。落ち着いて一定のリズムで。
アークが同時に動かないようタイミングをずらし、ループは継ぎ目なくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は一時停止してください。

似ているモーション

3D Globe (3Dグローブ)

別名 Interactive globe

マーカーや弧を載せた3Dの地球が、レイアウトの中で回転します。

使いどころ

グローバル展開を示すビジュアル

Animated Beam (ビームアニメーション)

別名 Connecting beam

2つの要素を結ぶ線に沿って、光るパルスが移動します。

使いどころ

連携図、データフロー図

Motion Path (モーションパス)

別名 Animate Along Path, Offset Path Animation

要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。

使いどころ

ルート上を進む飛行機や点、装飾的な移動要素

Bar Chart Grow (バーチャートグロウ)

別名 Animated Bar Chart, Bar Chart Entrance

棒が高さゼロからデータの値まで伸び上がります。

使いどころ

ダッシュボード、レポート

Bar Chart Race (バーチャートレース)

別名 Racing Bar Chart

値の変化に合わせて、横棒の順位が時間とともに入れ替わります。

使いどころ

時系列データのストーリーテリング

Chart Data Transition (チャートデータトランジション)

別名 Chart Update Animation

データが変わったりデータセットを切り替えたりすると、グラフの要素が古い値から新しい値へ滑らかに補間されます。

使いどころ

リアルタイムのダッシュボード

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。