画像オーバーレイ

画像オーバーレイは、画像、図形、その他の視覚要素を別の画像の上へ重ねる処理です。注釈、デバイスモックアップ、比較表示、ブランド入りのスクリーンショットなどに使われます。

Related workflow terms: スクリーンショットへの注釈.

オーバーレイの種類

オーバーレイには、伝えたい内容に応じた種類があります。

注釈オーバーレイは、スクリーンショットへ矢印、円、文字ラベル、強調枠を重ね、特定の領域へ視線を向けます。ドキュメントやバグ報告でよく使われます。

端末フレームのオーバーレイは、スクリーンショットをスマートフォン、タブレット、ノートパソコンのモックアップへ収めます。端末画像をスクリーンショットの上または周囲へ置くことで、実物に近い背景を加えます。マーケティング素材やアプリストアの掲載画像に適しています。

比較オーバーレイは、2枚の画像を横に並べるか、スライダー付きで重ね、変更前後を見せます。ビジュアルリグレッションテスト、デザインレビュー、製品デモで使われます。

ブランド用オーバーレイは、ロゴ、ウォーターマーク、色味を重ね、所有者や視覚的な統一感を示します。隅に置く小さなロゴから、画像全体へ広げる半透明の模様まであります。

オーバーレイを使う場面

• 製品マーケティング： スマートフォンやノートパソコンのフレーム内へスクリーンショットを配置し、ランディングページやアプリストア用の整った画像を作ります
• ドキュメント： 番号付きの注釈オーバーレイで手順を順番に示し、複雑な画面を理解しやすくします
• バグ報告： 強調領域と矢印で表示上の問題がある場所を正確に示し、報告者と開発者の確認の往復を減らします
• SNS： ロゴ、グラデーション、文字バナーなど、ブランドに合わせたオーバーレイを加え、通常のスクリーンショットを共有用の画像へ整えます
• デザインレビュー： デザインモックアップと実装したUIを比較し、差を見つけやすくします

オーバーレイの仕組み

技術的には、基になる画像の上へ第2のレイヤーを合成します。アルファ、つまり透過の値を使い、オーバーレイを基の画像とどう混ぜるかを決めます。完全に不透明なピクセルは基の画像を置き換えます。半透明のピクセルは基の画像と混ざり、色付きの強調や薄いウォーターマークなどの効果を作ります。

多くのスクリーンショット・画像編集ツールは、編集中は非破壊でオーバーレイを扱います。基の画像とオーバーレイは、最終的に書き出すまで別のレイヤーとして残ります。書き出すとレイヤーが1枚へ統合され、オーバーレイはピクセルデータの一部になります。

自動化したスクリーンショット処理では、プログラムからオーバーレイを適用できます。加工していないスクリーンショットを受け取り、端末テンプレート内へ配置し、ブランド用のフッターを加え、完成した合成画像を書き出す、といった処理を手作業なしで実行できます。複数の端末サイズに合わせて数十枚や数百枚のマーケティング画像を作るときも、見た目をそろえられます。

繰り返しスクリーンショットを作る場合は、毎回個別に編集するより、オーバーレイをテンプレートとして管理します。位置、不透明度、出力サイズを一度固定すれば、マーケティング画像やヘルプセンターの図が少しずつ異なる見た目になるのを防げます。

よくある失敗

• 透過オーバーレイにJPGを使う： JPGはアルファチャンネルに対応しません。半透明のオーバーレイは単色背景へ統合され、混ざり方が失われます。PNGまたはWebPを使ってください
• 解像度が合わない画像を重ねる： 高解像度のスクリーンショットへ低解像度のオーバーレイを置く場合や、その逆では、拡大・縮小による乱れが見えます。オーバーレイの解像度を基の画像へ合わせます
• 共有前にレイヤーを統合しない： 編集可能なレイヤーを持つプロジェクトファイルを渡すと、受け取った人がオーバーレイを削除または変更できます。位置を固定したい場合は、レイヤーを統合したPNGまたはJPGを書き出してください
• 重ねる要素が多すぎる： 1枚に注釈、強調、ラベルを詰め込むと見づらくなります。1枚で強調する領域を1つか2つに絞ると、内容が伝わりやすくなります