【レポート】Web担当者Forumミーティング 2012 Spring

わかる！Web CMS選択術2012 + HTML5 CMS ― Web Meister | サイズ

Webサイトのマルチデバイス対応のポイントがCMS活用とともに解説

123 30 31

セミナーイベント「Web担当者Forumミーティング 2012 Spring」（2012年4月19日開催）の講演をレポートする。他のセッションのレポートはこちらから。

クリックするとセミナーの内容を動画でご覧いただけます（動画を別ウィンドウで開く）

クリックで動画を表示
（ボックスが広がって
再生が始まります）

タブレットやスマートフォンの普及を背景に問われているWebサイトのマルチデバイス対応。様々なデバイスが登場し、Webの技術も進化する中で、Web担当者はどのように対応していけばいいのか。サイズ社の糟谷氏が、スマートフォンをはじめとした「Webサイトのマルチデバイス対応」のポイントをCMS活用とともに解説した。

マルチデバイス対応の本質
Webサイトは「汎用」と「専用」サイトの2つしかない

株式会社サイズ
代表取締役
糟谷博陸氏

HTML5・CMS「Web Meister（ウェブマイスター）」開発のほか、「Webコンサルティング」「Web企画・制作・運用」を展開するサイズ社。同社の代表取締役である糟谷博陸氏は、PCのWebサイトだけではなく、様々なデジタルデバイスへの対応が問われている中で、スマートフォンサイト制作にも積極的に取り組んでいるという。

まず糟谷氏は、そもそもデジタルデバイスとは何かという点から話を進め、コンテンツ制作に関わるデジタルデバイスの要素として、次の3つについて検討する必要があると説明した。

画面解像度
入力インターフェイス
ユーザーインターフェイステクノロジー
HTML、Flash、Ajax、HTML5、スマートフォンネイティブアプリ、電子書籍フォーマットなど

画面解像度と入力インターフェイスの例

		～480	480～1024	1024～
		画面解像度
入力インターフェイス	マウス	-	ネットブック	-
	タッチパネル	スマートフォン	タブレットPC 電子書籍リーダー	デジタルサイネージ
	十字キー	携帯電話	携帯ゲーム機電子書籍リーダー	家庭用ゲーム機セットトップボックス

このように様々なデバイスが登場する中で問われているのが、マルチデバイス対応だ。ここで糟谷氏は「マルチデバイス対応を複雑に考える必要はない。Webサイトは『汎用』と『専用』サイトの2つしかない」ことを指摘した。専用サイトは、言葉通りデバイスごとに個別に用意されたWebサイトであり、もう一方の汎用サイトは、1つのWebサイトですべてのデバイスに対応するWebサイトだ。

汎用サイトの制作手法は、いくつかのタイプに大別される。まず1つは、「コンテントネゴシエーション」という仕組みだ。これは、アクセスしてきたユーザーに応じて、サーバーが最適なファイルやコンテンツを自動的に判断してレスポンスを返す仕組みのことである。動的CMSの多くはこの仕組みを用いている。

そして、汎用サイト制作のトレンドとして注目されているキーワードに「レスポンシブWebデザイン」という手法がある。これは、CSS3のMedia Queriesを利用し、ブラウザサイズに合わせてレイアウトを変更する仕組みだ。実際に、サイズ社のコーポレートサイトもレスポンシブWebデザインで設計されているといい、糟谷氏はその他にも様々な事例を示しながらこれらの手法を解説したうえで、汎用サイトのメリットとデメリットを次のようにまとめた。

汎用サイトのメリット

1つのWebサイト、同じURLですべてのデバイス表示に対応できる点
（ディレクトリとページが各デバイスで完全一致になる）

汎用サイトのデメリット

ファイルサイズが同一のため、マシンパワー・回線の遅いモバイルでは重い
1つのWebサイト、同じURLですべてのデバイス表示に対応できる点
（ディレクトリとページが各デバイスで完全一致になる）

※　ウェブユーザビリティの第一人者・ヤコブ・ニールセン博士が同様のことを発表した。「モバイルサイト vs. フルサイト」2012年5月8日付（日本語版）、2012年4月10日付（原文）。

つまり、「完全一致」というメリットはデメリットでもあるということだ。なぜなら、サイト構造が「完全一致」するため、ターゲットユーザーや利用シーン、サイトの目的をデバイスごとに設定できないからだ。言い換えれば、ユーザー中心設計は実現できない。そう考えると「スマートフォン対応において汎用サイトは専用サイトに劣る」と糟谷氏は話した。^※

「モバイルファースト」というWeb制作手法は、現在存在しない

次に糟谷氏は「モバイルファースト」というキーワードについても言及した。モバイルファーストとは、従来のようにデスクトップ版のWebサイトの要素を削り落としてモバイルサイトを制作するのではなく、まずモバイル向けのWebサイトを最初に設計し、そのうえで、デスクトップ向けサイトに必要な情報や機能を付け加えていく手法とされている。

しかし、今現在、デスクトップ向けサイトに必要な情報や機能を付け加えていく手法が明確になっていない。それがなければモバイル専用サイトの制作フローと同じである。糟谷氏はそう指摘したうえで、モバイルファーストという考え方は、Google、Adobe、Facebookなどのトップが語っているが、これは事業戦略として「モバイル市場を優先する」ことであるとの考えを示した。つまり欧米の「Mobile First」と日本の「モバイルファースト」は別のものであり、モバイルファーストというWeb制作手法は現在存在しないということだ。

