Edited at

Web画面から画像を消してしまうツール

最近Web画面のデザインをしている中で、画像がもたらす効果について気になりました。

画像がどれだけその画面に寄与しているのかを確認する為、画像有り無しの状態を比較してみようと思います。

今回は、Web画面から画像を消してしまう、あら便利なGoogleChromeのアドオン Fast Image Blocker を用いて幾つかのWeb画面から画像を消してみます。

画像削除前後を横並びにし、左が削除前、右が削除後となります。


apple

左)美しいディスプレイをアピールする為か、色彩豊かな壁紙を備えたデバイスの写真を大きく扱っています。購買意欲が掻き立てられます。

右)画像を消してしまうと、何のことかさっぱりわかりません。しかし、画像が消えたからといってレイアウトが崩れないのはさすがです。


楽天

左)appleと同様、品物をアピールする為に画像が多用されています。

右)画像が消えると、やはり訴求力は無くなります。しかし、appleほどの喪失感は感じません。appleの画像は、どのような製品かがわかるだけの画像では無く、更に心に強く残る効果がある画像なのでしょう。


阪急百貨店

左)百貨店なので商品の画像が多いのかと思っていたら、催し等の取り組みのアピールの為に画像を使っている印象があります。

右)レイアウトも崩れ見辛いですが、画像が無いとさっぱりわからない程ではありません。画像はあくまで補足なのでしょう。


東京都

左)東京都は商品は扱わないので、取り組みのアピールの為に画像を使っています。コンテンツは百貨店より少なく、画像が大きめのようです。

右)画像を消すと、さっぱりわからなくなりました。画像だけで取り組みを訴えているせいでしょうか。appleのように画像をひと目見たらどんな商品かわかるのであれば、画像だけで訴える方法もいいのでしょうが、取り組みは画像だけでは内容が想像しづらく、誘導しづらいかもしれません。


ホワイトハウス

左)ホワイトハウスも東京都と同様、取り組みのアピールの為に画像を使っています。東京都よりも伝えるべきことを絞り、好感が持てるデザインに仕上がっています。

右)画像が消えて、アイキャッチの部分のレイアウトが崩れてしまいましたが、画像だけでなく文字でも説明しているので、内容が想像できます。


パソナ

左)派遣というサービスをアピールしています。アイキャッチの画像は大きく印象的ですが、それ以降はさほど画像に頼っている感じはありません。画像で説明できるものでもないのか、言葉で明記する必要があるのかもしれません。

右)やはり、画像が消えてもそれなりに見れます。


日本経済新聞

左)情報そのものを提供しています。画像は見るからに補足です。

右)画像が消えてもほとんど問題ありません。


google

左)こちらも情報そのものを提供しています。

右)画像が消えてもほとんど問題ありません。


amazon.com (番外編)

左)品物をアピールする為に画像が多用されています。

右)画像を消そうとしたのですが、消えませんでした。他のサイトでも広告等は消えなかったので、amazon.comでは特殊な方法で画像を表示しているのかもしれません。また、追々調べてみます。


まとめ

Fast Image Blocker を使うと、簡単に画像が消せて便利ですね!

軽い思いつきでやってみましたが、思いの外、発見があって楽しかったです。

伝えるもの(商品、取り組み、情報)によって、画像をどう扱うべきか見えた気がします。

今回、はじめにAppleを例示しましたが、Appleは壁紙、ディスプレイ、筐体、写真、Web、全てが美しいからああいう表現ができるのであって、猿真似ではああはならないかもしれません。

amazon.comの画像が消せなかった件は、追々調べます。

色情報を減らして明度差が充分か確認したり、色弱な方でも識別できるかといった試験は従来でもありますが、今回は画像を減らしてみました。

今後は、色や画像以外でもあえて何かを削ってみると、あたらしい発見が得られるかもしれないです。