画像をより効果的にWebデザイン活用するための5つのルール

デザイナーにとって、画像は大切な視覚言語のひとつです。

画像コンテンツは、ストーリーや複雑なアイデアを視覚的に簡潔に伝えられるだけでなく、テキストと組み合わせることでより詳細な情報も伝達できます。ユーザーとコミュニケーションを取るのに、画像は有効な手段のひとつです。

画像コンテンツの作成には時間がかかりますが、このタスクを簡略化できるコツやツールも数多く存在します。この記事では、画像コンテンツをより効率的・効果的にWebデザイン活用するための5つのルールをご紹介します。

1. コンテンツに関連する画像を使用する

大前提ではありますが、デザイン上における全ての画像は、はっきりとした目的のもと機能的に使用される必要があります。

装飾としての画像は使わない

単なる装飾としての画像の使用は、ユーザーを圧倒させ注意を外らせてしまうため、UXを考えると良くありません。

例えば多くの企業サイトは、ビル群の画像を頻繁に使う傾向にあります。現代的な企業イメージをユーザーに植えつけることが目的でしょうが、こうした意味のないビル群の画像はUX上なんの価値もありません。

カッコいいからといて、理由もなく画像を使用するのはやめましょう。その画像を使用することでどのようなメッセージを伝えたいのか、常に意識することが重要です。

画像の意味をテストする

他のUI要素と同様に、画像もそのユーザビリティをテストする必要があります。

画像を使って伝えたいメッセージが、ユーザーにとって分かりやすいものであるか、きちんと確認しましょう。

ユーザーの感情に働きかける

画像はユーザーの感情に働きかけるものです。

どんな感情をユーザーに与えたいのか、意識しながらコンテンツを作りましょう。テキストは読まれた後に忘れ去られてしまいがちですが、鮮明な画像はユーザーの記憶に残りやすい傾向にあります。

ユーザーがトラブルに直面した際、特にこの画像が重要になります。例えばエラーメッセージの横ににこやかなスマイルフェースをつけても、ユーザーの苛立ちを煽るだけでしょう。

2. 焦点を意識する

画像のどこに焦点を置いているかハッキリしていなければ、画像に価値はありません。

伝えたいメッセージを明確にし、焦点を正しくあわせて、画像の意味をユーザーにしっかりと伝えましょう。

▲画像をクロップする際は、どこに焦点を置くのかはっきりさせましょう

また画像内にはあまり多くのオブジェクトを入れすぎないように注意し、焦点を絞ってユーザーの注目を集めるよう工夫しましょう。

3. 高画質な画像を使用する

デバイスやプラットフォームに合わせ、画像のサイズを適切に調整しましょう。ぼやけていたり、画質の粗かったりする画像を使用してはいけません。

さまざまなプラットフォームに合わせて画質を調整するのは手間のかかる作業ですが、画像圧縮ツールなども活用しつつ最適化を試みましょう。

▲ピクセル化してしまった画像と、適切な高画質の写真の比較。

また、プラットフォームに合わせた正しい画像比率も大切です。不適切な比率の画像を上げてしまうと、画像が歪んでしまうこともあります。

4. アクセシビリティも忘れずに

カラーコントラストをつける

画像に合わせてテキストを挿入する場合は、誰にでも読みやすいようカラーコントラストを正しく調整することが重要です。

カラーコントラストがはっきりしていないと、テキストが非常に読みにくくなります。

W3Cは画像に載せるテキストについて、小さなテキストのばあいは背景と比較して4.5：1以上のコントラスト比を、大きなテキスト（ボールドで14pt〜、レギュラーで18pt〜）のばあいは3：1以上のコントラスト比にするよう定めています。

コントラスト比率をチェックできるツールもあるので、ぜひ活用しましょう。

画像にはキャプションを

視覚に問題のある人は、スクリーンリーダー（画面読み上げソフトウェア）を使用します。

重要な画像にはキャプションをつけて、視覚に問題のある人でも正しく情報を受け取れるよう工夫すべきでしょう。

5. フリー画像の扱いには気をつける

デザイナーにとって、フリー画像素材は大切なリソースです。

プロトタイプだけでなく、最終プロダクトにも気軽に使用できるフリー画像素材ですが、他のツールと同様に使用上の注意点もあります。

伝えたいメッセージに合わせた画像を選択する

汎用的すぎるフリー画像素材の使用は控えましょう。

画像が嘘っぽく見えてしまうと、ユーザーはプロダクトの信用性そのものも疑い始めます。

▲カスタマーサポートチームのフリー画像

例えば会社のチームに関する情報を掲載するばあい、フリー素材の汎用的な画像ではなく、本物のチームの写真を使用するようにしましょう。

たとえクオリティの高い画像でなくても、人間味があり、ユーザーにメッセージが届きやすくなります。

▲現実のチームの画像

（原文：Nick Babich　翻訳：Mariko Sugita）

あわせて読みたい！▼