Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」

2013.11. 13
Web担当者Forumミーティング2013 Autumn
「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」

Copyright © xyz Corporation. All Rights Reserved.
アジェンダ
•自己紹介
•HTML5の現状
•HTML5対応CMSの条件
–HTML5リッチインタフェース対応
–HTML5セマンティックス対応
•マルチデバイス対応その前に
•レスポンシブWebデザインとは？
•マルチデバイス対応の本質
•マルチデバイス対応トピックス
•マルチデバイス対応その後に
2

株式会社サイズについて
3
国内最大手Web制作会社よりスピンアウト
HTML5 CMS – Web Meister によるマルチデバイス化した Web サイトを制作する Webインテグレーターです。
レスポンシブ Web デザインやHTML5などを活用したWebサイト制作に積極的に取り組んでおります。
商号
所在地
事業内容
設立
資本金
経営陣
所属団体
株式会社サイズ / xyz corporation
東京都渋谷区上原1-1-8
代々木公園セントウエストテラス3F
2008年7月1日
4000万円
代表取締役糟谷博陸(元IMJ事業本部長)
取締役山本聰(元IMJチーフDir.)
顧問石川幸夫(元博報堂アイ・スタジオ
代表取締役社長)
Webコンサルティング
Webサイト企画・制作・運用
ソフトウェア開発・販売
コンピュータソフトウェア協会(CSAJ)
日本アドバタイザーズ協会 Web広告研究会
KIEP（慶應SFCイノベーション&アントレプレナー
シップ・プラットフォーム研究コンソーシアム）
2013年度
日本テクノロジー Fast50
17位受賞

4
HTML5事例
・ページ単位ではなくHTML5 <section>単位で管理
・ロゴ・アイコンはSVGで作成。Retinaディスプレイ対応
・「レスポンシブWebデザイン」を採用し、
PC、タブレット、スマートフォンの画面サイズに最適化された表示を実現。
さらにcanvas + File APIによるドローツール、縦書変換スイッチを実装。

経歴
5
1994年、セガ入社。主に電波メディアを担当。
2000年、Web制作を行うIMJに入社。
Webアナリストとして金融・ECサイトなどの調査・分析
スカイパーフェクTV!、ユニクロなどIMJを代表する案件の組織マネジメント、プロデュースを事業本部長として行う。
2005年、CMS - Web Meisterを完成。
2007年、世界40ヵ国を旅する。
2008年株式会社サイズ設立。
IMJよりWeb Meister事業を譲受。PC・携帯・スマートフォンへワンソースマルチデバイス化したWebサイト+CMSを提供するWebインテグレーションを事業とする。
2013、日本テクノロジー Fast50 17位受賞
2004～6年、慶大SFC外部講師

6
経歴：セガ

公開
2004年4月～2008年12月
作業範囲
コンサルティング
情報整理・設計
インターフェイス設計・制作
XML、XSLT、XHTML作成
CMS導入
ガイドライン策定
XMLで全てのコンテンツを管理するCMS（Web Meister）を構築
スタイルシートでデザインパターンを3つに分けて制作。
デザインスイッチで切り替えることが可能で、ユーザーの好みに合わせたクリエィティブを表現。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、
世界のWebサイトをリードしていく立場にあるキャンパス。
＝
経歴：IMJ
7

経歴：IMJ
8
Web Designing 2011年6月号
毎日コミュニケーションズ
特集1：Webクリエイティブの10年−記憶に刻むべき21世紀最初のディケード−
誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」
弊社、糟谷・山本が2004年に制作した慶應義塾大学湘南藤沢キャンパスが掲載「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」
KIEP（慶應SFC イノベーション & アントレプレナーシップ・プラットフォーム研究コンソーシアム）
「SFCの知の活用と実践の加速」、「Innovationと Entrepreneurship のプラットフォーム形成」を目的としたSFC研究コンソーシアムに加盟

経歴：世界一周
9
2007年、アジア、ヨーロッパ、中東、アフリカ、アメリカ大陸の世界40ヵ国を旅する。世界遺産検定2級

経歴：xyz corporation
10

