レスポンシブWebデザイン

投稿日：
執筆者：
荒砂 智之
ジャンル：
テクノロジー , デザイン

レスポンシブWebデザインとは、PC、タブレット、スマートフォンといったデバイス毎にページを作り分けるのではなく、ワンソース（HTMLなど）で各デバイスに最適な表示に自動的に切り替える制作手法です。CSSに記述されるMedia Queriesと呼ばれる制御式を用い、そこで定義された画面幅に合わせてスタイルのルールを切り替え、表示を変化させます。ワンソースでマルチデバイス対応ができるという大きなメリットから、近年のWebサイトに積極的に取り入れられています。

メリットとデメリット

レスポンシブWebデザインのメリット・デメリットは、利用者、運営者（運営企業）、開発者（開発企業）と、立場が変わることで異なります。

利用者

通常の利用者は、Webサイトに訪問しているその瞬間は一つの環境の中でしか見ていないため、デバイスごとにHTMLを作り分けたマルチソースのWebサイトであろうが、レスポンシブWebデザインを使ったワンソースのWebサイトであろうが、その違いを直接実感することはほとんどありません。

ただ、デバイスごとにリダイレクトさせる必要がなくなる分、表示速度高速化の恩恵を受けることが期待できます。また、基本的にウィンドウ幅で表示を切り替える仕組みのため、例えば小さなウィンドウでWebサイトを見た場合にも、横スクロールバーを操作せずに、画面幅に適したレイアウトで閲覧できるようになります。

一方、複数デバイスを想定した作りになるため、例えば高解像度ディスプレイ用の重い画像をそのままモバイル環境でも読み込ませるように作ってしまうと、通信量の増大や表示速度の遅延に繋がる可能性もあります。また、PCで閲覧したページを見ようとスマートフォンで同じURLにアクセスした場合には、同一URLでありながら見慣れない画面が表示されて戸惑う可能性があります。

運営者

利用者と異なり、運営者にとってのメリットは明白です。ワンソース化されることで多数のデバイス向けに複数のソースコードを作る必要がなくなります。これは初期構築時のコスト削減、更新時の負荷軽減にも繋がります。効果は定かではありませんが、GoogleもレスポンシブWebデザインを推奨していることで、SEOの観点からも有利と一般的には考えられます。また、SNSを活用する場合において、シェア数が分散しないことは一つの利点といえます。

一方、デバイスごとにサイト構造を変えることはできないため、PCとスマートフォンでまったく異なる構造のWebサイトを提供することは困難になります。現状の構造を維持してリニューアルする場合には、別サイトを作るよりもコストがかかる場合もあります。運用面では、PCユーザとスマートフォンユーザの行動データを混在させないよう、解析ツールでの細かな設定が不可欠となります。A/Bテストを頻繁に実施するWebサイトでは、ワンソース化されていることによりテストパターンを柔軟に作りにくくなる場合があります。

開発者

開発者にとってもいくつかの大きなメリットがあります。ワンソースであるため、制作対象のページ数が多くなるほど、短い工期での構築が可能になります。開発中の修正や調整の手間も削減でき、テストにかかる工数も短縮されます。また、公開時のリダイレクト設定も最小限に留めることができます。

一方で、ワンソース故のデメリットもあります。スマートフォンの表示だけを対象とした修正や改善であっても、PCでの表示に影響を与えていないかを確認する必要があります。また、古いWebサイトのソースを流用しながらレスポンシブWebデザイン対応を行う際には、技術的な難易度が高まる場合もあります。

導入の判断基準

レスポンシブWebデザインを採用するかどうかは、運営者や開発者にとってメリットが大きく、利用者のデメリットが小さい場合において導入が決定されることが多いです。しかし、レスポンシブWebデザインによって発生する制約が、利用者に強く影響を与える場合には、導入が見送られる傾向にあります。その最大の判断基準となるのは、デバイスごとにコンテンツを作り替える必要があるか、という点でしょう。これは、デバイスによってユーザ体験をどのくらい変えるか、と言い換えることもできます。

例えば、PCでは大きく美しい写真を含む詳細な情報発信を主目的とし、スマートフォンではショールームの予約と交通手段の確認を主目的とするWebサイトの場合、求められるコンテンツや構造が全く異なるものになります。このようなケースではレスポンシブWebデザインは不向きであり、デバイスごとに作り分けたマルチソースのWebサイトの方が望ましいと考えられます。

