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

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

 

 

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

 

 

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

 

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

 

 

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

 

 

 

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

 

 

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

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

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

 

 

 

 

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

 

 

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

 

 

 

 

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

 

 

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

 

 

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

 

 

 

 

 

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

 

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

 

 

 

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

 

 

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

 

 

 

 

 

 

 

 

画像を使うのは綺麗に見せる上で、手軽で便利な手法ですが、PCだけではなくスマホで見た時どんな感じになるのか、きちんと確認した上で、切り替える必要があるかどうかを検討することをオススメします。

 

 

何もしなくてもそのままで見やすい状態を作ることは、見ていただきたいお客様に情報を届けて、喜んでいただくためにとても大切なことだと思いますよ。

 

 

まとめ

 

ここまでの内容を今一度まとめると、こんな感じです。

 

当社でWEBページを制作する場合、画像の切り替えはもちろん、効果的画像を使うこともきちんと考えてご提案させていただきます。スマホ対応、レスポンシブ対応についてもお気軽にご相談ください。