ICTコラム
第28回マルチデバイス対応の方法と特徴

公開日：2019/04/15

前回はマルチデバイス対応がユーザー満足度にどう影響するか考えてみましたが、今回は実際にマルチデバイス対応を行う際の実装方法についてご紹介いたします。

マルチデバイス対応の種類

マルチデバイス対応にはいくつかの実装方法があります。主に、スマートフォン(タブレット)専用のサイトを立ち上げる「スマートフォン(タブレット)専用サイト対応」、アクセスした端末を判断して最適な形へテンプレートを自動で組み替える「自動変換対応」、一つのソースファイルでさまざまな端末に対応できる「レスポンシブWebデザイン対応」などが挙げられます。

上記の実装方法について、それぞれの特徴をご紹介いたします。

スマートフォン(タブレット)専用サイト対応の特徴

スマートフォン(タブレット)専用サイト対応とは、すでに公開されているパソコン向けサイトとは別に新たにスマートフォン(タブレット)専用のサイトを立ち上げることです。

○メリット: 大きなメリットとして、すでに公開済みのサイトに大きな手を加えることなくスマートフォン対応できる点があります。またパソコン向けサイトと切り離して運営ができるため、スマートフォン向けサイトをパソコン向けサイトのデザインから大きく変更して制作することも可能です。
○デメリット: メリットとしてパソコン向けサイトと大きく変更して制作できると記載しましたが、コンテンツ管理の面ではパソコン向け・スマートフォン向けでページを二重に管理する必要が出てきますので、片方だけしか更新していなかったなど運用上でのミスが起こりやすく、稼働もかかってしまうためデメリットと言えます。

自動変換対応の特徴

自動変換対応とは、サイトにアクセスしたユーザーの端末情報(パソコンなのかスマートフォン・タブレットなのか)を読み込み、その端末に適したレイアウトに自動的に切り替えて表示する方法です。

○メリット: 自動変換対応の特徴として、端末やページごとに細かくルール付けできることが最大のメリットと言えます。例えば、同じ端末を使っているユーザーであってもそのユーザーが見たコンテンツに応じて表示する内容を変えたりすることもできます(※利用する製品によってはできない場合もあります)。

また、スマートフォン専用サイトとは違い、基本的にページは一つで済むのでパソコン向け・スマートフォン向けなどの二重管理をする必要がなく、二重管理が原因で生じる余分な稼働やミスを防ぐことができます。
○デメリット: 自動変換サービスの提供会社と連携してソフトウェアのインストールから変換ルールの作成を行う必要があり、少々手間がかかるところが一つのデメリットと言えます。

また既存のサイトを自動変換化する際に、コンテンツの構成内容によっては共通ルールを作りづらく、ルールの作成もしくはコンテンツの精査に大幅に時間とコストがかかるケースがあります。制作のルールがあり、コンテンツがルールに沿って制作されていればそれほど大きな改修はないでしょう。

レスポンシブWebデザイン対応の特徴

レスポンシブWebデザインとは、端末単位ではなくディスプレイの解像度に応じてレイアウトを変更する方法です。

レスポンシブWebデザインも自動変換対応と同様にページは一つで済みます。相違点として、自動変換対応はコンテンツに端末やページごとのルールを設定し、アクセスした際に“紐づけられたルール”に則ってレイアウトを変更しますが、レスポンシブWebデザイン対応の場合は、コンテンツごと定められたルールに則り、アクセスした端末の“ディスプレイの大きさ”によってレイアウトが変わることです。

○メリット: 前述の通り、ページが一つで済むことがメリットの一つですが、レスポンシブWebデザインの場合は、自動変換サービスを利用する必要がなく、HTMLとCSSの記述のみで実装することが可能です。

そしてレイアウトの判定基準がディスプレイの大きさであるため、スマートフォン・タブレットなどの縛りがなく、パソコンで見たユーザーが画面幅を狭くしていた場合、それに応じたレイアウトで表示することができます。
○デメリット: 反対に、レイアウトの判定基準がディスプレイの大きさなので、スマートフォン向けサイトでよく見る「パソコン向けサイトはこちら」などの、パソコン向け画面での表示をすることが困難です。

また制作の手法から、既存のサイトをレスポンシブWebデザイン対応しようとした際、サイトのテンプレートから見直さなければならないため、稼働が大幅にかかります。小規模なサイトであればリニューアルを兼ねて実施できるかと思いますが、コンテンツの数が多いサイトほど実装に時間がかかると思われます。

最後に

今回はマルチデバイス対応の実装方法についてご紹介いたしました。

ユーザーがどのような端末でアクセスしているかは、解析ツールを導入していればすぐにわかりますが、必ずしもすべての端末に対応する必要はありません。例えば「タブレットについてはパソコン向けページを表示する」と決めてしまってもいいと思います。

ご自身で運営されているサイトのユーザー層、利用シーン、そして利用端末。これらを考慮した上で、マルチデバイス対応の実施を検討していただければ幸いです。