1. 公式資料から分かる、写真の準備で分けたいこと
Googleの画像検索の案内は、代替テキストだけでなく、関連する本文、ファイル名、画像の埋め込み方も扱っています。W3Cの判断フローは、その画像がページ内で何を伝え、何に使われるかによって、代替テキストを判断しています。
両方を読むと、検索語を足す前に、写真とページの役割を決める必要があると考えられます。以下は公式資料の要点と、それを素材準備に使うためのhirostaの提案です。
| 公式資料で確認した点 | 準備・確認への使い方（提案） |
|---|---|
| Googleは画像の説明や掲載ページの内容も理解の材料にする | 写真だけを送らず、掲載ページと近くに置く本文を一緒に渡す |
| Googleは簡潔で内容が分かるファイル名を推奨し、代替テキストのキーワード羅列を避けるよう案内 | ファイルの識別と、読み手への説明を分ける。地域名・サービス名を機械的に足さない |
| W3Cは、情報を伝える画像・装飾・操作やリンクを担う画像を区別する | 同じ写真でも使う場所ごとに、説明が必要か、リンク先を伝える必要があるかを決める |
ページごとの原稿・写真を集める段階はHP制作の素材準備で扱っています。この記事は、選んだ写真を掲載するための説明と、制作側への受け渡しに絞ります。
2. 写真ごとに、掲載先・説明・許可を一つの表で管理する
まず写真に素材IDを付け、掲載予定のページと位置を決めます。同じ写真を複数のページで使うなら、掲載先ごとに用途と説明を記録します。元の写真は保管し、公開用の加工版と対応させましょう。
| 項目 | 残す内容 |
|---|---|
| 素材ID・版 | 元写真と公開用ファイルを結び付ける番号、加工・差し替えの版 |
| 掲載先と目的 | 商品詳細、施工事例などのページと位置。読者に何を伝えるか |
| 代替テキスト案 | その位置で伝える内容。装飾なら空にする理由、リンクなら行き先も確認 |
| 周囲の本文・キャプション | 商品名・確認済みの仕様、工事の対象・条件など。根拠の確認先も残す |
| 公開用ファイル名 | 内容を識別できる短い名前。非公開の顧客名・管理番号は入れない |
| 掲載条件 | Web掲載・加工・クレジット等の確認状態、根拠の保管場所、確認者・日付 |
| 実装と確認 | 制作担当、設定欄、PC・スマホでの確認結果、未確認の点と次の担当 |
掲載許可の記録や契約書を、そのまま公開用フォルダーへ入れません。人物、表札、車両番号、顧客の書類などの写り込みも確認し、条件が未確認なら掲載候補から外して確認待ちにします。権利や契約上の利用条件の調べ方は素材の出典と利用条件の記事へ進んでください。表を埋めるだけで、法的に掲載できると確定するものではありません。
3. 代替テキストは、写真の役割に合わせて書く
代替テキストはHTMLの alt 属性へ設定する文です。画面上で写真の下に見えるキャプションとは別で、両方の入力欄があるCMSもあります。どの欄がどこへ反映されるかを制作担当に確認します。
商品・施工の内容を伝える写真
そのページで必要な情報を短く書きます。写真から分からない性能、耐久性、工期や顧客の評価を付け足しません。次は写真を使わない、説明用の文案例です。いずれも架空の想定で、実物の評価ではありません。
| 写真の想定 | 避けたい案 | 内容を伝える案 |
|---|---|---|
| 商品詳細に置く収納棚の正面写真 | 収納棚 格安 おすすめ 通販 | 白い収納棚の正面。上段は扉付き、下段は引き出し |
| 施工事例の手すり設置後の写真 | 工事完了・安心安全 | 玄関の段差に沿って設置した手すり |
商品写真で確認できる形や色は代替テキストへ、サイズ・材質・対応条件などの確認済み情報は本文へ分けます。施工の前後を並べる場合は、それぞれが施工前・施工後のどちらか分かる説明を添え、何を変えたかを近くの本文にも書きます。
「滑りにくくなった」「安全性が向上した」といった効果は、写真だけからは確定できません。根拠がなければ、施工した箇所と内容の説明にとどめます。
装飾と、リンクになっている写真
雰囲気を添えるだけで情報を伝えない画像は、W3Cの判断に沿って alt="" とする場合があります。空の値を設定することと、属性を付け忘れることは別です。商品や施工内容を伝える写真を、検索語が思い付かないという理由で装飾扱いにしません。
W3Cのリンク画像の説明では、画像だけがリンクの場合、行き先や操作を伝えます。商品一覧の写真だけが詳細ページへつながるなら、商品名と詳細へ進むことが分かる案を考えます。同じリンク内に商品名などの文字があり、それで役割が伝わる場合は、重複した読み上げを避ける判断もできます。写真が別リンクか、文字と一つのリンクかを制作担当と確かめましょう。
AIに案を作らせる場合も、入力してよい写真・資料に限定します。AIが推測した商品名や施工効果は採用せず、担当者が写真と確認資料を見て直します。AIの利用は必須ではありません。
4. 想定シナリオ：設備工事会社が手すりの施工写真を掲載する
架空の設備工事会社が、施工前後の写真を事例ページへ追加する、未実施の想定シナリオです。説明の準備方法を示す例で、写真の作成・加工や、実サイトへの反映は行っていません。
現場担当が工事内容、窓口担当が掲載条件を確認し、Web担当が制作会社へ渡すとします。管理画面のイメージは、素材IDごとに公開用ファイル名・代替テキスト・本文・掲載状態が並び、「確認待ち」を絞り込める一覧です。
| 項目 | 記入例 |
|---|---|
| 掲載先・目的 | 手すり工事の事例ページ。玄関のどの範囲に設置したかを伝える |
| 公開用ファイル名 | entrance-handrail-before.jpg と entrance-handrail-after.jpg |
| 代替テキスト案 | 「施工前：手すりのない玄関の段差」「施工後：玄関の段差に沿って設置した手すり」 |
| 近くに置く本文案 | 「玄関の段差に沿って手すりを設置した例です」。実際の掲載時は現場担当が施工記録と確認する |
| 掲載条件と状態 | 写真の撮影者・掲載先・加工条件は確認待ち。掲載保留とし、窓口担当が確認する |
| 公開前の確認 | 許可を確認した加工版か、表札等が写っていないか、スマホで手すりが切れないかを人が見る |
ファイル名は説明用の案です。既に公開している画像を、名前を整えるためだけに一斉に変更する手順ではありません。変更が必要なら、参照するページや画像URLへの影響を制作担当と確認します。
この例では、説明文が完成しても掲載条件が未確認なので公開しません。確認が間に合わなければ、写真を使わない構成や、別の許可済み写真で伝えられるかを相談します。許可があるはずだと推測して進めないことが、人の判断点です。
5. 制作会社には、入力欄と実際の画像表示を確認する
写真と説明を渡したら、制作側に次を確認します。Googleの案内では、img の src で画像を検出でき、CSSの背景画像はインデックス登録しないと説明しています。内容を伝えたい商品・施工写真が、見た目だけの背景として置かれていないかを確かめる理由になります。
- 説明の反映先：代替テキストが該当する画像の
altへ入り、キャプションと混同されていないか。CMSのタイトル欄だけを埋めて完了にしない。 - 画像の埋め込み方：内容を伝える画像がHTMLの画像要素として出力されるか。画面幅別の画像を使う場合も
srcがあるかを制作担当が確認する。 - PC・スマホの見え方：伝えたい部分が切れていないか、施工前後の区別と説明の対応が分かるか、本文が読みやすいかを確認する。
- 画質と読み込み：必要な部分を見分けられる画質か、過大な画像で表示を待たされないかを確認する。全写真に一律の容量や寸法を指定せず、掲載枠と用途に合わせて調整する。
- リンクと公開対象：画像を押した先が正しいか、説明と写真の版が一致するか、確認待ちの写真・非公開の元資料が含まれないかを確認する。
代替テキストは通常の画面を眺めるだけでは確認できません。制作担当に出力されたHTMLやブラウザーの開発者ツールで該当画像の値を確認してもらいます。読み上げでの使いやすさを確認する場合は、文字と写真が同じ説明を繰り返していないか、リンク先が理解できるかも確かめます。
公開後は担当を決め、対象ページと画像が表示されるか、説明やリンクが公開候補と一致するかを確認します。検索に出るかの切り分けはGoogle検索の登録状況と公開設定の確認で扱っています。説明を整えたことだけで、画像検索への掲載や順位・問い合わせの増加は保証できません。
6. 費用と期間は、写真の枚数と確認・実装を分けて考える
見積りは、既存写真の選定、追加撮影、許可の確認、写り込みの加工、説明文作成、CMSやテンプレートの改修、PC・スマホの確認に分けて相談します。同じ枚数でも、公開条件が確認済みか、代替テキストを入力できる仕組みがあるかで作業が変わります。
期間は、文章を書く時間に加え、撮影者・顧客等への確認待ちと制作・表示確認の工程を分けます。固定の納期や費用を例から約束せず、最初は一つの商品・施工事例を選び、必要な欄と確認担当がそろうかを確かめてから対象を広げましょう。
素材の整理を業務として続ける方法は書類・文書整理のガイドと文書整理の支援、支援範囲と料金はサービス案内をご覧ください。説明や掲載の確認が止まっている場合も、相談窓口から今の状況をお聞かせください。