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

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

Step 3-6で知ってほしいことは、マルチデバイス対応で重要になるポイントを知ることです。
よろしければこちらもご覧ください

Web担ビギナーの目次を知りたい方はこちら

クイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3カラム(左)と1カラム(右)の例。サイドナビが1つある場合は2カラムとなる

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

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

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

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

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

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

ユーザーが欲しい情報に直接アクセスできるマルチエントランスのサイト構造

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

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

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

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

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

◇◇◇

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

ポイント
3-6 「Webサイト制作において重要なマルチデバイス対応とは?」のポイント
  • 企業サイトにおいてマルチデバイス対応が必要なのは、ユーザーの行動変化に対応するためである
  • マルチデバイス対応にあたって、現在は「スマホをターゲットにWebサイトを作る」ことを基本方針にする
やってみよう
  • 自社サイトをスマホで見て、良い点、悪い点を書き出し、改善点を考えてみよう。
もっと学び、成長するために
次を読んでおこう。
本記事の監修者

白石 裕一朗(しらいし ゆういちろう)

株式会社キノトロープ コンサル部 副部長
ディレクター、コピーライター

25年以上にわたる専門誌の編集業を経て、キノトロープへ入社。
年間で500本以上の「成果に結びつく」コンテンツを監修。
企業セミナー・大型セミナーの講師も務める。

デザイン:三苫慧子
この記事が役に立ったらシェア!
よろしければこちらもご覧ください
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

PPC
クリック課金型の広告の総称。しばしば、検索連動型広告のことを指して使われることも ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]