UIデザイン上の画像の扱い方を研究してみよう 🌇
皆さん、こんにちは！Design Switchです。遅れましたが新年明けましておめでとうございます、今年もよろしくお願いします🎉 新年最初の投稿は「UIデザイン上の画像の扱い方」をテーマに基礎的な内容を紹介したいと思います。画像は写っている対象物、トリミング、配置によって見た人の印象に大きく影響を与えます。伝えたいメッセージに応じて扱い方を知っておくと、デザインの表現の幅が広がり、大変役立ちます。今回はArchecoのバングラディッシュのデザイナーSQが記事を書いてくれました🌟
UI上で使用する画像ってどんなものがあるの?
UI上で使用する画像は、サービスの目的によって様々です。NetflixやYoutubeなどは映像コンテンツのサムネイルとして画像が多く使われたり、ECサイトでは当然ですが商品画像が使われています。基本的には文字情報では表現できない、伝えることが難しい情報を補完するために画像が使用されます。他にもサービスのコンセプトや世界観を伝えるために画像を使用したりもします。
画像の扱いは要注意
画像は、テキスト情報よりも目に付きやすく伝わりやすいという特徴を持っています。画像一つでユーザに誤った情報や印象を与えてしまう可能性があります。だからこそ、画像は注意して扱わなければなりません。まずは参考のUIを見ながら画像の扱い方を研究してみましょう。
画像に映っている主役は誰?
写真に写っている被写体について見てみましょう。左側は人が大きく中央に写っています。一方右側は窓を含めてた部屋の一部までが写っています。これにより分かることは、画像の主役は誰かということです。人なのか、人が写っている空間なのか、トリミングによって画像が持つメッセージ性が大きく異なるため、何を伝えたいかによって対象を大きく見せる、引いて見せるを検討した方が良さそうです。
画像の色味はUI全体の印象に影響する
次に2種類のUIを比較しつつ、どのような画像が使用されているか注目してみましょう。画像には人とそれ以外の要素 (背景)が写っています。左側で使用されている画像の背景色は、UIのパステルカラーに調整されているため、全体的に統一感があります。一方、右側の画像は撮影された背景がそのまま映った状態で使用されています。UI上、単純なパステルカラーで統一されている中に、リアルな背景が写っているため変に画像が目立っています。
注意点として、UI上に画像を挿入する時、その画像はUI一部として見られてしまいます。そのため、画像に写っている情報がUI上のデザインルールにあっていないと違和感を感じ、見栄えが悪くなってしまう恐れがあります。今回のように、画像に写っている背景に違和感を感じた場合は、背景を調整するかデザインルールに合った画像を選び直すか検討した方が良いと考えられます。
トリミングする・しないによってどんな効果があるの?
このデザインでは、ヘッダー、本文、ボタン、トリミングした画像で構成されています。画像に注目すると、建造物の輪郭に沿ってトリミングされており建造物以外の情報が排除されていること、画像の上に大きな余白が明けられていることが分かります。これによって、画像へ視線を誘導しつつ建造物のユニークさを効果的にユーザへ伝えることができると考えられます。
一方、トリミングしない画像を使用した場合をみてみましょう。画像は一つの四角い箱として認識でき、UI全体のレイアウトへ溶け込んでいるように見えます。また、黒の背景色と画像の背景色が異なるため、画像の縦と横の輪郭が明確になり、整った印象をユーザに与えることができそうです。
対象物(今回は建造物)をより強調させたい、輪郭などを目立たせたい、UI上の空間を有効活用したい場合はトリミングした方が良さそうです。しない場合は、画像は四角のオブジェクトとして認識される可能性があり、グリッドデザインのような直線的な表現には相性が良さそうという知見が得られました。
まとめ
・画像で伝えたいことは何かを決めよう
・画像はUIの一部、余分な情報が写り込んでいないか確認しよう
・画像で写っている対象を強調させたい、UI上の空間を有効活用したい場合トリミングしよう
・画像は一つの四角い箱として認識できてしまうため、グリッドデザインと相性が良い
皆さんいかがだったでしょうか。普段UIをデザインする時に、画像はUIをデザインする時に無意識的扱うことが多く、今回のように言語化できて大変嬉しく思います 😄 画像はUIデザインの一部です。画像の内容まで細かく設計できると更に品質が向上すると思いますので、是非チャレンジしてみてください！本年も引き続きよろしくお願いします！👋
🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。
🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて
この記事が気に入ったらサポートをしてみませんか？