会社概要：スタッフプロフィール（糟谷）
職種：プロデューサー／Webアナリスト
氏名：糟谷博陸（カスヤヒロミチ）
過去のWebサイト構築・運用実績：
・スカイパーフェクＴＶ（構築・運用）
・ 2002 FIFA World Cup Korea/Japan/スカパー（構築）
・ソニーファイナンス（構築・運用）
・コンビタウン（構築・運用）
・サントリーカンパニー（構築）
・ディノス（構築・運用）
・ユニクロ（運用）
・ミキハウス（構築・運用）
・日本レジストリサービス（構築）
・慶應義塾大学湘南藤沢キャンパス（構築・ＣＭＳ）
・国立音楽大学（構築・CMS）
・法政大学（構築・CMS）
・ Web Meister(ＣＭＳ・自社プロダクト開発）
・ Brides-Express（構築・運用・自主メディア開発）
・カプコンスマートフォンサイト（構築・運用）
他多数あり
HTML5、マルチデバイス対応の著作多数
11

12
「日本テクノロジー Fast50」で17位を受賞～175%の収益成長を記録～
14位にはパズル＆ドラゴンズ（パズドラ）のガンホー・オンライン・エンターテイメント株式会社が179%で入賞しており、同等の成長率を記録しました。

13
HTML5の現状
W3Cは2012年12月17日、HTML5とCanvas 2Dに関する仕様策定完了を発表。これら2つの仕様は勧告候補となり、実質的には仕様策定が完了し、ブラウザには既に実装済みです。
つまり、もう使っても問題ありません。
狭義と広義のHTML5が存在します。それぞれが進化していますが
HTMLは文書構造、JavaScriptは挙動、CSSは体裁を扱っていることにこれまでと変わりありません。

14
HTML5の現状
狭義のHTML5はもう使っても問題ありません。
広義のHTML5（JavaScript、CSS3含む）は部分的に使用可能。
ざっくりイメージでは文書構造としてのHTMLは若干進化
挙動としてのJavaScript、体裁としてのCSSはこれから大きく進化

15
HTML5のブラウザ実装状況

16
プログレッシブ・エンハンスメント
どのようなWebブラウザでも情報が欠けることなく参照でき、操作もできるように HTMLとCSSで基本デザインを構築した上に、さらに最新のWebブラウザの新しいテクノロジを積極的に導入することで、よりよいユーザーエクスペリエンスを構築すること。
情報としてのHTMLはどのブラウザでの閲覧でき、挙動としてのJavaScript、体裁としてのCSSはブラウザによって見え方が異なる、もしくは異なるものを使用する
IE6
IE7
IE8
IE9
Firefox
Safari
Chrome
情報
○
○
○
○
○
○
○
デザイン・インタラクション
×
×
△
○
○
○
○
IE6、7はさすがにもういいのでは？

17
HTML5の利用もいよいよ本格化し、HTML5で制作したコンテンツ管理がこれから重要になってきます。それではHTML5を管理できるCMSとはどのようなCMSでしょうか？
HTML5リッチインタフェース対応
HTML5セマンティクス対応
がその条件となります。
HTML5対応CMSの条件

18
「HTML5 + CSS3 + JavaScript + SVG」でリニューアル
HTML5ならではのコンテンツを用意。
HTML5リッチインタフェース事例

19
ローカルの画像をドラッグ＆ドロップで背景にアップロードし、その上にメッセージやイラストを描画することができます。作成したイメージは、facebook に投稿することができます。

20
デザインスイッチのHTML5版。縦横スイッチで切り替えることが可能で、和文の扱いに新しい価値を提供。
慶應SFC→xyz へのストーリーをコンテクスト化。

21
HTML5セマンティックス対応
レイアウトに関しては全て<div>であり、意味を認識できない
HTML5マークアップの心得と作法
羽田野太巳より引用

22
文書構造としてのHTMLは若干進化

23
ただ、HTML5がどうという前に文書構造と体裁が
分離できていないHTMLが多い。
コンテンツ内部は
さらに<section>
で分割

24
マルチデバイス対応その前に
文書構造と体裁が分離できていない極端な例
見た目上キレイにできていたとしても
これらのWebサイトとHTMLの汚さでは
大差ないものが多い。
このようなWebサイトはマルチデバイス対応は不可能。
HTMLのタグを知っていることとどう書くべきかは別。

公開
2004年4月～2008年12月
作業範囲
コンサルティング
情報整理・設計
インターフェイス設計・制作
XML、XSLT、XHTML作成
CMS導入
ガイドライン策定
文書構造と体裁を分離するという10年前の課題が未だにボトルネック。
新しい技術はこの課題の延長線上にあります。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、
世界のWebサイトをリードしていく立場にあるキャンパス。
＝
経歴：IMJ
World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。略称はW3C（ダブリュースリーシー）。
25

Webサイト制作のポイント
26
UIに関してWeb制作会社はこのように分離して考えています。
CMSの導入
「マニュアルを必要としない使いやすさ」を目指して開発。
オフィスが扱えればどなたでも利用可能なものを選択
コンテンツ
・問題点の解決方法の提示
・ユーザ導入事例
・問い合わせ強化など
ビジュアルデザイン
「他社と差別化を行うことができる、ならではの新鮮味のある洗練されたデザイン
デザインテンプレート
マルチデバイス対応・ソーシャルメディア連携・SEO対策を考慮
情報設計
・ニュース・イベントの分類と更新性の確保
・情報の再整理（カテゴリ、機能別、目的別など）
・今後の独自コンテンツの追加を想定した設計
・リッチクライアントや多言語対応を考慮

レスポンシブWebデザインとは？
過去においてはリキッドデザインと呼ばれた、画面幅に応じて横幅が拡大・縮小するレイアウトのこと。リキッドデザインとの違いはすべての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったことである。
画面解像度に応じたレイアウトを用意し、CSS3 Media Queriesでスタイルを切り替えることでレイアウトを最適化することができる。
文書構造と体裁が分離されていないと実現できない。
27
画面幅に応じて、横幅が可変する
レスポンシブWebデザイン

28
レスポンシブWebデザイン + CMS ：関東ITS健康保険

レスポンシブWebデザイン + CMS ：フェスタリアブライダル
29

レスポンシブWebデザイン + CMS ：nkk.com
30

レスポンシブWebデザイン + CMS ：RICOH BlackRams
31

レスポンシブWebデザイン：ゴルフテック
32

レスポンシブWebデザイン + CMS ：ヤマシタコーポレーション
33

レスポンシブWebデザイン + CMS ：法政大学グローバルサイト
34

レスポンシブWebデザイン + CMS ：神戸大学
35

レスポンシブWebデザイン + CMS ：東京農工大学
36

レスポンシブWebデザイン + CMS ：デジタルハリウッド
37

レスポンシブWebデザイン：NHK はじまるネット選挙
38

レスポンシブWebデザイン：WOWOW カモ朗オリジナルサイト
39

レスポンシブWebデザイン：トクシス
40

レスポンシブWebデザイン + CMS ：xyz corporation
41

42
マルチデバイス対応
マルチデバイス対応の本質：
Webサイトは専用と汎用しか存在しない
レスポンシブWebデザインは単なる手法なのでそれだけでは
利用するユーザ視点が入っていない

43
汎用： 1つのWebサイトで全てのデバイスに対応
レスポンシブWebデザイン、Appleのサイトなど
（1つで済むので低コスト、デバイスごとの
ユーザ中心設計は不可能）
コストファースト
専用：デバイス毎にWebサイトを用意
PC＋携帯＋スマートフォンなどこれまでの
制作手法
（バラバラなので高コスト、デバイスごとの
ユーザ中心設計は可能）
ユーザファースト
専用サイトと汎用サイト

マルチデバイス対応（汎用サイト）
44
画面幅に応じて、横幅が可変する
レスポンシブWebデザイン
大きい画像を使い、拡大・縮小
前提で操作するアップル
PC→スマホ変換ツールを
使う方法もある

45
マルチデバイス対応（レスポンシブWebデザインのデメリット？）
レスポンシブWebデザインは重い？
スマートフォンで閲覧する場合に
○レスポンシブWebデザインは軽くつくったモバイル専用サイトと比べて重い。
但し、解決方法はある
×レスポンシブWebデザインは固定幅PCサイトと比べて重い。
レスポンシブWebデザインは費用がかかる？
○固定幅PCサイトを制作するよりは費用がかかる。
×固定幅PCサイト＋モバイル専用サイトを制作し、マルチデバイス対応するより費用がかかる。
PCサイトのリニューアル時に
マルチデバイス対応を意識するのであれば
レスポンシブWebデザインで制作する
デメリットはない

46
レスポンシブWebデザインは重い？解決方法
スマホで閲覧時、レスポンシブWebデザインが重く感じる理由の大部分は画像の重さ
同じファイル名で軽い画像をキャッシュ化、
スマホからアクセスがあった場合、軽い画像を表示する
http://adaptive-images.com/

47
マルチデバイス対応（汎用サイトの絶対的デメリット）
構造が完全一致のため、
ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できない
（ユーザ中心設計ができない）
スマートフォン対応において汎用サイトは専用サイトに劣る
（レスポンシブWebデザイン、コンテントネゴシエーション、Appleの手法）
固定幅PCサイト＜汎用サイト＜モバイル専用サイト

48
マルチデバイス対応（汎用＋専用のメリット）
汎用＋専用
汎用＝全てのデバイス
専用＝モバイル
（コストは中間、デバイスごとのユーザ中心設計は可能）
構造を一致しなくても良いため、ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できる（ユーザ中心設計ができる）
レスポンシブWebデザイン＋モバイル専用サイト

49
モバイルサイト vs. フルサイト
ウェブユーザビリティの第一人者・ヤコブ・ニールセン博士が
同様のこと（汎用＋専用サイトにすべき）を発表している。
http://www.usability.gr.jp/alertbox/mobile-vs-full-site.html

モバイルファースト？
50
認知してもらう
興味・関心を持ってもらう
理解を深めてもらう
問い合わせをしてもらう
資料請求してもらう
Webサイト
で可能な
範囲
誰が
営業時間に
社内・店内で
なにの為に
いつ・どこで
タイプ A
タイプ B
タイプ C
B to B 事業内容としてはPCの重要度が高く、
スマトーフォン対応はそれほど重要ではない。
利用するユーザによって対応手法は変化する。
営業時間・営業時間外に
社外で
なにで
✘
✘
自社Webサイトのユーザを正しく認識しましょう

51
マルチデバイス対応トピックス
ハイエンドにはより高解像度の画像が
ローエンドにはより軽量な画像（テキスト）の対応が必要に

52
Retinaディスプレイ／レスポンシブWebデザイン対応
android3.0以降も対応しているため、
PC・スマートフォンで安定的に使用できる
Webブラウザ
対応するバージョン
Internet Explorer
9以上
Firefox
3.0以上
Chrome
4.0以上
Mac OS X Safari
3.2以上
Opera
9.0以上
iOS Safari
3.2以上
Androidブラウザ
3.0以上
ロゴ・アイコン＝SVG
SVG（Scalable Vector Graphics）とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。

53
ロゴ・アイコンはSVG（ベクターデータ）で作成しているため、
どんなに拡大しても画像が粗くなりません。
マルチデバイス対応（SVG：事例）

54
http://tympanus.net/codrops/
マルチデバイス対応その後に

55
マルチデバイス対応その後に CSS3 ナビゲーション

56
マルチデバイス対応その後に CSS3 ナビゲーション

57
マルチデバイス対応その後に SVGアニメーションアイコン

58
マルチデバイス対応その後にサムネイルアニメーション

59
マルチデバイス対応その後にフォームアニメーション

60
マルチデバイス対応その後にオーバーレイ注釈

61
「データ×デザイン」を実現するJavascriptライブラリ「d3.js」
オバマ大統領の国家予算案詳細 (New York Times)

62
「データ×デザイン」を実現するJavascriptライブラリ「d3.js」

63
製品コンセプト
W3C の理想を体現する HTML5 CMS - Web Meister
『Web Meister』は、W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発されました。 W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテンツの構造化を実現しています。
そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能です。
『Web Meister』は、高度な知識がなくても、今後のWeb環境の変化にも柔軟に対応できるCMSです。

64
マニュアルを必要としない操作性
『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。
また、公開されているページデザイン上でコンテンツの編集が行える
WYSIWYG エディタ（見たままのものが反映される）や、リッチテキストエディタによって HTML の知識がなくてもオフィスが扱えればどなたでも利用可能
3ペイン構造の基本画面
ページデザイン上で
編集できる
WYSIWYGエディター
画像配置パターン選択画面
XMLモジュール
リッチテキストエディタ
Webコンテンツ編集に必要な機能に絞ることで「Web制作のプロがつくったサイト・クオリティを維持・管理」
Web Meister のユーザインターフェース

xyz corporation のこだわり
単なるCMSベンダーではできないWebインテグレーションを提供。
65

66
株式会社サイズ
xyz corporation
代表取締役糟谷博陸
e-mail：kasukasu@x-yz.co.jp
twitter：kasukasu_xyz
blog：http://blog.x-yz.co.jp/kasukasu/
web：http://www.x-yz.co.jp/
http://www.web-meister.jp/
〒151-0064：東京都渋谷区上原1-1-8
代々木公園セントウエストテラス3F
Tel ： 03-6407-0481 Fax ： 03-6407-0482

Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」

More Related Content

What's hot

Similar to Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」

Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」