現役Webデザイナーが、初心者のホームページ自作を応援!

ホームページ作成で使う画像について知ろう

ホームページ作成で使う画像について知ろう

ホームページで画像は、文章と同じくらう重要な要素です。
「画像の良し悪しでホームページの印象が決まる」と言っても過言ではありません。

こちらの記事を読むことで、ホームページでの画像の役割や、扱い方について理解し、画像を上手く使えるようになれます。

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

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

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

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

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

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

上記の役割にに近いですが、文章での説明のみでは伝わりにくいことを補い、解りやすく伝える役割もあります。
例えば「サービスの流れ」「相関図」などは、文章を読んでいるだけでは、頭で整理しにくいですが、図で示すことで明確にできます。

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

文字数の多い文章をひたすら読んでいると疲れてきませんか?
ホームページ上の文章は、本や雑誌などの印刷物よりも、長く読んでもらえない傾向があります。
そこで、途中で画像を配置させておくことで、ユーザーの集中力を切らさないようにする効果が期待できます。

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

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

JPEG

JPEGは、写真で1番よく使われる画像形式です。
拡張子は「.jpeg」か「.jpg」です。

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

PNG

PNGは、JPEGと違い透過処理できることが大きな特徴です。
画像の一部を透明化して、背景の色が見える状態にできます。
ロゴマークの周辺を完全な透明にしたり、いわゆる「半透明」のような色の使い方ができます。

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

GIF

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

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

ホームページに画像を入れるときの注意点

alt属性を設定する

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

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

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

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

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

画像サイズに気を付ける

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

必要以上に大きい画像は、サイズ変更してから載せましょう。

こちらの記事もチェック!

このページのトップに戻る