わかる！Web CMS選択術-2013- + HTML5 CMS - Web Meister／サイズ

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

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

powered by 株式会社ヒューマンセントリックス

HTML5の利用が本格的になってきた中で、CMSは何を選択すればよいのだろうか。サイズ社の糟谷博陸氏は、HTML5はすでに使える状態となっているため、すぐに利用し始めることを提案。HTML5で実現できるコンテンツやマルチデバイス対応などについても説明し、HTML5に対応できるCMSの条件を示した。

CMSの時限公開における4つの仕組み

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

登壇した糟谷氏は、「今回はHTML5を中心に話をしたい」と挨拶し、今回の講演資料もHTML5で書かれていることを明かす。また、糟谷氏の講演は、昨年の「Web担当者Forumミーティング 2012 Spring」や「Web担当者Forumミーティング 2012 in名古屋」でも好評を博しており、これらのレポートや講演資料も後日の参考にしてほしいとした。

2012年の講演内容について簡単にまとめた糟谷氏は、今回の講演に先立って、2013年3月に報道された20社以上の上場企業の決算情報が公表前に投資家に閲覧されてしまった事件や、2013年4月に全国の5つの証券取引所と金融庁が上場企業に情報管理を促し、109社がアクセス制限を設けていなかったことを話題に上げる。

なぜ、このような情報漏えいが起きたかについて糟谷氏は、Web担当者Forumの編集長ブログの記事を示し、CMSの時限公開には「リンク自動掲載型」「ページアクセス制御型」「全アセットアクセス制御型」「日時指定デプロイ型」の4つがあり、決算資料の事前閲覧は「リンク自動掲載型」や「ページアクセス制御型」で発生し、非常に危険であると指摘。高いセキュリティレベルが求められるコンテンツは、静的CMSで「日時指定デプロイ型」を利用する必要があるとし、サイズが提供している「Web Meister」は日時指定デプロイ型であることを明かした。

また糟谷氏は、静的CMSと動的CMSを比較し、「ページ表示速度やSEO対策では絶対的に静的CMSが強く、セキュリティも日時指定デプロイ型であれば静的CMSのほうが高い。ただし、会員管理やマイページなどは静的CMSでは行えないため、用途に応じて使い分けたり、組み合わせたりするべき」だと説明する。

HTML5とCanvas 2Dの仕様策定は完了

次に糟谷氏は、Web技術の標準化を推進するW3Cが、2012年12月17日にHTML5とCanvas 2Dに関する仕様策定の完了を発表したことを示し、FirefoxやGoogle Chrome、SafariなどのモダンブラウザではすでにHTML5を実装されて使える状態となっていると説明する。

HTMLは文書構造、CSSは体裁、JavaScriptは挙動であるため、HTML5になったからといってこれまでと作り方が変わるわけではない。今すぐHTML5を利用すべきです。

実際にサイズのホームページは、「HTML5＋CSS3＋JavaScript＋SVG」でリニューアルされている。糟谷氏は、そこで公開されているコンテンツの「draw」や「TATE」をデモで紹介。HTML5で構築することで、ローカルの画像をドラッグ&ドロップでアップロードしてメッセージやイラストを書き込んでFacebookに公開したり、スイッチ1つで文字の縦書き／横書きを切り替えたりできることを示し、「これまでのHTMLの概念を超えたことをHTML5で実現できる」と説明した。

サイズのコーポレートサイト。縦書きと横書きの切り替えをHTML5で実現している

そのうえで糟谷氏は、今後はすべてのブラウザに対応する「クロスブラウザ」という考え方よりも、情報や操作が欠けることなくすべてのブラウザに提供されていれば、最新のブラウザ技術を積極的に取り入れて、よりよいユーザーエクスペリエンスを構築する「プログレッシブ・エンハンスメント」という考え方を取り入れるべきだと説明する。

「このようにHTML5の利用が本格化してくると、HTML5を管理できるCMSが必要となる」と話す糟谷氏は、「HTML5リッチインターフェース」と「HTML5セマンティクス」に対応していることがCMSの条件となることを示した。

リッチインターフェースはこれまでFlashなどで実現されてきたが、HTML5ではcanvasタグ、JavaScript、SVGなどによって動きのあるインターフェースを実現でき、更新に関る部分を外部ファイルとしてXMLなどで持つことが有効となる。つまり、コンテンツをXMLとして持ち、ユーザーインターフェースと分離して管理し、更新できるCMSがHTML5では必要となる。

Web Meisterは、HTML5やAjaxなどのXMLを管理でき、Officeライクな操作性で追加や更新が行えることを示した糟谷氏は、事例として法政大学のイベントカレンダーを紹介し、同じXMLデータをPC版、Facebookアプリ、スマートフォン版で利用し、ワンソース・マルチユースを実現していることを示した。

