「タイトルを直してください」「ボタンをもう少し分かりやすく」という依頼では、相手が修正する場所や完成後の状態を判断できません。スクリーンショットで対象を示し、現状と希望を分けて書くと、確認のやり取りを進めやすくなります。
この記事では、ITtripが提供する「ここ見て画像」を使い、Webページの修正箇所に番号や囲みを付ける方法を説明します。例は架空のショップ案内ページです。色やレイアウトの好みを判断する前に、「どこを、どう変えるか」を共有します。
修正対象のページと、表示条件を先にそろえる
画像だけでは、どのページの、どの状態かが分からない場合があります。依頼の冒頭に次の情報を添えます。
- 対象ページのURLとページ名。
- PCかスマホか、利用したブラウザー。
- ログイン前・ログイン後、メニューを開いた状態などの表示条件。
- 確認した日付と、修正の優先度。
画面幅によって変わる問題は、実際に確認した幅も記します。PCの画像だけを使って、スマホの不具合も同じと決めないようにしてください。画像内に表示されるURLやアカウント情報を、依頼相手へ送ってよいかも確認します。
「場所・現状・希望」を一件ずつ書く
修正の理由は、見た目の好みだけでなく、読者が何に困るかに結び付けて書きます。
| 番号 | 場所 | 現状 | 希望する状態 |
|---|---|---|---|
| 1 | ページ上部の見出し | 旧ショップ名になっている | 新名称「森の雑貨店」に変更 |
| 2 | 見出し直下の余白 | 本文が離れて見える | 見出しと本文の間隔をデザイン案Aに合わせる |
| 3 | 問い合わせボタン | 「こちら」だけで用途が分かりにくい | 文言を「お問い合わせ」に変更 |
これは架空の修正依頼例です。名称、デザイン案、文言は実際の依頼内容へ置き換えます。間隔や色を厳密に指定する必要があるなら、承認済みデザインや具体的な数値も渡してください。「もう少し小さく」だけでは完成を判定しづらいためです。
位置を示す画像には、変更対象が読める範囲を残します。Googleの画像作成ガイドも、スクショを必要な情報に絞る考え方を示しています。この依頼例では、修正箇所の周囲を残し、別のページや関係のないウィンドウを除きます。Googleの画像・スクリーンショット作成ガイド
番号と囲みを付けて、修正依頼用のPNGを作る
- 依頼するページを撮影し、修正箇所が読めるスクショを保存します。PCとスマホで問題が異なる場合は、それぞれ撮影します。
- ここ見て画像で修正箇所を示すを開き、「画像を選ぶ」から一枚を読み込みます。
- 「番号」で対象の近くをクリックし、説明欄に「見出しを『森の雑貨店』へ変更」のような希望を書きます。
- 「囲み」を選び、見出しやボタンなどの対象範囲をドラッグします。余白を直す依頼では、間隔の両側が分かる範囲を含めます。
- 二件目、三件目も番号と短文を追加します。場所を指しにくい対象には「矢印」を補います。
- 「保存する画像を確認」で番号と下部の説明欄を見直し、「PNGで保存」を選びます。
短い説明は画像の下にまとめて入ります。画像上の文章を変更する機能ではないため、元ページの文字が置き換わった状態にはなりません。完成後の見た目が必要な場合は、デザイン案を別途用意します。
囲みは必要な範囲に絞ってください。ページ全体を大きく囲むと、依頼相手はその中から対象を探し直すことになります。間違えた印は選択して削除するか、「元に戻す」で直します。
画像の番号と、修正管理の番号を混同しない
ここ見て画像では、番号を削除すると残りが連番になります。画像を何度も更新する場合、「画像の2」をそのまま管理用の識別子にすると思い違いが起きる場合があります。
継続して管理する修正には「R-01：ショップ名変更」のような固定の識別子を文書側で付け、画像ファイル名と更新日も記録します。画像は対象の位置を示す資料として使い、対応済み・確認待ちなどの進捗は依頼文書や課題管理ツールで管理します。
保存したPNGを再び読み込んでも、前回付けた番号や囲みを個別に選択できません。次回更新に備え、元のスクショと依頼文を残してください。
画像だけでは伝わらない条件を依頼文に足す
ボタンを押した後の遷移先、エラー時の表示、キーボード操作、表示する条件などは、一枚の静止画像だけでは表せません。動作の修正なら、再現する手順、期待する結果、実際の結果を文章で補います。
たとえば「問い合わせボタンのリンク先を問い合わせフォームへ変更」という依頼では、正式な遷移先URLも添えます。承認担当、期限、確認方法も画像の外にまとめると、修正後に何を見ればよいかが決まります。
送付前には保存したPNGを開き、番号と説明が欠けていないこと、意図したページを写していること、不要な個人情報が入っていないことを確認します。相手が修正箇所を特定し、希望する状態を判断できる資料を目指してください。
コメント