使い方ガイド
Symbol Stream Generator は、流れる記号・ベクター図形とオーバーレイテキストをブラウザ上で組み合わせるモーショングラフィックスツールです。
推奨環境: Google Chrome
クイックスタート
1. レーンを調整まずは列数、角度、速度を設定します。
2. 素材を選ぶ記号テキストまたは最大7種類のベクター図形を選択します。
3. 保存・描き出し保存タブからMP4動画、設定URL、JSON設定を出力します。
シンプル/詳細モード
パネル左上のスイッチで表示する設定項目を切り替えられます。シンプルは、はじめに使うサイズ・レーン・スクロール・配色・テキスト・保存に絞った表示です。詳細では、回転・反転・位相ずらし・個別速度・グラデーション・シャドウなどの細かな設定が表示されます。モードを切り替えても、現在の設定値は変更されません。
レーン設定
レイアウトと動き
- パネル表示モード: パネル上部のボタンで、キャンバス上に重なるフロート表示と、左にモーション・右に操作パネルを並べる固定表示を切り替えます。
- スクロール角度: レーンの移動方向を設定します。画面に対して記号を正立させる回転基準は詳細モードで選べます。
- 数値の微調整: 各スライダーの数値表示の左右にある「−」「+」で、設定済みの1目盛りずつ変更できます。
- 列数・レーン幅: 列数は1列から設定でき、流れの密度を調整します。レーン幅を自動フィットにすると画面サイズに合わせて計算されます。
- 速度・交互方向: ストリームの流速と、隣り合うレーンを逆方向に流すかを設定します。詳細モードの「移動速度を同期する」をオフにすると、奇数列と偶数列の速度を個別に設定できます。
- 回転・反転・位相: 詳細モードでは、固定角度・自動回転、奇数列/偶数列ごとの左回転、反転、列ごとの位相ずらし、ランダムな開始位置を設定できます。infrequent を有効にすると、10〜20秒ごとに画面内の1〜3個が1回だけ回転します。
記号・図形スタイル
- Webフォント・記号テキスト: プリセットを選ぶか、カンマ区切りで任意の文字列を入力します。「1文字ずつ自動分割」を有効にすると、入力した文字を1文字単位で使います。
- 端末・Googleフォント読込: 対応ブラウザでは、許可後に端末のローカルフォントを選択できます。「Googleフォント読込」を押すと、候補のGoogle Fontsを任意で読み込み、初期表示の通信量を増やさずに利用できます。
- Google Fontsの利用: 本アプリで読み込めるGoogle Fontsは、通常のWebフォント利用・動画描き出し・商用の生成物利用に使えます。画面上のクレジット表記は不要です。フォントファイル自体をダウンロードして再配布・同梱する場合だけは、各フォントのライセンスに従ってください。
- Canvasベクター図形: 詳細モードでは、最大7つの図形を混在させ、使用数・形状・30°単位の個別角度・ワイヤーフレーム表示を設定できます。
- サイズ・ランダム・発光: 記号の大きさはシンプルモードで設定できます。出現順の逆順・ランダム化と、ネオン管のような発光量は詳細モードで設定します。プレビューは高密度描画と記号キャッシュにより、絵文字を含む移動のちらつきを抑えます。発光量を上げると環境によっては動作が重くなる場合があります。
配色と背景
- レーン配色: 奇数・偶数レーンの記号色と背景色を設定します。詳細モードでは、両列の色を同期するか、背景の透明度とグラデーション(色1・2、角度、切替位置)を個別に設定できます。
- マルチカラー: 2〜7色を指定し、記号・図形へ適用できます。ランダム適用、明暗の指定、パレットの直接編集は詳細モードで行えます。
- 自動配色: 奇数列の背景色を基準に、補色・類似色・トライアド・テトラードのルールから配色を自動生成します。マルチカラーを有効にしている場合、そのパレットは上書きしません。
- 全体背景: 詳細モードで、単色、リニアグラデーション、ラジアルグラデーションを選び、色・角度・切替位置を調整します。
オーバーレイテキスト
- 表示テキスト: 画面中央に表示する文字を入力します。
- フォント: テキスト用のフォント欄にも、端末フォント読込とGoogleフォント読込、太字の切り替えを用意しています。
- モーションパターン: バウンス、スクロール、ゆっくり明滅、明滅、タイピング、ウェーブ、スイング、お辞儀、ズーム、ポップ、固定表示から選べます。スクロール時は、背景プレートがテキストボックスならその枠内を、帯(最大幅)なら画面幅を使って文字が移動します。スイングは文字を同時に左右30°揺らし、お辞儀は1文字ずつ「右10°→左60°→右5°→正位置」と動きます。ズームは順番に拡大して弾み、ポップは1文字0.22秒・開始間隔0.5秒で順番に表示します。
- 装飾: 背景プレート、余白、文字サイズ・色を組み合わせて読みやすさを調整します。文字間隔、プレート透明度、ドロップシャドウ、アニメ速度などは詳細モードで調整できます。
保存タブ
パネル上部の保存タブに、動画描き出し・設定URLの共有・JSON設定の保存と復元をまとめています。
MP4動画を描き出す
解像度(HD、Full HD、正方形、縦長)、長さ(5・10・15秒)、フレームレート(30・60fps)を選び、「MP4を描き出す」を押します。60fpsは高負荷ですが、対応ブラウザでは滑らかな動画を生成できます。
プレビューとの差異: 描き出した動画は、画面プレビューと記号・図形・文字のサイズ感や色味が少し異なる場合があります。Full HD・60fpsでは1分以上かかる場合があるため、完了までこの画面を閉じないでください。Safariでは描き出し中に画面を暗いオーバーレイで覆います。
設定URLの共有
「設定URLをコピー」は、現在のレーン、図形、配色、背景、テキスト設定をURLへ直接含めてコピーします。「短縮URL」は設定を一時保存した短いURLを作成し、3か月後に失効します。どちらも受け取った人が開くと、共有時の設定を復元できます。設定URL・短縮URLを知っている人は、オーバーレイテキストやフォント名、配色などの設定を閲覧・復元できるため、公開情報として扱ってください。
設定の保存と復元
「設定を保存」を押すと、現在の設定をJSONファイルとして端末へ保存します。「設定を復元」から保存済みのJSONファイルを選ぶと、各パラメータが復元されます。
ヒント: Hキー、または右上のボタンで設定パネルを一時的に隠せます。表示を隠すと、生成中の映像を画面いっぱいに確認できます。