web-dev-qa-db-ja.com

テキストデータの背後に画像を配置する必要がありますか?

現在サイトを構築しており、レイアウトの中央にあるデータセクションに、微妙な背景画像を含む「ブランド」を追加することを検討しています。ブラウザの設定が異なると、「ブランドイメージ」が対照的に明るすぎて未定義になるか、暗くなりすぎて、上のテキストが読みにくくなることが懸念されます。 ?

5
Ron

コンピュータとブラウザの間で色にばらつきがあることは事実ですが、この違いは過去2年ほどで劇的に減少しています。

  1. 歴史的にMacは1.8の gamma を使用していましたが、Mac OS X v10.6(Snow Leopard)では、Windowsコンピューターのネイティブガンマと一致するように2.2に変更しました。 AdobeのJohn Nackが、この変更による彼のブログのWebコンテンツへの影響の素晴らしい要約を掲載しています
  2. 長い間、SafariはPNGカラープロファイルを実装した唯一のブラウザでした。残念ながら、Mac OS X v10.4(Tiger)までは、SafariはコンピューターのキャリブレーションされたカラープロファイルをuntaggedPNG(つまり、明示的でないPNG)に適用していました。カラープロファイルが含まれています)。 これにより、PNGを使用する多くのサイトで、カラーマッチングに問題があるように思われます 。 Tigerでこの変更が行われたため(さらに最近 Firefoxにカラープロファイルのサポートが追加された 以来)、色の再現に関するブラウザー間の問題の影響が大幅に軽減されました。

現在、ユーザー間の色の一貫性に影響を与える主なものは、ユーザー自身のハードウェアです。モニターの品質、バックライトの種類、輝度と種類(LCDとCRT)は、色の忠実度に大きな影響を与える可能性があります。すべてのユーザーがどのようにサイトを体験するかを実際に確認する方法はありませんが、少なくとも、適切に調整されていないマシンで、理想的には低品質の画面(ライトグレーなどの色がよく表示される)でデザインをテストできます。白に吹き飛ばされた」)。

2
Kit Grose

これはisで実行可能なアイデアであり、賞賛に値するアイデアです。

既に述べた制約のため、ほとんどのUIデザイナーは積極的にそれを追求しなかったかもしれません。ただし、注意深く設計すれば、フォアグラウンドのテキストを邪魔したり混乱させたりすることなく、きちんと機能し、適切な視覚体験を提供できます。

もう1つのポイントは、裁量による使用です。 1つのページで複数回使用しないでください。テキストが重要であり、明確性/正確さが非常に重要な場合。これは、背景画像に対して文字が別の文字に見え、誤解を招く可能性があるためです。

最後に、このコンセプトは通常のグラフィックデザインでは新しいものではないと思います。

1
Kris

グーグルで簡単に検索すると、ブラウザで色がどのようにレンダリングされるか、そして微妙な違いは何かに関する興味深い記事が表示されます

Mac OS Xの主要なブラウザでレンダリングされたフォントと背景色の簡単な比較

サイトが言っていることを引用するには

暗い背景に明るいテキストを表示するWebサイトには、不幸な副作用があります。一般的に、light-on-darkフォントは、dark-on-lightのフォントよりも太字で表示されます。

実は、実際には太字ではなく(ストローク幅を構成する実際のピクセル数に関して)、ブラウザとオペレーティングシステムによるフォントのアンチエイリアスにより、太字で表示されるだけです。

ただし、使用しているテキストの色と対応する背景画像がわからないので、上記の情報が該当するかどうかはわかりません。ただし、画像については、写真の色の濃さによって画像の カラープロファイル によって大きく異なります。したがって、バックグラウンドイメージをレンダリングするときに、それをテストする必要があります。

考慮する必要があるもう1つの考慮事項は、特定のモニターが他のモニターよりも鮮やかに色を表示することです。その場合は、テキストが画像に対してどのようにレンダリングされるかを確認する必要があります。

最後に、はいまたはいいえの答えを与えなかったのはわかっていますが、設計要件にこのようなブランディングが必要な場合は、考えられるすべてのベースをカバーしてから作業を行ってください。

1
Mervin

ここで穀物に逆らって言います

番号

しないでください。ユーザーエクスペリエンスに何も追加せず、読みやすさや使いやすさを損なう可能性があります。

0
Steven A. Lowe