セミナーイベント「Web担当者Forum ミーティング2012 in名古屋」（2012年9月27日開催）の講演をレポートする。他のセッションのレポートはこちらから。
2012年春のWeb担当者Forumミーティングで「わかる！Web CMS選択術-2012- + HTML5 CMS - Web Meister」という講演を行い好評を博したサイズの糟谷博陸氏は、さらにバージョンアップさせた講演を今回の名古屋ミーティングで行った。マルチデバイスとHTML5対応についてフォーカスし、オウンドメディアの制作手法の中でも最新の技術が伝えられた講演をレポートする。
マルチデバイス対応で使われるWeb制作手法
代表取締役
糟谷 博陸氏
2012年初頭くらいから数多くのデバイスが一般的に使われるようになったと話す糟谷氏は、デジタルデバイスの説明から講演を開始する。デジタルデバイスは多様化しているが、コンテンツ制作に関る要素は次の3つとなる。
- 画面解像度
- 入力インターフェイス
- ユーザーインターフェイステクノロジー
画面解像度は、フィーチャーフォンの240ピクセルからPCやデジタルサイネージなどの1,800ピクセル程度まで幅広いサイズがある。入力インターフェイスも、マウスやタッチパネル、十字キーなどが使われている。ユーザーインターフェイステクノロジーの基本はHTMLだが、デバイスによって使えるテクノロジーが異なる。このようなマトリックスの掛け合わせで、Web制作の方針が決まってくる。
Webサイトをマルチデバイスに対応させる方法として糟谷氏が紹介するのは、1つのWebサイトですべてのデバイスに対応する「汎用」と、デバイスごとにWebサイトを用意する「専用」の2つ。
汎用のマルチメディア対応は、クライアント（ブラウザ）からのリクエストに応じてサーバーが最適なファイルを自動的に判断してレスポンスを返す「コンテントネゴシエーション」という仕組みが使われている。また、レスポンシブWebデザインと呼ばれるブラウザの画面幅に応じて横幅が拡大縮小するHTMLレイアウトも使われ、この技術は以前はリキッドデザイン（サイズ可変デザイン）と呼ばれていたが、CSS3で新たに採用された「Media Queries」によって変更できるようになっている。
レスポンシブWebデザインの例として、サイズ社のWebサイトや同社の事業概要のページを実際に表示しながら横幅にあったサイズに自動的に縮小されることを示した糟谷氏は、次のように話す。
レスポンシブWebデザインでWebサイトを制作すれば、Facebookページでも横幅が自動的に縮小され、自社のWebサイトをそのままFacebookアプリとして利用できます。こうしておけば、タイムライン化などの仕様変更があっても、ページを作り変える必要はありません。他のサービスで同様のiframe企業サイト制作が可能になった場合もそのまま使用できます。汎用デザインでは、レスポンシブWebデザインが非常に有力な手法となってきています。
一方で、アップルはレスポンシブWebデザインではない別の手法を使っている。画面いっぱいに表示される画像のテキストを大きくして、サイズの拡大・縮小を考慮に入れて制作されているアップルのサイトは、相当に考えられて作られており、本当に美しく制作するのはかなり難しいのではないか、と糟谷氏は話す。
汎用手法によるマルチデバイス対応のメリットは、1つのWebサイトと同じURLを使い、ディレクトリとページが各デバイスで完全に一致するため、SEOなどで有利となる点がある。一方、デメリットとしては、読み込むデータのファイルサイズはPCサイトと同じであるため、モバイルデバイスでは表示が遅くなる可能性がある点だ。ただし、これを解決する手法もあり、実際にサイズでレスポンシブWebデザインのサイトを制作するときには、それらの手法を実装して重くなるのを避けているという。また、「ディレクトリとページが各デバイスで完全に一致する」という点は、メリットであるが、デメリットにもなるという。
構造が完全に一致するということは、ターゲットユーザーや利用シーン、サイトの目的をデバイスごとに設定できないことになります。PC用に作ったサイトを本当にスマートフォンユーザーに見せたいのか、ユーザー視点で設計しなくてよいのかという問題を解決できません。汎用手法は、表示面を考えれば固定幅のPCサイトよりも優れていますが、やはりユーザー視点で考えれば、モバイル専用サイトのほうが優れていることになります。
| メリット | デメリット | |
|---|---|---|
| 専用 | デバイスごとにWebサイトを用意するため、デバイスごとのユーザ中心設計が可能 | 専用サイトをバラバラに制作するため高コスト |
| 汎用 | 1つのWebサイトですべてのデバイスに対応するため、低コスト | デバイスごとのユーザ中心設計が不可能 |
これらのメリットとデメリットがあるなかで、糟谷氏が勧めるのは「汎用+専用」の手法だ。基本的には汎用手法ですべてのデバイスを網羅できる状態で制作し、新たなデバイスが出てきてもそのまま利用できる状態にしておく。それをベースに重要な位置を占めるユーザー（デバイス）に対しては専用サイトを提供し、サポートしていく考え方だ。レスポンシブWebデザイン+モバイル専用サイトが最適な手法だと糟谷氏は説明する。
ワンソースでマルチデバイスに対応するためのCMS
このような汎用+専用の制作手法はどのように実現すればよいのか、糟谷氏はサイズの「Web Meister」のような構造と関係なくページをコピーできるCMSがあれば、PCサイトから必要なページを複製するだけで運用管理できると話す。また、逆にモバイルサイトを先に制作してPCサイトに再利用することも可能だという。
これらの制作事例として、国立音楽大学や法政大学の事例を示した糟谷氏は、法政大学のサイトで実践したRetinaディスプレイなどに対応するためにSVG（Scalable Vector Graphics）を利用する手法について説明する。
iPhoneからMacBookまで、幅広い製品に使われるRetinaディスプレイに対応するには、ハイエンドなデバイスにはより高解像度の画像が、ローエンドにはより軽量な画像（テキスト）の対応が必要になってくる。SVGはマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱う言語だ。PCブラウザでは、IE 8より前でなければほとんどのブラウザで利用でき、Androidも3.0以降が対応しているため、2013年以降はPCとスマートフォンで安定的に利用できるという。法政大学のサイトでは、ロゴやアイコンなどでSVGを利用しており、ベクターデータであるため、拡大しても画像が粗くならないのが特徴だ。
一方、写真のように複雑な画像はベクターデータでの表示に不向きだ。これを解決するためにはいくつかの手法があるが、糟谷氏はサーバー側のPHPで利用できる「Adaptive Images」という技術を紹介する。Adaptive Imagesは、アクセスしたデバイスに応じて画像サイズを変えることができ、たとえば、スマートフォンでPC用の大きな画像を読み込まなくてよい。
こうした技術を紹介したうえで、糟谷氏は汎用+専用の手法を実現するには、「どのように汎用化するのか」と「何を専用化するのか」は企業側が決定し、社内で合意しておく必要があると話をまとめる。そのうえで制作会社とどのように制作していくかを話すことで、スムーズなマルチデバイス対応を行うことができるようになる。
HTML 5のリッチインターフェイスとセマンティクス対応がCMSの必須条件
続いて糟谷氏は、HTML 5で制作したコンテンツの管理を行うCMSの条件について、HTML 5のリッチインターフェイスとセマンティクスに対応していることが必要になると説明する。モバイル版のFlashは開発終了しており、今後スマートフォンでは基本的にFlashが利用できないため、HTML 5のcanvasタグ+JavaScriptなどを使い動きのあるインターフェイスを実現させるようになってきているが、このようなHTML 5のリッチインターフェイスやSVGなどのベクターデータをCMS化するためには、更新に関わる部分をXMLなどの外部ファイルとして持つことが有効だ。
HTML 5に対応するCMSには、ユーザーインターフェイスと分離してコンテンツをXMLで管理し、更新できることが求められる。たとえば、サイズのCMS「Web Meister」は、XMLなどで使われるHTML以外のタグをテキストエディタで誰でも更新することが可能だ。実際に、法政大学Webサイトのイベントカレンダーでは、同じXMLデータを利用しながらも、PC/スマートフォン/Facebookアプリの異なるインターフェイス向けに表示を最適化している。
基本的に、Webサイトはプロが制作して、サイトの更新管理はWeb制作の知識がない方でも行えなければならないと考えています。Web Meisterは、その基本的な考えをもとにインターフェイスが作られ、オフィスソフトが扱える人ならWYSIWYGエディタやリッチテキストエディタを使って利用できるようになっています。
CMSは、あくまでプロが作ったデザインやテンプレート、情報設計などを守る脇役的な存在であると考えているため、Web制作からCMSの実装、継続的な運用まで、単なるCMSベンダーではできないWebインテグレーションを我々は提供できるのです。
最後にCMSはあくまで情報管理ツールであり、誰でも利用できなくてはならないと糟谷氏は話し、今回の講演のさらに詳しい情報が掲載された資料がサイズのWebサイトに掲載しているので参考にしてほしい、と講演を終えた。
- コーナー：【レポート】Web担当者Forum ミーティング2012 in名古屋
- 内容カテゴリ：その他
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Webサイトのマルチデバイス対応とHTML 5に対応したCMSとは｜サイズ [【レポート】Web担当者Forum ミーティング2012 in名古屋] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.