高画質なスクリーンが一般的になったことで、視覚的なメディアとして発展するWebデザインにおける、写真の役割が大きくなっています。美しい写真の使用は、不変のテクニックです。
この記事では、Webサイトでの写真においてもっとも人気のある６つのトレンドを紹介します。
目を引くヒーローイメージ
スクロール画像上の全面を占めるヒーローイメージは、Webデザインにおいて、もっとも人気の高いトレンドの１つです。
ヒーローイメージの価値は、瞬時にユーザーを夢中にさせることです。
人間にとって、視覚はもっとも強い感覚です。そのため、高画質なヒーローイメージは、もっとも速くユーザーの関心を引く方法の１つになります。
ヒーローイメージにより、ユーザーはすぐに引き込まれ、そのサイトへ期待を持ちます。
ヒーローイメージはすべてのユーザーの注目を得られる、Webサイトの「顔」です。
ヒーローイメージでは、伝える情報量を少なくし、見やすくすることが重要です。
ポイント：
- ヒーローエリアには高画質なHD画像のみを使用してください。低画質の写真は避けましょう。ヒーローイメージでは、画像が命です。
- テキスト付きのイメージデザインを使用する場合は、テキストで画像の主要部分が隠れたり、わかりにくくならないように注意しましょう。
製品が使用されるコンテキストに合う見せ方
製品が使用されるシーンを写した画像をユーザーに見せることは、ECサイトではよくある戦略です。
そういった写真がコンバージョン率を向上させることは、すでに実証されています。
以下にあるGorillaPodの画像を見てください。ヒーローイメージの背景には、デバイスが実際に使われるシチュエーションが写されています。
三脚に大きく焦点が当てられ、ほかに視界を妨げるものがありません。そのため、製品が創造的かつ効果的に表現されています。
優れた写真によって、製品に命を吹き込むことができます。著作権：joby
Juliana Bicyclesのサイトにおけるヒーローイメージは、製品が実際に使われている写真です。
モノクロ写真
カラー写真は色でユーザーの目を引かせ、デザインを際立たせます。対して、モノクロ写真は、視覚的な表現ではなく、コミュニケーションによってデザインを引き立たせるのです。
モダンなモノクロ写真はアートとしてとらえられ、多くの写真家はモノクロ写真を写真の純粋な姿とみなしています。
著作権；switzerlandinc
しかし、なぜモノクロ写真はここまで賞賛を集めるのでしょうか？
それは、色がユーザーの気を散らすからです。
色は写真自体の視覚的な構成要素から、ユーザーの注意をそむけさせてしまいます。 たとえば、ページ上で重要な要素であるCTAボタンから、注意をそむけさせてしまうのです。
ポイント：背景としてモノクロ写真を使用する場合は、ユーザーの注意をCTAに向けるために明るい色を使用しましょう。 下の例のように、モノクロ写真の背景では色鮮やかなアクセントが強調されます。
カラーオーバーレイ
カラーオーバーレイは、半透明の色付きのボックスでイメージを覆うことです。より具体的な目的に合わせて、イメージを修正できます。
たとえば、ブランドアイデンティティの確立（ブランドを特徴づける色の使用）や感情反応（例：セピア色のオーバーレイは写真に古びた感覚を与える）などがあります。
カラーオーバーレイは、写真のインパクトを強くします。
モノクロの背景と同様、カラーオーバーレイは色鮮やかなアクセントの効果を高めることができます。ただし、色使いが正しく選択されなければ効果はありません。
ポイント：
- 画像にカラーオーバーレイの効果を追加するのは簡単です。カラーオーバーレイを作成するための
PhotoshopとCSSのチュートリアルを参照してみてください。 - オーバーレイとして単一の色を使用する場合は、色の透明度に配慮してください。濃い色の組み合わせ（透明度が低いもの）は、背後のイメージよりも、色自体が目立ってしまいます。薄い色を組み合わせることで、イメージに焦点が当てられます。
ドラマチックなタイポグラフィ
独自のタイポグラフィは、ブランドの個性を引き立たせます。独自の写真と組み合わせると、効果が倍増するのです。テキストのスタイルやメッセージは、ユーザーが写真をどのように解釈するかに影響します。
タイポグラフィと写真を混在させることは難しくありません。著作権：Peugeot
キャッチフレーズの文字数は少ないですが、強力なインパクトを与えます。このイメージでは、面白味が加えられています。 著作権：allbirds
ポイント：
- ドラマチックなタイポグラフィは、視覚的な要素になります。しかし、 画像とタイポグラフィの調和がとれるようにしましょう。
- タイポグラフィは、画像全体を覆う大きなタイトルにのみ使い、読みやすさを損なわないようにします。また、色のコントラスト比を忘れずにチェックしましょう。
- 「ドラマチック」とは「複雑」という意味ではありません。また、ドラマチックなタイポグラフィとシンプルなタイポグラフィは二者択一ではないのです。読みやすくてわかりやすい、シンプルな書体を使用してください。
非対称レイアウト
非対称レイアウトは、多くのWebデザイナーから人気を集め、使用されています。
非対称レイアウトにより、 デザイナーはユーザーの視線の動きのパターンに合った視覚的な流れを作り出すことができます。また、ユーザーはスムーズかつ論理的に、ページに目を通せます。
テキストや画像をページの特定の場所に移動させることで、非対称性を作成できます。 構図は同じかもしれませんが、視覚的な重みが画面の両側で等しくなるようにしましょう。
たとえば、１つの大きな要素は、複数の小さな要素でバランスをとります。 下の画像に見られるように、左側の大きなイメージは、右側のイメージコピーとCTAボタンによってバランスがとれるということです。
非対称性は、視覚的バランスが取れていないと効果がありません。 著作権：nikoskoulis
まとめ
デザインのトレンドは時代とともに変化し続けますが、快適なユーザー体験を提供するという基本的なアイデアは変わりません。
使用する写真は、高画質でユーザーに興味を持たせるような、コンテンツに合ったものを選びましょう。そのような写真は、デザインにとって素晴らしい選択肢となるでしょう。
