歯科SEOの画像選びと画質確認｜制作会社への依頼と確認方法 - 歯医者（歯科）専門のホームページ制作「歯科ラボ」

表示用途とviewport・DPR・画質条件を固定する

医院の写真がぼやける、端末によって違う画像が表示されるといった相談では、制作会社へ「高画質にしてください」と伝えるだけでは修正対象を決められません。まず対象ページのURLと画像の用途を決め、どの表示条件で、どの状態を期待するかを共有します。ここで確認するのは、ブラウザに配信される画像ファイルです。

表示条件として記録するのは、viewport（ページの表示領域の幅と高さ）、DPR（CSS上の1ピクセルに対応する端末の画素数の比率）、ズーム率です。画面上の表示寸法（display dimensions／CSS指定値）と、元画像の自然寸法（natural dimensions／intrinsic dimensions）も区別して記録します。制作担当に測定を依頼する場合は、対象URLと画像の位置を添え、数値と確認時の画面を同じ記録票に残してもらいます。

例えば、医院紹介の大きな写真と、スタッフ一覧の小さな写真では、確認したい細部が異なります。画像の用途を踏まえ、何が見分けられる必要があるか、ぼやけや輪郭の崩れをどこまで許容するかを院内で確認します。実際の表示寸法で確認できる見本画像を用意すると、制作担当との判断の違いを減らせます。特定の数値だけを全画像に当てはめず、用途別に院内承認した画質基準を確定し、見本とともに文書化・共有してください。

期待する画像リソースの条件を明確に設定し、制作担当者と共有します。配信予定の元画像の寸法、画像フォーマット、用途ごとの画質基準を判断基準として固定します。画面上の表示寸法と元画像の自然寸法を照合し、想定する表示で必要な細部を確認できるか整理してください。実測前の欄は空欄のままにせず「未測定」と記載し、期待値と測定値を混同しないようにします。

依頼票には「対象URL・画像の用途・viewport・DPR・ズーム率・表示寸法・元画像の自然寸法・承認画質基準・配信する画像の条件」をまとめます。確認担当と院内の承認者を決め、制作担当へ共有してください。この段階では配信成功を判定せず、次の比較に使う条件と期待状態を固定します。画質基準が決まらない場合は、見本の確認を院内へ戻し、条件確定を待ちます。

画像ファイルの候補と配信条件を比較して選択する

条件を固定したら、ブラウザが選んだ画像と、実際に返された画像を比較します。currentSrcはブラウザが選択した画像のURLです。ただし、その値があることだけでは、画像の読み込み成功や画質基準への適合は確認できません。医院担当者が開発者ツールを使えない場合は、以下の記録を制作担当へ依頼します。

まず対象URLを指定したviewport・DPRで開き、currentSrcとNetwork欄の実際の応答を照合します。選択URLに対応するリクエスト、HTTP応答、Content-Type（返されたデータの種類）、画像内容を確認してください。取得失敗や想定外の画像があれば、そのURLと応答を修正依頼へ添えます。currentSrcだけで成功と見なさず、実際に取得された画像ファイルを確認する手順です。

次に、srcset（画像候補の一覧）、sizes（表示幅の指定）、picture（条件に応じた画像の切り替え）の設定を確認します。これらが使われているか、固定した表示条件でどの候補が選ばれる設定かを制作担当へ照会します。使われていない項目は、その状態を記録してください。設定に書かれた候補とcurrentSrc、実際のネットワーク応答が一致しているかを照合し、不一致なら候補URLと該当する配信条件を修正対象として切り分けます。

配信された元画像の自然寸法（natural dimensions）と画面上の表示寸法を比較し、フォーマットや実画像の画質を院内承認済みの画質基準と照合します。ピクセル数が多いだけで採用せず、写真の用途に必要な細部や輪郭を、合意した見本と比較してください。寸法やフォーマットの記録と、目視で確認した結果を分けて残すと、制作担当へ修正理由を説明しやすくなります。

比較結果に基づき、基準に合わなければ画像候補・配信条件の修正、適合すれば現状維持、判断に必要な測定や承認が足りなければ確認待ちと判断します。実応答や承認画質基準が未取得なら成功とは判断せず、追加確認が必要と記録します。修正依頼には対象画像、選択URL、応答、基準との差、修正を求める候補や条件を添え、不明な設定値を医院側で推測しないようにしてください。

実際に配信された画像と表示品質を再確認する

制作担当から修正完了の連絡を受けても、その連絡だけで確認を終えないでください。同じviewport・DPR条件で、同一URLの修正前後の画像を再照合します。ズーム率も揃えてください。条件が異なると、画像候補の切り替わりと修正の効果を区別しにくくなるため、最初の記録票を使って表示条件を再現します。

修正前後のcurrentSrc、画像URLと実際のHTTP応答を比較します。Network欄で対象リクエストの応答とContent-Type、返された画像内容を照合し、指定した画像が配信されているか確認してください。元画像の自然寸法と表示寸法、フォーマットも記録します。同じ表示条件の実画像と見本を比較し、院内承認した画質基準への適合を確認します。URLが一致するだけで完了とせず、応答と画質の確認結果を合わせて判断します。

修正前後の画面を保存するときは、対象画像と表示条件が分かるようにしてください。院内の担当者は見本との違いを確認し、制作担当は実応答と設定変更の対応を確認します。基準に合わなければ、不一致の箇所と確認した条件を添えて再調整を依頼します。ここでは新しい候補選びを繰り返すのではなく、依頼した修正が期待状態に合うかを確かめます。画像の確認結果をサイト全体の改善方針と整理する際は、歯科SEOの基本と改善方法も参考にしてください。

確認日・担当者・対象URL・表示条件・修正前後の画像URLと応答・画質の確認結果・未確認事項を記録します。未確認事項がある場合は、確認待ちの理由と次の確認担当も残してください。例えば実応答を取得できなかった場合は、その項目を「未取得・確認待ち」とし、画質だけを見て配信確認まで完了したとは扱いません。院内承認が済んでいない場合も同様に分けて記録します。

キャッシュの影響が疑われる場合は、修正前後で読み込み条件が揃っているかを制作担当へ確認します。再読み込みなど条件を変えて調べた結果は、最初の比較とは別に記録してください。画像更新やサイト改修の際にも、この記録を基に同条件で再確認すれば、修正対象と残った確認事項を引き継げます。

本記事の確認範囲は画像の配信条件と表示品質です。LCPの改善とalt作成は対象外です。検索順位を保証しません。