HOME →  製品情報 →  特徴 →  ワンソースマルチデバイス

ワンソース・マルチデバイス対応（PC、携帯、スマートフォン）

PC、携帯、スマートフォンへマルチデバイス対応したWebサイトを制作する手法ですが、「Webサイトには汎用サイトと専用サイトしか存在しない」ということが理解できれば実はシンプルです。

  • 専用サイト ： デバイス毎にWebサイトを用意
  • 汎用 サイト： 1つのWebサイトで全てのデバイスに対応（レスポンシブWebデザインなど）

一見全ての問題が解決できるように見える汎用サイトですが、構造が完全一致のため、ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できない（ユーザ中心設計ができない） という問題があります。つまり、モバイル対応において汎用サイトは専用サイトに劣ります。

 固定幅PCサイト＜汎用サイト＜モバイル専用サイト

汎用サイト＋専用サイト

汎用サイトで全てのデバイス表示にある程度対応し、重要なターゲットが存在するデバイスに対して専用サイトを用意する方法です。
構造を一致しなくても良いため、ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できます（ユーザ中心設計ができる）。サイト構造は汎用と専用サイトで同じである必要はなく自由度があります。 また、モバイルから考えるWebサイト制作も可能です。

  1. どのように汎用化するのか？
  2. 何を専用化するのか？

を決定することで汎用サイト＋専用サイトは実現できます。

汎用サイト＋専用サイト

レスポンシブWebデザイン＋モバイル専用サイト

レスポンシブWebデザインのWebサイトに加えてモバイル専用サイトを制作。モバイル専用サイトはファイルサイズを意識して制作。

この場合、サイト構造はレスポンシブWebデザインと同じである必要はなく自由度があります。また、モバイルファーストのようにモバイルから考えるWebサイト制作も可能です。
ユーザはモバイルとしての機能を重視したい時にはモバイル専用サイトを、PCと同じ情報を閲覧したい時はレスポンシブWebデザインのサイトを閲覧するといったように、ユーザ側で選択可能になります。

この手法の問題点はURLが別になるということとコンテンツ構造に関係なくコンテンツを再利用できるCMSがなければ管理が煩雑になるということです。
「Web Meister」の持つコンテンツの再利用という特長を生かし、管理画面上からモバイルサイトを制作するのに必要なPCサイトのコンテンツのみコピー（複製）を行い、モバイル専用サイトを制作することで問題は解決できます。

ワーンソースマルチデバイス概念図

汎用 サイト： 1つのWebサイトで全てのデバイスに対応

レスポンシブWebデザイン

過去においてはリキッドデザイン（サイズ可変デザイン）と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったことです。PCサイズ、タブレットサイズ、スマートフォンサイズにCSS3 Media Queriesでスタイルを切り替えることで最適なレイアウトにすることができます。

コンテントネゴシエーション

コンテントネゴシエーションとは、言語やファイルタイプなど複数の表現形式のファイルをサーバ上に用意しておき、ブラウザからのリクエストに応じてサーバが最適なファイルを自動的に判断してレスポンスを返す仕組みのことです。動的CMSではサーバではなくプログラムで同様のことを行っています。新しいデバイスが登場しても、テンプレートを追加することによって運用コストが増加することなく管理できるようになります。

事例紹介

携帯サイト用QRコード

携帯サイト用QRコード

以下のURLからPCサイトとモバイルサイトのワンソースマルチデバイス化を確認することができます。
PCサイト： http://www.kunitachi.ac.jp/
モバイルサイト：http://mb.kunitachi.ac.jp/

それぞれのデバイス特性の問題で今まで難しいとされてきたPCサイトとモバイルサイトのワンソースマルチデバイス化だけでなく、コンテンツ管理の一元化を容易に行うことができるようになります。これによりPCサイトおよびモバイルサイトにおいてより精度が高いコンテンツが作成できるようになり、また構築時間・費用の削減を行うことができます。

HTML5 CMS - Web Meister の資料請求やデモのご要望、導入ご検討のご質問などは下記のフォームよりお問い合わせください。

資料請求・お問合せ