昨今は多くのユーザーが、PCだけでなくスマートフォンやタブレットなどのデジタルデバイスを介して情報収集を行うようになりました。そのため、BtoB企業であっても、自社ページを表示させる際は、各デバイスに適したページデザインを表示させるため「レスポンシブデザイン」を設定しておかなければなりません。
今回は、BtoB企業のマーケティング担当者向けに、レスポンシブデザインを実装するための基本的な知識を紹介します。自社で未実装の場合はぜひ参考にしてください。
レスポンシブデザインとは？
レスポンシブデザインとは、単にスマートフォンビューに対応することのみを指していると誤解されがちですが、実際は異なります。本来は、あらゆるデバイスから見やすく、使いやすいページレイアウトにするための技術概念です。
Webサイトは、PCとスマートフォン（時にはタブレットも含む）で、別々のデザインを表示させるのが理想的といえます。しかし、それではコストが膨らみ、保守・運用の業務も煩雑なものになりかねません。
そういった場合に登場するのが、レスポンシブの概念です。ユーザーが使用しているツールに応じて、サイトビューを切り替えることで、多くのユーザーに低コストで最良の体験を届けられます。
なお、自社サイトがレスポンシブに対応しているかどうか確認する方法としては、以下のようなものがあります。
- ブラウザの「検証」機能を使って疑似的に確認する
- Webサービスを利用する
- スマートフォンでの確認
レスポンシブデザインの種類
レスポンシブWebデザインは3種類存在し、それぞれの概要は次のとおりです。
- レスポンシブレイアウト…画面の幅に応じてCSSを切り替えるレイアウト
- リキッドレイアウト…表示するデバイスの画面幅に合わせてサイト全体の幅が変化するレイアウト
- フレキシブルレイアウト…リキッドレイアウトと同様に、各要素の単位をパーセンテージで表示する
「レスポンシブレイアウト」でCSSの切り替えを行う際のピクセル数は「ブレイクポイント」と呼ばれます。このブレイクポイント数値をCSSで指定することで、ユーザーの使用デバイスに応じた表示を行う仕組みです。
「リキッドレイアウト」は、Webサイトの各要素をパーセンテージにより指示するため、ノウハウ次第では自社サイトをどのデバイスからでも見やすく仕上げることが可能です。
「フレキシブルレイアウト」では、リキッドレイアウトよりさらに細かく画面の最大幅・最小幅を設定できます。
BtoBでもレスポンシブデザインが重要な理由
レスポンシブデザインへの対応は、BtoB企業のオウンドメディアにも必須といえるでしょう。その理由は、BtoBの見込み顧客もさまざまなデバイスでWebを閲覧する時代になったからです。
特にスマートフォンは国民のほとんどが使用しています。総務省の「令和2年通信利用動向調査」では、スマートフォンを保有している世帯の割合が86.8%にも上ると報告がありました。
このことから、ユーザーがどんなデバイスから閲覧しても体験価値を損ねないよう、レスポンシブデザインに対応しておくことが重要です。
BtoB企業がレスポンシブデザインを取り入れるメリット
自社サイトにレスポンシブデザインを取り入れれば、以下のような恩恵を受けられます。
- Webサイトの管理が容易になる
- モバイルフレンドリーによるSEO効果が期待できる
- SNS経由での流入が増えても離脱増加につながりにくい
次項より、各メリットの詳細を解説します。
Webサイトの管理が容易になる
レスポンシブデザインを導入すれば、さまざまなデバイスのレイアウトに対応しつつ、自社で管理するHTMLファイルが1種類に抑えられるため、Webサイトを容易に管理することが可能です。
HTMLだけでなく、URL・CSSも1種類しかないため、更新作業やコンテンツの修正、メンテナンスを自社リソースだけでも十分に行えるでしょう。
モバイルフレンドリーによるSEO効果が期待できる
レスポンシブデザインを適用したサイトは、SEO効果の上昇も期待できます。スマートフォンなどのモバイル端末に対応しているサイトは、Googleから「スマートフォンに最適化されている」と判断され、評価が高くなるためです。
さらに、ユーザー視点で見ても使い勝手のいいサイトは再訪率が上がるため、アクセスの増加やGoogleからの評価につながるでしょう。
SNS経由での流入が増えても離脱増加につながりにくい
Webサイトをレスポンシブデザインに対応させると、どのデバイスでも同じURLが表示されます。
従来は「スマートフォン版はこちら」と、別のリンクを経由する必要があったのが、近年では同一URLでスムーズに閲覧させる設定もできるようになりました。そのため、よりユーザーの離脱防止につなげることが可能です。
レスポンシブデザインのデメリット
一方で、レスポンシブデザインを取り入れる際には、いくつかのデメリットが懸念されます。
- デザインが制限され、崩れやすくなる
- コーディングの工数が増える
- スマートフォンのページ読み込み速度に悪影響が出かねない
上記について解説しますので、レスポンシブデザイン実装を検討している方は把握しておきましょう。
デザインが制限され、崩れやすくなる
レスポンシブデザインを導入することで、Webデザインに制限ができてしまう可能性が懸念されます。その理由は、全てのデバイスで同じHTMLを使用することで、PCやスマートフォンなどでレイアウトを大きく変えられないためです。
うまくデザインできなければ、スマートフォンやタブレットで表示した際のレイアウトが崩れかねません。
コーディングの工数が増える
レスポンシブデザインを採用すると、HTMLやCSSなどのコードを記述する「コーディング」の作業に時間がかかってしまいます。レスポンシブに対応させるためには、各デバイスで表示するレイアウトを一緒にする部分と異なる部分の2種類あるため、コーディングを行う際に細かな調整が求められます。
レスポンシブを行わない場合のデメリットと比較すると些細なことですが、内製・外注を問わず、自社のサイト公開などのスケジュールが遅れないようにあらかじめ留意しておきましょう。
スマートフォンのページ読み込み速度に悪影響が出かねない
レスポンシブデザインを導入すると、スマートフォンやタブレットでのサイト表示速度が遅くなるケースが多々あります。これは、モバイルでの閲覧時も、PC向けに書かれたHTMLやCSSを一緒に読み込んでしまうのが原因です。
ページの読み込み速度が遅いと、それだけユーザーの離脱の可能性が高まります。遅すぎる表示速度はSEOの観点でもマイナス評価になるため、新規でページ公開する際に速度測定を行い、改善していくことが望ましいです。
レスポンシブデザインの実装方法
実際にレスポンシブデザインを実装する方法としては、「meta viewportタグを追加する」「CSSファイルで指定する」の2パターンの方法があります。
meta viewportタグを追加する
まず1つ目が、「meta viewportタグ」の追加です。HTMLファイルのヘッダー部分に当該タグを追加することで、訪問ユーザーが使用しているデバイスの画面サイズなどを読み取れるようになります。
特定のCMSを使わず、HTMLファイルで制作されたWebサイトは、すべてのHTMLファイルのヘッダー部分に以下のタグを追加する必要があります。
一方で、WordPressなどのCMSで作成されたWebサイトであれば、共通のテンプレートファイルに追記する形で問題ありません。
CSSファイルで指定する
HTMLではなく、「メディアクエリ」を用いてCSSファイルを指定する形でレスポンシブ指定を行う方法もあります。
この方法では、ユーザーの画面サイズ（＝使用デバイス）に応じてCSSの適用内容を切り替える仕組みで、各デバイスごとにCSSに設定したレイアウトを表示可能です。
コードの書き方は、以下のように各デバイスに応じてメディアクエリを記述する形で行います。
＜PC用CSS＞
/*ウィンドウ幅が767px以上の場合に適用*/
#menu-bg {
background-color: #00FFFF; /*青色*/}
}
＜スマートフォン用CSS＞
/*ウィンドウ幅が最大479pxまでの場合に適用*/
#menu-bg {
background-color: #00FF00; /*緑色*/}
}
＜タブレット用CSS＞
/*ウィンドウ幅が最大767pxまでの場合に適用*/
#menu-bg {background-color: #FF0000; /*赤色*/}
}
まとめ
ユーザーが多様なデジタルデバイスを使って情報収集・購買活動を行う現代では、デバイスごとにページを切り替えるレスポンシブデザインへの対応は、BtoB企業であっても必須といえます。
レスポンシブの実装自体は、一度行ってしまえば管理運用はそこまで手間のかかるものではありません。自社にノウハウやリソースが不足している場合は外部専門家への相談も活用し、レスポンシブデザインを取り入れましょう。
