投稿日：2021年9月1日 | 最終更新日：2023年6月13日

Ｗｅｂサイトのデザインにおいて、耳にする機会が多い「レスポンシブ」という言葉ですが、その意味をきちんと理解されていますか？本稿では、その意味と細やかな対応・考慮の必要性について紹介していきます。

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

「レスポンシブデザイン」とは、ユーザーがサイトを閲覧している端末がパソコンか？、タブレットか？、スマートフォンか？を判定し、表示するデザインやレイアウト、コンテンツを最適化して表示することに対応しているデザインのことを指しています。

パソコンの場合には４：３や１６：９といった比率の横が長い比率の画面が多く、反対にスマートフォンでは幅が狭く、縦方向が長いモニターが多いという状況です。これは、レスポンシブに対応していないデザインのサイトで、例えばパソコンでの閲覧のみを考慮して作られたサイトを無理にスマートフォンで閲覧しようとすると、文字や画像の表示が極端に小さくなるなど弊害が生まれてしまうのです。

レスポンシブデザインにおいては、テキストや画像の表示のベースとなるHTMLのファイルは１つとし、パソコンで見た場合や、タブレット、スマートフォンで見た場合の表示サイズのスタイルをCSSのファイルで調整し、表示させることによって実現することができるのです。

レスポンシブという考え方が登場する前においては、パソコンでの閲覧にはパソコン用のファイル、スマホや携帯からの閲覧にはモバイル端末用のファイルとファイル自体を分けている時代もありました。しかし、個別につくられているHTMLファイルの場合、片方を更新しただけで、もう一方の更新を失念してしまうといったヒューマンエラーを起こしやすい、大きな弱点も存在していました。

レスポンシブデザインを導入することによって、ユーザーには最適なページ表示を実現でき、サイト運営上の大きなウィークポイントも解消できるという一石二鳥の効果があるということです。

レスポンシブデザインの基本的な仕組み

レスポンシブデザインはパソコンとスマートフォン共通のURLを使うことになるため、基本的に共通のテキストと共通の画像を使用することになります。パソコンのディスプレイを前提とした画像の場合、スマートフォンだと画像のデータサイズが大きすぎてしまうことでページの表示速度が大きく低下するといった可能性もあります。
CSSで「display:none」という指定を利用すれば、表面上画像は表示されなくなりますが、この指示の仕方では表示しない画像でもデータとしては読み込んでしまうことになります。全く表示しない画像のデータで、速度が低下してしまうのはあまりにも勿体ないこと。「picture」タグと「source srcset=」を使うことでパソコンのための画像データと、スマートフォン向けの画像データそれぞれの端末で読み込むものを切り替える設定をすれば速度に対する評価にもマイナスの影響を及ぼさない設定などレスポンシブには工夫が必要です。

レスポンシブデザインとリキッドレイアウトの違い

レスポンシブデザインと同様に、スマートフォンなど閲覧する端末への表示に対応する方法として存在しているものに「リキッドレイアウト」というものが存在します。正確に言えば両者は比較対象ではなく、「レスポンシブデザインを実現するために使用するのが、リキッドレイアウト」ということになります。「リキッドレイアウト」の対極にあるものとしては「ソリッドレイアウト」というデザインです。

ソリッドレイアウトは、コンテンツの幅を端末によって可変させることなく、ブラウザに横スクロールバーを表示させるなどあまりスマートフォンでの閲覧には適さない表現方法と言えます。

レスポンシブ対応の必要性は、より広範に

最初にレスポンシブデザインへ対応する必要性がまず高まってきたのは、ECサイトなどをはじめとする一般ユーザーが広く閲覧する可能性が高いサイトです。

スマートフォンの世代・性別などを問わない普及、タブレット端末の一般家庭への浸透などの背景もありユーザーがパソコンだけでアクセスするという時代では無くなったことが大きく、BtoCをメインとしているビジネスの場合にはレスポンシブデザインに対応したサイトが用意されていることが必須条件となりつつあります。

ビジネスシーンでも利用が増える端末に対応するべき

