顧客が抱える「課題」を独自メソッドで「成功」へ導くマガジン。

KNOWHOWノウハウ

  1. HOME
  2. ノウハウ
  3. UI/UX
  4. むやみやたらに画像を使わず、画像を使用するときには「キャプションテキスト」を併記できている
UI/UX

更新日

むやみやたらに画像を使わず、画像を使用するときには「キャプションテキスト」を併記できている

Webページの構成要素は、テキストだけではありません。利用者にわかりやすく情報を理解してもらうためには、「画像」を使用するのも効果的な手法です。

ただし、画像をあまり乱用すればページの表示速度が遅くなってユーザビリティの低下につながりますので、ファイル形式やサイズ容量などは、しっかり考慮して使っていくことが大事です。

また、画像でなくても情報が伝わるのであれば、むしろ画像を使わない方が良い場合があります。

その辺りもしっかり考えて、使用するべきかを検討しましょう。

3つの注意点に従って「画像」を追加したり、修正する

画像でなくても表現できる場合は、むやみに画像を使わない

写真・イラストなど画像を使わなければいけない部分以外は、できるだけテキスト記述を優先しましょう。あまり画像を使用すると、ページ全体を重くしたり使いづらいサイトになる恐れがあります。サイトによってはページの半分以上を画像にしているものもありますが、ユーザビリティを考えると避けた方が良いです。画像の中でテキストが記述されているものもクローラーが認識しづらいため、独立させたテキスト記述にするのが望ましいです。

画像を使う場合には、説明となる「キャプションテキスト」を併記する

「キャプションテキスト」を併記しましょう。画像の下に内容を説明するテキスト文字を表示させることで、利用者にとっては画像が何を表すかがよりわかりやすくなります。(*画像の下に表記されるのでアンダーテキストとも言われます)

画像サイズは大きくなりすぎないように

ファイル容量が重いとページ表示に時間がかかるため、結果としてユーザビリティを損ねて利用者が離脱してしまいます。せっかく高画質な画像を使用しても意味がなくなるため、適度なサイズに調整しましょう。一般的には、72dpi(ppi)〜96dpi(ppi)の解像度であれば問題ありません。

HTMLファイルで使用する「画像」のファイル形式を指定する

実際に、設定できる画像のファイル形式には主に以下があります。

jpg

もっとも標準的な画像形式。静止画像データで使われ、1,677万色のフルカラーを表現することができる。圧縮すると元に戻らない「不可逆圧縮」という特徴がある。

png

Webページで使用するために開発された画像形式。 256色を扱える「png-8」と、 フルカラーを扱える「png-24」があり、グラデーションカラーや透明〜半透明などの 透過処理も作成可能。保存を繰り返しても画質は劣化しない。

gif

Webページで使用するために開発された画像形式。 色数は最大256色と少ないため データ容量も小さくできる。「gifアニメ」と呼ばれる簡易アニメーションも作成可。 色数が多い写真やグラデーション表現には不向き。

svg

拡大・縮小をしても画像が粗くなることがない「ベクター」という画像形式だが、 写真のような複雑な陰影を表現する画像には不向きからか、Webページでの使用は あまりされていない。

Webp

Googleが開発したオープンソースの次世代画像フォーマット。jpgより圧縮率が高く、 透過画像やアニメーションが作成可能。ファイル拡張子は「.webp」。

Googleが開発したということもあり、Googleは「Webp形式」を推奨しています。 特徴としては、以下などがあります。

  • 画質を綺麗に保ちながらファイルサイズを軽くできる
  • 画像の透過やアニメーション処理にも対応

pngやjpgと比べて画質を維持しつつ軽量化できる。また、アニメーションと透過処理を両立できるというメリットは大きいです。Webページで使用できる画像形式はいくつもありますが、今後は「Webp形式」を採用するのが望ましいといえます。

いずれにせよ、画像を使用する際は、ファイル容量や形式はもちろん、そもそも画像でなければいけないのかを考えた上で、画像を使うことが効果的であると判断したのであれば、積極的に使用していきましょう。

まとめ

1つでも当てはまったらチェックしましょう。

  • 3つの注意点に従って「画像」を追加したり、修正できた
  • HTMLファイルで使用する「画像」のファイル形式を指定できた
グロースマーケティンググループ 編集部

グロースマーケティンググループ
編集部

「成果を、共に」
顧客と共に考え、実行を繰り返しながら「成果」を追求するグロースマーケティンググループ(GMG)の、デジタルマーケティング情報メディア。BtoB企業の営業・マーケティング担当者がすぐに使える「お役立ち情報」を発信していきます。

関連記事

成功へ導く
6つの要素

成功メソッド:タグ編