写真の上にテキストを配置しない
Webサイトで写真の上に読む必要のあるコピーを配置するのは個人的にはあまり好きではありません。少ない文字数で大きなフォントであれば問題ない場合もあるのでケースバイケースではあるのですが。。汗
さて、なぜ写真上にコピーと配置してはならんと考えているか、自分のなかでは４つの理由があります。
①集中力の分散
コピーを読まなければならないほど文字数がある場合に読んでいる途中で裏に敷かれている写真に目が行ってしまい文章に集中しにくいと感じるためです。
②コントラストと可読性の低下
背景の写真の種類にも拠りますが、文字色とのコントラストが一定ではなくなり、読みにくくなる箇所がでてきてしまうためです。
③変更自由度の低下
コピーの長さを少し変えると写真の見せたい部分に被ってしまい、被らせないようにするには、フォントサイズを調整したり文字の配置を変えたりしなければならないなど、変更するときにいろいろと考慮しなければならす面倒くさいためです。
④PCとスマホの表示の違い
スマホとPCではディスプレイサイズに差があり、写真の上のコピーは調整しづらいです。ユーザに効率的に情報を伝えることが目的なのに、写真の上に上手く文字を配置することに意識が集中してしまうのは、本末転倒なのではないでしょうかという理由です。
コピーを配置するエリアに半透明の白を敷いた領域を用意したり、文字の縁取りをした袋文字を利用するなどよく見かける工夫ですが、コピーの文字数が多い場合は、上記の理由の①②あたりのほうが優勢で、仮に一枚の絵としての見た目は、一見キレイそうに見えてもユーザに情報を届けるという本来の目的を優先させるべきかと思います。
また、テクスチャについても同様のことが言え、文字数や使用するフォントによりケースバイケースですが、例えば、PCのデザインサンプルのみをみてOKを出すと、スマホのデザインをまとめるのに大きな労力が必要になって、ああ疲れたとならないように気をつけたいものです。