ウェブサイトに適したカバー写真を選択するにはどうすればよいですか?


22

ブログ投稿の開始を含むWebページへのヘッダーとイントロのために、比較的小さなテキストを含む大きな背景画像を使用するのが流行しています。これについては無数の例を挙げることができますが、私が話していることを正確に知っていると思います。

効果的なカバー/背景写真を作るのは何ですか?画像を探すとき、または自分のサイトの一部を撮影して編集するときは、何に注意する必要がありますか?


1
現在、大きな背景のビデオが流行しています。
user11153

1
素敵な(私はおそらく、他のものを思い出すことができない、サイト上で最高の自己回答の質問の中、行わ最高)。:)
ドム

回答:


30

本当にトレンドに従う必要がありますか?

それはトレンドだからです。それがあなたの会社とあなたのデザインにとって最善であるので、それらがユーザー体験に良いので、物事をしてください。あなたのサイトに大きな画像を追加することの意味について本当によく考えて、あなたが持っている他のオプションの重さを量ります。「モダン」なWebサイトを作成するために、この手法を使用する必要はありません

そうは言っても、ウェブサイトの背景画像を選択する際には、心に留めておくべきことがたくさんあります。この回答は非常に長いため、ここにリストを示します。以下に例を含め、それぞれについて詳しく説明します。

  • 画像がコンテンツに関連していることを確認してください
  • 画像に希望する内容が表示されいることを確認してください
  • 画像が比較的一意であることを確認してください
  • 実物の画像を使用する
  • 画像がレイアウトで機能することを確認してください
  • 画像が適切な写真とデザインのルールに従っていることを確認してください
  • 画像が配色に沿っていることを確認してください
  • 画像内の分散を制限する
  • 画像サイズが十分に大きいことを確認してください
  • 画像を使用する権利があることを確認してください
  • 写真の品質が高いことを確認してください

画像がコンテンツに関連していることを確認してください

無関係な写真は害を及ぼすだけです。あなたのデザインのあらゆるものと同じように、それがあなたのウェブサイトの目的に直接合わないなら、それを取り除いてください。後で何かをするのではなく、そのコンテンツに直接関係していることを確認してください。画像に、静止画像ではなくサイトであることをユーザーが理解できるように、テキストまたはレイアウトによってもたらされる追加のコンテキストが必要です。

ここに画像の説明を入力してください


画像に希望する内容が表示されいることを確認してください

すべての画像には、画像の内容とスタイル設定に基づいた意味があります。ブランドだけでなく、伝えたい気持ちにイメージが合っていることを確認してください。画像は、周囲のテキストが提供するものを超えて、さらなる理解を伝える必要があります。また、それがあなたがそれを構築したい方法であなたのブランドを構築するのに役立つことを確認してください。

ここに画像の説明を入力してください

言うまでもなく、画像は視覚的に魅力的でなければなりません。画像が魅力的であるための特徴の詳細は以下にあります。


画像が比較的一意であることを確認してください

品質が少なくとも同じであれば、カスタム画像はストック画像よりも優れています。つまり、非常によく知られているストック画像は、代替品が同様に高品質で適切である限り、避ける必要があります。ただし、完全に一意であることは、優れた適切なイメージを持つことほど重要ではありません

ここに画像の説明を入力してください


実物の画像を使用する

人間として私たちに大きな影響を与える実際の画像(高度に編集されたバージョンでも)について何かがあります。私たちは本物を見たいです。可能な限り、目的のコンテンツやスタイルに完全に適合しない場合を除き、コンピューターで生成されたものよりも実際の画像を選択します。

ここに画像の説明を入力してください

人々を見せることはさらに良い効果をもたらし、それは良いことも悪いこともあります。正しく行われた場合、ユーザーはよりリアルで個人的な体験を感じることができます。悪い行われた場合、それが見えるようにすることができますイムを個人と安いです。詳細はこちら

