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

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

画像がどれだけその画面に寄与しているのかを確認する為、画像有り無しの状態を比較してみようと思います。
今回は、Web画面から画像を消してしまう、あら便利なGoogleChromeのアドオン `Fast Image Blocker` を用いて幾つかのWeb画面から画像を消してみます。

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

## [apple](https://www.apple.com/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/96f155d2-6021-b02d-aff7-0f62d4bddb3e.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/4f7667c4-eb50-211a-aad0-2f066dd7e572.png" height="300">

左）美しいディスプレイをアピールする為か、色彩豊かな壁紙を備えたデバイスの写真を大きく扱っています。購買意欲が掻き立てられます。
右）画像を消してしまうと、何のことかさっぱりわかりません。しかし、画像が消えたからといってレイアウトが崩れないのはさすがです。

## [楽天](https://www.rakuten.co.jp/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/61bfd901-5d52-c0f1-7f50-93af1d9024ac.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/36ad66fb-0c21-fc18-9d4b-7faf5c975af8.png" height="300">

左）appleと同様、品物をアピールする為に画像が多用されています。
右）画像が消えると、やはり訴求力は無くなります。しかし、appleほどの喪失感は感じません。appleの画像は、どのような製品かがわかるだけの画像では無く、更に心に強く残る効果がある画像なのでしょう。

## [阪急百貨店](http://www.hankyu-dept.co.jp/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/e277e233-2a9d-31f3-693c-9bafb26f8afe.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/6df36c94-9707-1dab-dbbb-c919761adb3f.png" height="300">

左）百貨店なので商品の画像が多いのかと思っていたら、催し等の取り組みのアピールの為に画像を使っている印象があります。
右）レイアウトも崩れ見辛いですが、画像が無いとさっぱりわからない程ではありません。画像はあくまで補足なのでしょう。

## [東京都](http://www.metro.tokyo.jp/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/5666557d-e490-5c21-d192-67dee707d151.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/6eac53e7-60d1-db59-1001-6cc20c1bec93.png" height="300">

左）東京都は商品は扱わないので、取り組みのアピールの為に画像を使っています。コンテンツは百貨店より少なく、画像が大きめのようです。
右）画像を消すと、さっぱりわからなくなりました。画像だけで取り組みを訴えているせいでしょうか。appleのように画像をひと目見たらどんな商品かわかるのであれば、画像だけで訴える方法もいいのでしょうが、取り組みは画像だけでは内容が想像しづらく、誘導しづらいかもしれません。

## [ホワイトハウス](https://www.whitehouse.gov/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/9f23b73b-849c-9894-563c-dfbe4a9bd29d.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/7998181e-1c06-ba55-aa08-7cab196be2dc.png" height="300">

左）ホワイトハウスも東京都と同様、取り組みのアピールの為に画像を使っています。東京都よりも伝えるべきことを絞り、好感が持てるデザインに仕上がっています。
右）画像が消えて、アイキャッチの部分のレイアウトが崩れてしまいましたが、画像だけでなく文字でも説明しているので、内容が想像できます。

## [パソナ](https://www.pasona.co.jp/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/125e67bf-acb7-c29c-6acd-9b17ea5b9f40.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/3138e14d-d4a7-cf67-7472-c75b81799cce.png" height="300">

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

## [日本経済新聞](https://www.nikkei.com/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/267a2f95-b83a-8d32-201c-9b86dd7ac8c8.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0639e713-09ae-c72e-6bce-41bafd43270e.png" height="300">

左）情報そのものを提供しています。画像は見るからに補足です。
右）画像が消えてもほとんど問題ありません。

## [google](https://www.google.com/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/3dd4356e-8d8d-afaa-2196-f5a9bee640b0.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/62aa8f8f-6483-6ca2-6c88-dc52fd88ac7c.png" height="300">

左）こちらも情報そのものを提供しています。
右）画像が消えてもほとんど問題ありません。

## [amazon.com](https://www.amazon.com/) (番外編)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/03111342-0bfe-a04e-e9f8-132dd0bf5451.png" height="300"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/484ce970-3f3f-efba-b4b0-6e0add329328.png" height="300">

左）品物をアピールする為に画像が多用されています。
右）画像を消そうとしたのですが、消えませんでした。他のサイトでも広告等は消えなかったので、amazon.comでは特殊な方法で画像を表示しているのかもしれません。また、追々調べてみます。

## まとめ
`Fast Image Blocker` を使うと、簡単に画像が消せて便利ですね！

軽い思いつきでやってみましたが、思いの外、発見があって楽しかったです。
伝えるもの（商品、取り組み、情報）によって、画像をどう扱うべきか見えた気がします。

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

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

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