お店の写真がスマホだと切れる。店主から制作者へ送る確認メモ

パソコンでホームページを見ると、お店の看板も入口もきれいに写っている。ところがスマホで開くと、店名の端が切れたり、入口が画面の外へ消えたりする。

同じ写真なのに、なぜ見え方が変わるのか。今回は、店舗ホームページの写真を確認する店主さん向けに、制作者へ渡せるメモをまとめる。説明に出てくるカフェとファイル名は仮想例だ。実店舗の撮影・修正実績ではない。

僕は、いきなり写真を小さくして送り直す前に、「何を必ず見せたいか」と「どの画面で切れたか」を分けたい。写真そのものと、ホームページで写真を見せる枠は、別々に確認する必要がある。

1　写真の問題と、表示する枠の問題を分ける

元の写真には看板が全部写っていても、横長の写真を縦に近い枠へ入れると、上下や左右の一部を見せない設計になることがある。

Googleのweb.dev「レスポンシブ画像」では、画像の比率を保って枠へ収める方法と、枠を埋めるために画像を切り抜く方法を説明している。object-fitのcontainとcoverは、その違いを扱う仕組みだ。切り抜き位置を調整するobject-positionも案内されている。2026年10月21日に公式本文を確認した。

この説明から、僕は「写真を送ったのだから全部見えるはず」と決めつけず、表示する枠も確認する。その判断は、個別のサイトの原因を断定するものではない。原因が画像設定なのか、テーマの仕様なのかは、現物を見て確かめる。

2　元写真を残し、必ず残す場所を一つ決める

手順の一つ目は、加工していない元写真を残すこと。小さくした写真しか残っていない状態を避ける。画質の落ちた画像を後から拡大しても、元の細部が必ず戻るわけではない。

二つ目は、写真の役割を一文にすることだ。

仮想例なら、「初めて来るお客さんが、道路から店の入口を見つけるための写真」。この目的なら、料理のアップより入口と看板の位置が大切になる。逆に料理紹介の写真なら、皿の全体や商品の特徴を優先したい。

ここで「写真の全部を、すべての画面で同じ大きさに見せる」と頼むと、余白や高さとの調整が必要になる。残したい場所の優先順位を伝えた方が、制作者も代案を出しやすい。

3　公開ページを、スマホとPCの両方で見る

三つ目は、画像ファイルだけでなく、実際に写真が置かれたページを見ること。制作者の編集画面だけで確認を終えない。

スマホは縦向きでページを開き、写真の上端・下端・左右を見る。PCでも同じページを開き、看板、入口、人物など、重要な部分が残っているかを比べる。端末の機種、ブラウザー、見た日時もメモしておく。

仮想の確認結果はこう書ける。

ページ：トップの店舗紹介

元写真：shop-front-01.jpg

役割：道路から入口を見つけてもらう

必ず残す場所：入口の扉と、その上の看板

スマホ縦向き：看板の右端が切れる

PC：看板も入口も見える

確認日時：○月○日 ○時

希望：スマホでも店名と入口を同時に見せたい

「なんか違う」だけよりも、直すべき場所が伝わる。スクリーンショットを送る場合は、個人の通知や他のタブが写っていないことも確認する。

4　修正の選択肢を、制作者と比べる

四つ目は、原因に合う修正を選ぶことだ。僕なら、まず次の三案を相談する。

A：元写真は同じまま、見せる中心を入口側へずらす。

B：写真全体が見えるよう、枠の比率や余白を調整する。

C：スマホ用に別の切り取りや写真を用意する。

どれが正解かは、写真とページの役割しだいだ。中心をずらすと別の大切な場所が切れるならBやCを検討する。全体を見せると看板が小さくなるなら、店名を画像の中だけに頼らず、本文にも表示できるか相談する。

写真を見せる設定と、ファイルの容量や読み込みの速さも別の問題だ。切れ方を直しただけで「表示が速くなった」とは言えない。速度の改善を頼むなら、別に測定方法と対象ページを決めたい。

そのまま送れる依頼文と、確認の終え方

制作会社へ送るなら、次の文章を使える。

「トップの店舗写真を、スマホ縦向きで確認したところ、看板の右端が切れています。元写真では全体が写っています。入口と看板を優先して残したいです。切り抜き位置の変更、枠の比率の変更、スマホ用画像の用意のうち、適した方法と追加費用の有無を教えてください。修正後はスマホとPCの両方で確認したいです。」

成功の条件は、「写真が入った」ではなく、決めた端末で、来店に必要な場所が見えること。修正後は同じページ・同じ向きで見直し、直った場所と残る問題をメモする。

スマホだけ直ってPCで入口が消えたら、完了にしない。変更前と後の両方を比較して、次の調整へつなげる。

今日の一歩

お店のホームページをスマホで開き、最初に見える写真を一枚選ぼう。「お客さんに何を見つけてもらう写真か」を一文で書き、その場所が切れていないかを見る。

neneへWeb制作を相談するときも、写真の好みだけでなく、この一文があると話を始めやすい。元写真や未公開素材を最初から全部送る必要はない。目的と困っている表示、今ある素材の種類を教えてほしい。

店舗と小さな会社のWebを、実際に使える形へ。続きも読みたい方はフォローをどうぞ。

ココナラの合同会社neneの出品サービスから、購入前にご相談いただけます。

参考資料：Google web.dev「レスポンシブ画像」（2026年10月28日再確認）。

制作相談はこちら（ココナラ内）

https://coconala.com/services/4426958