レスポンシブ対応の勘違い！PCでもスマホでも画像の見やすさはキープできていますか？

投稿： 2019年5月16日

スマホで見るのが当たり前になってきている今、Wordpressのテンプレートも公式・非公式問わず、レスポンシブ対応されているものが当たり前になってきていますよね。

ですが、レスポンシブ対応のテンプレを使っていたからといって、本当に表示についても何も問題なしなのでしょうか？このテーマで今日は書いてみたいと思います。

そもそもレスポンシブ対応WEBデザインってなんだろう

PCだけではなく、最近では、PC、タブレット、スマートフォンなど、見るデバイスが異なっており、またそれぞれのタテヨコ比も違っています。ざっくり言えば、横長のPCに対して、タブレットやスマホは縦長。そもそも見やすい形がデバイスによって違うことが、デザインやレイアウトをする上でやっかいなところです。

レスポンシブ対応のWEBデザインは、そのサイズをWEBサイト側で把握し、各デバイスに応じて、サイト表示（レイアウトなど）を対応させていくというスタイルです（CSSで制御していきます）。URLも、PC用、スマホ用と分けることなく、同じもので柔軟に対応したかたちを表示できることが大きな特徴になります。

例えば、PCで見るとこのようなスタイルだったとしましょう。

このスタイルのまま、いわゆるスマホサイズに縮小してそのまま見ると、コンテンツや文字がそのまま縮小され、小さく表示されます。

一方、レスポンシブ対応のWEBデザインでは、そのデバイスにとって見やすいスタイルに、レイアウトの変更、順番の入れ替え、不要な要素を非表示などを行います。

スマホだとしんどい２カラム、３カラムなども1カラムの状態に組み替えてくれたりします。スマホでより見やすい状態に最適化してくれるので、見やすくなるというわけです。

このように、レスポンシブ対応のWEBデザインをすることで、それぞれのデバイスで快適に見えるようになります。便利！ありがたい！

…でも、これはあくまでもレイアウトやデザインの話です。

画像は、切り替えの制御しない限り、そのまま縮小されて表示されるだけ

レスポンシブ対応のWEBデザインをする際、デバイスによって表示する画像を変えることは出来ます。もちろん、その指示はCSSで制御しなければ、勝手に切り替わるわけではありません。何も制御しなければ、当然、何で見ても同じ画像がその大きさにあわせた形で表示されます。

その際特に注意をしなければならないのは、主に横長のメインビジュアルでしょう。

PCサイトでは印象的にするために便利に使われることも多いと思います。でも、それは横長基調のPCだからこそ生きるという場合もあります。縦長基調のスマホで、タテヨコ比そのまま小さくなるとまったく印象が変わることも。

例えば、このように、スライダーでも使われるような情報を埋め込んでいるような画像の場合、PCでは良い感じに見えたとしても、スマホからだとせっかくの内容が小さすぎて読めない、読みにくいなんてこともありえます。先のブログ記事でも書いたような、情報ツメツメのスライダーだったりしたら…特に厳しい。

もし、自社サイトのユーザーがスマホメインだとしたら、スマホで全く読めな内容のスライダーを置いていても結果に繋がりにくいわけで、残念でしかないですよね。

画像の切り替えをすることで、それぞれのデバイスで最適なスタイルに

でも、PCでは今の画像を使いたい！！って場合はどうしたらいいの？

その場合は、CSS制御で表示させる画像の切り替えを行うと、それぞれのデバイスで合うスタイルに適応することができます。

ざっくり書くと、PCではA、スマホではBというように、あらかじめ複数の画像準備して、切り替えて表示するようにします。

例えば､スマホ用の画像を別に作っておいて、このように表示を変えます。

これにより、情報を埋め込んだ画像であっても、形にあったものが表示できるので、ストレスも軽減されますね。

なお今回、サンプルとして、スライダー画像のようなもので説明しましたが、コンテンツの画像でも同じです。例えば手順紹介などを画像で作り込み載せているケースなども結構見受けられますが、横長で表現してあるものなどは、PCで見るとちょうど良くても、スマホだと小さくなってしまい全く見えなかったりします。手順のようなものを説明している画像がよく見えないというのは、かなりしんどいなと思います。

指でしゅーっと大きくしたら見えるんじゃないの？

そうだね。でもピンチアウトまでして見てくれるなんていうのは、

・よほど欲しい商品やサービスである

・興味がハンパない

・友達や知り合いである

といったよほどアツイ理由がないと厳しいんじゃないかな。