ウェブサイトの背景画像は呼吸と同じで、私たちの生活の一部となっていますが、よほどのことがない限り気づくことはありません。 息を吸う回数と同じように、ウェブサイトの背景画像は、ウェブサイトの成功と「寿命」に不可欠であり、他のコンポーネントのパフォーマンスを向上させます。
企業のウェブサイトの背景画像は、単にきれいなだけのものではありません。 ユーザーエクスペリエンス全体に大きな影響を与えます。 視聴者に自分と同じリズムを強いることで、優れたストーリーテリングのツールとなる可能性があります。 そのため、基本的な無地のカラーブロックでも、実際の画像でも、あるいは動画でも、ウェブサイトの背景画像を選択することが重要です。 この記事では、ウェブサイトの背景を選択する際のベストプラクティスガイドを紹介します。
記事の概要
ウェブサイトの背景画像を選ぶ際のアドバイス
1.高解像度は必須
2.ブランドイメージの補完
3.コントラストに気を配る
4.アクセシビリティを優先する
5.繊細でシームレスなテクスチャーの使用
6.さまざまな画面やデバイスの使用を考慮する
7.人物のリアルなイメージがより際立つ
8.画像の最適化
9.適切な画像ファイル形式の選択
10.イメージを語らせる
ウェブサイトの背景画像を追加する
ウェブサイトの背景画像を選ぶ際のポイント
まとめ
ウェブサイトの背景画像を選ぶ際のアドバイス
ウェブサイトの背景画像を選ぶのは難しいことです。 ウェブサイト全体のデザインの中で最も重要な要素の一つであり、特定のイメージやデザインにブランドを合わせるのは難しいことでしょう。 そのため、以下のガイドを参考に、ウェブサイトに適した背景画像を選んでみましょう。
1.高解像度は必須
絶対的な間違いは、低解像度の背景画像を選択することです。 この場合、背景が粒状であったり、低解像度であったり、古いWin95の壁紙のようであったりします。
高解像度の画像は、どんな訪問者に対しても、ウェブサイトをより魅力的でプロフェッショナルなものにします。 余裕があれば、写真やデザインにお金を払うのもいいですが、いいことに、高解像度の写真はネットで簡単に入手できるものがたくさんあります。 無料のものもあれば、数ドルのものもあります。
2.ブランドイメージの補完
多くの企業が抱える問題として、特定の背景画像やレイアウトが好きで、それを自社ブランドに押し付けようとすることがあります。 これは必ずしも良いアイデアではありません。 ウェブサイトの背景画像を選んで、それを中心にブランドを展開するのは、決して良いことではありません。 それよりも、自社のブランドアイデンティティをよく理解した上で、条件に合ったウェブサイトの背景画像を選ぶことが大切です。
Strikinglyのユーザーのサイトから受けた画像
3.コントラストに気を配る
ウェブサイトの背景画像は、その名の通り、ウェブサイトのコンテンツを圧迫しないようにするための背景写真です。タイトルとコピーが混在している場合は、何かを変える必要があります。ウェブサイトのコンテンツは、読みやすく、理解しやすいものでなければなりません。 そのため、ウェブサイトの背景画像を選ぶ際には、タイポグラフィや配色を考慮することが重要です。
Strikinglyのユーザーのサイトから受けた画像
4.アクセシビリティを優先する
ウェブサイトの背景画像を選ぶ際には、まず文章の読みやすさにどう影響するかを考えましょう。 文字が読みやすいこと、文字と背景のコントラストが適切であることを確認する必要があります。 上記のようなアクセシビリティの問題に不安があり、それでも画像を使用したい場合は、うまくいくようにするための手順があります。 情報を読みやすくするために、画像編集ツールやCSSを使って、不透明度やコントラストを変更したり、レイヤーマスクを適用したりすることができます。 また、素材に適したフォントやフォントサイズを選ぶことも重要です。
5.繊細でシームレスなテクスチャーの使用
テクスチャーは、ウェブサイトの全体的なルック＆フィールにエレガントな雰囲気を与えることができます。 シームレスなテクスチャーは、ページの背景やコンテンツの特定のエリアに使用される場合でも、画面上でパターンを繰り返し、大きな画像のような印象を与えることができます。 ウェブサイトの背景画像は、フルサイズのテクスチャーを使用できる場合もありますが、詳細な画像は複数のスクリーンサイズ間でうまく移行できない場合があります。 また、ファイルサイズが大きいと、ページの読み込み時間が遅くなります。
もっとインパクトのある背景にしたいのでなければ、さりげなく継ぎ目のないテクスチャーも好ましい機能です。 大きなパターンで消費者を圧倒することは避けましょう。 素材を際立たせるために、柔らかい線や色の画像を探してください。
Strikinglyのユーザーのサイトから受けた画像
6.さまざまな画面やデバイスの使用を考慮する
画面の大きさによっては、背景の見える範囲が大きく変わることがあります。 これは写真を見れば一目瞭然です。 ワイドスクリーンではきれいに見えても、スマートフォンでは台無しになってしまうことがあります。 画像の重要な部分が切り取られ、文脈が失われることがあります。
ここでの問題は、写真の選択と、コーディングにあります。 レスポンシブウェブサイトとは、RWD（Responsive ウェブ Design）とも呼ばれるウェブデザイン手法で、様々なデバイスの異なる画面やウィンドウサイズに合わせてコンテンツを表示することができます。 これにより、ウェブサイトの背景画像も指定されたアスペクト比（横長、縦長、正方形）に合わせて表示されるようになります。 小さなディスプレイにもフィットする可能性が高くなります。
Strikinglyのユーザーのサイトから受けた画像
7.人物のリアルなイメージがより際立つ
人が写っているウェブサイトの背景画像を選ぶことは、ウェブサイトへのコンバージョンを高める可能性のある素晴らしい方法です。 可能であれば、実際の人物を使うことをお勧めします。 キャラクターを使用した場合に起こりうることですが、ウェブサイトの背景画像が他の何百ものウェブサイトに同時に表示されることは避けたいものです。
Strikinglyのユーザーのサイトから受けた画像
8. 画像の最適化
ブログ、オンラインサービス、一般的なウェブサイトなど、高品質な写真をアップロードするためには、アップロードする画像の最適化に時間をかける価値があります。
まず、先ほど説明したように、写真の状態を確認します。 そして、画像ファイルに正しい名前をつけることで、検索エンジンにインデックスされやすくすることができます。
「写真１.jpg」や「スクリーンショット 2019-03-18」という画像を保存したことはありませんか？ これは、ウェブサイトの背景画像に関しては、大きな問題となります。
写真の名前は、写真を説明するもので、句読点やスペースの使用も避けるべきです。名前にはアンダースコアではなくハイフンを使用するのが良いでしょう。
9.適切な画像ファイル形式の選択
使用する画像ファイルの形式がわからない場合は、こちらをご覧ください。
JPG：
これらのファイルは、適度なファイルサイズを保ちながら、幅広い色を扱うことができるため、画像に最適です。 この画像を使用する場合、大きなファイルを気にする必要がないため、読み込み時間が短縮されます。
PNG：
このファイルタイプは、グラフィック、特にカラーの量が多い場合やフラットな場合に最適です。 ほとんどのデザイン、インフォグラフィック、テキストを多用した画像、ロゴなどがこのカテゴリーに入ります。また、PNGは背景を透明にすることができます（ロゴに最適）。 可能であれば、PNGを「24ビット」フォーマットで保存すると、より高品質で多彩なカラー表示が可能になります。
10.イメージを語らせる
魅力的なウェブサイトの背景画像は、ウェブサイトの訪問者の興味を刺激します。 情報を伝えるためには、多くのテキストを使うよりも、画像を使った方が効果的な場合があります。 たとえ読みやすい文章であっても、すべてのお客様が時間をかけてじっくり読んでくれるとは限りません。
ウェブサイトの背景画像を追加する
Strikinglyのライブラリから写真を選んだり、自分の写真をアップロードしたり、アップロードしたストック画像を背景画像として使用することができます。 また、背景に画像や動画を追加することもできます。もちろん、テンプレートをそのまま利用するのもあり得るです。
Strikinglyのウェブサイトに背景写真を追加する方法を確認するには、以下の手順に従ってください。
- サイトのエディターページを開きます。
Strikinglyの商品から受けた画像
- 背景のオプションを選択します。 動画や画像を背景にすることができます。
- 「その他」をクリックすると、フォトギャラリーが表示されます。
Strikinglyの商品から受けた画像
- 「新しい画像をアップロード」をクリックして、お好きな背景画像を追加してみましょう。 なお、ファイル形式はgif、jpeg、png、bmp、icoのみとなります。
ウェブサイトの背景画像を選ぶ際のガイドライン
Strikinglyのウェブサイト用背景は、モニター、タブレット、携帯電話など、あらゆる画面サイズに対応しています。 どの画面でも背景がきれいに見えるように、幅1600ピクセル×高さ900ピクセルのサイズをお勧めします。 人物やブランドなど、背景以外の写真の追加にはご注意くださいね。 効果を確認するには、「プレビュー」機能をご利用ください。
背景を調整して整列させるには、いくつかのオプションがあります。
- ストレッチ／オーバーレイ：画像を縦横を含めて画面全体に引き伸ばすことができます。 通常はこの方法が最適で、画像はどんな画面サイズでも背景として使用することができます。 一方で、画像が横（特に左右）にコンテンツを表示している場合は、スマホでは表示できないことがあります。
- インクルード：画像全体を表示して、取りこぼしがないようにします。 ただし、この場合、一部の画面では隙間が生じることがあります。
- センター：センターを選択した場合、画像はセクションの中央に表示され、ズームインはされません。 一方、背景では、画像の縁の余白が小さすぎることがわかります。 画像が大きすぎると、特に小さい画面では一部が切り取られてしまうことがあります。
- タイル：画像を中央に配置してから繰り返すので、パターンを作るのに便利です。
まとめ
この記事を読んで、ウェブサイトの背景画像に技術的に意味合いがたくさんあると思いませんか？ 画像にはストーリーがあり、快適なインターフェイスを作るための重要な役割があります。 全ページの背景は、サイトのトーンを確立するのに役立ちます。部分的な背景は、コンテンツのためのスペースを確保します。
そのため、ウェブサイトに適した背景写真を選ぶ際には、サイズ、アスペクト比、モバイルデバイスとの互換性などの要素を考慮する必要があります。 なぜなら、バックグラウンドでも、細部が重要だからです。
今すぐStrikinglyに登録して、ウェブサイトを構築しましょう。 初心者のためのプラットフォームとして、Strikinglyはウェブサイトの構築に優れているだけでなく、その公式ブログはマーケティングの他の側面についても豊富な知識を提供しており、そこから学ぶことができます。
今すぐStrikinglyに登録すると、機能を備えた無料版にアクセスできるだけでなく、14日間無料で全てのパッケージをご利用いただけます。 もしオンラインマーケティングを向上させ、より多くのお金を手に入れたいのであれば、Strikinglyでウェブサイトを管理してみませんか？
内容についてご質問がございましたら、support@strikingly.com までご連絡ください。
