Web担ビギナーの目次を知りたい方はこちら
クイズ
皆さんはWebサイトを見るときに、どのようなデバイスを使っていますか？ パソコンよりもスマホでの利用時間が多くなってきていませんか？ タブレットやスマホが一般的に使われるようになる前までは、Webサイトもパソコンで利用されることだけを考慮していればよかったのですが、現在は多くの人がスマホでWebサイトを活用しています。それは個人利用だけでなく、ビジネスにおいても同様です。
たとえば、仕事用のパソコンでBtoBサイトを利用して仕事用の資材購入を慎重に検討し、稟議を通して購入。そして、スマホで同じBtoBサイトを利用して資材が発送されたかをスピーディに確認する、という場面も容易に想像できます。そうしたユーザーの行動変化に対応するため、さまざまなデバイスで利用できるマルチデバイス対応が必要になっています。
3-6では、こうしたユーザーの行動変化に対応したWebサイトを作るために、何を考慮するとよいのかを紹介します。
Webサイトを利用するメインデバイスの変化
ユーザーがWebサイトを利用するメインデバイスは、おおまかに次のように変わってきました。
- パソコンが主流
- パソコンとともに、スマホやタブレットなども利用されるようになった
- スマホが主流
スマホ、タブレットがない時期には、パソコンでWebサイトを視聴することが主流でした。次に、スマホやタブレットといったモバイル機器が登場し、多くの人が利用するにつれ、スマホやタブレットにも対応する必要が出てきました。
その際に行われたマルチデバイス対応は、デバイスによって異なるWebページを用意したり、パソコン用のページをスマホやタブレットの画面の横幅に合わせて表示したりする方法でした。なお、後者のように画面の横幅に合わせて表示できるようにする方法をレスポンシブといいます。１つのソースコードで各デバイスに対応できるため、多くのサイトで用いられています。
そして現在は、Webの利用はスマホ主流になっています。次の図のように、LINEの調査（インターネットの利用環境 定点調査 2021年上期）によると、アクティブにインターネットを使っている人の94％がスマホを使っているという現状があります。スマホだけで利用しているという人も53％にのぼります。
Webサイトを利用する環境の主流がスマホになった現在、多くの人がスマホのインタフェース、スピード感に慣れています。今はパソコンでも「スマホのように使える」Webサイトのほうが使いやすいのです。現在のところ、マルチデバイス対応にあたっては、「スマホをターゲットにWebサイトを作ること」を基本方針にするとよいでしょう。
スマホをターゲットにしたWebページ制作のポイント
パソコンでのWeb利用が主流だった時には、次図の左にあるようなグローバルメニュー（グローバルナビ）があり、サイドナビが１つか２つあるというWebサイトが多くありました。しかし現在は、次図の右にあるようにサイドナビを付けず、一気にスクロールして読めるWebページが多くなっています。
ハンバーガーメニューは、先述した「②パソコンとともに、スマホやタブレットも利用されるようになった」時期に、グローバルメニューをスマホやタブレットで利用するために作られたものです。昨今は、このメニューをそのままパソコン側でも表示する例も増えてきました。
またコンテンツも、パソコン版をそのままレスポンシブで調整しただけものが多くありました。その場合、文字量がスマホには多すぎるという問題が残されます。暫定対応として、複数行にわたる長いタイトルは自動的に途中で省略し、「…」という記号で表示するという方法もとられました。
しかし、…で省略されていては、スマホで見ているユーザーにはタイトルの意味が理解できません。ユーザーに提供したい情報が抜け落ちてしまっていることになります。そうした状況を避けるには、あくまでスマホファーストを意識して、最初から文章量を調節し、簡潔に表現する必要があります。
スマホの手軽さに慣れたユーザーは、欲しい情報にすぐに辿り着けることを望んでいます。たとえば次図のように、製品を購入したい人には製品情報ページ、就職したい人には採用情報ページにすぐに行けるようにしなくてはなりません。つまり、トップページから辿っていくのではなく、直接該当ページにアクセスできる構造にしておく必要があります。
この構造は、SNSや検索サイトからキーワード検索した結果、該当ページにすぐに辿り着けるというSEOにも合致するものでもあります。
さらに、Step 3-3の「CMSで実現できることは何か？」で紹介したように、CMS上に「コンテンツ」と「デザインのテンプレート」という形で情報を整理しておくと、デバイスごとに最適な情報を出し分けることが可能になります。
このように、CMSで情報を一元管理（複数の情報、データを一か所で管理すること）しておくと、将来的なマルチデバイス対応も比較的簡単に行える利点があります。現在はスマホですが、そのうちウェアラブルなメガネやウォッチ、ゲーム機が主流になるかもしれません。そのときには、主流になったデバイス用のコンポーネントを新たに作ればよいだけなので、ユーザー行動の変化にもスピーディに対応できるわけです。
◇◇◇3-6では、マルチデバイス対応のポイントを解説しました。3-7では、コンテンツの素材管理の方法を紹介します。
白石 裕一朗（しらいし ゆういちろう）
株式会社キノトロープ コンサル部 副部長ディレクター、コピーライター
25年以上にわたる専門誌の編集業を経て、キノトロープへ入社。年間で500本以上の「成果に結びつく」コンテンツを監修。企業セミナー・大型セミナーの講師も務める。