レスポンシブウェブデザインにはもう対応済みですか？

今やモバイルで情報を検索するのが当たり前な世の中となりました。
Google の発表では2015年にはモバイルからの検索数がPCからの検索数を上回り、総務省の発表でも2017年から個人でインターネットを利用する機器はPCよりスマートフォンの方が多くなっています。

2018年より、Google は段階的にモバイルファーストインデックスを導入し、モバイルサイトを優先的にインデックスし、アルゴリズムの評価基準としています。
そして今年2021年の3月末には、Googleは完全にモバイルファーストインデックスへ移行する予定となっています。

かつてはガラケーと呼ばれるフィーチャーフォンが使われ、画面サイズがとても小さかったため、モバイル向けサイトは簡易的なコンテンツのみを扱う、もしくは用意がないというケースが多数でしたが、スマートフォンが主流となった今では、画面サイズも年々大きくなり、情報もデスクトップサイトと変わらない量を扱うことができるようになってきました。

そこで採用されるようになったのが、レスポンシブウェブデザインです。

レスポンシブウェブデザインとは、一つのHTMLで、デスクトップとモバイルページのレイアウトを変えながら表示できるウェブデザインの手法です。
このレスポンシブウェブデザインは、ウェブサイトの表示形式としてGoogleも推奨しています。
なぜなら、様々な面で見た際にメリットが大きいからです。

レスポンシブウェブデザインのメリット

そもそもの話として、デスクトップとモバイルの両方のページを持っている際に、そのパターンは「レスポンシブウェブデザイン」、「動的な配信」、「別々のURL」の3種類に分類されます。

レスポンシブウェブデザインはその中で唯一、同一のURL、同一のHTMLで使用できるため、アノテーションでのページの統一や、複数のHTMLの更新の手間が省けます。

同一のHTMLで管理できるのはメリットが大きく、デスクトップとモバイルでコンテンツの量に違いがないかを確認する必要がなく、また、構造化データのマークアップなども簡単に行えます。

デスクトップ版とモバイル版とで、誤った設定を行ったためにウェブサイトが正常に機能しない、といったケースを未然に防ぐことができるため、レスポンシブウェブデザインはほかの設定と比較して扱いやすくなっています。

同一のURLでは、アナリティクスの分析も一括管理が可能です。

またユーザー目線から言えば、レスポンシブウェブデザインを採用したサイトはどのような画面サイズでも適切に表示されることが期待され、無駄なスクロールなどがなく快適に利用できることが考えられます。

レスポンシブウェブデザインの設定

レスポンシブウェブデザインを採用する際に必要になる記述方法を紹介します。

1. viewportの設定
viewportとは、ページを表示する領域のことで、デスクトップならブラウザのサイズ、モバイルなら画面サイズがそのままviewportとなります。
ページで設定しているviewportの数値が実際のviewportを上回ると、画面に合わせて縮小表示することになり、それに伴い文字サイズも設定よりも小さく読みにくくなってしまいます。
そこでレスポンシブウェブデザインでは、画面サイズに合わせて可変するdevice-widthを使用して設定を行います。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

initial-scaleはページを読み込んだ際の初期ズーム倍率で、1.0では等倍になります。なお必須ではありませんが、最小倍率、最大倍率を設定したい場合はそれぞれminimum-scale、maximum-scaleを使用します。

2. 画像サイズを合わせる
ページ内の画像に横幅を設定することで、画面サイズに合わせた表示ができるようになります。cssでの記述は次の通りです。

img { max-width: 100%; }

単にwidth:100%としてしまうと、1pxの画像でも画面に合わせて拡大してしまうため、max-widthを使用すると良いでしょう。

レスポンシブウェブデザインの確認方法

レスポンシブウェブデザインを設定したら、正常に動作するかどうか、Chromeのデベロッパーツールで確認すると良いでしょう。

確認したいページにChromeを使用してアクセスし、「Ctrl + Shift + i」または「F12」キー（Macの場合は「option + command + i」）でデベロッパーツールを起動します。
※またはブラウザ上、右上の「・」が縦に3つ並んでいる箇所を選択→「その他のツール」
→「ディベロッパーツール」でも起動できます。

その後、「Ctrl + Shift + M」またはデバイスアイコンをクリックすることで、モバイルの画面サイズでどのように表示されるか確認することが可能です。

まとめ

現状ではデスクトップ向けとモバイル向けでそれぞれ異なるページを持っているサイトも、この機会にレスポンシブウェブデザインへの移行を検討されてみてはいかがでしょうか。
ページ数が多いサイトほど移行のコストはかかってしまいますが、一度移行を済ませてしまえばメンテナンスにかかる時間は減少しますから、長い目で見れば相対的にコスト削減につながることになります。

モバイル対応をよりスマートに、ユーザーフレンドリーなサイトを目指しましょう！

Written by K.K