Tiny Online Tools
Illustrator 不要のポインター＆ダイアグラム矢印
矢印は UI とドキュメントで多くの役割を果たします — フローを説明し、注釈を強調し、スライドでアイデアを繋ぎ、製品スクリーンショット上でユーザーを誘導します。このジェネレーターはどこにでも貼り付けて CSS でスタイル設定できる、クリーンな SVG <path> を出力します。
矢印スタイル
- 直線 — 始点から先端へのシンプルな線。素早い注釈やコンパクトなダイアグラムに最適。
- 曲線 — 曲率調整可能な 2 次ベジエ。矢印が他の要素を避けて弧を描く必要がある場合に便利。
- ジグザグ — のこぎり歯、遊び心ある「スピード感」や「エネルギー」を出したいときに。
矢先の種類
- 三角 — 塗り潰しポリゴン、古典的な「ソリッド」矢先。
- オープン — 2 本のストローク、手描き風。
- ダブル — オープン矢先 2 つを重ねる、早送りや強調の合図に。
追加オプション
- 太さ と 色 は矢印全体に適用。
- 矢先サイズ は線の太さから独立。
- 尾部ドット は開始マーカー — 前後ポインターに便利。
用途
- UI の注釈やオンボーディングツアー
- ダイアグラムとフローチャート
- プレゼンスライドのポインター
- マーケティンググラフィック上のスケッチ風注釈
- リンク、CTA、「続きを読む」ボタン用の SVG アイコン
出力は純粋な SVG なので、CSS の fill / stroke で色変更、stroke-dasharray でアニメーション、またはあらゆるデザインツールに取り込み可能。