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

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

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

レスポンシブデザインとは、様々なデバイスの画面サイズに合わせて、Webページのレイアウトやデザインを調整し最適な表示を実現する手法です。

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

しかし、すべてのデバイスで実際に表示を確認するのは現実的に難しいですよね。

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

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

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

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

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

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

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