「百聞は一見に如かず」ということわざがある通り、文字だけでなく目で見えるもので伝えることはとても重要です。
ユーザーは新しいWebサイトやアプリを見てひと目見て、数秒で判断してしまいます。これを理解しているWebデザイナーは、複雑なストーリーやアイデアを視覚的に表現します。画像はユーザーの目を引き、また心を掴むためにも重要な要素です。
絵は、言葉よりも多くのものを伝えます
アプリやWebサイトのためのビジュアル・コンテンツの作成や選択は容易ではありませんが、正しい実践方法を用いることでデザインの中に画像をうまく組み込むことができます。
１. コンテキスト（文脈）に沿った画像を使用する
使っている画像がサイトのコンセプトやポリシー、ページのテーマと結びついていなければ意味がありません。
- 良い画像を使ったとしても、役に立たず散漫としてしまいます。
上の旅行サイトのように、関連のない画像はスペースの無駄遣いです。（上記はフライト予約のページです）
- 最悪の場合、ユーザーに間違った印象を与えたり、驚かせてしまうかもしれません。
コンテキストから外れた画像は混乱を招きます。引用元：hubpages
ポイント：ブランドが持つゴールと強い関連性がある画像を使用しましょう。
２. 何にフォーカスするのか明確にする
フォーカスする点が曖昧だと何を伝えたいのかが分からず、画像が価値を失ってしまいます。ユーザーが画像を見れば一目でわかるような写真を使って明確なコンセプトを伝えましょう。
左：フォーカスする部分が曖昧だと、画像が持つ記号性や象徴性が失われます。右：明確にするとコンセプトが一目で分かります。引用元：Material Design
印象的なビジュアルは闇雲に使うのではなく、目を引かせたいポイントを絞って使用しましょう。
Apple社のホームページでは最新の製品の大きな画像を使用しています。このようなページは有効で、画像だけで製品の詳細とユーザーに有益な情報を与えています。
ポイント： ユーザーの気を散らしてしまうような写真をなくし、重要な要素をフォーカスして伝える写真を使うようにしましょう。
３. 人物の写真を使う
実写の人間の画像を使用することは、ユーザーを魅了できる有効な方法です。商品やサービスに関わる人の写真を見ることで、ユーザーは安心感や親近感を感じます。
しかし、多くのWebサイトが使用しているストックフォトだとユーザーの目に留まらず、効果がない場合があります。また、ユーザーに不快感を与えるようなゴチャゴチャした「ビジュアル・ノイズ」は避けるべきです。
ストーリーを伝えることができるメッセージ性のある写真を使用してください。アプリやWebサイトのキャラクターにマッチした人物の写った高画質の写真を使用することをおすすめします。
左：ただのストックフォトだと空虚で感情が感じられない印象です。右：カスタムフォトだとカスタマーサービス・チームのリアルな印象が出ます。
ポイント：
- ごちゃごちゃした写真を避け、１つのメインテーマを持つものにしましょう。
- リアルなストーリーを表現する画像を探し出しましょう。ユーザー興味を持つような写真や、ユーザーが商品を使うイメージのできるような写真が良いです。
- ストックフォトよりも個性的なものとして、イラストレーションを使うのもおすすめです。イラストレーションはユーザーの想像力に働きかけ、プロダクトとの強い繋がりを生み出せます。
イラストレーションはメッセージをコンセプトから理解しやすいビジュアルへと要約し、メッセージを明確にしてくれます。引用元：Dropbox
４. 低解像度の画像は使用しない
近年では急速に高解像度の画像に対応したデバイスが普及してきているため、ユーザーはHD画質で閲覧することが当たり前になっています。拡大して画質が荒くなってしまったものや、画素化したものや過剰に圧縮されたもの、低画質のものは載せないようにしましょう。
左：低画質の画像 右：適正な画質 引用元：Material Design
ポイント： 使用する画像がさまざまなディスプレイやプラットフォームに合わせたサイズになっているかを確認するため、アスペクト比やデバイス毎に、適正な解像度をテストしましょう。
５. 個性を出す
アプリにおける役割のひとつにユーザーとのコミュニケーションがあります。そのためには魅力的で楽しませるものではなくてはなりません。アプリにちょっとした楽しみを足すことでユニークで親しみの持てるアプリになるでしょう。アプリの評価はユーザビリティだけではなく、持っている個性も含めて決まるものです。
画像はユーザーの気をひくことやメッセージを伝達するための強力なツールであると言えます。引用元：Intercom
ポイント
- 何かの説明やチュートリアルなど、メッセージを伝える必要性が強い場合、イラストレーションを使いましょう。手描きのイラストを使っていないWebサイトやアプリであっても、目的に合わせてイラストを追加することが可能です。
印象に残るような画像を選んで、個人との繋がりを表現しましょう。引用元：Emptystat.es
- デザインにクリエイティブな効果しても良いでしょう。アニメーションは、ユーザーの心を掴みます。
アニメーションとイラストレーションは常に近しい存在です。引用元：Mailchimp
まとめ
画像をユーザビリティという観点から考えるのは意外だと思われがちですが、今回の例を元にどれだけ関連性があり重要であるかを示せたと思います。画像を用いることは単なる飾り以上の意味があります。プロダクトをユーザーに伝わりやすくし、競合と差別化をことのできる強力なツールです。
Webサイトやアプリにおける、全てのビジュアル・コミュニケーションが伝えたいメッセージをしっかりと強固なものにしてくれているか、時間をかけて確認してみると良いでしょう。
