スクリーンショットをブラウザーとデバイスのモックアップで見せる

スクリーンショットを準備する

利用できる中で最もきれいなキャプチャから始めます。配置する前に、一時的なアラート、個人情報、偶然写ったステータス表示を削除します。枠や遠近感の処理で読める範囲が狭くなることがあるため、大切なUIは中央付近に保ちます。ワークフローを見せるなら、決定的な画面を1つ選ぶか、同じトリミングの考え方で小さなシリーズを作ります。

内容がWebページやデスクトップ風の表示ならブラウザー風を使います。タッチ操作のレイアウトや縦方向の読み取りが中心ならスマートフォンまたはタブレット風を使います。これらは装飾用の枠であり、ブラウザーを開いたり、URLを読み込んだり、スクリーンショット自体を変更したりするものではありません。この違いを理解すると、完成画像について正直な期待値を設定できます。

1. 主題が明確なスクリーンショットを1枚選び、機密内容を削除します。
2. ブラウザー、iPhone、iPadのどの枠が文脈を最も説明するか決めます。
3. 重要な文字やコントロールが枠の中で見えることを確認します。

枠を置き、場面を選ぶ

スクリーンショットを支える背景を選びます。記録なら静かな単色が使いやすく、柔らかな写真や自然の風景なら製品プレゼンテーションを温かくできます。枠の端が見えるよう、周囲に十分な空間を残してモックアップを置きます。ブラウザーウィンドウでは、ページより装飾用のコントロールが目立たない範囲で、UIがブラウザーだと分かる状態にします。

遠近感は現実的に保ちます。少し傾けると動きが出ますが、大きく回転させると小さな文字が読みにくくなります。背景の視覚的な方向にモックアップを合わせましょう。開いた空間へ傾く枠は意図的に見えますが、忙しい物へ向く枠は窮屈に感じられます。

次に読む：スクリーンショットにiPhoneの枠を追加する方法

1. コントラストの十分な無地または自分の画像の背景を選びます。
2. 装飾用の枠を置き、外周の周りに余白を残します。
3. まずまっすぐな版を試し、最終共有サイズで傾けた版と比べます。

読みやすさと信頼性を確認する

ズームアウトして、見る人が最初に何に気づくか考えます。主役はスクリーンショットであり、枠はどの種類の画面かを伝える役割です。背景が勝っているならシンプルにするかコントラストを下げます。スクリーンショットが消えるならモックアップを大きくするか、より静かな場面を使います。

角、文字、端を確認します。枠をきつく切りすぎると偶然に見えることがあり、背景を細く不均一に残すほうが、意図したトリミングより気になる場合もあります。できるだけ元の比率を保ち、丸いアイコンや写真の人物を引き伸ばさないようにします。

枠のスタイルとProの条件はアプリのバージョンによって変わることがあるため、シリーズを計画する前にアプリの現在のモックアップパネルを確認してください。

1. 階層を確認してから、文字と枠の端を調べます。
2. 全体サイズと、投稿や記事で使うサイズの両方で比べます。
3. 文脈が必要なら、スクリーンショットの外側に短いキャプションを加えます。

よくあるモックアップの問題を直す

スクリーンショットが伸びて見えるなら、元のアスペクト比の画像に戻してもう一度合わせます。文字が小さすぎるなら、意味のある領域を切り取るか、より大きな枠を使います。枠と背景の色が似ているなら、別の背景または控えめな枠の処理で分離します。理由なく傾いて見えるなら、まっすぐな配置に戻します。

自分の画像の背景が混み合っている場合、強い装飾でスクリーンショットを隠さないでください。静かな領域へモックアップを移す、視覚的な競合を減らす、よりシンプルな色を選ぶ、といった方法を使います。書き出しを試し、クライアントへ送ったり投稿したりする前に、実際に保存された結果を確認します。

1. 大きさを変える前にアスペクト比を直します。
2. 装飾を加える前に、トリミングと階層で読みやすさを直します。
3. 保存した画像を、実際の用途のサイズで一度プレビューします。