Webサイトを運営する側にとっても閲覧する側にとっても、レスポンシブデザインはメリットが多い手法です。どんな端末からでも見やすく使い勝手のいいWebサイトを制作するためには、レスポンシブデザインについての知識が必要になります。
今回はレスポンシブデザインについて、概要やメリット・デメリット、作り方などをわかりやすく解説します。おすすめのテンプレートも紹介するので、ぜひ参考にしてみてください。
レスポンシブデザインとは？
レスポンシブデザインとは、パソコンやタブレット、スマートフォンなど、Webサイトを閲覧するデバイスの画面サイズに合わせて、ページレイアウトを最適化するデザインを意味します。
たとえばパソコン向けに作られたページをスマートフォンで閲覧した場合、レスポンシブデザインに対応していないと、パソコン向けのページがスマートフォンサイズに縮小されて表示されてしまいます。そのままでは文字が小さすぎて読めなかったり、操作がしにくかったりと、ユーザーにとっては不便に感じる場合があります。
対して、レスポンシブデザインに対応したWebサイトでは、デバイスの画面サイズに適したレイアウトでページが表示されます。ひとつのHTML（Webサイトに表示する情報）を作成し、デバイスごとにCSS（色やサイズなどの装飾の指定）を設定することで、下記のように同じ内容のページが画面サイズに応じたレイアウトで表示される仕組みになっています。
引用：SHElikesコーディング入門コース_LESSON2「レスポンシブデザインの例」より
Webサイト制作でレスポンシブデザインが必要とされる背景
スマートフォンユーザーが増加している背景から、Googleは2018年にパソコン用サイトではなくスマートフォン用サイトをページ評価の基準とする「モバイルファーストインデックス」を導入したと発表しています*1。
Googleはモバイルフレンドリー（スマートフォン用に表示を最適化すること）なコンテンツを作成することを推奨しており、PC版とSP版（スマートフォン版）の両方を評価して、モバイルへの対応度を判断するとしています。
PC版のページとSP版のページを別々に作成するのは作業量が多く手間がかかることもあり、レスポンシブ対応のWebサイトを作成することが求められるようになってきました。
レスポンシブデザインのメリット
レスポンシブデザインの主なメリットは、次の3つです。
- URLがひとつで済む
- 管理・メンテナンスが楽
- 検索エンジンの順位に有利
それぞれについて解説していきます。
URLがひとつで済む
レスポンシブデザインのWebサイトは、ユーザーが使用するデバイスの種類に関係なく、ひとつのURLで表示されます。
対してレスポンシブデザインではない場合は、PC版やSP版などをそれぞれ作成するため、URLもそれぞれ必要になります。誰かにシェアしたいと思っても、相手ユーザーのデバイスに応じてURLを送り分けなければなりません。
しかし、レスポンシブデザインであればURLがひとつなので、閲覧するユーザーのデバイスに依存することがなくなり、SNSなどでもシェアされやすくなります。
管理・メンテナンスが楽
レスポンシブデザインはWebサイトのページをひとつのURLで管理するため、URLが複数ある場合と比べると、メンテナンスの工数を削減できます。
レスポンシブデザインに対応していない場合、更新作業の際はデバイスごとに最適化したページデザインを管理することになり、作業量が多くなってしまいます。
レスポンシブデザインであればひとつのページの更新作業だけで済むため、管理やメンテナンスが楽になります。
検索エンジンの順位に有利
レスポンシブデザインのWebサイトは、Googleが導入しているモバイルファーストインデックスにおいて評価されやすいため、検索エンジンの順位にも有利に働きます。
また、ユーザーにとって使いやすく見やすいページは、サイトの滞在時間の増加にもつながるため、SEOの観点で評価が上がることが期待できます。
レスポンシブデザインに対応していないページのようにURLが複数ある場合と比べると、検索エンジンからの評価が分散しない点も、SEOの観点から有利であるといえるでしょう。
レスポンシブデザインのデメリット
レスポンシブデザインのデメリットは、次の3つです。
- デバイスごとに適切な設計が必要
- コーディングスキルが必要
- デザインに制限がある
それぞれについて解説していきます。
デバイスごとに適切な設計が必要
レスポンシブデザインに対応したWebサイトを作成するには、デバイスごとに適切な設計をしなければならず、初期設計に工数や時間がかかる場合が多いです。
「パソコンの画面ではコンテンツをどのように配置すれば見やすいか」、「スマホの画面ではどの要素をメインにし、どの要素を表示させないか」など、レスポンシブデザインでは同じHTMLファイルでもデバイスごとに見やすい画面を設計する必要があります。
デバイスに合わせた設計をしなければ、レイアウトが崩れた状態で表示されることもあるため注意が必要です。
コーディングスキルが必要
レスポンシブデザインではデバイスごとにCSSを設定するため、複雑な作業にも対応できるコーディングスキルが必要です。
レスポンシブデザインではないWebサイトの場合はデバイスの画面サイズに最適化したページを作成すればいいので、デザインの調整が簡単です。
しかし、レスポンシブデザインの場合は複数のデバイスに最適化されるよう、デザインの幅や文字のサイズなどをそれぞれ指定する作業が必要になります。そのため、より高いコーディングスキルが求められます。
デザインに制限がある
レスポンシブデザインのWebサイトは、レスポンシブ対応ではない場合に比べてデザインの自由度が低くなってしまいます。レスポンシブデザインのページはHTMLがひとつであるため、デバイスごとにデザインを大きく変えることができません。
使用できるのは各デバイスに対応できるような汎用性のあるデザインやフォントに限られてしまうため、他のWebサイトとデザインが似通ってしまう可能性があります。逆にこだわりすぎたデザインにしようとすると、画面が上手く表示されない恐れもあります。
レスポンシブデザインの作り方
ここではレスポンシブデザインのWebサイトの作り方を紹介します。作り方の流れは次の通りです。
- レスポンシブ対応させる端末のサイズを決める
- HTMLにmeta viewportタグを記述
- CSSファイルにメディアクエリを記述
また、WordPressの場合についても解説するので、ぜひ参考にしてみてください。
レスポンシブ対応させる端末のサイズを決める
レスポンシブデザインでは、まず最初にアクセスが想定される端末の画面サイズを設定しましょう。事前に端末の画面サイズを決めておくことで、デバイスごとに最適なサイズのデザインが作れるようになります。
「〇〇px以下はスマートフォン用のレイアウト」のように指定することでデバイスに合った画面が表示されるため、デバイスごとに一般的な画面サイズを確認しておくことが大切です。
HTMLにmeta viewportタグを記述
端末の画面サイズを決めたら、ユーザーが使用している端末情報を取得できるようにするために、HTMLファイルにviewportタグを記述します。viewportタグによって端末情報を取得すると画面サイズが把握できるため、パソコン・タブレット・スマートフォンのどのデザインが最適であるかを判断できます。
viewportタグは、たとえば次のようなコードを記述することで追加が可能です。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
CSSファイルにメディアクエリを記述
CSSのひとつであるメディアクエリを記述することで、ユーザーが使用する端末の画面サイズに適したデザインに切り替えられるようになります。
画面サイズに応じてデザインが切り替わるポイントを「ブレイクポイント」といいます。ブレイクポイントを指定するためには、たとえば次のようなコードを使います。
@media screen and (min-width:480px) {}
@media screen and (min-width:481px) and (max-width:1023px) {}
@media screen and (min-width:1024px) {}
これは、上から順に「480px以下はスマートフォン用」「481〜1023pxはタブレット用」「1024px以上はパソコン用」という意味の記述です。
WordPressの場合
WordPressを使ってWebサイトを作る場合は、レスポンシブデザインに対応したテーマを使用することで、簡単にレスポンシブデザインを導入できます。特別な設定をしなくてもスマートフォン用に最適化ができるため、コードの知識がなくても問題ありません。
レスポンシブデザインに対応していないテーマを使用したい場合は、レスポンシブデザインに対応したプラグインをインストールするか、CSSのコードを使用すればレスポンシブデザインに対応したWebサイトが作れます。
Web制作でレスポンシブデザインを実装するときのポイント
Web制作でレスポンシブデザインを実装するときのポイントは、次の4つです。
- 更新・メンテナンスのしやすさを考える
- 表示速度を意識する
- スマートフォン用から設計する
- 横向きのレイアウトにも対応できるようにする
それぞれについて解説していきます。
更新・メンテナンスのしやすさを考える
コンテンツを追加したり最新情報に更新したりする際に、デザインが崩れないように設計をしておくと、メンテナンスがしやすいWebサイトになります。情報を更新する際の文字サイズやデザインなどを決めておくことで、更新の度に「文字サイズが合わない」、「デザインがずれる」などの不具合を防ぐことができます。
表示速度を意識する
画像ファイルの容量が多いと表示速度が遅くなってしまうため、画像サイズの小さいファイルを使用したり、画像ファイルの形式を検討したりするなどの工夫が必要です。端末ごとの画面サイズに応じて画像のサイズを切り替えたり、CSSの記述内容を見直したりするのもよいでしょう。
画面の表示速度が遅いとユーザーがページから離脱しやすくなるため、表示速度が遅くならないように意識することが大切です。
スマートフォン用から設計する
画面サイズに余裕のあるパソコンよりも、制約の多いスマートフォンのページから設計すると、スムーズに作業が進みやすくなります。横幅のあるコンテンツや文章量の多いコンテンツは、パソコンの画面では問題なくとも、スマートフォンになると非常に見にくいページになってしまうことがあります。
まずはスマートフォンの画面で見やすく使いやすいページを設計してからパソコン用のページを設計することで、効率的に作業が進められるでしょう。
横向きのレイアウトにも対応できるようにする
タブレットやスマートフォンは画面が横向きの状態で使用する場合もあるため、横向きのレイアウトにも対応できるようにしておくことが大切です。 デバイスが縦向きのときだけでなく、横向きにした場合でも適切にページが表示されるように設計しておきましょう。
なかには縦向きと横向きで表示される情報量を変えているWebサイトもあります。ユーザーの使いやすさを考えて、情報量やコンテンツの配置などを調整していくことが大切です。
レスポンシブデザインを確認する方法
レスポンシブデザインを確認する方法はいくつかありますが、一番確実な方法は実機を利用してブラウザの表示をチェックすることです。まずは実際のスマートフォンで正しく表示されているかを確認してみましょう。
また、検索エンジンからレスポンシブデザインに対応したページであると認識されているかを確認するために、Googleが提供するツールの「モバイルフレンドリーテスト」を使用するのもよいでしょう。
方法はモバイルフレンドリーテストのツール内で、対象ページのURLを検索するだけです。「問題ありません。 このページはモバイル フレンドリーです。」との表示があれば、問題なくレスポンシブデザインに対応できていることがわかります。
レスポンシブデザインのおすすめテンプレート
HTMLやCSSの扱いに自信がない場合でも、WordPressではレスポンシブデザインに対応するテーマを使用すれば問題ありません。
HTMLファイルを使ってホームページを作らなければならない場合は、レスポンシブデザインのテンプレートを利用するのがおすすめです。
おすすめのサービスは次の通りです。
- TEMPLATE PARTY
- TempNate
- 無料ホームページテンプレート.com
上記のものは無料で利用できるので、参考にしてみてください。
レスポンシブデザインを正しく理解して、誰もが見やすく使いやすいWebサイトを作成しよう
スマートフォンが普及している現代では、レスポンシブデザインはWebサイトを作成する際の重要な要素のひとつといえます。どのデバイスからでも見やすく使いやすいWebサイトを作成するためには、レスポンシブデザインの正しい知識が求められます。
レスポンシブデザインをはじめ、Webサイトを作成する際の知識やスキルを身につけたい方は、女性向けキャリアスクールSHElikes（シーライクス）がおすすめです。SHElikesは全45以上の職種スキルが学び放題のスクールで、Webデザインの基本的な知識やスキル、各種ツールの使い方などを幅広く学べます。
Webサイト作成の知識やスキルを身につけて、仕事の幅を広げてみませんか？
女性向けキャリアスクールSHElikes無料体験レッスンはこちら
※出典
*1：Google 検索セントラル ブログ「モバイル ファースト インデックスの展開」
