Webサイトをレスポンシブデザインにする前に把握しておきたいポイント

2021年5月20日2023年7月27日

星野茉莉子

こんにちは、アイオイクスの星野です。

事業部内では、ディレクションやデザインなどのクリエイティブに関わる仕事をしています。

今回はこれからレスポンシブデザイン、レスポンシブ化を担当する際、

どれから手をつけたらいいか分からない！
メリデメを知ってクライアントや制作会社とのやりとりに臨みたい！

という方向けに基礎知識、メリット・デメリット、実際に構築する際や実装時の注意点を紹介します。

レスポンシブについてなんとなく理解しているものの、実際どういったところに気をつけて進めれば良いか、参考になると幸いです。

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

ユーザーがアクセスしたデバイスのウインドウサイズによって、それに応じた適切なサイズで表示するデザインの実装方法です。

PCはもちろんのこと、タブレットやスマートフォン（小さな画面を売りにしたものから、逆にタブレット並みに広範囲までを映せる大画面など）などデバイスの種類やウィンドウサイズは多岐にわたります。

このような複数のデバイスのサイズに対応し、それぞれに適切で見やすく、1つのWebサイト（HTML）で実現できるように構築します。

レスポンシブデザインのメリット・デメリットとリスク

Webサイトをレスポンシブデザイン、レスポンシブ化した場合どのようなメリット・デメリットがあるのか、またこれから行う場合のリスクをまとめてみました。

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

モバイル版のURLを優先的に使用するため、URLが１つのレスポンシブだと評価が統一されやすくなる

Googleはモバイルファーストインデックス登録の有効化を発表しています。

今までパソコン版を優先しインデックスしてきましたが、これによりモバイル版を優先するようになりました。

2019 年 7 月 1 日以降、すべての新規ウェブサイト（ウェブに新しく追加されたサイトまたは Google 検索が認識していなかったサイト）では、デフォルトでモバイルファーストインデックス登録が有効化されます。
モバイルファーストインデックス登録に関するおすすめの方法 | Google 検索セントラル | Google Developers

完全移行については昨今の状況から2021年3月末まで延期することを決定しました。

しかし、自動移行は停止中、全サイト移行完了は 4 月、5 月になるかもという状況です。

コンテンツの管理工数が楽

レスポンシブデザインは1つのWebサイトを複数のデバイスでも適切に表示されるように構築するため、PC・モバイル用それぞれのコンテンツ更新が不要です。

適切な処理を行わないと、スマホ用に変換しただけのサイトはデメリットになりかねないばかりか、PC用・モバイル用のサイト更新の煩雑化を招きかねません。

パソコン用とモバイル用、それぞれが別のURLで構築されているWebサイトの場合、対策としてmetaタグなどに設定しPC・モバイルとURLが違っても同一サイトであると検索エンジンに認識させることが出来ます（これをアノテーションと言います）が、Googleはレスポンシブデザインを推奨しています。

SEOがサイトにとって重要である場合、レスポンシブが良いと言えるでしょう。

ユーザーの約半数がスマートフォンでアクセスしており、カバー対象が広がる

もしレスポンシブデザインに対応しておらず、モバイル対応もしていないサイトの場合、サイトをレスポンシブにすることでモバイル対応となり、カバー対象のユーザーが広がります。

インターネットを利用するユーザーの半数以上がモバイル（スマートフォン）からアクセスしており、Webサイトのジャンルによって利用ユーザーの比重は異なりますがスマートフォンでの表示が多くなっています。

7割以上PCで表示されていた2016年ごろと変わり、現在はスマートフォンで表示するユーザーが全体の50〜60％と、約半数を締めています。

レスポンシブデザインに対応することで、逃していたスマートフォンのみで閲覧していたユーザーからの閲覧が期待できたり、PC・モバイルでURLが分かれていたサイトも閲覧されることが増える可能性があります。

レスポンシブデザインに変更する場合のリスク

まだレスポンシブデザインに対応しておらず、これからレスポンシブデザイン・レスポンシブ化を行う場合はリスクについても考慮しておきましょう。

作業設計や制作期間が長引く

どのデバイス、ウインドウサイズを対象にするのか？それらのサイズで問題なく表示がされるか？

デバイスが1つだけではない分、それぞれのデザイン・コーディングや検証が必要です。

少しの調整で影響範囲が大きい場合も

スマホの画面でのみ配置を変更したい、そんな場合に「モバイルだけなら影響範囲が狭いから大丈夫だよね」とはなりません。

レスポンシブサイトの場合、「○○pxのウインドウサイズでは～…」とサイズを起点にした条件分岐を複数組み合わせて構築することがあります。

コーディングに不慣れな場合、1箇所だけのちょっとした更新でも全体の表示バランスが崩れてしまうことがあります。

対応デバイスの要件定義をミスると制作費が高額になりやすい

作業設計を作り込み、制作期間が長くなってしまう分、制作費がやや割高となることがあります。

初期設計時に対象のウインドウサイズや動き、情報量を絞り込んでおきましょう。

あとから追加、追加で要件を調整する場合、制作期間が長期化し、制作費が膨らんでいく要因になります。

レスポンシブデザインを行う際のポイント

ここではレスポンシブデザインを行うにあたって気をつけると良い、チェックしておくと良いポイントをご紹介します。

レスポンシブデザイン実装前の設計をする段階

レスポンシブデザイン実装前は、まず参考となるレスポンシブデザインのサイトを見ていきましょう。

ブレークポイントはどこか？（デザインが切り替わるウインドウサイズはどこで、いくつあるか？）
トレンドのサイズや解像度はどのようになっているか？
メニューやページが長い場合の動作、情報量はどうなっているか？
フォントサイズの切り替えやベースのサイズはどうか？
どのブラウザ、端末に対応するか？

PC/タブレット/スマートフォンの見え方それぞれ、レスポンシブデザインをまとめているサイトがいくつかあります。

ブランドやプロダクトのイメージを言語化したり、イメージを固めるためにも参考となるサイトはいくつか調べておきましょう。

レスポンシブデザインの場合、ひとつのURLで複数のウインドウサイズに対応する必要があります。

スマートフォンで表示する場合、1スクロールでの情報量に限りがあるため、読みやすさが失われることのないよう、改行の位置や、画像、画面幅など配置にも気を配りましょう。

情報量の整理を行う際にフォントサイズも重要になってきます。

あまり小さすぎても読みづらいため、画面左右からの余白を取る、フォントサイズは14～16px程度を基本に各見出しでサイズを調整しましょう。px以外の%、em、rem、vwなど、ウインドウサイズによってフォントサイズを可変できる指定もあります。細かな調整は制作会社やコーダーの方に委ねるのも良いでしょう。

細字タイプのフォントもありますが、PC、タブレット、スマートフォンそれぞれで細字を利用するか、可読性の妨げとならないかもチェックしましょう。