Web Meister - Contents Management System -

  1. HOME
  2. ソリューション
  3. マルチデバイス

ワンソース・マルチデバイス対応(PC、タブレット、スマートフォン、携帯)

レスポンシブWebデザイン

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

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

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

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

レスポンシブWebデザインによる汎用サイトを制作し、個別対応したいデバイスの専用サイトを制作 することを HTML5 CMS - Web Meister ではおすすめしています。

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

RICOH BlackRams オフィシャルサイト
RICOH BlackRams オフィシャルサイト

レスポンシブWebデザイン

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

現在、HTML5 CMS - Web Meister での標準的な制作手法です。

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

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

汎用サイト+専用サイト

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

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

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

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

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

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

事例紹介

国立音楽大学
国立音楽大学

以下のURLからレスポンシブWebデザイン+モバイル専用サイトのワンソースマルチデバイス化を確認することができます。

PCサイト: http://www.kunitachi.ac.jp/
モバイルサイト:http://mb.kunitachi.ac.jp/

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

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

資料請求・お問合せ