動く矢印を「うるさくしない」デザインのコツ7選
スライドに動く矢印を入れたら「なんか安っぽい」「目がチカチカする」と言われた — アニメーションは諸刃の剣で、使い方を誤ると内容より動きが目立ってしまいます。この記事では、流れる矢印を上品に・効果的に見せるための実践的なコツを7つ紹介します。すべてFlowArrowの設定でそのまま再現できます。
1. 速さは「1周期1〜2秒」を目安に
いちばん多い失敗は速すぎることです。破線が高速で流れると、視線が矢印に張り付いて発表者の話が入ってきません。破線1つが隣の破線の位置まで動くのに1〜2秒かかる程度の、「言われれば動いていると分かる」速さが目安です。聴衆の視線は最初の2〜3秒だけ矢印に行き、その後は内容に戻る — それが理想の状態です。
2. 色はテーマカラーの「同系色・少し薄め」
矢印は情報の主役ではなく「関係を示す脇役」です。スライドのテーマカラーが青なら少し薄い青、モノトーン資料ならグレー(#5f6368 前後)が鉄板です。彩度の高い赤・オレンジは「ここに注目」という強調専用にとっておき、1枚のスライドで使うのは1本までにすると効果が保てます。
3. 動く要素は1画面に1つ(多くて2つ)
複数の矢印が同時に動くと、視線の行き先が分散して逆効果です。どうしても複数の流れを見せたい場合は、(1)主要な流れだけを動かして他は静止矢印にする、(2)スライドを分割して1枚1フローにする、のどちらかを選びます。
4. 太さは「本文の文字の縦幅」が上限
矢印が本文フォントより太いと、視覚的な重みが逆転して「矢印の資料」になってしまいます。24ptの本文なら矢印の線は10〜16px相当まで。遠くの席からも見える必要がある会場発表では太め、画面共有のオンライン会議では細めが快適です。
5. 「フロー」と「描画」を意図で使い分ける
| 動き | 伝わる意味 | 向いている場面 |
|---|---|---|
| フロー(破線が流れ続ける) | 定常的な流れ・継続中の処理 | データフロー、パイプライン、循環図 |
| 描画(線が伸びて指す) | 因果・帰結・注目誘導 | 「だからこうなる」の結論指し、注釈 |
「常に流れているもの」はフロー、「一度指せば十分なもの」は描画 — この使い分けだけで資料の意図が格段に伝わりやすくなります。
6. 動きに酔いやすい人への配慮を忘れない
点滅や高速の動きは、片頭痛や前庭障害を持つ人には実際に体調へ影響します。Webアクセシビリティの世界では「動きを減らす設定(prefers-reduced-motion)」が標準化されているほどです。スライドでも同じ配慮が通用します: ゆっくり・低コントラストの動きにする、長時間表示するスライドでは動きを使わない、配布資料には静止版を使う。上品さの問題だけでなく、聴衆への配慮でもあります。
7. 印刷・PDF配布があるなら「静止しても意味が通る」形に
GIFはPDFに書き出すと最初のフレームで静止します。「フロー」モードなら破線矢印として意味が通りますが、「描画」モードは線が伸びる途中のフレームだと矢印が短く写ることがあります。配布資料前提の場合はフローを選ぶか、印刷用に静止画の矢印を別途用意しておくと安全です。
まとめ: 迷ったらこの設定
この組み合わせなら、まずうるさくなりません。作例ギャラリーのM字カーブ(グレー)がちょうどこの設定です。