デザインにおける効果的な写真の使い方は？

こんにちは！onegiftというサービスの代表をしています。井上です。
突然ですが、皆さん写真は撮ってますか？
僕は最近 Photoshop Cameraにはまっていて、人とか食べ物とか空とかいろいろ撮ってます。フィルターが面白いんですよね。さすがAdobeだなって感じです。とにかくおすすめなので一度使ってみてください🤗
というわけで、今日はデザインと写真の関係性について書いていきたいと思います📷

被写体の視線を意識する

まず、最初は「被写体の視線を意識する」ということです。これはWebで説明するより広告のデザインなどの方がわかりやすいので、広告のデザインをみてみましょう。

これは2枚とも有名なポカリスウェットの広告です。
この2枚の広告の共通点がわかりましたか？

視線の先にテキストがありますよね！

この視線の先にテキストを置くというのが広告のデザインにおける写真の使い方としてのテクニックです。人間は目の動きに敏感な傾向があり、視線の先を無意識に追いかけてしまう習性があるそうです。そのため、視線の先に伝えたいことをテキストにして置くと広告を見る人の目に留まりやすいということです。このテクニックを採用している広告は探してみるとたくさんあるので、駅のホームや雑誌などオンライン以外の場所でも是非探してみてください！

人の目に留まりやすい写真は？

人の目に留まりやすい写真ってだどんな写真だと思いますか？
商品の写真？人気芸能人の写真？綺麗な景色の写真？

答えは女性と赤ちゃんです。

これは長年の統計から導かれたもので、テクニックとは少し違うかもしれませんが、覚えておいて損はないでしょう。実際に女性が使われている広告は食品、金融、サービス業など数えきれないほどありますよね。広告媒体を利用する際は、特にこだわりがなければ女性や赤ちゃんの写真を広告に取り入れてみると良いかもしれません。

ヒーローイメージで人々を惹きつけよう！

ここからは完全にWebのお話です。(もちろん視線のテクニックも目に留まりやすい写真のテクニックもWebでも使用できますよ！)
皆さん「ヒーローイメージ」って知ってますか？
webのトップに使われているページ全体に大きく表示される画像です。2017年頃からのトレンドみたいですが、現在でも多くのwebページで採用されています。具体的にはこんな感じです↓↓↓

見たことありますよね？これがヒーローイメージです。画面全体に画像を表示し、全てのユーザーの視線を集めることのできるデザインです。レスポンシブにも対応しやすいので実用的でもあります。ヒーローイメージはすごくシンプルでポイントは2つしかありません。高画質とテキストです。高画質というのは、もちろんヒーローイメージとして使用される画像の画質です。これだけユーザーの目を引く画像が低画質というのはあまりにも見栄えが悪いです。画像はHD画像を使用しましょう。テキストというのはユーザーに見せたい部分をテキストが邪魔をしていないかという話です。単純ですがテキストのレイアウトに拘った結果、画像が見えにくいなんていうのはよくある話です。テキストも大事ですが、メインである画像の邪魔をしないように注意しましょう！

ヒーローイメージの種類

種類という言葉を使うのは少し違うかもしれませんが、ヒーローイメージにも様々な見せ方があります。今回はその中から3つ選んで紹介していきますね🥳

ECサイト

これらはECサイトのヒーローイメージです。ECサイトでヒーローイメージが使用されるときの特徴として「使用感を伝える」というテクニックがよく使われます。例にあげた2つのサイトもそれぞれ三脚の使用感とロードバイクの使用感が画像によって表現されていますよね。このテクニックはコンバージョンをあげるということも実証されているので、ECサイトなど販売を行うようなWebページには非常に有効なテクニックと言えます。

モノクロ

ヒーロー画像としてモノクロの画像を使用しているサイトは意外に多くあります。上記の例はUberなのですが、モノクロの画像が使用されています。モノクロの画像を採用するメリットしてはユーザーの気を色によって散らさないということです。上記の例でも色がついているのはCTAボタンのみですよね？これによりユーザーを視覚的にボタンへ誘導することができ、コンバージョンをあげることに繋がります。

余談になるのですが、先週UberのUXについての記事を書いたので、良かったら読んでください😊

カラーオーバーレイ

カラーオーバーレイとは画像を半透明の色のボックスでを覆うことです。カラーオーバーレイはブランドを特徴付ける色を使用することにより、よりそのWebページをそのブランドのイメージに合うようにしたり、感情を表現する際のテクニックとして有効です。また、オーバーレイという技法はテキストの視認性を高める効果もあります。上記のように色の透明度が高いと画像というよりは色やテキストに焦点がいってしまいますが、テキストをユーザーに見せたいのであれば有効なテクニックです。画像を見せたいのであれば、もう少し色の透明度を下げてみると良いでしょう。

レイアウト

最後はレイアウトの話です。画像はWebページのトップのみで使用されるものではありません。ページ全体で使用されるものです。そのため画像のレイアウトはページ全体の印象を左右する大事な要素となります。どのようなレイアウトが良いのか図を用いて説明していきます。

悪い例

まずは悪い例です。これは時計メーカーのwebページなのですが、サイトのデザインのみを見るとそこまでひどいデザインではないような気がします。しかし、ページをコンポーネントで図式化した方を見てみると、明らかに画像が左によっていますよね。これだとページ全体の重心が左によってしまいバランスが悪いwebページになってしまいます。

良い例

これは良い例です。確かに先ほどのデザインと比べて見やすいですよね。画像も左右どちらにも配置されていて、重心が真ん中にあり、バランスが良いページだと言えます。テキストがどの画像に対応しているのかもわかりやすいですよね。

まとめ

最後まで読んでいただきありがとうございました！
画像とデザインの関係性について少しは参考になったでしょうか？
現代は写真を撮ることも非常に多くwebに限らず様々なところで使用されているので、今日紹介したテクニックを覚えておけば、たくさんの場面で応用できると思います！是非活用してみてください！

onegift
https://onegift.design/

参考記事
https://stand-4u.com/design/webdesign.html
https://creators-factory.com/photography/
https://uxmilk.jp/62963