スクリーンショットに矢印を追加

読者が使うべきボタンや欄を正確に指し示す矢印を描けます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

スクリーンショットに矢印を追加でできること

矢印は、チュートリアルの読者が必ず抱く「どこをクリックするの？」という疑問に答えます。矢印の始まる位置から、指し示す点までドラッグします。矢じりはマウスを離した位置にぴったり置かれ、やわらかい影が付くため、明るい画面でも暗い画面でも目立ちます。

「色」の既定値は赤 #E5484D、「線の太さ」は幅 1440 px のスクリーンショットで 6 px で、幅の広い画像では大きくなります。矢印は空いたスペースから始めて短くし、目標の周りの内容を覆わないようにしてください。目標を枠で囲みたい場合は、スクリーンショット注釈ツールの四角形や楕円を使ってください。

例

選ぶもの

組み込みの請求ページのサンプル（「例を使う」）

ダウンロード

example-billing-settings-annotated.png
1440 × 900 px、(1300, 300) から「支払い方法を更新」ボタンの右端までの赤い矢印

矢じりの大きさは線の太さに合わせて大きくなるため、太い矢印でも比率が保たれます。

スクリーンショットに矢印を追加の使い方

「ファイルを選択」をクリックするか、スクリーンショットを貼り付けます。
「色」と「線の太さ」を設定し、矢印の根元から先端までドラッグします。
正確に置くには、「その他のオプション」を開いて「始点 X」「始点 Y」「終点 X」「終点 Y」を入力し、「矢印を追加」をクリックします。その後「.png をダウンロード」をクリックします。

知っておきたいこと

矢印は直線です。曲線や折れ線の矢印はありません。
数ピクセル未満のごく短いドラッグは無視されるため、クリックミスで余計な矢じりが付くことはありません。
各矢印には描いたときの色と太さが使われます。設定を変えても、影響するのは新しい矢印だけです。

スクリーンショットに矢印を追加についてよくある質問

注釈の矢印は何色がよいですか？

書き込む UI に使われていない色を選びます。青、グレー、白が中心の画面なら、たいてい赤が合います。赤やオレンジのブランドカラーなら、青や紫を試してください。1 つのガイドではすべての矢印を同じ色にします。

1 枚のスクリーンショットに矢印はいくつまでがよいですか？

理想は 1 つの操作につき 1 つです。1 つのステップに矢印が 3 つ必要なら、スクリーンショットを 3 枚に分けるか、番号付きステップのツールで番号のバッジに切り替えてください。矢印が多すぎると、読者は何か所も同時に見なければならなくなります。

完全に水平な矢印を描くには？

「その他のオプション」を開き、「始点 Y」と「終点 Y」に同じ値を入力して「矢印を追加」をクリックします。手でドラッグすると、ぴったり同じピクセル行にそろうことはまずありません。