遊び方
自作の間違い探しはPNG・JPEGどちらで保存する？配布画像の確認手順
自作の間違い探しをPNG・JPEGで配るときに、同じ元データと寸法で候補を作り、輪郭・文字・写真の変更点・背景を確認する手順を紹介します。
配布用の画像は形式名だけで決めない
自作の間違い探しを画像で配るとき、PNGかJPEGかという形式に加えて、問題の線や文字が保存後にどう見えるかを確認します。線画中心の問題と写真中心の問題では、同じ保存方法がいつも適しているとは限りません。編集を続ける元データは残し、配る候補を別ファイルとして作ります。
MDNの画像形式ガイドでは、JPEGは静止画を非可逆圧縮する選択肢として、PNGは元画像をより正確に再現したい場合や透明部分が必要な場合の選択肢として説明されています。これは形式を選ぶ材料です。特定の問題の見やすさや容量を保証するものではないので、最終的には実際に配る画像で確かめます。
元画像と寸法をそろえて候補を書き出す
編集部の提案は、同じ完成データからPNG版とJPEG版を作り、まず縦横の寸法をそろえて比べる方法です。一方だけを縮小し、もう一方を元の寸法で保存すると、形式の違いと縮小の影響を分けにくくなります。ソフトが保存時に寸法を変えていないか、出力したファイルの情報も確認してください。
ファイル名には「花瓶の問題・PNG候補」「花瓶の問題・JPEG候補」のように役割を書きます。これは編集部の架空例です。拡張子を文字として書き換えるだけで形式を変えたことにはならないので、利用するソフトの保存や書き出し機能で形式を選びます。
線画は輪郭と小さい文字を重点的に見る
架空の線画問題で、花瓶の縁の形を変更点にした場合を考えます。書き出した画像を同じ表示倍率で開き、縁の線が途中で切れて見えないか、周囲に意図しない模様が出ていないかを確認します。答えの記号や説明文が入る画像では、文字の内側まで確認対象にします。
線の見え方に違いがあったら、保存形式だけで結論を出さず、寸法、書き出し設定、表示倍率を順に見直します。容量が小さいという理由だけで、変更点を判断しにくい候補を採用しないようにしてください。ここでの花瓶の例は確認方法の説明であり、実測した画質比較ではありません。
写真は変更した場所と背景を一緒に確かめる
写真から問題を作る場合は、変更した対象だけでなく、その周辺にも目を向けます。例えば、机の小物を消すという架空の変更なら、消した部分の境目、周囲の影、ほかの小物の輪郭を見ます。配布画像の保存後に、制作時にはなかった違いを正解と取り違えそうな状態になっていないか確かめます。
JPEGを使う場合でも、保存設定や元の画像によって結果は異なります。この記事では、どの設定なら何割小さくなるといった数値や、すべての写真で最適な画質設定は示しません。設定を変えて保存し直す場合は、元データから候補を作り、どの設定で出力したものかをメモに残します。
透明部分と背景も配布先で見る
透明な背景を使う問題では、画像を置く場所の背景も確認します。編集ソフトの市松模様で見ていた状態と、配布先の白や濃い背景に重ねた状態では、線の見え方を改めて確認する必要があります。PNGが透明部分を扱えるという説明と、どんな背景でも読みやすいという判断は分けてください。
背景を固定して配るなら、その背景を含む完成画像を確認します。透明な画像を使うなら、実際に載せる場所で必要な線や文字が見えるかを見ます。受け渡しの途中で共有アプリがサイズや形式を変える場合も考え、選んだ元ファイルだけでなく、受け取る側が開く配布物を確認する手順にします。
比較メモを残して配布候補を決める
編集部の比較メモ例は「元データの名前」「出力形式」「出力寸法」「保存設定」「確認した端末・アプリ」「輪郭」「文字」「変更点の周囲」「背景」「採用したファイル」です。容量も判断材料にする場合は実ファイルを確認した値を書き、架空の数字で埋めないようにします。
問題の左側と右側を別々の設定で保存しているなら、同じ条件へそろえて出力し直す案を検討します。採用後は問題と対応する答えも開き、意図した変更点が一致することを確かめてから配布します。確認が終わらない候補は、配布用の保存先へ混ぜずに残します。
編集用ファイルと配布前チェックにつなげる
編集を再開する元データと配布画像の分け方は https://spotora.net/media/paint-puzzle-project-files 、制作全体の流れは https://spotora.net/media/make-paper-puzzles 、配布前の整合確認は https://spotora.net/media/puzzle-preflight を参照してください。Spotoraの公開の遊び方案内は https://spotora.net/media/spot-the-difference-guide です。
出典と比較例の範囲
画像形式の説明はMDN「Image file type and format guide」を参照しました。出典：https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types 。確認日：2026年10月22日。花瓶・机の小物・比較メモは編集部が提案する架空の作業例です。実際の画像ファイルを測定した性能比較や、特定の共有アプリの動作検証結果ではありません。
本記事は自作画像の配布準備についての説明です。Spotoraがこれらの形式で問題を投稿・配布できるという仕様の案内ではありません。利用するソフトの公式手順と、実際に出力して配るファイルを確認してください。
