スクリーンショットで編集する
内蔵の Screenshot ツールで変更したい箇所を正確に示す方法を、要素の追加、移動、スタイル変更の具体例とともに説明します。
見れば分かるのに言葉にしにくい変更があります。「3 行目の 2 番目のカード」「フッターの上の隙間」「写真に重なっているバッジ」など。印を付けたスクリーンショットなら推測は不要です。MeDo はあなたが描いた範囲をそのまま見て、そこに指示を適用します。
仕組み
- エディターで、プレビュー上部のツールバーにある Screenshot（スクリーンショット） をクリックします。現在のプレビューがキャプチャされます。
- 描画ツールで範囲に印を付けます。rectangle（四角形）、arrow（矢印）、text（テキスト）、pen（ペン） が使えます。印を複数付ける場合は色を変えてください。
- Add to chat（チャットに追加） をクリックします。画像がプロンプトボックスに添付されます。
- 短い指示を書いて送信します。
結果を安定させるためのコツがいくつかあります。
- 1 つの印に 1 つの指示。枠を 2 つ描いた場合は、それぞれの意味を説明します（「青い枠：…、赤い枠：…」）。
- 印が複数あるときは、メッセージで印の色を示す。
- 正しいデバイスでキャプチャする。問題がモバイルでしか起きないなら、先にプレビューをスマートフォンに切り替えます。
- 指示は印を付けた範囲に限定する。範囲外の内容は別のメッセージで送ってください。
例 1：特定の場所に何かを追加する
あるメニュー項目に「今週の新作」リボンを付けたいとします。
- Menu セクションをスクリーンショットします。
- その項目の写真の左上隅に四角形を描きます。
- 送信：「印を付けた隅に小さな『今週の新作』リボンを追加してください。ヘッダーと同じ緑を使ってください。」
例 2：要素を移動する
「Order now」ボタンがテキストの下にあるが、価格の横に置きたいとします。
- カードをスクリーンショットします。
- ボタンから価格の隣のスペースへ矢印を描きます。
- 送信：「Order now ボタンを矢印の先に移動し、価格と揃えてください。」
例 3：レイアウトの問題を直す
ヒーロー写真がスマートフォンで切れてしまうとします。
- プレビューをスマートフォンサイズに切り替えてから、スクリーンショットします。
- 切れている範囲の周りに四角形を描きます。
- 送信：「モバイルで、印を付けた写真が切れています。画像全体を表示し、テキストはその下に配置してください。」
例 4：参考に合わせる
気に入った料金表のスクリーンショットがあるとします。
- 自分の料金セクションをスクリーンショットし、その周りに四角形を描きます。
+→ Upload（アップロード） で参考画像を追加します。- 送信：「印を付けたセクションを 2 枚目の画像のようにスタイル変更してください。3 列で、中央の列を強調します。」
スクリーンショットが適さないとき
- 1 つの要素のテキスト、色、余白の変更は Edit mode（編集モード） の方が速いです。要素をクリックして直接編集してください。
- ページや機能を丸ごと追加するのに画像は不要です。チャットで説明してください。
- バックエンドの動作（何を保存するか、誰が見られるか）はチャットで依頼するもので、視覚的な依頼ではありません。
すべての編集ツールを並べて比較するには、アプリを編集するを参照してください。