特に顔は注意を引くので、適切な顔であることを確認し、本当に重要な場所にのみ置いてください。時々、本などの別のコンテキスト内にそれらを置くと、iPad、コンピューターなどが役立ちます。また、顔を切り抜く方が適切な場合もあります(衣類のWebサイトやマネキンを考えてください)。ブランド/スポークスマンの顔を見せることは、正しく行われた場合、非常に効果的です。できればそれをお勧めします。

ここに画像の説明を入力してください


画像がレイアウトで機能することを確認してください

ユーザーフローとサイトレイアウトは、選択できるどの画像よりも重要です。最初に作成します。最適なレイアウトとフローの上部に少し空きスペースがある場合は、画像を追加することを検討してください。

画像の重要な部分が自分のコンテンツで覆われていないことを確認してください。視覚的なガイドラインを使用して、ユーザーに見せたいコンテンツにユーザーを誘導します(これについては次のセクションで詳しく説明します)。

ここに画像の説明を入力してください


画像が適切な写真とデザインのルールに従っていることを確認してください

画像は、3分の1ルール、視線の使用、メインコンテンツへのフォーカス、被写体のフレーミング、背景の良さ、対称性とパターンなどを含む、写真のコアルールに従う必要があります。詳細については、こちらをご覧になるか、オンラインで他のリソースを検索してください。

これらの原則は、画像の重要な部分とその周囲のコンテキストに注意を引くのを助けることにより、画像により多くの目的を与えます。

良い画像ルール


画像が配色に沿っていることを確認してください

すべてのWebサイトは、配色を含め、統一感が必要です。最初に配色を選択し、次に画像を選択するか、画像を選択してから配色を選択するかどうか(このようなツールは後者に役立ちます)、画像の色が全体の配色に合うことを確認してください。画像を洗い流してからカラーフィルターを適用するとうまくいく場合があります。

descr


画像内の分散を制限する

視覚的な外観を忙しくしないでください。画像に色やオブジェクトがたくさんあると、テキストを重ねてレイアウトに合わせるのが難しくなります。前述のように、最初にコンテンツを作成してから画像を選択します。

カラーフィルターを追加する前に、部分的に透明なオーバーレイを追加したり、画像を暗くしたり、白黒に洗い流したりすることで、不要なノイズを減らすことができます。また、読みやすくするために、テキストの背後または要素に背景色を適用することもできます。

ここに画像の説明を入力してください

上記の画像は元の画像を暗くし、エッジのいくつかの影を使用してノイズを減らします。以下の画像は、同じことをするために部分的に透明な暗いオーバーレイを使用しているようです。

ここに画像の説明を入力してください


画像サイズが十分に大きいことを確認してください

言うまでもなく、使用する画像は、引き伸ばさずに各画面を覆うのに十分な大きさでなければなりません。つまり、フルサイズの画面では、最小解像度が1024 x 768ピクセルの画像が必要ですが、少なくとも1200ピクセルの幅を目指してください。また、解像度に基づいて異なるサイズの画像を提供することで、より小さな画面で大きな画像をロードすることを節約できます詳細はこちらをご覧ください。ただし、可能な限り画像の読み込み時間を最適化してください。画像品質は認めません。


画像を使用する権利があることを確認してください

使用が許可されていない場合は、使用しないください画像の著作権がわからない場合は、探してみてください。ただし、知るまでは使用しないでください。最後にしたいことは、侵害で訴えられることです。


写真の品質が高いことを確認してください

粒子の粗い画像やぼやけた画像は使用しないでください。疑わしいコンテンツや無関係のコンテンツを含む写真を使用しないでください。シンプルに保ちますが、(ほとんど)本物です。検討する各画像の良い部分と悪い部分についてよく考え、平凡なものを受け入れないでください。

追加のリソース:


4
いい答えだ。私はおそらく過度に簡潔だったでしょう:「それは良い写真であり、あなたのサイトのニーズと目的に関連していることを確認してください」:)
DA01

@ DA01私はその声明に完全に同意しますが、一部の人々はもう少し助けが必要です:)
ザック・ソーシエル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.