ブログ記事の画像の入れ方とalt属性の書き方

ブログ記事の画像は、「文章だけでは伝わりにくい内容を補う」ために入れます。飾りとして入れるより、手順の画面、比較の図、データのグラフなど、読者の理解を助けるものを優先します。画像には、内容を言葉で説明する alt 属性を設定し、ファイルは読み込みが遅くならないよう軽くしておきます。

画像は読みやすさを高める一方で、使い方を誤ると、表示が遅くなったり、権利の問題が起きたりします。基本をひととおり押さえておきましょう。

画像を入れる目的を決める

画像を入れる前に、その画像が読者にとって何の役に立つのかを考えます。目的は、おもに次のようなものです。

• 操作の画面を示して、手順を迷わず進められるようにする
• 数字の変化や比較を、グラフや図で直感的に伝える
• 長い文章の区切りに、視覚的な休憩を入れる
• 記事の内容を象徴する画像で、記事の印象を整える

目的が「なんとなく寂しいから」だけなら、入れなくても構いません。関係のない画像は、読み込みを遅くし、読者の注意をそらします。

特に、手順の説明では、画面のスクリーンショットがあると理解が大きく進みます。文章だけで「右上のメニューから」と説明するより、画像で示したほうが、迷う人が減ります。

入れる場所と枚数の目安

画像は、説明している文章の近くに置きます。手順の説明なら、その手順の文の直後に置きます。関係のない場所に置くと、どの説明の画像かがわかりにくくなります。

枚数に決まりはありません。1,000字に1枚程度を目安にしつつ、内容に応じて増減させます。画像だけが並んで、文章が少ない状態は避けます。

記事の最初に置く大きな画像（アイキャッチ画像）は、記事の印象を決めますが、本文の冒頭の答えを押し下げすぎないようにします。スマホで開いたときに、画像が画面の大半を占めて、本文が見えないという状態は避けたいものです。

alt 属性の書き方

alt 属性とは、画像の代わりに表示される説明文のことです。画像が表示されないとき、目の見えない方が読み上げソフトを使うとき、検索エンジンが画像の内容を理解するときに使われます。

書き方の基本は、画像の内容を短い言葉で説明することです。

• 悪い例：「画像1」「image」「スクリーンショット」
• 悪い例：検索語を詰め込んだ長い文
• よい例：「Search Console のクエリ一覧画面。表示回数の列で並べ替えている」

飾りだけの画像で、説明する内容がない場合は、alt を空にしておく方法もあります。空にしておくと、読み上げソフトが飛ばしてくれます。

検索語を無理に入れる必要はありません。画像の内容に、検索語が自然に関係するなら入れてよい、という程度に考えます。

ファイルサイズと形式

画像が重いと、ページの表示が遅くなり、読者が離脱する原因になります。特に、スマホで通信が遅い環境では影響が大きいでしょう。

軽くするための基本は、次のとおりです。

1. 必要以上に大きなサイズで保存しない。記事の幅に合う、横幅1,200px程度で十分なことが多い
2. 写真は JPEG や WebP、図やイラストは PNG や WebP を使う
3. 公開前に、画像の圧縮ツールで容量を減らす

ブログのシステムによっては、アップロード時に自動で圧縮や変換をしてくれるものがあります。設定を確認してください。

また、画像の縦横のサイズを指定しておくと、読み込み中に文章が動く現象を防げます。多くのブログシステムでは自動で処理されますが、確認しておくと安心です。

画像の著作権に注意する

他人が撮影・作成した画像を、許可なく使うことはできません。インターネット上で見つけた画像は、自由に使えるとは限りません。

安全な使い方は、次のとおりです。

• 自分で撮影した写真や、作成したスクリーンショットを使う
• 利用条件が明記された、フリー素材を使う。使うときは、利用規約を確認する
• 他のサービスの画面を載せる場合は、そのサービスの利用規約を確認する

フリー素材のサイトでも、サイトごとに利用条件が違います。商用利用の可否や、クレジット表記の要否を、使う前に確認してください。判断が難しい場合は、画像を使わないほうが安全です。

画像の種類ごとの使い方

画像にはいくつかの種類があり、それぞれ向いた使い方があります。

スクリーンショット

操作手順の説明に向いています。撮影するときは、必要な部分だけを切り取り、個人情報やメールアドレス、アカウント名が写り込んでいないかを確認します。重要な箇所に、枠や矢印を重ねると、読者がどこを見ればよいか迷いません。

図や表の画像

関係性や流れを視覚的に見せたいときに使います。ただし、画像の中の文字は検索エンジンに読まれにくく、スマホでは小さくて読めないことがあります。文字が多い内容は、画像にせず、表や箇条書きでテキストとして書くほうが、読みやすく検索にも伝わります。

グラフ

数字の変化を示すときに使います。出典が公的機関などにある場合は、記事内に出典を明記し、最新のデータへのリンクを添えます。自分で作ったグラフでも、何の数字を、どの期間で見たものかを説明文で補います。

写真

雰囲気や実物を見せたいときに使います。記事の内容と関係のない写真は、読み込みを重くするだけなので避けます。

画像を並べすぎない

画像を連続して何枚も並べると、スクロールが長くなり、本文を読む流れが途切れます。手順の画像でも、1つの手順につき1枚を基本とし、必要な場合に限って複数枚にします。画像と画像の間には、説明の文章を入れて、読者が内容を追えるようにします。

アイキャッチ画像の考え方

記事の最初に表示するアイキャッチ画像は、記事一覧やSNSで共有されたときにも表示されます。記事の内容がひと目で伝わる画像が向いています。画像の中に文字を入れる場合は、スマホの小さな画面でも読める大きさにし、文字数を絞ります。同じブログ内で、色や形式をそろえると、一覧で見たときに統一感が出ます。

画像の名前も整えておく

アップロードする画像のファイル名は、「IMG_2034」のままにせず、内容がわかる半角英数字の名前に変えておきます。たとえば「search-console-query-list」のようにします。管理画面で画像を探すときにも役立ちますし、後で記事を見直すときに、どの画像かを判断しやすくなります。

次にやること

今日できる作業を挙げます。

1. 最近の記事を1本開き、alt 属性が空、または「画像1」のようになっている画像を探す
2. 内容を説明する言葉に書き換える
3. 容量の大きい画像がないか、ブログの管理画面で確認し、重いものは圧縮して入れ直す

新しい記事では、画像を入れる前に、その画像が読者の役に立つかを一度考えてみてください。