画面サイズに合わせて変わる！初心者向けレスポンシ ブデザインの基本

スマホ対応のWebページを作成する際に、レスポンシブデザインの基礎知識や実装方法を学びたい方は多いのではないでしょうか。

本記事では、レスポンシブデザインの基礎知識から、初心者でも簡単にできる実装方法まで、わかりやすく解説します。ぜひ参考にしてみてください。

レスポンシブデザインとは

レスポンシブデザインとは、ユーザーの画面サイズやデバイスに応じて、Webサイトのレイアウトや表示を最適化するデザイン手法です。

レスポンシブデザインを採用することで、ユーザーはどのようなデバイスであっても、Webサイトを快適に利用することができます。また、1つのHTMLファイルで複数のデバイスに対応できるため、Webサイト管理や更新の手間も省くことができます。

レスポンシブを使用する背景

レスポンシブデザインを使用する背景は、スマートフォンの普及とSEO対策の2つです。

スマートフォンの普及により、Webサイトを閲覧するデバイスは多様化しました。PCだけでなく、スマートフォンやタブレットなどのモバイルデバイスからWebサイトを閲覧するユーザーが現在も増え続けています。

モバイルデバイスは、PCよりも画面サイズが小さく、解像度も低いため、PC向けのWebサイトをそのまま表示すると、文字が小さく読みづらかったり、画像や動画が切り取られて表示されたりするなどの問題が発生します。そのため、モバイルデバイスに合ったデザインが求められるようになりました。

また、Googleは、2015年にMFI（モバイルファーストインデックス）を導入しました。MFIとは、モバイル版ページを検索結果で優先的に表示する仕組みです。従来はPC版ページが優先されていたため、モバイル版ページを作成していないWebサイトは、検索順位が下がる可能性があります。そのため、SEO対策の観点からもレスポンシブデザインが効果的であるといわれています。

 

レスポンシブのメリット

MFIへの完全移行に伴い、Googleが推奨するレスポンシブデザインには、モバイル版ページ作成において以下の3つのメリットがあります。

モバイルフレンドリー化でSEO評価をアップ

スマートフォンやタブレットの普及に伴い、Webサイトを閲覧するデバイスは多様化しています。そのため、Webサイトを作成・運用する際には、モバイルフレンドリー化が重要です。モバイルフレンドリーとは、モバイルデバイスからアクセスした際にも、見やすく使いやすいWebサイトであることを指します。Googleは、モバイルフレンドリー化を評価する指標として、モバイルファーストインデックス（MFI）を導入しています。（※MFIとは、モバイルデバイスからアクセスするユーザーの検索結果を、モバイル向けのWebサイトを優先的に表示する仕組み）

そのため、Webサイトをモバイルフレンドリー化することで、検索結果で上位表示される可能性が高まります。レスポンシブデザインは、1つのHTMLファイルとCSSファイルで、複数のデバイスに対応するWebサイトを構築する手法です。レスポンシブデザインで構築されたWebサイトは、モバイルデバイスからアクセスしても、PCからアクセスしても、同じ内容で表示されるため、MFIに対応したWebサイトとして認識されます。

つまり、レスポンシブデザインは、モバイルフレンドリー化を実現する最適な手法と言えます。

デザインをデバイスに関係なく統一できる

レスポンシブデザインで構築されたWebサイトは、デバイスの画面サイズに合わせてレイアウトを自動調整するため、ユーザーはどんなデバイスからでも、同じデザインでWebサイトを閲覧することができます。このメリットは、ユーザーがスムーズにサイトを閲覧できる利便性やデザインの統一感にも大きく関係します。

Webサイトの管理が効率的になる

通常、PC版とモバイル版のWebサイトを別々に作成する場合、修正や更新を行うたびに、2つのページをそれぞれ修正する必要があります。しかし、レスポンシブデザインでは、1つのHTMLファイルとCSSファイルを使い回すため、修正や更新が簡単に行えます。

また、URLを1つにすることが可能なため、URLの管理も容易になります。

レスポンシブのデメリット

レスポンシブデザインは、ユーザーの利便性向上やSEO対策の強化など、多くのメリットがあります。しかし、デバイスごとのレイアウト調整が複雑になるため、構造上の問題が発生する可能性があるため注意が必要です。

CSSの記述量が増えることで、コーディングの負担が大きくなる

レスポンシブデザインでは、デバイスごとの画面サイズに合わせてレイアウトを自動調整するため、CSSの記述量が増えます。例えば、PC用のWebサイトでは、画像やテキストのサイズや位置を固定で設定すれば問題ありませんが、レスポンシブデザインでは、デバイスの画面サイズに合わせて、それらを動的に変更する必要があります。そのため、CSSの記述量が増え、コーディングの負担が大きくなります。

