ホームページ作成で使う画像の役割と種類

ホームページでの画像の役割

ホームページでの画像が、どのような役割を担っているのかを理解した上で、画像の選定や配置をしましょう。

ホームページでの画像の主な役割は、以下の通りです。

• ユーザーにイメージを正確に伝える
• 文章での説明を補い、伝わるようにする
• 文章をたくさん読んでもらえるようにする

ユーザーにイメージを正確に伝える

例えば、商品などの外観を説明したいときに、文章のみで正確に伝えることには限界があります。
「高級感のある赤色で、カッコいいマークが入っていて、大人な雰囲気のバッグです。」と説明されても、人によってイメージするバッグは異なるでしょう。

そこで、商品写真を用意しておいて見てもらえれば、正確に伝えることができます。
上記の例の場合、写真が載せてあれば、誰が見ても同じバッグに見えますよね。

また、画像があれば、文章で長々と説明しなくても一瞬で伝えることができるので、必要な文章が少なくなり、ユーザーに伝えたいことがより早く伝わります。

ホームページで長い文章は、じっくり読んでもらいにくい傾向があります。
画像を上手く使えると、ユーザーに親切なホームページになります。

文章での説明を補い、伝わるようにする

上記の役割に近いですが、文章での説明のみでは伝わりにくいことを補い、解りやすく伝える役割もあります。

例えば「サービスの流れ」「相関図」などは、文章を読んでいるだけでは、頭で整理しにくいですが、図で示すことで明確にできます。

ニュースやワイドショーなどのテレビ番組でも、アナウンサーが言葉で説明するだけでなく、パネルに載せた図やイラストなどを使って解説することがあります。
これも、より解りやすく伝えるために、視覚的な効果を取り入れている例です。

文章をたくさん読んでもらえるようにする

文字数が多く、文字だけのWebページをひたすら読んでいると疲れてきませんか？
ホームページ上の文章は、本や雑誌などの印刷物よりも、長く読んでもらえない傾向があります。

そこで、途中で画像を配置させておくことで、ユーザーの集中力を切らさないようにする効果が期待できます。
文章と画像を混在させることで、ページにメリハリを付けることができます。

ホームページで扱う画像の種類

ホームページで扱う画像形式は、主に以下の3つです。
それぞれの特徴を理解し、使い分けましょう。

• JPEG
• PNG
• GIF

JPEG

JPEGは、写真で1番よく使われる画像形式です。

拡張子は「.jpeg」か「.jpg」です。

• デジタルカメラやスマホで撮影した写真
• フルカラー（1677万色）
• 保存を繰り返すとると画質が劣化する

PNG

PNGは、JPEGと違い透過処理できることが大きな特徴です。
画像の一部を透明化して、背景の色が見える状態にできます。

ロゴマークの周辺を完全な透明にしたり、半透明のような色の使い方ができます。

拡張子は「.png」です。

• イラストたロゴマーク
• フルカラー（1677万色）
• 保存を繰り返しても画質が劣化しない

GIF

GIFは、データ容量が非常に小さいことが大きな特徴ですが、色数が限られているので写真には向いていません。
色数が少ない、簡単なロゴマークやイラストに使われることが多いです。

拡張子は「.gif」です。

• 簡単なイラストやアニメーションGIF
• 256色

ホームページで画像を使うときの注意点

ホームページで画像を使うときの注意点について解説します。

alt属性を設定する

ホームページで画像を入れると、下記のようなコードがHTMLに入ります。

<img src="sample.jpg" alt="画像の説明が入ります">

このコードで「画像の説明が入ります」の箇所を「alt属性」と呼びます。
画像の説明を簡単に入れておく箇所です。

通信エラーや利用環境、画像のリンクミスなどにより、ホームページで画像が表示されないときに、替わりに表示される文字です。
また、視覚障害者が利用する音声読み上げブラウザで、画像の説明として読み上げられます。

SEO対策（検索エンジン対策）の1つにもなるので、適切な文字を入れておきましょう。

ホームページ作成サービスを利用する際は、直接コードを書く必要がないので、「alt=””」を書く機会はないと思います。
その替わり、ホームページ作成サービスやWordPressでは、「代替テキスト」などの項目で、alt属性を設定することができる場合が多いです。
必ず入れておきましょう。

画像サイズに気を付ける

画像サイズが大きすぎると、ページ全体のデータ容量が大きくなり、表示スピードに悪影響を及ぼします。
重たいページはユーザーの離脱の原因の1つにもありますし、検索エンジンからの評価も下がります。

ホームページの画像は、「表示されているサイズ」と「実際のサイズ」が異なることがよくあります。
ブラウザで「表示されているサイズ」が特に大きように見えなくても、実は縮小されているだけで、「実際のサイズ」は無駄に大きい場合があります。

アップロードする際に画像サイズを確認し、必要以上に大きい画像は、サイズ変更してから載せましょう。

パソコン上の画像ファイルにマウスを乗せると、画像サイズを確認できます。

ホームページ作成で使う画像 まとめ

今回は、ホームページ作成で使う画像について徹底解説しました。

画像の使い方は、ホームページの要です。
画像のクオリティや配置など、ユーザーが見たときにどう感じるかを想像してみましょう。

画像を上手く使えるようになると、より良いホームページになります。