背景画像の上にテキストを表示することは悪い考えであることを他の人に納得させるにはどうすればよいですか？
大きな画像の上に大きなテキストを表示するWebページをユーザーが簡単に作成できるようにする機能を作成する必要があります。このような：
このデザインパターンはいくつかの理由で問題があると私は強く思います。
- 大きな画像==大きなファイルサイズ==悪い
- 必然的に誰かが明るい画像に明るいテキストを置くことになります（またはその逆）
- 誰もが大画面を持っているという誤った仮定を強化します
この機能を構築することで、このパターンを使用するように人々を奨励するような気がしますが、これが悪い考えであることを他の利害関係者に納得させるのに苦労しています。
北 、一連の標準とベストプラクティスには 古いデザインパターン に関するセクションがあります。
大きな背景画像を使用すると、ページの重みが大きくなり、実際の利益はほとんど得られません
そして
可変長テキストの場合、テキストを画像の上に配置することは避けてください。これら2つの組み合わせは予期しない結果を生む傾向があり、適切に制御されていないと、画像の重要な部分を覆い隠したり、オーバーランしたり、画像全体を覆ったりする可能性が高くなります。
それらの引用の問題は、それらがいかなる実証的証拠も提供しないことです。
カルーセルの使用に対する同様の議論があります。ただし、カルーセルが悪いアイデアであることを「証明」しているように見えるいくつかの調査があります。参照 カルーセルインタラクション統計 、 ローテーションオファー：ホームページデザインの惨劇 、および- カルーセルの上昇 。
私の主張を裏付ける実証的研究や信頼できる資料（ノース以外）はありますか？それと矛盾するものはありますか？
はい、画像の上にテキストを配置するためのガイドラインがあります
以下は、いくつかの高く評価されている組織からのガイダンスです。
Nielsen/Norman Group読みやすさを確保するために十分なコントラストを確保しながら、画像の上に テキストを配置する方法 についての良いガイダンスを提供します：
感情を刺激する画像と情報テキストを組み合わせる場合は、テキストとその背景の間に高コントラスト比を作成して、テキストが読みやすくなるようにします。
（ 画像上のテキストのハイコントラストを確保する by： Aurora Bedford ）
米国政府は、 セクション508のWebサイトのユーザビリティ基準 に準拠するのに役立つ公式ツールを備えています。サイトのテキストがこれらのガイドラインに準拠している場合は、読みやすさが許容範囲であることを確認できます。
セクション508のガイドラインは、視覚障害を持つ読者に対応するためにテキストがどのように見えるかについて、世界的に受け入れられているベストプラクティスに基づいています。米国政府が採用したガイドラインは、 国際標準化機構（ISO） 、 米国規格協会（ANSI） ）、および現在の最小コントラストからのガイドラインに準拠していますガイドライン（ SC 1.4.3 ）from Web Content Accessibility Guidelines（ WCAG 2.0 ）published by the The World Wide Web Consortium（W3C）） 。
セクション508の読み取り（ハイパーリンクが追加されました。）：
3：1のコントラスト比は、標準のテキストとビジョンに対して [ISO-9241-3] および[ANSI-HFES-100-1988]]によって推奨される最小レベルです。4.5：1の比率は、この規定で使用されます適度に低い視力、先天性または後天性の色覚異常から生じるコントラストの低下、または通常は加齢に伴うコントラスト感度の低下を説明します。
上記のAmerican National Standards Instituteのドキュメント参照ANSI-HFES-100-1988は ANSI/HFES 100-2007 に置き換えられました。
従うべきより良いガイドライン
あなたが引用した記事からあなたが受け入れた結論のいくつかには同意しませんが、あなたは心配するのは正しいです。 （このQ＆Aで、この問題が「非常に簡単」であることを示唆しているコメントは無視してください—そうではありません—そして、これが正しく行われていることを確認してください。）
セクション508のガイドラインを順守することは 会社を責任から守る ）に役立つ可能性があるため、会社が視覚障害のあるユーザーに向けてマーケティングを行っているかどうかに関係なく、利害関係者に提示する優れたガイドラインです。
他のチームによるコンプライアンスの促進
CMS内の他のユーザーによって維持されるサイトでのコンプライアンスの確保に関して、これに対処するための2つの基本的な戦略があります。
- プロセスを確立し、主要なスタッフをトレーニングして信頼できるようにします。
- 技術的にコンプライアンスを実施する設計とシステムを開発します。
私の最近のプロジェクトでは、最初の戦略から始めて、2番目の戦略に切り替えました。コンテンツマネージャーは、準拠するはるかに小さな画像のセットに制限するのではなく、サイトのデザイン内で見栄えのよい画像を見つける方が簡単かつ迅速であることに単に気づきました。
デザイン内でのハイコントラストの適用
画像の上の半透明の黒い背景に白いテキストを配置するレイアウトを作成することで、これを管理しました。テストするには、背景画像を完全に白くしてコントラストを確認します—そのコンテキストで準拠している場合、設定は（数学的に）どの画像でも機能します。 Nielsen Norman Groupの記事 は、この例を示しています。
最近では、 ストローク （別名、テキストシャドウ））でハイコントラストを適用することもできるかもしれませんが、これが美しく行われるのを見たことはありません。
画像サイズに関する注意
ご提供いただいた例が「大きな背景画像」と見なされるかどうかはわかりません。典型的な中程度のサイズのWebバナーのようです。組織がWebで使用するために画像を最適化/圧縮していることを確認してください。
小さな画面
上記の例の画像は、電話ではそれほど良くないため、電話では表示されません。 （オプションまたは必須）2番目のフィールドは、小さな画面（電話）の背景画像を提供するCMSに含める必要があります。理想的には、これは同じイメージの別のバージョンになるでしょう。この例では、生き物がいないサーフィンだけかもしれません。これにより、デバイス間で一貫したエクスペリエンスが提供されます。
あなたが言及したこれらの問題は、実際には「問題」ではなく、wwwの現在の状態はその良い例です。
しかし、あなたの質問は人々を説得することに関するものでしたので、あなたがここでしたことを正確に行うことをお勧めします。問題を視覚的に紹介して、人々が「触れる」ことができるようにします。
上記のコメントでは、あなたが挙げた問題が実際の問題ではなく、簡単なエンジニアリングで実際に解決できる方法について説明しました。しかし、私はあなたの大義を助け、あなたが利害関係者をどのように説得できるかについての理由を見つけようとします。
1。読みやすさを得るのは難しく、画像を変更しようとすると失敗することがよくあります
テキストオーバーレイは簡単に入手できるものではなく、考慮が必要な変数がたくさんあります。画像に対するオーバーレイの色、透明度、テキストの色、テキストのサイズ。その情報が本当に面倒な価値があるかどうかを質問したいのです。
2。画像は感情を提供し、テキストは情報を提供します
はい、画像は間違いなく魅力的ですが、それによって重要なコンテンツについて妥協する必要がありますか？あなたのコンテンツストラテジストは、適切なコンテンツを考え出すための方法について頭を抱えていますか？.
3。 W3C：コントラストの理解
この達成基準の目的は、テキストとその背景の間に十分なコントラストを提供して、中程度の視力の弱い人（コントラストを高める支援技術を使用していない人）が読めるようにすることです。色覚異常のない人の場合、読書パフォーマンスで評価すると、色相と彩度は読みやすさにほとんど影響しないか、影響を与えません（Knoblauch et al。、1991）。色の不足は、輝度のコントラストに多少影響を与える可能性があります。したがって、推奨では、色が重要な要素にならないようにコントラストが計算されるので、色覚異常のある人もテキストと背景の間に適切なコントラストが得られます。
これは、画像よりもテキストに対してビジネスを説得したい場合に最適なポイントです。詳しくは W3C：コントラストの理解 を参照してください。
あなたはこの答えを読むべきです
引数の作成に役立つリンクをいくつか次に示します。
これがお役に立てば幸いです。
免責事項：ユーザーインターフェイスのデザインや「フロントエンドデザイン」の経験はあまりありません。端末、emacs、タイリングウィンドウマネージャーが好きです。コマンドラインからでもGoogleにアクセスできます。
大きな画像の上に大きなテキストを表示するWebページをユーザーが簡単に作成できるようにする機能を作成する必要があります。
基本的にyourユーザーは作成Webページの人ですよね？次に、別の視点を紹介します。
私はユーザーの1人です。光沢のあるウェブページを作成したいのですが。私はウェブ上でニースの大きな画像とそれらの上にクールなテキストでいくつかの例を見てきました、私もそれが欲しいです。
可能性1：あなたが提供するツールは、あなたが質問で示したものと同様のデザインを作成することを困難または不可能にします。 ああ、おそらく私は仕事をするために別のツールを手に入れるべきです...
可能性2：あなたはそれを実装する/あなたが私たちに示したものと同様の設計を簡単に達成できるようにします。 それを使用します... [2か月後] ...ああ、判読不能なテキスト/サイトの読み込み時間/アクセシビリティの問題に関する別の不満...私が使用した場合のみ当時とは異なるデザイン...（そしておそらく切り替えられたツールも）
両方の可能性がyourユーザーの不満につながる可能性があります。したがって、代わりに次のことをお勧めします。
可能性：このようなデザインを簡単に作成できますが、ユーザーに通知このようなデザインから生じる可能性のある問題について、できるだけ早くお知らせください。
これは、質問でここに指定したポイントを警告する可能性があります。ユーザーがこのデザイン（テンプレート）を選択したとき。さらに進んで、ユーザー情報を次のように伝えることができます
- 現在の設計に必要な最小/理想的なディスプレイサイズ
- モバイル接続でのサイト読み込み時間の推定
画像のテキストを読みやすくするためにチェックすることもできます（テキストと背景の間の「交点」の周りに小さな領域を生成し、コントラストを推定し、境界の外にある場合は警告します）。
ただし、それを行う場合は、ユーザーが選択したことの影響についてユーザーに認識させる必要があります。
DasBeasto がコメントで正確に言及しているように、サイトを開発する方法を知っている人なら誰でもこれらの些細な問題を克服できます（些細なここでのキーワードです）。
画像と研究の利点については……まあ、特定の1つのサイトに関するレポートをウェブで探し回るのではなく、いくつか nicorns をすばやく検索しました。
- https://www.airbnb.com.ar
- http://slack.com/
- http://www.mi.com/en/
- https://www.fitbit.com/
- http://www.Apple.com/
私はこれらの企業の内部情報を知りませんが、彼らには大きなUXと研究部門があるという事実を知っています。そして、彼ら全員が北の会社が間違っていると言うことをしている。では、ここで正しい答えは何だと思いますか？
利害関係者のカスタムの側面が望んでいると、これは挑戦的ではありますが、最悪の考えではありません。彼らが潜在的な落とし穴を理解しているように感じない場合は、潜在的な最悪のケースのシナリオのいくつかをキャプチャしたモックアップを作成して、懸念の説明に役立ててください。あなたが投稿した画像は理想的な状況であり、見栄えがします。どちらも定量的データではありませんが、そうである必要はありません。
上記のコメントの一部に同意します。背景画像のテキストの明瞭さを強化する方法を安全な慣行に追加する方法があります。前述のように、これを行うにはいくつかの方法があります。印刷の世界に由来し、今日忘れられることが多い1つの例。ぼかした影をつけることで、コントラストを上げることができます。ほとんどの人はぼやけた影にさえ気づきません。これは、この問題の解決に役立つよう、長い間印刷されています。ここではただ1つのアイデアです。