← ガイド一覧へ
矢印デザインの基本と見やすさの原則
矢印は「何を」「どこへ」伝えるための最短の記号です。本記事では、秒でやじるしメーカーで扱うパラメータ(色・太さ・アウトライン)を中心に、読みやすさと視認性の原則を実例ベースでまとめます。
1. 色 — 背景とのコントラストが最優先
背景が明るい場合は濃い色、暗い場合は明るい色を選びます。ブランドカラーがある場合も、背景とのコントラスト比を優先しましょう。やじるしメーカーではカラーピッカーで即座に確認できます。
2. 太さ — 画面サイズに合わせて相対指定
線は細すぎると見えず、太すぎると情報を塞ぎます。相対パーセント指定なら、画像の短辺に対しておおよそ2–6%の範囲が目安です。小さい画像ほど相対的に太くなるため、目的の表示サイズでプレビューしましょう。
3. アウトライン — 画像上での“縁取り”は強力
被写体が入り組んでいる場合、矢印の周囲に白いアウトラインを付けると一気に視認性が上がります。内側の色は目立つ色、外側のアウトラインは白(もしくは黒)にして、二重のコントラストを作るのがおすすめです。
4. 起点と終点 — 省略せず最短距離で
矢印は「起点→終点」を最短で結びます。曲線や折れ線で装飾したくなりますが、伝達スピードが落ちることがあります。最短距離で斜めに切るだけで十分に目が止まります。
5. 複数本の矢印 — 優先順位を色/太さで表現
複数の要素を指す場合は、最も重要な矢印を「太く/鮮やかに」、副次的な矢印を「細く/控えめに」して視線誘導の優先順位を作ります。
6. 失敗例と回避
- 背景と同系色で埋もれる → 色を180°近く回す/アウトラインを付ける
- 太さが足りず見えない → プレビューサイズで2–6%を基準に調整
- 情報を隠してしまう → 矢印の通り道を空ける、短くする
まとめ
色=コントラスト、太さ=相対指定、アウトライン=二重コントラスト。まずはこの3点を押さえるだけで、誰が見ても分かる矢印になります。今すぐ 秒でやじるしメーカー で試してみてください。