バナーが意図通りに表示されないとき

画像が重すぎる

更新日: 2016年8月1日

ホームページを含めて、Webサービス、アプリは思わぬ動きをすることがあります。
残念ながら、デジタルエイドが提供するサイト内バナーも、意図通りにいかないことがあります。
しかしサイト内バナーなら、アプリと違って、自力で修正することができます。
以下、よくある2つの症状に関して、その対処法を解説します。

症状1. 文字が小さすぎる

タイトルやコピー文を一行で表示する場合、プログラムはユーザーの画面サイズと文字数から一文字のサイズを決定しています。
ですから、文字のサイズを大きくするには、文字数を減らす必要があります。言葉を詰め込みすぎず、短い、印象的なフレーズでバシッと決めましょう。

症状2. 画像がヘンに小さなサイズで表示される

プログラムは最初、ユーザーの見えない領域に画像を読み込ませ、画像の縦横のサイズを計測しています。しかし画像が重いと、ブラウザの読み込みが遅れ、正しいサイズが計測できないことがあります。あるいは古い値がキャッシュされ、表示がおかしくなることがあります。
トップイメージの画像がプログラムが正しく計測できなかったときの失敗例です。
もう一度リロードすると正常に戻ることがあります。
しかし画像が重すぎる場合は、回線の混み具合によっては、頻繁に問題が起きることもあります。このような回線やデバイスの問題は、プログラムを修正しても根本的な解決にはなりません。画像そのものをダウンサイズすることが最良の方法です。
スマフォやデジタルカメラで撮った高画質(1000ビスセルを超える)の画像をそのまま使うのではなく、いったんリサイズして使いましょう。リサイズするにあたっては、長いほうの辺を640ビクセル以下にするのがお勧めです。これは最新のスマフォでもきれいに見えるサイズです。
長辺を640ビスセルにおさえても印刷物で使うような高解像度の画像の場合、まだ重すぎるかもしれません。ネットで見せる場合は72dpiで十分です。

よい画像 ≠ 高解像度 + 高画質

高解像度 & 高画質だからといって、画像がよくなるわけではありません。
高解像度や高画質と、その画像がよいかどうかは別の問題です。
平凡な画像は高画質であろうが、高解像度であろうが、見栄えがよくなることはありせん。
画像を高画質なテレビで見せたり、印刷物で見せたいときには、高画質や僧解像度である必要が生じますが、インターネット上で見せる場合は不要です。読み込みが遅くなり、見る人にストレスを与えます。

もうひとつ、よくある誤解は、画像は大きく扱った方が見栄えがするという考え方です。見栄えがよくなるというのは、画像がたんに大きいからではなく、その画像以外の他の要素とのメリハリがきいて、すっきり見やすくなっているからです。しかしこのやり方には弊害があります。小さな画像や重要なテキストが大きな画像の陰に隠れて、見過ごされてしまいます。
サイト内バナーの場合、一時的にWebページをレイヤーの下に隠すので、他の要素を気にして、画像を大きく扱う必要はありません。むしろ余白との関係を考えることが必要になります。余白が大きい方がかえって、コンテンツが目立つという逆転現象が、ここではよく起こります。

まとめ

サイト内バナーが意図通りに表示されない場合、設定を見直してみましょう。タイトルやコピーが長すぎるときは、言葉を詰め込みすぎず、短い、印象的なフレーズで決めましょう。
画像のサイズがおかしいときは、画像の容量が大きすぎるからです。長辺を640ピクセル以下にリサイズしましょう。

▲このページのトップへ