4407.jp ポータルに戻る アプリを開く ↗
グラフィック・モーショングラフィックス

Grid Motion Generator

グリッド交点上で図形と直線が自動展開する幾何学モーショングラフィックスの作成・動画書き出しツールです。

アプリ概要

Grid Motion Generator は、ブラウザの Canvas / WebGL 技術を用いて、ミニマルで洗練されたモーショングラフィックスをリアルタイムに生成できるビジュアルツールです。

図形の種類、回転速度、連鎖発生率、カラーパレット、アンビエント効果音などのパラメータを直感的に操作でき、完成したアニメーションは MP4 または WebM 形式の動画ファイルとしてそのまま書き出せます。

クイックスタート

STEP 1. 再生と操作

画面下の再生・一時停止ボタンでアニメーションの制御が可能です。

STEP 2. パラメータ調整

グリッド数、回転、速度、配色、効果音をサイドバーで自由に設定できます。

STEP 3. 動画保存

MP4またはWebM形式を選び、「録画」ボタンで動画を即座にダウンロードできます。

主な機能・設定項目

1. 図形・グリッド展開

正方形、円、三角形、十字、二重線など多彩なベクター図形を選択可能。グリッドの密度(分割数)や線の太さ、接続線の発生頻度を微調整できます。

2. カラーパレット・背景テーマ

モダンなライトテーマ、ダークネイビー、サイバー調、モノクロームなど厳選されたプリセットパレットを搭載。独自カラーのカスタマイズにも対応しています。

3. 視覚連動サウンド(SE)

図形の発生や回転アニメーションに連動するアンビエント音・8-Bit電子音・チャイム音などのサウンドエフェクトをWeb Audio APIで生成。

4. 動画書き出し・ループアニメーション

MediaRecorder API および FFmpeg 連携により、QuickTime / iOS / 各種動画編集ソフト(Premiere, After Effects, DaVinci)と完全互換の高品質MP4ファイルを高速出力します。

技術仕様

レンダリング: HTML5 Canvas API / 2D Context
音声処理: Web Audio API (プロシージャルサウンド生成)
動画エンコード: MediaRecorder API / Cloud Functions FFmpeg 連携
ホスティング: Firebase Hosting

データ通信とプライバシーについて

幾何学アニメーションの描画、各種パラメータ調整、効果音の生成、およびWebM形式の動画書き出しはすべてブラウザ内(クライアントサイド)のみで安全に処理されます。

QuickTime / iOS 互換の高品質MP4動画を書き出す場合のみ、エンコード処理のために一時的に映像フレームをCloud Functionsへ送信しますが、変換処理の完了と同時に破棄され、サーバー上に動画ファイルや個人情報が恒久的に保存されることはありません。