では、BtoBのサイトはどうなったか？というと、こちらも結果的にレスポンシブデザイン化されている方が望ましい状況となりました。

ビジネスにおいてはオフィスからパソコンを利用してサイトへアクセスするビジネスマンは今なお多く存在しますが、情報収集にはより気軽に使えるスマートフォンで検索をかけるといった場面も非常に多い状況です。通勤や帰宅時の移動時間に電車内で検索する場合などを考慮すれば、アクセスする端末に最適な表示がされていることこそがビジネスにおける機会損失も低減することへとつながるのです。

検索結果の表示において不利につながる可能性

Googleは当初2020年にモバイルファーストインデックス（MFI）を完全に導入すると発表していました。これは、PC向けのサイトよりもスマートフォン端末に対するサイト表示に関しての評価に、より重きを置いて評価を行うというものであり、スマートフォンに最適化表示が出来ないサイトは、評価につながらないというものです。新型コロナウィルスの感染拡大の影響などもあってか、実際にモバイルファーストインデックスの完全導入というのは2021年にずれ込み、まだ完全導入とはなっていない模様です。しかし、今後のことを考えると、間違いなくレスポンシブデザインなどによるスマートフォン対応が求められるということになります。

レスポンシブに対応することで起こるメリット

コンテンツマーケティングにおいて欠かせなくなっているのが、Twitter,Facebook,Instagramなど各種ソーシャルネットワーキングサービスの活用です。各SNSに自社のアカウントを開設し、情報を発信するだけではなくユーザー間で情報を共有・拡散してもらうことがマーケティングの成否のカギを握っているといっても間違い無いでしょう。

スマートフォンユーザーに無駄なストレスを与えない

SNSにアクセスする端末のことを考えてみてください。パソコンからアクセスすることも可能なサービスが多いですが、ほとんどの方がスマートフォンからアクセスしているのではないでしょうか？

発信した内容に共感を抱き、さらにその情報をユーザーが拡散させてくれたとします。しかし、そんな時にスマートフォン表示に対応していないサイトだったとしたら、それだけでサイトを見ようという気持ちが大きく削がれてしまうのではないでしょうか。

「どうしても知りたい！」という熱量がある人の場合には、改めてパソコンを立ち上げてサイトを訪問してくれるかもしれませんが、その手間を一つ挟んだ時点で熱が冷めてしまうことも考えれます。顧客化ができる確率はそれだけで大きく低下してしまうでしょう。

ここでの離脱は、レスポンシブやスマートフォン表示に対応さえできていれば防げるものだと考えれば、「スマートフォンの見た目に最適化対応しないこと」にはあまり合理的な理由が無いとおわかりいただけるかと思います。

手にしているのは「電話でもある」という現実

当たり前のこと過ぎて、意外見落とされがちな事実として「スマートフォンは電話である」ということを意識しておくことも大切です。

通話時間より圧倒的にWEBやSNSを閲覧したり、ゲームをプレイしている時間の方が長いというユーザーも多い状況ではありますが、その端末は電話をベースとした多機能端末なのです。つまり、レスポンシブデザインにすることで電話発信のCTAなどをサイトに置いておけば、ワンタップで電話発信ができてしまうのです。

問い合わせフォームを設置して、そこからの問い合わせの導線を準備しておくことも当然ですが、細かい文章を読むのが面倒だったり、緊急性の高い商材などの場合には少しでも早く連絡を取りたいユーザーも存在するはず。

レスポンシブデザインにするのであれば「電話である」という利点を最大限利用するため、ブラウザの下部に固定して電話発信ボタンを表示させるといった工夫も考慮しましょう。

まとめ

多くのユーザーがスマートフォンを利用してサイトを閲覧している現代においては、レスポンシブデザインに対応することはBtoBでもBtoCでも必要であるということは間違いありません。もし、自社のコーポレートサイトや、ブランドサイトのリニューアルなどを検討している段階で、現状のサイトがレスポンシブ対応できていないのであれば、このタイミングで対応するようにしておくことがおすすめです。