※Web担編注　「モバイルファースト」は、サイトをどう作るかということよりも、ユーザーに対して本当に提示するべきコンテンツを再確認したり、ユーザーとのコミュニケーションを改めてコンテキストに応じて見直したりするといった観点から考えるほうがわかりやすいだろう。

現実解としてのレスポンシブWebデザイン＋モバイル専用サイト

それでは、具体的にはどのようにマルチデバイス対応を進めていけばいいのだろうか。糟谷氏は、これまでのように専用サイトを制作し、デバイスごとにバラバラの対応をするのはユーザー中心設計が可能である反面、高コストだと説明する。つまり、ユーザーファーストだがコストは高い。汎用サイトは1つで済むので低コストだが、デバイスごとのユーザー中心設計は不可能だ。コストファーストだがユーザー対応への課題は残る。

そこで、糟谷氏は新たに「汎用＋専用」サイトという考え方を提案する。「レスポンシブWebデザイン＋モバイル専用サイト」ともいうべきこの手法であれば、ディレクトリとページというサイト構造を完全一致させなくてもよいため、ターゲットユーザーや利用シーン、サイトの目的をデバイスごとに設定できるという利点がある。重要な部分だけを専用サイト化することでインポータントユーザーファーストを実現できる。

たとえば、国立音楽大学のサイトではPCとモバイルサイトでコンテンツを再利用しており、ユーザーがモバイル機能を重視する場合はモバイル専用サイトを、PCと同じ情報を閲覧する場合は汎用サイトをそれぞれ選択できるようにしている。こうすることでデバイスに合わせたコンテンツ管理を実現したのだ。

「レスポンシブWebデザイン＋モバイル専用サイト」ともいうべきこの手法であれば、ディレクトリとページというサイト構造を完全一致させなくてもよいため、ターゲットユーザーや利用シーン、サイトの目的をデバイスごとに設定できるという利点がある。

「汎用＋専用」サイトの制作については、構造と関係なくページをコピーできるCMSであれば、PCサイトから必要なページを複製するだけで運用管理が可能だという。もちろん、モバイルからPCサイトに再利用することも可能だ。糟谷氏は、汎用＋専用サイト制作でWeb担当者が検討しなければならないポイントは、「どのように汎用化するのか？」「何を専用化するのか？」の2点であるとした。

リッチクライアント、ソーシャルメディア、SEOのCMS化において大切なこと

次に「リッチクライアントを管理するためのCMSの活用」について糟谷氏は解説した。たとえば、「プログレッシブ・エンハンスメント」という考えは、古いブラウザでの情報表示を確保しながら、モダンブラウザ（新しいブラウザ）を利用するユーザーにはよりリッチな表現のコンテンツを届けようというものだ。こうしたターゲットブラウザごとに異なるユーザー体験を実現するために、CMSをどのように活用すべきかについて糟谷氏は解説した。

ポイントはコンテンツをXML化することだと、糟谷氏は説明した。ユーザーインターフェイスとコンテンツを分離し、HTML5やFlash、AjaxといったコンテンツをXMLで管理することが重要になる。そのうえで、外部XMLを管理することができるCMSを選択すれば、これまで外部の制作会社などに依頼せざるを得なかった難しい追加・更新作業が誰でもCMS上から行えるようになるという。

また、糟谷氏は自社サイトをソーシャルメディアと連携させるポイントについても言及した。主な連携の形態は以下の3つに大別できる。

ソーシャルメディアへの情報発信
RSSフィードの配信
ソーシャルメディアでの情報共有（シェア）
「いいね」ボタンやガジェットなどのSNSのボタンの追加
ソーシャルメディアでの情報共有を強化
HTMLのメタ情報へのOGP（Open Graph Protocol）の追加

続いて糟谷氏は、公式ページをFacebook化した武雄市の事例などを紹介しながら、レスポンシブWebデザインとCMSを組み合わせることで、柔軟かつ効率的に自社サイトとソーシャルメディアを連携できると、その可能性を解説した。また、CMSでソーシャルメディア連携を進める際に大切なことは、「コミュニケーション設計」「組織体制・オペレーションルール」とも指摘した。糟谷氏によると、これらはCMSの活用以上に重要なことであるという。

さらに糟谷氏は、SEOについてWeb担当者Forumの記事などで有効なSEOはすべて公開されている。CMS独自の秘密のSEOは存在しないため、SEOの内容が公開されているCMSを選ぶことが重要であると指摘した。また、多言語対応については、CMSによる省力化の事例を交えつつ解説した。上述の「マルチデバイス対応」「リッチクライアント対応」「ソーシャルメディア連携」「SEO」「多言語対応」といったポイントについては、サイズの「Web Meister」で問題なく対応可能であるとのことだ。

HTML5 CMS「Web Meister」

最後に糟谷氏は、Web MeisterはW3Cが提唱するXMLに基づくアーキテクチャーで開発されており、HTML5対応の条件であるリッチインターフェイスや、HTML5セマンティクスへの対応可能だと話す。このため、今後のWeb環境の変化に対して柔軟に対応可能であり、さらに高度な知識がなくても運用・更新ができるという。

CMSの開発やマルチデバイス対応に積極的に取り組む糟谷氏は、サイト運営上の課題について最適解を提示するソリューションとして、参考にしてもらいたいと述べてセッションを終了した。