Web担当者になったら知っておきたい「基本」が学べる Web担ビギナー

Step 3-6 Webサイト制作において重要なマルチデバイス対応とは？

Step 3-6で知ってほしいことは、マルチデバイス対応で重要になるポイントを知ることです。

Web担編集部 2021/11/17 7:00 サイト制作／デザイン | 解説／ノウハウ

4 3 1

クイズ

デバイスとは、パソコン、タブレット、スマートフォン（スマホ）などとその周辺機器をいいます。こうしたさまざまなデバイスに対応する「マルチデバイス対応」がWebサイト制作において重要なのは、なぜでしょうか？ユーザーの行動変化に対応することも要因の1つだと考えてよいでしょうか？

皆さんはWebサイトを見るときに、どのようなデバイスを使っていますか？　パソコンよりもスマホでの利用時間が多くなってきていませんか？　タブレットやスマホが一般的に使われるようになる前までは、Webサイトもパソコンで利用されることだけを考慮していればよかったのですが、現在は多くの人がスマホでWebサイトを活用しています。それは個人利用だけでなく、ビジネスにおいても同様です。

たとえば、仕事用のパソコンでBtoBサイトを利用して仕事用の資材購入を慎重に検討し、稟議を通して購入。そして、スマホで同じBtoBサイトを利用して資材が発送されたかをスピーディに確認する、という場面も容易に想像できます。そうしたユーザーの行動変化に対応するため、さまざまなデバイスで利用できるマルチデバイス対応が必要になっています。

企業サイトにおいてマルチデバイス対応が必要なのは、ユーザーの行動変化に対応するため

3-6では、こうしたユーザーの行動変化に対応したWebサイトを作るために、何を考慮するとよいのかを紹介します。

Webサイトを利用するメインデバイスの変化

ユーザーがWebサイトを利用するメインデバイスは、おおまかに次のように変わってきました。

パソコンが主流
パソコンとともに、スマホやタブレットなども利用されるようになった
スマホが主流

スマホ、タブレットがない時期には、パソコンでWebサイトを視聴することが主流でした。次に、スマホやタブレットといったモバイル機器が登場し、多くの人が利用するにつれ、スマホやタブレットにも対応する必要が出てきました。

その際に行われたマルチデバイス対応は、デバイスによって異なるWebページを用意したり、パソコン用のページをスマホやタブレットの画面の横幅に合わせて表示したりする方法でした。なお、後者のように画面の横幅に合わせて表示できるようにする方法をレスポンシブといいます。１つのソースコードで各デバイスに対応できるため、多くのサイトで用いられています。

そして現在は、Webの利用はスマホ主流になっています。次の図のように、LINEの調査（インターネットの利用環境定点調査 2021年上期）によると、アクティブにインターネットを使っている人の94％がスマホを使っているという現状があります。スマホだけで利用しているという人も53％にのぼります。

アクティブなネット利用者の実態＿LINEプレスリリース（調査報告）インターネットの利用環境定点調査（2021年上期）

Webサイトを利用する環境の主流がスマホになった現在、多くの人がスマホのインタフェース、スピード感に慣れています。今はパソコンでも「スマホのように使える」Webサイトのほうが使いやすいのです。現在のところ、マルチデバイス対応にあたっては、「スマホをターゲットにWebサイトを作ること」を基本方針にするとよいでしょう。

スマホをターゲットにしたWebページ制作のポイント

スマホでのインタフェースを採用し、一気に読めるようにする

パソコンでのWeb利用が主流だった時には、次図の左にあるようなグローバルメニュー（グローバルナビ）があり、サイドナビが１つか２つあるというWebサイトが多くありました。しかし現在は、次図の右にあるようにサイドナビを付けず、一気にスクロールして読めるWebページが多くなっています。

ハンバーガーメニューは、先述した「②パソコンとともに、スマホやタブレットも利用されるようになった」時期に、グローバルメニューをスマホやタブレットで利用するために作られたものです。昨今は、このメニューをそのままパソコン側でも表示する例も増えてきました。

スマホでストレスなく読める文字量を意識する

またコンテンツも、パソコン版をそのままレスポンシブで調整しただけものが多くありました。その場合、文字量がスマホには多すぎるという問題が残されます。暫定対応として、複数行にわたる長いタイトルは自動的に途中で省略し、「…」という記号で表示するという方法もとられました。

しかし、…で省略されていては、スマホで見ているユーザーにはタイトルの意味が理解できません。ユーザーに提供したい情報が抜け落ちてしまっていることになります。そうした状況を避けるには、あくまでスマホファーストを意識して、最初から文章量を調節し、簡潔に表現する必要があります。

欲しい情報にすぐに辿り着ける構造にする

スマホの手軽さに慣れたユーザーは、欲しい情報にすぐに辿り着けることを望んでいます。たとえば次図のように、製品を購入したい人には製品情報ページ、就職したい人には採用情報ページにすぐに行けるようにしなくてはなりません。つまり、トップページから辿っていくのではなく、直接該当ページにアクセスできる構造にしておく必要があります。

この構造は、SNSや検索サイトからキーワード検索した結果、該当ページにすぐに辿り着けるというSEOにも合致するものでもあります。

CMSで、コンテンツとデザインのテンプレートを管理する

さらに、Step 3-3の「CMSで実現できることは何か？」で紹介したように、CMS上に「コンテンツ」と「デザインのテンプレート」という形で情報を整理しておくと、デバイスごとに最適な情報を出し分けることが可能になります。

Step 3-3で紹介した「CMS上において、コンテンツとデザインのテンプレートに分けて管理することで、デバイス最適化を実現する」図

このように、CMSで情報を一元管理（複数の情報、データを一か所で管理すること）しておくと、将来的なマルチデバイス対応も比較的簡単に行える利点があります。現在はスマホですが、そのうちウェアラブルなメガネやウォッチ、ゲーム機が主流になるかもしれません。そのときには、主流になったデバイス用のコンポーネントを新たに作ればよいだけなので、ユーザー行動の変化にもスピーディに対応できるわけです。

◇◇◇

3-6では、マルチデバイス対応のポイントを解説しました。3-7では、コンテンツの素材管理の方法を紹介します。

ポイント

3-6 「Webサイト制作において重要なマルチデバイス対応とは？」のポイント