HTML5セマンティクスについての説明に移った糟谷氏は、HTML4の文書構造がすべて<div>で区切られているのに対し、HTML5では<header>、<footer>、<nav>、<article>、<aside>といった内容がわかるようなものとなっていることを示す。また、<article>内はさらに<section>タグで分割されており、コンテンツの粒度が記事の一部分まで細分化されているため、CMSも<section>単位で管理できるものでなくてはならない。

糟谷氏は「Web Meister は元々コンテンツの粒度がページ単位ではなくsection単位となっている。見出し・本文・画像という1セットがコンテンツの最小単位となっており、これが集合することで記事を構成するというHTML5と同じ考え方で作られていたため、そのままHTML5に対応できる」と話す。

マルチデバイス対応は汎用＋専用で考える

続いて糟谷氏は、「今日一番話したかったこと」としてマルチデバイス対応の考え方に話を移す。さまざまなデバイスが登場し、難しいと思われるマルチデバイス対応だが、糟谷氏は「Webサイトには、複数のデバイスに対応できる汎用サイトと、個別のデバイスに対応した専用サイトしか存在しないと考えてしまえば、さほど難しくはない」と話す。

汎用サイトの手法としてはレスポンシブWebデザインが主流となっており、CSS3の「Media Queries」によって横幅指定でレイアウトが変更できるようになっている。レスポンシブWebデザインの事例としてサイズのホームページのほか、法政大学大学院やヤマシタコーポレーションを紹介した糟谷氏は、汎用手法のメリットとデメリットを次のように示した。

メリット

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

デメリット

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

また、汎用手法では構造が完全一致するため、ターゲットユーザーや利用シーン、サイトの目的をデバイスごとに設定できず、ユーザー中心設計が困難であることを指摘。スマートフォン対応において汎用手法は、固定幅のPCサイトよりは優れているが、モバイル専用サイトよりは劣るとした。専用サイトは高コストだが、デバイスごとのユーザー中心設計が可能で「ユーザーファースト」、汎用サイトは低コストだがデバイスごとのユーザー中心設計が不可能で「コストファースト」となるのだ。

これらの解決方法として糟谷氏は、汎用と専用を組み合わせることを提案する。すべてのデバイスに対応できる汎用サイトを作ったうえで、重要な顧客が存在するデバイスに対しては、優先して別途専用サイトを作るという考え方だ。

レスポンシブWebデザインとモバイル専用サイトを組み合わせることで、必要なところにユーザー中心設計を行うことができ、ユーザーエクスペリエンスとコストのバランスを取ることが可能となる。「この考え方は、Webユーザビリティの第一人者ヤコブ・ニールセン博士も発表し、実験も行っているので参考にしてほしい」と糟谷氏は説明する（モバイルサイト vs. フルサイト）。

汎用＋専用サイトを制作するためには、構造と関係なくページをコピーできるCMSがあれば、PCサイトから必要なページを複製するだけで運用管理が可能となり、モバイルからPCサイトへの再利用も可能だ。糟谷氏は、汎用サイトと専用サイトを組み合わせた制作事例として、国立音楽大学や法政大学を紹介。法政大学の事例では、Retinaディスプレイのような高解像度ディスプレイに対して軽量で美しい画像を提供するために、ロゴやアイコンをマークアップ言語で記述されたベクター形式のSVG（Scalable Vector Graphics）を利用して制作した。SVGは対応ブラウザも多く、Androidも3.0以降で対応しているため、PCやスマートフォンで安定的に使用できるという。

RetinaディスプレイとレスポンシブWebデザインに対応した法政大学のサイト。ロゴ・アイコンはSVG（ベクターデータ）で作成しているため、どんなに拡大しても画像は粗くならない。

まずやらなければならないのは、汎用化すること。汎用化したうえですべてのデバイスに対応した後、何を専用化するかを考え、ユーザーエクスペリエンスを向上させることを考えるのが現実的です。

マルチデバイス対応のポイントをまとめた糟谷氏は、続けてCMS選択のポイントを次のように示す。

• 静的CMSと動的CMSの違いを理解する
  • セキュリティ、パフォーマンス、SEO重視なら静的CMS
  • マイページ、会員管理重視なら動的CMS
• マルチデバイス対応は汎用化してから重要なデバイスの専用サイト化を考える
  • どのように汎用化するのか？（まずは汎用化するべき）
  • 何を専用化するのか？（トータルのユーザーエクスペリエンスの向上）
• HTML5リッチインターフェース対応
  • HTML5やAjaxなどの外部XMLを管理できるCMSを選択する
• HTML5セマンティックス対応
  • <section>タグ単位で管理できるCMSを選択する

最後に糟谷氏は、「今後、HTML5に変わっていくことはもう決まっている。したがって、今日この場からHTML5をやっていくように変わってほしいと思う。我々も、HTML5に向かってサイト制作を行っていくみなさんを全力でサポートしていきたい」と話した。