目次
alt属性とは？
画像の alt 属性とは、画像の内容を説明する文章 のことです。
検索エンジンは画像を直接理解できないため、
alt の内容を手がかりに画像の意味を判断します。
また、視覚障害者のスクリーンリーダーも alt の内容を読み上げます。
alt属性を「入れるべき」場合
① 意味のある写真（人物・施設・商品など）
画像そのものが内容に関係する場合、alt は必須です。
<img src="room.jpg" alt="明るく広い支援ルームの写真">理由：
- 画像の意味を正確に伝えるため
- SEOで内容を正確に理解してもらう
- 画像検索にも有利
② グラフ・図解・チャート
データを伝える画像は、説明文が必要です。
<img src="graph.png" alt="利用者数の推移を示した折れ線グラフ">③ ボタン画像や誘導バナー
画像がリンクになっている場合、リンク先の意味を alt に書きます。
<a href="/contact/">
<img src="btn_contact.png" alt="お問い合わせはこちら">
</a>④ 文字を含むキービジュアル
キャッチコピー入りのメインビジュアルは alt を設定します。
<img src="mv.jpg" alt="一人ひとりに寄り添うBrightCare Kidsのメインビジュアル">alt属性を「入れない」べき場合（＝alt=""）
① 飾り目的の画像（装飾・区切り線など）
意味のない装飾画像には alt は不要。
alt="" にするのが正しい方法です。
<img src="deco_triangle.svg" alt="">② CSSの background-image
背景画像は alt の対象外です。
.hero {
background-image: url(bg.jpg);
}③ 意味を持たないアイコン（例：矢印・点・装飾記号）
装飾アイコンは alt=""。
<img src="arrow.svg" alt="">※ただし「電話」「地図」など意味を持つアイコンは alt が必要。
alt属性でやってはいけないNG例
キーワードの詰め込み
<img src="room.jpg" alt="放課後デイサービス 発達支援 放デイ 施設 千葉 子ども 支援 BrightCare Kids">→ スパム扱いになり逆効果。
意味のない alt
<img src="room.jpg" alt="image">→ ユーザーにもGoogleにも何も伝わらない。
alt を書かない（属性ごと欠落）
<img src="room.jpg">→ SEO面でもアクセシビリティ面でもNG。
alt属性を書くときの重要ポイント
- 画像が伝えたい意味を 一言で自然に
- 不自然なキーワードの羅列はしない
- 飾り画像には alt=""
- 内容が文章と重複しすぎる場合は簡潔に
- 画像検索も意識する（商品・スタッフ写真など）
alt属性の実例まとめ
| 画像の種類 | altが必要？ | 理由 | 正しいalt例 |
|---|---|---|---|
| 施設の外観写真 | ○ | 内容が重要 | 「BrightCare Kidsの施設外観」 |
| スタッフ写真 | ○ | 情報として必要 | 「支援スタッフの写真」 |
| グラフ | ○ | データ画像だから | 「利用者数の推移グラフ」 |
| お問い合わせボタン | ○ | 目的を伝える | 「お問い合わせはこちら」 |
| 区切り線 | ✕（alt=""） | 飾り | alt="" |
| 背景画像 | ✕ | CSS画像 | — |
| 意味のないアイコン | ✕（alt=""） | 装飾 | alt="" |
まとめ
- 意味のある画像 → altを書く
- 飾り画像 → alt="" にする
- alt は SEO とアクセシビリティに大きく影響
- キーワード詰め込みは逆効果
- 正しく alt を設定することで、ユーザーにもGoogleにも伝わるサイトになる
alt は
「画像の意味を自然に説明するだけでOK」
というシンプルなルールが最強です。