C-23. 画像にalt属性（代替テキスト）を入力する
ブログ記事や本文に画像を挿入する際、必ず入れてほしいのが alt 属性（代替テキスト） です。これは画像を「文字で説明する」ための情報で、SEO とアクセシビリティの両面で重要です。
1. alt 属性とは？
alt は “alternative text（代替テキスト）” の略で、画像が表示できない時に代わりに表示される文字 のことです。次のような場面で使われます：
- 検索エンジン（Google など） が画像の内容を理解する際の手がかり
- 音声読み上げソフト（視覚障がい者向け）が画像を音声で説明する際
- 通信状況が悪く画像が表示されない時 のテキスト表示
- 画像検索結果 にヒットする可能性が上がる
2. なぜ重要なのか？
- SEO: Google は alt テキストで画像の内容を理解します。記事のテーマに合った alt は 記事全体の SEO 評価 にもプラスです
- アクセシビリティ: 視覚障がいのある方も含め、全ユーザーが情報にアクセスできるようになります（WCAG 準拠）
- 法的要件: 一部の業種・公共機関ではアクセシビリティ対応が義務化されています
3. CMS で alt を入力する方法
ブログ記事の本文に挿入する画像の場合
- 本文エディタで画像をクリック
- 表示される設定パネルの 「Alt text」 または 「代替テキスト」 欄に説明を入力
- Save をクリック
実画面例: 本文内の画像を選択し、画像の内容を説明するAlt textを入力します。
アイキャッチ画像（サムネイル）の場合
- CMS のアイテム編集画面で、アイキャッチ画像をクリック
- 「Alt text」 欄に説明を入力
- 記事を保存（Save Draft または Publish）
実画面例: アイキャッチ画像にも、画像の目的が分かる短いAlt textを設定します。
4. 良い alt の書き方
- 画像の内容を簡潔に説明する（10〜80文字程度）
- 記事のキーワードを自然に含める（無理にキーワード詰め込みはNG）
- 「画像」「写真」という言葉は不要（「〜の写真」のように書かない）
- 装飾目的だけの画像は空欄でもOK（読み上げ時にスキップさせる）
例
| 画像 | NG な alt | OK な alt |
|---|---|---|
| 大阪城の写真 | 画像 | 大阪城の天守閣を桜と共に撮影した写真 |
| 製品のロゴ | logo.png | IGNITE 株式会社のロゴ |
| 装飾の波線 | 波 | （空欄でOK） |
5. よくある質問 (Q&A)
Q. alt を入れ忘れるとどうなりますか？
サイトは正常に動きますが、検索エンジン評価とアクセシビリティが下がります。全画像に入れる習慣 をつけましょう。
Q. 同じ記事に複数の画像がある場合、それぞれに違う alt を入れるべきですか？
はい。各画像の内容に応じて個別に 入力してください。同じ alt を使い回すのは避けましょう。
次のステップ: 記事の公開順を変えたい場合は次へ進みましょう → 「CMSアイテムの表示順を並び替える」