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

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

WebサイトをPC、携帯、スマートフォンへのワンソース・マルチデバイス対応にするには

  1. デバイス毎にWebサイトを用意（バラバラなので高コスト）
    A→PC　B→携帯　C→スマートフォン
  2. １つのWebサイトで全てのデバイスに対応（デバイスごとに個別対応はできない）
    A→全てのデバイス
  3. 1.2.のハイブリッド（デバイスごとに個別コンテンツ対応ができる）
    A→A’→全てのデバイス　A→A”→モバイル

3つの方法が存在します。デバイス毎にWebサイトを用意する場合でもワンソース・マルチデバイス対応は可能です。 Web Meister では1.2.の良い点を生かした3.をおすすめしています。

１つのWebサイトで全てのデバイスに対応

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

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

レスポンシブWebデザイン

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

1.2.のハイブリッド

レスポンシブWebデザインのWebサイトを一つ用意すれば全てのデバイスに最適化できるように思えますが、基本的にはPC向きであってモバイル向きの手法ではないと思われます。レスポンシブWebデザインで制作していればそれぞれのサイト用に横幅に合わせたWebサイトを制作する必要がありません。自動的に縮小され表示が最適化されます。

但し、デバイスごとに構造を変更することができない、全てのデバイスでファイルサイズが同一などの問題が残り、レスポンシブWebデザインはモバイル専用サイトには及びません。

固定幅PCサイト＜レスポンシブWebデザイン＜モバイル専用サイト

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

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

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

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

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

事例紹介

携帯サイト用QRコード

携帯サイト用QRコード

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

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

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

資料請求・お問合せ