パソコンではいいけど、スマホで見づらい画像はどうしてる?

Google検索がパソコン表示とスマホ表示、両方を重視するようになり、レスポンシブのサイトの制作がほぼ100%になってきました。

以前はパソコンサイト、スマホサイトを別で制作し、それぞれの環境に合わせて表示する内容を選んでいましたが、この場合は別サイトを表示させているためサイトのアドレスとなるURLが違います。

URLが違うということは、サイト全体の評価は変わらないのですが、パソコン・スマホと各ページにお客さんが分散しているため、1ページの人気度としては共通しているサイト、レスポンシブサイトにはかないません!

そこでバラバラに作ってあったサイトを共通化させる、そもそもパソコン用しかなかったサイトをレスポンシブ化したサイトにリニューアルする会社が増えてきているようです。

 

…………というわけで、レスポンシブ化させるにあたり、なかなか難しいのがデザイン問題!

 

以前もブログで少し紹介しましたが、パソコンの画面は基本的に横長。
そしてスマートフォンは縦向きで閲覧している人が多いのではないでしょうか?

レスポンシブデザインは、画像などを共通して使うため、どちらの画面で見ても綺麗に見えることが求められます。

例えば「お申し込みはこちら!」というバナーをパソコンサイトで横長にデザインします。
バナーの上に細かな装飾や文字を配置させた場合…スマホの場合はとても小さく読めません!

そこでどうしても読ませたい場所、どうしても表示を変えたい箇所だけ、パソコン用・スマホ用の画像を用意し、それぞれのブラウザで片方の画像が表示されるように設定をします。

css3からの機能、Media Queries(メディアクエリ)を使います。

ブラウザの幅が○○以上の場合にはAの画像。
ブラウザの幅が○○以下の場合にはBの画像。

このような指定をすることが可能です。

 

できるんだったらやればいいじゃん?って思ってませんか?

画像の切り替えの場合、サイトに表示させていなくても読み込みはしています。(読み込んだ上で「ここは非表示」と指定をしています。)読み込む画像が複数になればなるほど、重くなります。そして、運営をしていく上で画像差し替えがあった場合、1個の画像ではなく両方の修正時間がかかってきます。

またGoogleのSEO的には、原則としてパソコンで見られる情報とスマホの情報は等しくあった方がいいとしているような傾向もあるので、出来ることならデザイン段階でパソコン・スマホと連動しやすいデザインである方がいいのです。

このような理由で、パソコンとスマホ、どちらでも見やすいデザインを考えています。
デザイン的言えば自由度は少ないのですが、そもそもこのデザインを見せるためにはSEOに強く、見つけてもらえるサイトにならなくてはいけません。