もし、コンテンツ内容に大きな差がない、デバイス共通のサイト構造でもユーザニーズは十分に満たされる場合は、開発や運用の容易さから、レスポンシブWebデザインの導入が現実的になります。

ただしその場合も、ページ数が極めて少なかったり、あるいは既存ソースコードの流用が多かったりする場合には、レスポンシブWebデザインの導入は無駄なコストを発生させることもあります。実際には、Webサイトで実現したいことと、コストとリターンを総合的に鑑みて、判断する必要があります。

モバイルファーストインデックスとの関連性

2016年10月にGoogleから、モバイルファーストインデックスと呼ばれる、モバイル検索を中心とするアルゴリズムの仕様変更計画が発表されました。ユーザへの有益な情報発信手段として、デバイスによるコンテンツの差異を生まないことが前提のレスポンシブWebデザインはGoogleも推奨しています。そのため、モバイルファーストインデックス化が進めば、レスポンシブWebデザインで構築されたWebサイトはSEO的に有利になると一部では解釈されています。

ただし、この解釈はSEOにおけるレスポンシブWebデザインの効果を過剰に評価したものといえるでしょう。Googleが推奨しているのは「デバイスによってコンテンツに不適切な差を生まないこと」であり、レスポンシブWebデザインだと検索結果で上位表示されやすい、とは言及していません。そもそもGoogleの検索アルゴリズムには現在200以上の評価項目があり、競合サイトとの関係性も含めて、複雑な条件の下で検索結果が決まっています。近年はパーソナライズも進んでおり、利用者によって表示順位が変わることも珍しくありません。

レスポンシブWebデザインはあくまで、コンテンツ戦略やユーザ体験をマルチデバイス化させるための手法であって、SEOの手法として導入するかどうかを判断すべきではないと私たちは考えています。

制作時の注意点

レスポンシブWebデザインは、それまでのWeb制作の考え方の見直しを迫ります。かつて単一デバイス向けのWebサイトしか制作しなかった時代では、最適な閲覧環境を定義し、それに合わせて代表的な画面のビジュアルをPhotoshopなどで制作し、それをHTMLコーディングする、というワークフローが一般的でした。

様々なデバイスに応じて表示を切り替えるレスポンシブWebデザインでは、主要画面のビジュアルをデバイスごとに作成してからHTML化していくフローは、現実的ではありません。ビジュアルの制作コストが肥大化し、一方でPhotoshop上では、デバイスによって変化する表示のすべてを表現しきることができないためです。

ベイジでは、メインデバイス向けビジュアルをまず作成します。他デバイスはパーツ単位で作成し、あとはHTML化してからの調整としています。そもそも、数千・数万種類とあるすべての閲覧環境で、Photoshop上の見た目を完全再現するということが現実的ではないため、Photoshopで作るのはあるレベルまでと割り切り、細かな調整はブラウザで表示させながら調整するのが現実的です。

理想をいえば、先にHTMLで構造を組んでしまい、それからビジュアルを調整する進め方が望ましいと考えられます。しかし、デザイナー側の自由な発想を妨げられる、顧客のビジュアル確認が遅くなり要望を柔軟に吸収することが困難になる、といった観点から、私たちの会社ではそこまでの制作フローの変更は実施していません。ただし、Adobe XDなど、マルチデバイスでのデザイン業務を前提とした制作ツールが今後普及することで、このワークフローは大きく変わると期待しています。

フロントエンドエンジニアリングの観点においては、通信速度や処理速度の遅いデバイスでの閲覧も踏まえた負荷軽減や、解像度の異なるスクリーンでもおしなべて美しく表示される実装が求められます。例えば、アニメーションはJavaScriptよりもCSSを利用する、異なるデバイス向けの画像を読み込ませないよう設定する、デバイステキストやWebフォント、SVG画像の積極的に利用する、といった対応です。

また複数デバイスでの検証が必要となるため、テストの負荷が増大化する傾向があります。様々なOS、デバイス、ブラウザごとのレンダリングの特性とバグの知識を、ノウハウとして積み重ねておく必要があります。一方で顧客とは、マルチデバイス時代には些細な表示の差異や不具合を解消する考え自体を変えなくてはならない、という啓蒙も同時に必要となるでしょう。