web担当者forumミーティング2013 autumn...

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位受賞

Copyright © xyz Corporation. All Rights Reserved. 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外部講師


経歴：セガ


公開 2004年4月～2008年12月

作業範囲

コンサルティング情報整理・設計インターフェイス設計・制作 XML、XSLT、XHTML作成 CMS導入ガイドライン策定

XMLで全てのコンテンツを管理するCMS（Web Meister）を構築スタイルシートでデザインパターンを3つに分けて制作。デザインスイッチで切り替えることが可能で、ユーザーの好みに合わせたクリエィティブを表現。

慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、

世界のWebサイトをリードしていく立場にあるキャンパス。

＝

経歴：IMJ

7

http://www.sfc.keio.ac.jp/index.html?style=simple

http://www.sfc.keio.ac.jp/index.html?style=cool

http://www.sfc.keio.ac.jp/index.html?style=hot


経歴：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


「日本テクノロジー Fast50」で17位を受賞～175%の収益成長を記録～

14位にはパズル＆ドラゴンズ（パズドラ）のガンホー・オンライン・エンターテイメント株式会社が179%で入賞しており、同等の成長率を記録しました。


HTML5の現状

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


HTML5の現状

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


HTML5のブラウザ実装状況


プログレッシブ・エンハンスメント

どのようなWebブラウザでも情報が欠けることなく参照でき、操作もできるようにHTMLとCSSで基本デザインを構築した上に、さらに最新のWebブラウザの新しいテクノロジを積極的に導入することで、よりよいユーザーエクスペリエンスを構築すること。情報としてのHTMLはどのブラウザでの閲覧でき、挙動としてのJavaScript、体裁としてのCSSはブラウザによって見え方が異なる、もしくは異なるものを使用する

IE6 IE7 IE8 IE9 Firefox Safari Chrome

情報 ○ ○ ○ ○ ○ ○ ○

デザイン・インタラクション

× × △ ○ ○ ○ ○

IE6、7はさすがにもういいのでは？


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

HTML5対応CMSの条件


「HTML5 + CSS3 + JavaScript + SVG」でリニューアル HTML5ならではのコンテンツを用意。

HTML5リッチインタフェース事例


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



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



HTML5セマンティックス対応

レイアウトに関しては全て<div>であり、意味を認識できない

HTML5マークアップの心得と作法羽田野太巳より引用



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




ただ、HTML5がどうという前に文書構造と体裁が分離できていないHTMLが多い。

コンテンツ内部はさらに<section> で分割



マルチデバイス対応その前に

文書構造と体裁が分離できていない極端な例見た目上キレイにできていたとしてもこれらの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

http://www.sfc.keio.ac.jp/index.html?style=simple

http://www.sfc.keio.ac.jp/index.html?style=cool

http://www.sfc.keio.ac.jp/index.html?style=hot


Webサイト制作のポイント

26

UIに関してWeb制作会社はこのように分離して考えています。

CMSの導入「マニュアルを必要としない使いやすさ」を目指して開発。オフィスが扱えればどなたでも利用可能なものを選択

コンテンツ・問題点の解決方法の提示・ユーザ導入事例・問い合わせ強化など

ビジュアルデザイン「他社と差別化を行うことができる、ならではの新鮮味のある洗練されたデザインデザインテンプレートマルチデバイス対応・ソーシャルメディア連携・SEO対策を考慮

情報設計・ニュース・イベントの分類と更新性の確保・情報の再整理（カテゴリ、機能別、目的別など）・今後の独自コンテンツの追加を想定した設計・リッチクライアントや多言語対応を考慮


レスポンシブWebデザインとは？

過去においてはリキッドデザインと呼ばれた、画面幅に応じて横幅が拡大・縮小するレイアウトのこと。リキッドデザインとの違いはすべての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったことである。

画面解像度に応じたレイアウトを用意し、CSS3 Media Queriesでスタイルを切り替えることでレイアウトを最適化することができる。

文書構造と体裁が分離されていないと実現できない。

27

画面幅に応じて、横幅が可変するレスポンシブWebデザイン


レスポンシブ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


マルチデバイス対応

マルチデバイス対応の本質： Webサイトは専用と汎用しか存在しない

