アプリやサイトのスクリーンショットの文字を編集する

撮り直さずに編集するのはどんなとき

新しく撮ったスクリーンショットは常に実際の UI を写しているので、画面にすぐたどり着けるなら撮り直してください。編集が役立つのは、その状態を再現しにくいときです。デモ用データが必要な画面、手順の多い操作の流れ、もう動かしていない古いリリース、画像としてしか存在しないモックアップなどです。

デザインレビューでは、提案するボタンのラベルや見出しを、コメントで説明する代わりに実際の画面の中で見せられます。文言の案ごとに 1 枚ずつ画像を作ると、レビューする人が文脈の中で比べられます。リリース済みの UI と取り違えられないよう、それぞれが提案であることが分かるようにしてください。

ドキュメントやチュートリアルでは、メニュー項目が 1 つ名前を変えただけで、それ以外は正確なスクリーンショットが分かりにくくなることがあります。スクリーンショットの文字を編集するのは現行のリリースに合わせる場合だけにして、大文字・小文字や句読点も実際の UI と同じにしてください。画面が文言以外にも変わったときは、撮り直します。

小さな UI フォント

UI の文字は小さく、細く、輪郭がやわらかく描かれていることが多いため、大きな見出しより読み取りや再現が難しくなります。1 文字あたりのピクセル数が多いほど、AI が使える細部の情報が増えるので、できれば高解像度のディスプレイや、より高い拡大率で撮影してください。

ぎっしり詰まった表、サイドバー、設定パネル、ツールチップには、ほとんどの画面でいちばん小さな文字があります。そこにあるラベルが高画質でもまだ不揃いになる場合は、画面をもっと大きな倍率で撮り直すか、新しい文言を短くしてください。狭い列に詰め込んだフレーズより、短い単語 1 つのほうが、たいてい合わせやすくなります。

スクリーンショットは平らな 1 枚の画像なので、ラベルが長くなっても、レイアウトが自動で組み直されることはありません。実際の UI ならボタンを広げたり 2 行目に折り返したりするところでも、スクリーンショットでは、はるかに長いラベルは窮屈に見えたり、隣のアイコンに迫ったりすることがあります。元のラベルより広いスペースを必要としない文言を選ぶか、もっと余裕が必要なら元のデザインを変更してください。

共有する前に確認すること

UI の文字はアイコンや枠線、バッジの近くにあり、ラベルを編集すると、それに接しているものも変わることがあります。比較スライダーで、次の点を 1 つずつ確認してください。

• 変更したラベルの隣にあるアイコン、チェックボックス、トグルが、くっきりしたまま同じ位置にある。
• ボタンの縁、下線、フォーカスの枠線、バッジがずれたりぼやけたりしていない。
• 数字、バージョン表記、キーボードショートカットが、実際の UI と完全に一致している。
• 新しいラベルが、周りのラベルの大文字・小文字の表記ルールに沿っている。
• 変更していない行が、元とまったく同じである。