名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

ホームページに画像を掲載する際の注意点

2022
.08.15

ホームページに画像を掲載する際の注意点

ホームページにおいて、静的ページのWEBデザインにはもちろん、企業などがWEBマーケティングを行う上で継続的に更新していくCMSなどのコンテンツにも写真や図など、テキストを視覚的に説明補助する画像は必要不可欠です。しかし、クオリティや内容の精度が低い画像や、コンテンツと全く関係のないイメージ画像をホームページに使用してしまうと、ユーザーの混乱や不信感につながり離脱率を高めてしまう場合もあります。そこで今回は、ホームページに掲載する画像についての注意点をご説明します。

【目次】
1. ホームページにおける画像の役割
2. 画像を選ぶ時気をつけるべきポイント
a.画像のサイズ
b.画像の容量
c.画像の内容
d.画像の品質
3.今回のまとめ

ホームページにおける画像の役割

ホームページにおける画像の役割は大きく分けて2種類あり、ホームページの雰囲気を演出する役割と、テキストなどの内容を視覚的に補助する説明的な役割の2種類があります。例えば病院のホームページでは患者さんと医師が談笑しているようなイメージ写真が演出的な役割、施設紹介の内観写真や施術に関する図などが説明的な役割に当たります。

画像を選ぶ時気をつけるべきポイント

前述の演出と説明の役割に関わらず、ホームページに掲載する画像には注意するべきポイントがいくつかあります。ここでは特に注意するべきポイントをご紹介します。

画像のサイズ

最も基本的なポイントとして、閲覧に耐えうる画像のサイズが挙げられます。どんなに美麗な写真や分かりやすい図でも、サイズが適切でなければユーザーが識別・理解することもできません。また、チャートやグラフなどの図について特に言えることですが、パソコンで観覧した際は明瞭に見える図でも、スマートフォンで表示した際は文字などが視認できない場合があるため、同一の画像を使用することが多いCMSページなどでは特に注意が必要です。また、画像のサイズを決める際は3:2や4:3、16:9など世に普及している縦横比に合わせたサイズにすることをお勧めします。普及している縦横比に合わせることで閲覧するデバイスの画面幅との親和性をある程度もたせることができます。

画像の容量

容量も画像を用意する上で重要な要素の一つです。どんなに高画質な写真でも、容量が大きすぎて読み込みに時間がかかってしまっては、その画像が表示される前にユーザーが離脱してしまうことも考えられます。また、容量の大きい画像ばかりを使用するとサーバーに負担がかかり、ホームページ自体が重くなってしまう原因にもなります。CMSなどでは初期設定で画像容量の上限が決められていますが、それに限らず画像の容量は画像のサイズや解像度を担保した上でなるべく小さい容量になるような工夫をするようにしましょう。

画像の内容

図などの画像を自分で作成する、ストック素材から写真をダウンロードするなど画像を用意する手段は複数ありますが、ホームページの内容に適切な画像を用意するというのも重要なポイントになります。画像について「内容」が指すものは無数にありますが、チャートやグラフなどの図ならば図示が正しく行われているかという点、イメージ写真なら文章の内容と関連性のある写真なのかという点などが「内容」の大きな要素として挙げられます。これらが誤っているとユーザーに正しい情報が伝わらず、誤解や混乱の原因となってしまいます。

また、画像を見た時ユーザーがどんな印象を抱くかも客観的に考えることが画像の用意や選定には重要になります。例えば、歯科医院で検索をかけると口内の写真を掲載している歯科医院のホームページが度々散見されます。情報を発信する歯科医院のスタッフは慣れ親しんだ光景かもしれませんが、専門的な知識もなく口内の様子をそこまで頻繁に見る機会もないユーザーにとっては抵抗を感じる内容かもしれません。こういった印象を客観的に判断し、簡易化したイラストや記号的なアイコンで代用するなど表現をマイルドにする工夫をすることでユーザーも抵抗なくコンテンツから情報を得ることができます。

画像の品質

上記3点のポイントと重複する部分もありますが、視覚的な美しさや視認性の良さといった画像の品質がホームページの品質にも直結します。写真は有料のストック素材や実際に撮影した写真などプロのカメラマンが撮影した写真を使用し、チャートやグラフなどのデザインを行う際はビジュアルコミュニケーションのポイントを理解した上でユーザーに情報が伝わりやすい配慮をするようにしましょう。

参考記事
WEBデザインや資料作りで活用できるビジュアルコミュニケーション

今回のまとめ

ホームページに必要不可欠な画像ですが、クオリティが低い画像や内容が不適切な画像なら、むしろ掲載しない方が良い場合もあります。雑誌などでも同様のことが言えますが、ホームページでは流し読みをするユーザーが一定数存在し、この流し読みをするユーザーへのフックになるのが視覚的な要素である写真などの画像です。高品質な写真や整然と構成された図はコンテンツを充実させるだけではなく、そのコンテンツを読んでみようというきっかけとしても機能します。ホームページに掲載する情報の一つとして適切な画像を用意し、WEBマーケティングを行うようにしましょう。

AUTHOR

著者情報

WEBデザイナー

T.S.

デザイン事務所でグラフィックデザイナーとしての勤務を経て、株式会社オンカにWEBデザイナーとして入社。クリニックやサロンなど高級感のあるデザインを得意としながら、サービスサイトやコーポレートサイトなど幅広いジャンルのホームページにおいて緻密な計算に基づいたデザインで顧客の集客力向上に尽力している。

  • カラーコーディネーター AD
  • ウェブマスター検定 1級
  • フードコーディネーター 3級

PAGE TOP