レスポンシブWebデザインは単なる手法なのでそれだけでは利用するユーザ視点が入っていない


汎用： 1つのWebサイトで全てのデバイスに対応レスポンシブWebデザイン、Appleのサイトなど（1つで済むので低コスト、デバイスごとのユーザ中心設計は不可能）コストファースト

専用：デバイス毎にWebサイトを用意 PC＋携帯＋スマートフォンなどこれまでの制作手法（バラバラなので高コスト、デバイスごとのユーザ中心設計は可能）ユーザファースト

専用サイトと汎用サイト


マルチデバイス対応（汎用サイト）

44

画面幅に応じて、横幅が可変するレスポンシブWebデザイン

大きい画像を使い、拡大・縮小前提で操作するアップル

PC→スマホ変換ツールを使う方法もある


マルチデバイス対応（レスポンシブWebデザインのデメリット？）

レスポンシブWebデザインは重い？

スマートフォンで閲覧する場合に ○レスポンシブWebデザインは軽くつくったモバイル専用サイトと比べて重い。但し、解決方法はある ×レスポンシブWebデザインは固定幅PCサイトと比べて重い。

レスポンシブWebデザインは費用がかかる？

○固定幅PCサイトを制作するよりは費用がかかる。 ×固定幅PCサイト＋モバイル専用サイトを制作し、マルチデバイス対応するより費用がかかる。

PCサイトのリニューアル時にマルチデバイス対応を意識するのであればレスポンシブWebデザインで制作する

デメリットはない


レスポンシブWebデザインは重い？解決方法

スマホで閲覧時、レスポンシブWebデザインが重く感じる理由の大部分は画像の重さ同じファイル名で軽い画像をキャッシュ化、

スマホからアクセスがあった場合、軽い画像を表示する

http://adaptive-images.com/


マルチデバイス対応（汎用サイトの絶対的デメリット）

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

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


マルチデバイス対応（汎用＋専用のメリット）

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

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


モバイルサイト vs. フルサイト

ウェブユーザビリティの第一人者・ヤコブ・ニールセン博士が同様のこと（汎用＋専用サイトにすべき）を発表している。

http://www.usability.gr.jp/alertbox/mobile-vs-full-site.html


モバイルファースト？

50

認知してもらう

興味・関心を持ってもらう

理解を深めてもらう

問い合わせをしてもらう

資料請求してもらう

Webサイトで可能な範囲

誰が

営業時間に

社内・店内で

なにの為にいつ・どこで

タイプ A

タイプ B

タイプ C

B to B 事業内容としてはPCの重要度が高く、スマトーフォン対応はそれほど重要ではない。利用するユーザによって対応手法は変化する。

営業時間・営業時間外に

社外で

なにで

✘ ✘

自社Webサイトのユーザを正しく認識しましょう


マルチデバイス対応トピックス

ハイエンドにはより高解像度の画像がローエンドにはより軽量な画像（テキスト）の対応が必要に


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などと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。


ロゴ・アイコンはSVG（ベクターデータ）で作成しているため、どんなに拡大しても画像が粗くなりません。

マルチデバイス対応（SVG：事例）


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


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


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


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


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


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

オバマ大統領の国家予算案詳細 (New York Times)


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


製品コンセプト

W3C の理想を体現する HTML5 CMS - Web Meister

『Web Meister』は、W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発されました。

W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテ

ンツの構造化を実現しています。

そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能です。

『Web Meister』は、高度な知識がなくても、今後のWeb環境の変化にも柔軟に対応できるCMSです。


マニュアルを必要としない操作性

『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。

また、公開されているページデザイン上でコンテンツの編集が行える

WYSIWYG エディタ（見たままのものが反映される）や、リッチテキストエディ

タによって HTML の知識がなくてもオフィスが扱えればどなたでも利用可能

3ペイン構造の基本画面

ページデザイン上で編集できる

WYSIWYGエディター

画像配置パターン選択画面

XMLモジュール

リッチテキストエディタ Webコンテンツ編集に必要な機能に絞ることで「Web制作のプロがつくったサイト・クオリティを維持・管理」

Web Meister のユーザインターフェース


xyz corporation のこだわり

単なるCMSベンダーではできないWebインテグレーションを提供。

65


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

e-mail：[email protected] 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...

Technology