無料相談

売上あげる、
おてつだい。

  1. トップページ
  2. コラム
  3. 記事

コラム

事例写真を差し替えても古い画像が残る?元画像と掲載先を整理する

チップス

事例写真を変えても一覧などに古い画像が残る時は、元写真・切抜き版・掲載先を対応させて確認。会社案内・採用ページ・事例一覧で変える範囲と残す写真、説明文と表示確認までの相談内容を整理します。

同じ建物の外観を写した元の写真、横長版、正方形の一覧用を並べ、差し替える画像の種類を確認するイメージ

事例の写真を差し替えたのに、一覧や別のページでは古い写真が見える。そんな時は、元の写真から作った画像の種類と、それぞれの掲載先を対応させましょう。同じ写真に見えても、横長に切り抜いた版、一覧用の小さな版、資料へ入れた版が別にあるかもしれません。どこまで変え、何が未確認かを分けます。

例えば、堺市の作業家具をつくる会社が、新しい外観写真へ差し替える場面を仮定します。以前の外観は会社案内、採用ページ、事例一覧で使っています。会社案内の大きな写真は変わりましたが、一覧の小さな写真は以前のままです。この一枚を起点に、使っている版をたどります。

同じ写真と、同じ画像ファイルを分ける

見た目が同じでも、同じファイルを複数の場所に出している場合と、切り抜いた別のファイルを使っている場合があります。また、元のファイルを変えず、ページで見せる形だけを変えていることもあります。元写真を一度登録し直したことだけで、各ページの表示まで差し替わったとは決めず、何を使っているかを確認します。

WordPressの公式案内でも、画像を編集して保存する説明と、縦横比によってページ上の見える形だけを変える説明が分かれています。前者には、編集した版を新しい画像ファイルとして保存し、元の画像は残ると記されています。使うサイトでは、どの方法で画像を用意したかと、実際に表示する版を確かめます。画面や機能は現在の構成に合わせて確認します。

一枚の元写真から、掲載先をたどる

掲載先使っている画像の確認差替え後に見るところ
会社案内大きな横長版か、元写真の表示を変えたものか入口や建物が必要な範囲まで見えているか
採用ページ本文の写真として別に保存した版がないか現在の職場を紹介する説明と写真が合うか
事例一覧一覧用の小さな切抜きや、事例に選んだ画像が何か一覧へ戻っても新しい画像が表示されるか
仮定の外観写真の例です。ページごとの画像が、同じ仕組みで作られているとは限りません。

この会社なら、元写真の保管先、大きな横長版、採用の本文用、一覧用を並べ、使っているページのURLを添えます。ファイル名が似ているという理由だけで同じ版とせず、表示する写真と切り抜かれた範囲も見ます。制作側へ調査を頼む時は、分かる範囲のURLと画面の写真があれば、未確認の掲載先を探す仕事から相談できます。

一枚の元写真から横長版・本文用・一覧用へ分かれ、それぞれ会社案内・採用ページ・事例一覧の掲載先につながる図
元写真、使う画像の版、掲載先を対応させる整理例です。図は、特定のサイトで画像が自動作成・一括更新されると示すものではありません。

写真を使ったPDFや、写真の上に文字を載せた画像があれば、それも別の版として加えます。写真を差し替えても、画像の中にある以前の説明までは合わないことがあります。元の写真だけを見る作業と、完成した画像や資料全体を見る作業を分けます。

一緒に変える写真と、残す写真を決める

同じ元写真を使う場所を見つけたら、今回すべてを変えるかを決めます。現在の会社案内と採用の職場紹介は新しい写真へ変える一方で、過去の出来事を説明する写真は、その時のものとして残す案もあります。残す場合は、現在の紹介と混同しない説明になっているかを確かめます。

新しい写真を一覧用の形へ切り抜く時は、何を残すかを選びます。建物全体を見せる横長版と、入口が分かる小さな版では、使う範囲を変えることもあります。全画像を機械的に同じ見え方へ置き換えるのではなく、掲載先で必要な部分が見えるかを比べます。

写真に添える説明や、画像を使えない時に読むための文章も見直します。WordPressの画像ブロックでは、ページ側で設定した代わりの文章と、画像の保管場所にある既定の文章の扱いが分けて案内されています。画像だけを変えた後も、各ページで以前の内容を説明していないかを確認します。使う仕組みでどこに保存されるかを制作側と確かめます。

作業したことと、画面で確かめたことを分ける

掲載先ごとに、差替えの作業が終わったかと、表示を確かめたかを残します。例えば、会社案内は新しい写真を確認済み、採用ページは作業済みで表示確認待ち、一覧は対象画像の調査中、と分ける形です。一枚の写真を登録できたことだけで、すべての掲載先を完了にしないようにします。

確認は、管理画面だけでなく、利用者が見るページと一覧で行います。スマートフォンでも、入口や説明したい部分が切れていないか、写真と文章が合うかを見ます。更新対象を確かめても古い表示が続く場合は、画像の置き場所や表示の仕組みの調査を別に相談します。本稿では原因を一律に決めたり、削除操作を案内したりせず、確認したURLと画面を残すところまで整理します。

次の差替えへ向けて、元写真の置き場所、作った画像の版、掲載先、今回残した写真をひと組にします。新しい素材が来た時に、何を確認すればよいかが分かる記録です。写真自体を再利用できるかの判断がまだなら、その素材確認と、採用した後の掲載先の修正を分けて依頼できます。

新しい外観写真に変えましたが、事例一覧には古い画像が残っています。同じ写真を会社案内と採用ページでも使っています。元写真と切り抜いた版、掲載先を調べ、今回変える箇所と残す箇所を整理したいです。各ページの説明と表示確認まで含めて相談したいです。

みやあじよでは、事業のお話を伺い、ホームページの内容や構成・デザインを整理するところから制作をご相談いただけます。堺市で、写真の差替先と掲載ページの整理を相談するから、差し替えたい写真と分かる範囲のページをお聞かせください。掲載先をすべて把握できていなくてもご相談いただけます。素材と表示の対応を確認し、画像の用意・ページ修正・表示確認の範囲と費用を整理します。

参考資料

  • WordPress.org:Image block(画像編集と縦横比による表示の違い、ページ側で設定する代わりの文章の説明を参照)
マーケター・コンサルタントの皆様へクライアントの「価値」を伝えるWebトータルパートナー提携Webに関するトータルからスポット作業まで必要な部分だけお任せできるWeb制作パートナー提携