宿サイトでは、客室、料理、温泉、看板猫の写真が魅力を伝えます。一方、スマートフォンで撮影した大きな写真をそのまま何枚も載せると、ページが開くまで時間がかかり、予約ボタンへ進む前に離脱される可能性があります。
だからといって、元写真を上書きしたり、画像最適化プラグインで全メディアを一括変換したりすると、画質、レイアウト、SNS共有、過去記事へ影響することがあります。
この記事では、ITに詳しくない宿主さんが、CodexやClaude Codeに調査を手伝わせながら、元写真を守り、複製した一枚で試してから広げる方法を説明します。
結論：元写真とWeb掲載用を分ける
安全な基本手順は次のとおりです。
- 元写真と利用許諾を安全な場所へ保存する
- どのページの、どの画像が重いか調べる
- 作業用の複製を一枚作る
- 表示寸法に合う大きさへ縮小する
- 写真の内容に合う形式と画質を選ぶ
- WordPressへ別画像として登録して比較する
- PC・スマートフォン・SNS共有を確認する
- 効果と戻し方を記録してから対象を増やす
元写真は、将来の印刷物、予約サイト、取材提供、別デザインで必要になることがあります。Web掲載用の軽い画像で上書きしません。
「見た目を小さくする」と「ファイルを軽くする」は違う
WordPressの編集画面で画像の横幅を小さくしても、ブラウザが大きな元ファイルを読み込んでから縮小表示する場合があります。
確認したいのは次の三つです。
- 画面上で何ピクセル程度に表示されるか
- 実際に配信される画像の寸法
- 実際に読み込まれるファイル容量
例えば、記事内で横800ピクセル程度に表示する写真へ、スマートフォン撮影の数千ピクセルの画像が常に必要とは限りません。ただし、テーマ、Retina表示、拡大表示、ギャラリー機能によって必要寸法は変わるため、一律の数値で全画像を変換しません。
最初に重い画像を探す
全メディアを一括処理する前に、利用者への影響が大きいページから調べます。
優先するページ:
- トップページ
- 客室・料金ページ
- 料理・温泉ページ
- 看板猫の紹介ページ
- 予約ボタンがあるページ
- 検索やSNSからよく見られる記事
AIやブラウザの開発者機能、PageSpeed Insightsに、画像URL、寸法、容量、表示位置を整理してもらいます。管理画面のメディア一覧だけでは、実際にどのサイズが配信されているか分からない場合があります。
画像形式を内容で選ぶ
JPEG
客室、料理、風景、猫など、色の変化が多い写真に向いています。画質を少しずつ調整しながら容量を減らせます。透過には対応しません。
PNG
透過が必要な図、線や文字がはっきりした画像などに向きます。一般的な写真をPNGで保存すると容量が大きくなりやすいため、必要性を確認します。
WebP
現代的なブラウザで広く利用でき、写真にも透過画像にも使えます。WordPress公式の最適化資料も、より小さくできる現代的形式の候補としてWebPを案内しています。
AVIF
高い圧縮効率を期待できる形式ですが、WordPress、サーバー、画像処理機能、利用中のテーマ・プラグインで正しく作成・配信できるか確認が必要です。名前だけで一括移行しません。
形式を変えれば必ず見栄えが同じになるわけではありません。看板猫の毛並み、料理の色、暗い客室、細かな模様などを実際の画面で比べます。
画質は数字ではなく表示で比較する
圧縮率や品質値は、変換ソフトによって意味が異なる場合があります。「品質80なら安全」と固定せず、同じ写真で複数の候補を作ります。
比較する場所:
- 明るい空や壁のグラデーション
- 猫の毛や畳などの細部
- 料理の赤・緑・白
- 暗い客室の影
- 窓や照明の明暗差
- ロゴや文字が含まれる場合の輪郭
PCの大画面とスマートフォンの両方で確認し、容量削減の効果が小さいのに画質だけ悪くなる候補は採用しません。
WordPressは複数の画像サイズを作る
WordPressはアップロード時に、テーマや設定に応じて複数サイズの画像を生成します。記事内では、ブラウザが画面幅に合う候補を選べるsrcsetやsizesが使われる場合があります。
これにより、スマートフォンへ必要以上に大きな写真を送らずに済みます。ただし、次の場合は正しく活用できていない可能性があります。
- テーマや独自部品が常に元画像を指定している
- HTMLへ画像URLを直接貼っている
- CSSの背景画像として巨大画像を使っている
- 外部ストレージの画像を固定URLで表示している
- 古い記事や移行データで属性が不足している
テーマファイルを直接書き換えず、まず実際のHTMLとネットワーク通信を読み取り確認します。
alt、キャプション、クレジットは別の役割
alt
画像を見られない人へ、画像が伝える内容を簡潔に説明します。キーワードを詰め込む欄ではありません。周囲の文章で十分に説明され、装飾だけの画像では空のaltが適切な場合もあります。
例:
客室の窓辺で座る三毛猫の看板猫
夕食として提供される地元野菜の料理
玄関から受付までの段差
猫の名前や客室名を推測せず、確認できた内容だけを書きます。
キャプション
写真の補足、撮影時期、イメージ画像であること、提供者など、画面上で読者に見せる情報です。
クレジットと利用記録
誰が撮影し、誰が提供し、どこまで利用できるかを管理します。画像を軽くしても著作権や肖像権の条件は変わりません。許諾なく予約サイトやSNSの写真を転載しません。
位置情報と個人情報を確認する
写真ファイルには、撮影日時や位置情報などのメタデータが含まれる場合があります。公開前に、宿泊者、スタッフ、車のナンバー、書類、鍵、管理画面、非公開エリアが写っていないか確認します。
看板猫の写真でも、背景に予約台帳や宿泊者が写っていれば公開できません。AIに画像確認を依頼する場合も、公開してよい複製だけを使い、非公開写真や個人情報を不用意に外部サービスへ送らないようにします。
一枚だけで試す安全手順
1. 対象画像を決める
トップや主要ページで容量が大きく、表示に影響している一枚を選びます。
2. 利用箇所を調べる
記事本文、アイキャッチ、OGP、ギャラリー、背景、予約ページなど、同じ画像が使われる場所を確認します。
3. 元画像とデータを保存する
元ファイル、ファイル名、寸法、容量、alt、キャプション、クレジット、利用ページを記録します。
4. 複製を変換する
元画像を上書きせず、作業用の複製を縮小・圧縮します。向き、色、透過、アニメーションの有無を確認します。
5. 別画像として登録する
最初は既存ファイルを直接置換せず、検証環境または対象ページの複製で比較します。
6. 表示と機能を確認する
- PCとスマートフォンの画質
- 縦横比とトリミング
- 画像リンクと拡大表示
- アイキャッチと記事一覧
- SNS共有時の画像
- alt、キャプション、クレジット
- ページ容量と表示速度
7. 戻し方を残す
問題があれば元画像へ戻せることを確認し、採用後も元ファイルの保管場所を記録します。
一括最適化プラグインを使う前の確認
画像最適化プラグインやCDNには便利な機能がありますが、次を確認せずに全画像へ適用しません。
- 元ファイルを保持するか
- 変換後に元へ戻せるか
- 既存画像も対象になるか
- ファイルURLや拡張子が変わるか
- WebP・AVIF非対応時の代替画像があるか
- 外部サービスへ画像を送信するか
- 無料枠、料金、容量、解約後の挙動
- WordPress、テーマ、キャッシュ、CDNとの重複
- バックアップ対象に含まれるか
- 削除時に生成画像が残るか消えるか
「一括変換前にバックアップ」と書かれていても、復元方法を試していなければ十分とは限りません。検証環境と少数画像から始めます。
AIに任せられること
- 主要ページの画像URL、寸法、容量の一覧化
- 重い画像の優先順位付け
- 形式と圧縮候補の比較
- 変換前後の容量・寸法・画質確認表
- alt候補の下書き
- 利用ページと内部参照の調査
- PC・スマートフォンの表示比較
- 作業記録と戻し方の文書化
AIへ任せないこと:
- 元画像の一括上書き・削除
- 全メディアの無承認変換
- 利用許諾が不明な写真の公開
- 人物・宿泊者情報を含む写真の外部送信
- 内容を見ずにaltを大量生成して確定すること
- バックアップ未確認のメディア置換
コピペで使えるAIへの依頼文
重い写真を調査する
宿のWordPressサイトで、表示速度に影響する画像を調査してください。
まだ画像の変換、置換、削除、プラグイン導入はしないでください。
トップ、客室、料理、看板猫、予約案内ページについて、
画像URL、実寸、表示寸法、容量、形式、利用場所を一覧にし、
改善候補を影響度順に整理してください。
非公開画像、個人情報、認証情報は出力しないでください。
一枚だけ変換案を作る
承認した一枚の元画像を上書きせず、作業用の複製で変換案を作ってください。
表示用途に合う寸法と、JPEG・WebP・AVIFの対応状況を公式資料で確認してください。
各候補の寸法、容量、削減率、画質確認点、想定利用場所を示し、
まだWordPressへ反映しないでください。
反映後を検査する
画像一枚の差し替え後です。設定は変更せず確認してください。
PC・スマートフォンの画質、縦横比、トリミング、画像リンク、
アイキャッチ、記事一覧、SNS共有、alt、キャプション、クレジット、
ページ容量と表示速度を確認してください。
問題時に元画像へ戻せるかも報告してください。
宿主さん向けチェックリスト
- [ ] 元写真とWeb掲載用を分けた
- [ ] 写真の権利と提供条件を確認した
- [ ] 人物・書類・位置情報などを確認した
- [ ] 主要ページの重い画像を調べた
- [ ] 見た目の寸法と実ファイルを区別した
- [ ] 写真内容に合う形式を選んだ
- [ ] 元画像を上書きせず一枚で試した
- [ ] PCとスマートフォンで画質を確認した
- [ ] アイキャッチ、一覧、SNS共有を確認した
- [ ] alt、キャプション、クレジットを確認した
- [ ] 予約・問い合わせへの影響を確認した
- [ ] 元へ戻す方法を記録した
- [ ] 一括変換前に検証環境と復元方法を確認した
サイト全体が遅い原因は宿のWordPressが重い・遅いときの調べ方、公開前の画像権利確認はAIで作った記事を公開する前のチェックリストを参照してください。
参考にした情報
- WordPress公式：パフォーマンス最適化
- WordPress公式：メディアの編集
- WordPress公式：画像ブロック
- WordPressアクセシビリティ：画像の代替テキスト
- web.dev：適切な画像形式を選ぶ
- web.dev：レスポンシブ画像を配信する
まとめ
宿サイトの写真は、軽さだけでなく、客室、料理、看板猫の魅力を正しく伝える品質が必要です。元写真を守り、重いページの一枚を複製して、寸法、形式、画質、容量を比較します。
AIは画像一覧、変換候補、alt下書き、変更前後の比較を助けられますが、元画像の削除、全画像の一括変換、権利判断は任せません。速度だけでなく、PC・スマートフォン・SNS・予約導線まで確認してから対象を広げてください。
