ホームページの写真を整える｜サイズ・容量・スマホでの見切れを確認

情報確認：2026年11月9日 ／ SIRIUS2編集部

外観や作業風景の写真を選ぶときは、読者に見せたい情報を一つ決めます。入口が分かる写真と、トップに使う横長の写真では、残したい範囲が違います。元の画像を残したまま、掲載場所ごとに切り抜き、寸法・容量・実際の表示を確かめる手順を紹介します。

掲載したい画像を一度並べ、読者が写真から何を判断できるか書き出します。来店案内なら、外観の雰囲気に加え、どこから入るかが分かる写真が役立ちます。教室の案内なら、参加者が座る場所や作業台の広さが分かる場面を選べます。サービス紹介なら、使う道具や作業の一部を具体的に示す画像があると、文章を読み進めやすくなります。

実物の確認が目的の箇所には、現在の外観や提供内容を撮った素材を選びます。撮影できていない場合は住所や経路を文章で示し、写真が用意できた段階で追加します。架空の店や作業風景を描いたイラストは、一般的な解説や例で使い、図の役割が分かる説明を添えます。店舗で掲載する情報は店舗ホームページの案内例から整理できます。

同じ外観でも、正面の写真は店を見つける案内に向き、斜めから店内が見える写真は雰囲気を伝える用途に向きます。撮り直す前に掲載枠の大きさを知り、どの範囲を見せるかを決めておくと、必要な構図を選べます。事業の説明に何枚も似た画像を入れるより、一枚ずつ、読者の判断に役立つ理由を持たせます。

自社で撮影した写真でも、人物の写り込み、顧客の情報、店内掲示の内容を確認します。関係者が分かる写真を使う場合は、どのページにどの目的で掲載するかを伝え、事業で定めた手順で許可を確かめます。公開に使わない画像や個人情報が写った元データは、作業用の置き場所と閲覧できる人を分けます。

使えるか判断できない素材は、差し替え候補と分けて管理します。公開前に、位置情報など元画像に付く情報も必要に応じて確認します。素材台帳に「掲載ページ」と「取り下げるときに確認する場所」を一行ずつ残しておくと、記事カードや本文など複数箇所で使った画像も探しやすくなります。

掲載期間や使用先が決まっている提供素材は、トップの画像とSNSの告知に使うなど、実際の使い方が許可に含まれるかを確認します。素材を外したときに意味が通らなくなる説明は、先に文章を更新します。公開した画像を再利用するときは、使い始めた当時の記録と、今回の使用範囲を両方照合します。

比率は横幅と高さの関係、寸法は画像ファイルの横・縦のピクセル数、容量は保存・転送するファイルの大きさです。画面上の表示幅は、同じファイルでも端末やページの枠で変わります。テンプレートが枠いっぱいに表示する設定なら、一部が切れる場合があります。

1. 掲載枠を開くトップ、カード、本文で、枠の縦横と切れ方を確認します。
2. 残す場所を決める入口、人物の手元、商品など、意味が通じる範囲を指定します。
3. 元画像の複製を調整枠に近い比率で切り、必要な寸法へ書き出します。
4. 表示を見直すPCとスマホで、重要な部分が残っているかを確かめます。

たとえば入口の写真を横長に切ると、扉と看板は入っても足元の段差が消えることがあります。アクセス案内では入口と段差を一緒に残し、トップの見出し画像とは別の切り取りを使います。人物を載せる場合も、スマホ幅で顔や手元が切れないように被写体の周りに余白がある素材を選びます。文字入りの画像にしか営業時間が書かれていない場合は、同じ情報を本文でも読めるようにします。

切り取りに迷ったら、中心が異なる二案を用意して、本文の横幅で並べて見ます。顔を残す必要がある画像でも、作業方法を見せる説明なら手元が残る案に分けられます。スマホで横長の画像が縮んで大事な部分が小さくなる場合は、図を大きく見せる画像を本文で使い、トップでは全体の雰囲気を伝える使い方にします。

ここでは、このガイドで使ったイラスト1点を使い、元のPNGと掲載用のJPEGを比べます。近い縦横比の元画像を16対9に合わせて縮小し、JPEG品質設定88で保存した例です。数字はこの画像を作業時にファイルで計った値です。

この例では寸法と形式を同時に変えています。実際の写真を調整するときは、看板の文字や人物の輪郭がにじまないか、明るい面の境界に気になる模様が出ないかを掲載サイズで確認します。透明な背景が必要な素材では、透明を保持できる形式を選びます。ファイル名、寸法、容量、書き出し条件を残すと、次の変更時に同じ条件で比べられます。

容量の比較は、元データと掲載用を同じフォルダーで見分けられるようにし、表示幅をそろえて比べます。手順を変えるなら、一度に一つずつ試し、例えば寸法だけ変えた版と、圧縮設定を変えた版を分けて保存します。小さい文字や細い線が多い画像では、サイズを落としたときの読みやすさも見て、必要なら説明をHTMLの文字で補います。

代替テキストは、画像が見えないときにも、そのページで画像が伝えることを理解できるように書きます。アクセス案内で段差が重要なら「店舗入口は歩道から一段上がった位置」のように、案内に必要な内容に絞ります。画像と直前の文章で同じ説明を繰り返す場合は、画像に独自の情報があるかを考えます。飾りとして置き、周囲に必要な説明が揃っている画像には空の代替テキストを指定する方法があります。

画像を押すと別のページが開く場合は、画像や同じリンク内の文字から行き先を判断できるようにします。アクセスや営業日といった大事な情報は、画像だけに置かず、テキストでも確認できる位置にします。画像を差し替えたら、ファイル名だけでなく、説明が新しい内容と合っているかも見直します。

説明の書き方は文脈で変わります。同じ店の写真でも、入口案内では段差や扉の目印が重要で、記事カードでは横に記事名があるため写真の繰り返しが不要な場合があります。説明する情報を先に決め、表示されている見出しに含まれる語を繰り返すだけの説明になっていないか読み直します。

• ページを開き、画像の前後の見出しだけで読者が何を見るべきか分かる。
• スマホで見出し・カード・本文を開き、入口や手元が想定どおり見える。
• ファイル名、寸法、容量、許可の控えを残した。
• 差し替え前後で、画像リンクと代替テキストを確認した。
• 画像がなくても、予約・電話・来店に必要な情報を本文で読める。

複数ページの画像を一度に更新したときは、記事本文に加えてトップやカテゴリーのカードも確認します。点検の順番はスマホ表示の確認、公開前の記録は公開チェックリストにまとめています。公開後に再調整するときのために、元画像は編集用の保管場所に残します。

確認した人は、どの画面幅と端末で何を見たかを控えます。テンプレートを変えた場合は、以前の画像の寸法が同じでも新しいカードの比率が異なることがあります。掲載後に調整した画像は元と区別した名前で保存し、古い画像が別ページに残っていないかを確認します。

確認に使った資料

• W3C WAI｜画像の代替テキストと装飾画像
• Google 検索セントラル｜画像と掲載ページのベストプラクティス

2026年11月9日確認。条件や料金は、利用前に最新の公式案内を確認してください。