TL;DR
- Googleスライドには、矢印を始点から終点へ流れるように動かすアニメーション(ワイプ/モーションパス)がない
- そこで、流れる矢印の透過GIFをブラウザだけで作れるツールを作りました → https://flow-arrow.com/
- 作ったGIFをスライドに「画像として挿入」するだけ。発表中もループ再生されます
技術的にすごい話ではありません。「地味に不便だったので作った」やつです。
こんなことありませんか
スライドで「データの流れ」「処理のパイプライン」を説明するとき、矢印が始点から終点へスーッと流れてほしいこと、ありますよね。
PowerPoint なら「ワイプ」やモーションパスで一発ですが、Googleスライドにはこれがありません。
標準のアニメは Appear / Fade / Fly in / Zoom / Spin だけ。矢印を「流す」表現はどう頑張っても作れない。
解決:流れる矢印GIFを作って貼る
作ったツールがこれです → https://flow-arrow.com/
使い方:
- キャンバスをクリックして点を追加(最初=始点 / 最後=終点)。点はドラッグで移動
- プリセット(直線・フック・M字・S字)から始めてもOK
- 動き(流れる / 描かれる)・スタイル・色・太さ・速さを調整
- GIF書き出し → スライドに「挿入 → 画像」で貼るだけ
ポイントは 「フチ合わせ色」をスライドの背景色に合わせること。透過GIFのフチが目立たなくなります。
なぜGoogleスライドで矢印は「流れない」のか
地味に知られていないのですが、
- Googleスライドのアニメーションは前述の数種類に限られ、方向性のあるワイプ/モーションパスが存在しない
- さらに Google Slides API ではアニメーションを設定できない。つまりアドオン(プラグイン)でも後付け不可能
なので「スライド内でなんとかする」のは筋が悪く、あらかじめ動くGIFを作って画像として貼るのが現実解になります。GIFならGoogleスライドでもPowerPointでもNotionでもループ再生されます。
実装メモ(技術的なポイントだけ)
難しくはないですが、再利用できそうな所だけ。完全クライアントサイド(Canvas + gif.js)です。
1. 曲線に沿って「流す」
点列を Catmull-Rom で滑らかな曲線にし、弧長(arc-length)で等間隔サンプリング。そこに破線/シェブロンを置き、毎フレーム位相をずらすと「流れる」動きになります。1ループでちょうど1周期ぶん進めるとシームレスにループします。
// u は 0→1 のループ位置(プレビューも書き出しも共通)
const phasePx = u * period; // 1ループ=1周期ぶん進む → 継ぎ目なし
// 弧長 s に対応する曲線上の点と接線角を求めて、そこに要素を描く
const { x, y, ang } = at(path, s);
2. 透過ループGIFをブラウザで書き出す
gif.js は2値透明なので、背景を matte 色で塗ってから描画し、その matte 色を透明指定します。matte をスライド背景色に合わせると、アンチエイリアスのフチが馴染みます。
const gif = new GIF({ width, height, transparent: 0xffffff, workerScript: "gif.worker.js" });
// 各フレーム: matte色で塗りつぶし → 矢印を描く → addFrame
「描かれる」モードは、上の body を**終点まで徐々に伸ばす(reveal)**だけ。矢じりを伸びる先頭に置くと、始点から終点へ引かれていくように見えます。
ソース / 公開先
おわりに
正直、技術的にはまったく難しくないです。でも「自分が今まさに困っていて、世の中に無かった」ので作りました。
自分が使いたいものは、だいたい自分で作るのが一番早い。 同じ不便を踏んだ誰かの役に立てば嬉しいです。