また、CSSの記述量が増えることで、Webサイトの表示速度が遅くなる可能性がある点にも注意が必要です。CSSの記述量が多いと、ブラウザがWebサイトを表示する際に、処理に時間がかかります。そのため、Webサイトの表示速度が遅くなる可能性があります。

 

デザインに制約ができる

デバイスごとの画面サイズに合わせ作成するためレイアウト調整が複雑になり、デザインに制約が生じる可能性があります。また、デザインの変更も複雑になるため、事前にデバイスごとの表示を確認するなどの対策を講じましょう。

レスポンシブデザインの実装の方法は？

レスポンシブデザインは、ページのHTMLとCSSファイルにそれぞれ「meta viewportタグ」と「メディアクエリ」を記述することで実現できます。記述自体は簡単な作業ですが、実際の作業では細かな調整が必要になるため、時間がかかる場合もあります。

HTMLにmeta viewportタグを記述する

レスポンシブデザインを実現するには、最初にviewportを設定する必要があります。viewportは、デバイスごとの表示領域を設定するmetaタグです。

viewportを設定することで、ユーザーがどのデバイスで閲覧しても、適切なサイズでWebサイトを表示することができます。

HTMLファイルのheadタグ内に、以下のmeta viewportを追加してください。WordPressで作成した場合は「header.php」に以下のコードを記述します。

※上記のタグは「横幅はデバイスの画面幅に合わせる・初期設定では拡大せず１倍でそのまま表示する」という意味になります。

CSSファイルにメディアクエリを記述する

レスポンシブデザインを実現するには、メディアクエリを使用して、デバイスごとに表示を調整する必要があります。メディアクエリは、デバイスや画面サイズなどの条件に応じて、CSSの適用を切り替える機能です。

上記はモバイルファーストで書いたコードです。メディアクエリは、@mediaキーワードを使用し、キーワードの後には、メディアタイプと画面幅を指定します。

レスポンシブデザインの画面サイズの参考としては、以下のサイズが挙げられます。

・スマートフォン

画面サイズ：375〜414px

ブレイクポイント：375px

スマートフォンの画面サイズは、縦横比が4:3〜16:9の範囲で、縦の長さが375〜414px程度のものが一般的です。

・タブレット

画面サイズ：768〜1024px

ブレイクポイント：768px

タブレットの画面サイズは、縦横比が4:3〜16:9の範囲で、縦の長さが768〜1024px程度のものが一般的です。

・デスクトップPC

画面サイズ：1024px以上

ブレイクポイント：1280px

デスクトップPCの画面サイズは、縦横比が16:9〜32:9の範囲で、縦の長さが1024px以上のものが一般的です。

もちろん、これらのサイズはあくまでも参考です。ターゲットとするユーザーの多くが利用する画面サイズや、デザインの自由度などを考慮して、適切な画面サイズを決めることが重要です。

 

レスポンシブデザインの実装時の注意点

レスポンシブデザインを実装する際に注意すべきことがあります。下記の実装時の注意点に気をつけてレスポンシブデザインに対応してみましょう。

 

スマートフォンのサイズから実装すること

スマートフォンは、タブレットやデスクトップパソコンよりも画面サイズが小さいため、画面のコンテンツをすべて表示することはできません。そのため、スマートフォンの画面サイズを基準にレイアウトやコンテンツを調整することで、ユーザーの利便性を高めることができます。

 

画像ファイルの容量を少なくすること

レスポンシブデザインでは画像ファイルの容量が大きい場合、画面サイズの変化に伴って、画像の表示が遅延したり、画像が切れたりするなどの問題が発生する可能性があります。画像ファイルの容量を少なくすることで、画像の表示が速くなり、画像が切れたり、ぼやけたりするなどの問題が減る・Webサイトの読み込み速度が向上しデータ通信量が減るなどメリットがあります。以上のことから容量を減らすことでレスポンシブデザインのパフォーマンス向上が可能になります。

 

まとめ

今回はレスポンシブデザインについて解説しました。

Googleがモバイルファーストインデックス（MFI）の完全移行を発表したことで、モバイル版ページの重要性が再認識されています。MFIは、モバイル版ページの品質が検索順位の決定に大きく影響するため、レスポンシブに対応していないWebサイトは、今後検索順位が下落してしまう可能性があります。この記事をきっかけにレスポンシブデザインを導入してみましょう。