PCだけではなくスマートフォンやタブレットからホームページを見る人が増え続けている今、どのデバイスでも快適に閲覧できるレスポンシブデザインへの対応は避けて通れません。しかし、制作会社から提案されても、具体的に何がどう変わるのか、費用や納期にどう影響するのかがわからず、判断に迷う方も多いのではないでしょうか。
このページでは、レスポンシブデザインの仕組みや種類といった基本から、メリット・デメリット、制作時に押さえておきたい注意点までを解説します。
レスポンシブデザインとは
レスポンシブデザインとは、パソコン・スマートフォン・タブレットなど、画面サイズが異なるデバイスに合わせてレイアウトを自動で切り替える設計手法です。1つのホームページで複数のデバイスに対応できるため、パソコン用とスマートフォン用を別々に制作する必要がありません。
以前は、デバイスごとにホームページを用意するのが一般的でしたが、管理の手間や制作コストが二重にかかることが課題でした。レスポンシブデザインであれば、こうした負担を抑えながら、どの端末からアクセスしても見やすいホームページを提供できます。
Googleもスマートフォンでの閲覧に適したホームページをSEOで優遇する方針を示しており、現在では中小企業や個人商店のホームページでも標準的な設計手法として広く採用されています。
レスポンシブデザインの仕組み
レスポンシブデザインは、HTMLとCSSという2つのファイルで成り立っています。
HTMLはホームページの文章や画像といった中身を記述するファイルで、CSSは文字の大きさやレイアウトなどの見た目を指定するファイルです。HTMLは1つのまま、CSSの指定内容だけをデバイスに応じて切り替えることで、パソコンとスマートフォンで異なる表示を実現しています。
この切り替えに使われる技術がメディアクエリです。メディアクエリは、閲覧しているデバイスの画面幅に応じて適用するCSSを変更する機能で、たとえば画面幅が768px以上ならパソコン用、767px以下ならスマートフォン用のレイアウトを表示するといった指定ができます。
この切り替えの基準となる数値はブレイクポイントと呼ばれ、パソコンとスマートフォンの2段階で設定するのが一般的です。ホームページの内容やターゲットに応じて、タブレット用のブレイクポイントを追加するケースもあります。
レスポンシブデザインの種類
レスポンシブデザインには、画面サイズへの対応方法が異なるいくつかのレイアウト手法があります。代表的なのは、レスポンシブレイアウト、リキッドレイアウト、フレキシブルレイアウトの3つです。
レスポンシブレイアウトは、ブレイクポイントに応じてレイアウト全体を切り替える手法で、最も広く使われています。画面幅が基準値を下回ると、メニューの形式が変わったり、横並びのコンテンツが縦並びになったりと、デバイスごとに最適な見た目に変化します。
リキッドレイアウトは、コンテンツの幅を画面サイズに合わせて比率で伸縮させる手法です。どの画面サイズでも同じ構成のまま表示されますが、画面が極端に広いと間延びし、狭すぎると文字が詰まることがあります。
フレキシブルレイアウトは、リキッドレイアウトに表示幅の最小値と最大値を設定した手法で、コンテンツが広がりすぎるのを防ぎつつ柔軟に対応できます。
制作会社に依頼する際は、自社のホームページにどの手法が適しているかを相談しながら決めるのがよいでしょう。
レスポンシブデザインのメリット
レスポンシブデザインを導入することで、ホームページの集客力や運用面にさまざまな良い効果が期待できます。ここでは、代表的な3つのメリットを解説します。
SEO効果が高まる
レスポンシブデザインは、Googleが推奨しているホームページの設計手法です。
1つのURLで全デバイスに対応できるため、被リンクやSNSでのシェアによる評価が1つのページに集約され、SEOで有利に働きます。パソコン用とスマートフォン用でURLが分かれていると、評価が分散してしまい、検索順位に悪影響を及ぼすことがあります。
また、Googleはモバイルファーストインデックスを採用しており、スマートフォン向けのページ内容を基準にサイト全体を評価しています。レスポンシブ対応であれば、パソコンとスマートフォンで同じコンテンツが表示されるため、SEO評価にズレが生じません。
検索からの集客を強化したいなら、レスポンシブデザインへの対応は欠かせない要素です。
更新効率が高まる
レスポンシブデザインでは、1つのHTMLで全デバイスに対応するため、ホームページの更新作業が1回で済みます。
パソコン用とスマートフォン用を別々に制作している場合、同じ修正をそれぞれに反映しなければならず、作業の手間が倍になります。片方だけ更新してもう片方を忘れるといったミスも起こりやすくなるため、情報の食い違いが発生するリスクも抱えることになります。
レスポンシブ対応であれば、こうした更新漏れの心配がなくなり、日々の運用にかかる負担を大幅に減らせます。ブログや事例紹介など更新頻度の高いページを持つホームページほど、この効率化のメリットは大きくなります。
様々なデバイスに最適化ができる
レスポンシブデザインは、特定の機種ではなく画面幅を基準に表示を切り替える設計です。そのため、スマートフォンひとつとっても機種ごとに異なる画面サイズに柔軟に対応でき、レイアウトが崩れにくいというメリットがあります。
iPhoneとAndroidでは画面幅が異なりますし、同じiPhoneでもモデルによってサイズは変わります。こうした違いに個別で対応しようとすると膨大な手間がかかりますが、レスポンシブデザインであれば、画面幅に応じて自動でレイアウトが調整されるため、新しい機種が発売されても基本的にそのまま対応できます。
SNSでシェアされたリンクをどの端末で開いても、快適に閲覧できる状態を保てることで、ページからの離脱を防ぎ、問い合わせや購入といった成果にもつながりやすくなります。
レスポンシブデザインのデメリット
レスポンシブデザインには多くのメリットがある一方で、導入前に知っておくべきデメリットも存在します。ここでは、発注時に把握しておきたい2つのポイントを解説します。
制作予算が増えて期間も長くなる
レスポンシブデザインに対応したホームページは、パソコンだけに対応したホームページと比べて、制作費用が高く、納期も長くなる傾向があります。パソコンとスマートフォンの両方で適切に表示されるよう、レイアウトやデザインを設計する必要があるためです。
画面サイズごとのCSSの記述に加え、デバイスごとの表示確認や調整作業も発生します。ナビゲーションの切り替え、画像の配置、文字サイズの最適化といった工程も加わるため、パソコンのみの制作に比べて工数は増えます。
ただし、パソコン用とスマートフォン用を別々のホームページとして制作する場合と比べれば、レスポンシブ対応の方が費用も期間も抑えられます。制作後の更新コストまで含めて考えると、長期的には効率の良い選択肢といえます。
デザインの自由度が低い
レスポンシブデザインは、1つのHTMLで複数のデバイスに対応する仕組みのため、デバイスごとにデザインを大きく変えることが難しくなります。
パソコン用とスマートフォン用で別々にホームページを制作する場合は、それぞれの画面サイズに合わせた自由なレイアウトが可能です。しかし、レスポンシブ対応では共通のHTMLを使うため、パソコンでは見栄えが良くても、スマートフォンでは再現しにくいデザインが出てきます。たとえば、複雑な段組みや装飾を多用したレイアウトは、スマートフォンでの表示を考慮すると採用が難しくなります。
制作会社にデザインを依頼する際は、レスポンシブ対応を前提としたうえで、どこまでの表現が可能か事前に確認しておくと、完成後のギャップを防げます。
レスポンシブデザインの料金目安
パソコンとスマートフォンに最適化したレスポンシブデザインの制作料金の目安は、パソコンのみの制作と比べて1.5倍前後が一般的な相場です。パソコンとスマートフォンの両方で適切に表示されるよう、レイアウト設計やCSSの記述、デバイスごとの表示確認といった工程が加わるためです。
さらにタブレットのデザインも最適化する場合は、ブレイクポイントが増えるぶん調整作業も増えるため、1.8倍前後になるケースが多くなります。ただし、ページ数やデザインの複雑さによっても費用は変動するため、あくまで目安として捉えてください。
なお、パソコン用とスマートフォン用を別々のホームページとして制作する方法もありますが、その場合は制作費だけでなく、更新や管理のコストも二重にかかります。初期費用だけで比較するのではなく、公開後の運用コストまで含めて判断することが大切です。
レスポンシブデザインのデザイン例
ここでは、当社のホームページを例にレスポンシブデザインの実際の見え方を紹介します。
パソコンで表示した場合、グローバルメニューは画面上部に横並びで配置されており、各ページへのリンクが一覧で確認できます。一方、スマートフォンではグローバルメニューをハンバーガーメニューに格納し、画面を圧迫しないようにしています。
コンテンツの並び順も、スマートフォンではユーザーの視点に立って調整しています。パソコンでは縦並びで見せている要素を横に並べ替えたり、装飾目的の画像を非表示にしたりと、限られた画面サイズでも必要な情報にスムーズにたどり着ける構成にしています。
レスポンシブデザインは、ただ画面幅に合わせて縮小するだけではありません。デバイスごとにユーザーの操作方法や閲覧環境が異なることを踏まえて、見せ方そのものを設計し直すことが大切です。
レスポンシブデザインでホームページを制作する時の注意点
レスポンシブデザインを取り入れる際は、いくつかの注意点を押さえておく必要があります。ここでは、ホームページの品質を保つために意識しておきたいポイントを解説します。
PC・スマホ・タブレットで表示を確認する
レスポンシブデザインに対応したホームページを公開する前には、パソコン・スマートフォン・タブレットのそれぞれで表示確認を行いましょう。パソコンの画面では問題なく表示されていても、スマートフォンではレイアウトが崩れていたり、タブレットでは文字や画像のバランスが悪くなっていたりするケースがあります。スマートフォンは機種によって画面サイズが異なるため、iPhoneとAndroidの両方で確認することが望ましいです。
確認方法としては、実機でのチェックが最も確実ですが、ブラウザの開発者ツールを使えばさまざまな画面サイズを疑似的に再現できます。ただし、開発者ツールはあくまで簡易的な確認手段であり、タッチ操作やスクロールの挙動は実機と異なることがあります。実機での確認をメインにしつつ、開発者ツールを補助として使うのがよいでしょう。
表示速度に注意する
レスポンシブデザインでは、パソコン用に用意した大きな画像やデータをスマートフォンでもそのまま読み込みます。スマートフォンはパソコンに比べて通信環境が不安定な場面も多く、データ量が大きいとページの表示に時間がかかります。表示速度が遅いホームページは、ユーザーが待ちきれずに離脱する原因になるだけでなく、GoogleのSEO評価にも悪影響を及ぼします。
対策としては、画像を圧縮してファイルサイズを軽くする方法や、デバイスに応じて適切なサイズの画像を出し分ける方法があります。制作会社に依頼する際は、表示速度への配慮がされているかも確認しておきましょう。
スマホで非表示にするコンテンツを検討する
レスポンシブデザインでは、パソコンで表示しているコンテンツの一部を、スマートフォンでは非表示にすることができます。スマートフォンは画面が小さいため、パソコンと同じ情報量をそのまま表示すると、ページが長くなりすぎて読みにくくなることがあります。たとえば、装飾目的の画像やパソコン向けの補足情報などは、スマートフォンでは非表示にした方がすっきりと見やすくなります。
ただし、Googleはモバイルファーストインデックスを採用しており、スマートフォンのページ内容を基準に検索順位を決めています。そのため、集客や成約に関わる重要なコンテンツまで非表示にすると、SEO評価に悪影響を及ぼす可能性があります。非表示にするのは見た目の調整に関わる要素にとどめ、ユーザーにとって必要な情報は残しておくことが大切です。
タブレットの表示方針を決めておく
レスポンシブデザインを導入する際に見落としがちなのが、タブレットの表示をどうするかという方針です。
タブレットは画面サイズがパソコンに近いため、無理にスマートフォン用のレイアウトに切り替えると、かえって見づらくなることがあります。実際に、タブレットではパソコン用の表示をそのまま使った方が快適に閲覧できるケースも多いです。パソコン・タブレット・スマートフォンの3段階で切り替えるか、タブレットはパソコンと同じ表示にするかは、ホームページの内容やターゲットによって判断が変わります。
制作を依頼する前にこの方針を決めておくと、制作会社との打ち合わせがスムーズに進みます。
まとめ
レスポンシブデザインは、1つのホームページでパソコン・スマートフォン・タブレットに対応できる設計手法です。SEO効果や更新効率の向上といったメリットがある一方で、制作費用や納期が増える点、デザインの自由度が下がる点には注意が必要です。
導入する際は、デバイスごとの表示確認や表示速度への配慮、非表示コンテンツの取捨選択など、公開前に押さえるべきポイントを一つひとつ確認していくことが大切です。制作会社に依頼する場合は、タブレットの表示方針や費用感を事前にすり合わせておくことで、完成後のギャップを防げます。
