そのホームページ、スマホからはどう見える？

パソコンではきれいに見えるのに、スマホで見ると「文字が小さすぎて読めない」「画像が画面からはみ出している」…。そんな経験はありませんか？
これは、Webサイトが レスポンシブデザイン に対応していないことが原因かもしれません。

レスポンシブデザインの必要性

レスポンシブデザインとは、スマホやタブレットなど 画面サイズに合わせてWebページのレイアウトを自動調整する仕組み のことです。

パソコンだけでなく、スマホやタブレットなど、様々なサイズの画面でWebサイトを見る人が増えています。レスポンシブデザインに対応していれば、どのデバイスからアクセスしても「文字が小さくて読みにくい、画像が崩れて表示される」といったストレスなく快適にサイトを閲覧することができます。

とはいえ、スマホやタブレットなど、すべてのデバイスで実際に表示を確認するのは大変ですよね。
そこで便利なのが 画面サイズをまとめてチェックできるツールです。

スマホやタブレット、様々な大きさの画面をチェックできる便利なツール

今回は私も使っているとても便利なツールを紹介します。
Chrome拡張機能の「Responsive Viewer」。

このツールを使うと、スマホやタブレットなど 複数のデバイス画面を同時に表示 できるため、レイアウトの崩れを一度にチェックすることができます。

例えば、パソコンで見たこのページ

Responsive Viewerで表示すると、このようにそれぞれのデバイスから見たレイアウトを同時に確認することができます。

表示させたいデバイスの画面サイズは自分で選ぶことができます。

文字の大きさや改行の位置、細かいところまでチェックできるので、パソコンではちょうど良い大きさに見えていた画像がスマホから見ると小さくて見えなかったり、表（テーブル）のレイアウトが崩れて欠けてしまっているような、よくある表示のズレもすぐに気づけます。