Webで使う画像について。メリットと注意してる点をまとめてみた。

2022年12月15日 12:09

Webサイトを作成する上で意外と時間がかかるのが、「画像（写真）」の選択と加工です。
昨今、無料で使えるフリー画像やフリー写真を配布しているサイトが増え、満足できる写真はAdobeStockなどの有料素材を活用するしかない、というひと昔前の状況からすると、大変有難い環境なりました(^_^)/
画像・写真を使うことで商品の特徴や魅力を、「具体的に正確に」伝えることができるようになります。

ここでは、Webサイトで画像を扱う時に気を付けている点をまとめてみました。
みんな基本的なことばかりですが、ついつい忘れてしまうこともあるので一つひとつ確認していきましょう。

画像を使うメリットってなに？

Webサイトに画像を使うメリットとはなんでしょうか。
良いものをおすすめしたい時、それがどんなに魅力的な商品でも「文字のみの情報」だと、どうしても読む側に負荷がかかります。
読む側がその情報を主体的に読み取りにいかないと、内容を理解できないからなので、ある意味当然ですね。
「文字や言語のみの表現」だと読む側の理解度もまちまちですし、伝えたいイメージも限定的になってしまいます。

それに対して画像や写真を使うと、一目で内容が伝わりやすくなります。 「文字Xビジュアル」で商品の魅力や雰囲気を視覚で補い、特徴を具体的に伝えてくれます。 印象的な画像や写真は見る側の注目を集めたり、想像させたり、人の感情を動かす力があります。ビジュアルは効果的に使うと、伝えたいことを「ずばり！」直接的に表現することができますね。使い方には注意しながら、積極的に活用していきたいです。
※あえて文字しか使わないデザインもありです。
でも、難易度高そうですねー(>_<)

画像を扱う上でわたし的注意点

今はフリーサイトなどたくさんあり、写真選びは大変ですね。
選択する上でポイントになるのが、「写真を通して何を伝えたいのか」を明確にすることです。
写真で伝えたいことは何か。どんな印象を受け手側に与えたいのか。
写真は情報量が多いので、あらかじめ伝えたいメッセージをはっきりさせることで、その後のトリミングなど情報を整える作業が行いやすくなります。

さらにWebサイト上の写真を効果的に使うために、以下の要素を大切にしています。

①写真はゆがめて使わない！

例えば商品（ケーキなど）のビジュアルを強調したくて、画面の空いてる部分にはめ込みたいと縦横比を無視して大きくすると、写真に違和感が生まれてしまいます。
なので、写真を始めロゴや地図なども、基本縦横の比率は崩さないで素材を加工しています。

②写真の切れ方に注意する！

人の顔や体が途中で切れていないか、見た人が不快に感じないか気を付けてトリミングします。
また、その写真を通して何を見せたいのか、例えば全体像なのか、個別の要素なのか意識して写真を切り取るようにしています（主役は何かという視点）
下の場合だと伝えたいのはケーキセットのメニューなのに、ケーキのみアップすると全体像がわかりにくくなってしまいますね。

③写真のレイアウトで伝えたい印象をはっきりさせる

画像のレイアウトで伝えたい印象を表現できます。
わたしがよく使うレイアウトは以下の３つです。

「四角版」

落ち着きのある配置。写真の周囲に余白を設けることで、収まりがよく写真に安定感が生まれる。

「全面写真」

ダイナミックを表現する配置。コンテンツ枠いっぱいに写真を掲載できる。臨場感とインパクトが生まれる。

「三方裁ち落とし」

上下左右のいずれか３辺の端まで写真を配置する。迫力がありながら、余白もあるので、迫力と落ち着きの両方を表現できる。

画像で伝えたい「印象」は何か。ここを決めておくと、混乱が少ないような気がします。

効率的に正確に相手に情報を伝える手段として「写真」について考えてみました。
他にも、「イラスト」はさらに情報プラス「親しみやすさ」も伝えることができますね。

伝えたいメッセージに合わせて加工（レタッチ）することで、写真はもっと見やすく魅力的になります。
写真のクオリティをあげるために、切り抜きや画像編集など、これからも勉強していきたいです。

最後までお読みいただきまして、ありがとうございました。