オウンドメディアの最新マーケティング戦略とその制作手法

わかる!マルチデバイス対応 + HTML5 CMS - Web Meister

Web Meister

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

わかる!マルチデバイス対応 + HTML5 CMS - Web Meister 概要

自己紹介 : 株式会社サイズ

xyz corporation

株式会社サイズ / xyz corporation

HTML5 CMS - Web Meister (コンテンツ管理システム)による PC・携帯・スマートフォンへマルチデバイス化した Web サイトを制作する Webインテグレーターです。
レスポンシブ Web デザインやjQuery Mobileなどを活用したスマートフォンサイト制作にも積極的に取り組んでおります。

Web制作とCMS導入のご依頼お待ちしております。

facebookページ : よければ「いいね」してくれると嬉しいです。

自己紹介 : 経歴

糟谷 博陸 / Hiromichi Kasuya

ロゴ:SEGA
ロゴ:INTER MEDIA JAPAN
ロゴ:Web Meister
ロゴ:xyz corporation

1994年、セガ入社。主に電波メディアを担当。

2000年、IMJに入社。事業本部長として大規模サイトを多数構築する

2005年、CMS - Web Meisterを完成。

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

2008年、IMJよりWeb Meister事業を譲受し、株式会社サイズ設立。単なるCMSベンダーではできないWebインテグレーションを提供中。

慶應義塾大学経済学部卒業
法政大学大学院経営学専攻マーケティングコース修了
2004~6年、慶大SFC外部講師

自己紹介 : 経歴(セガ)

参考:セガサターン ポスター

セガサターン ポスター

参考:Dreamcast ポスター

Dreamcast ポスター

自己紹介 : 経歴(IMJ)

'06:DESIGN IT 「Web 2.0 ≒ Web Meister 2.0 その理由」

参考:製品コンセプト資料

自己紹介 : 経歴(世界一周のルート)

糟谷博陸
世界一周のルート

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

自己紹介 : 経歴(株式会社サイズ)

書籍・刊行物

講義・講演・セミナー

講演・執筆のご依頼お待ちしております。

本日の講演内容

マルチデバイス対応のイメージ

[Web担当者Forum]
わかる!マルチデバイス対応 + HTML5 CMS ― Web Meister
人気ランキング総合3位
わかる!Web CMS選択術2012 + HTML5 CMS ― Web Meister
人気ランキング総合5位

現在のWeb環境(マルチデバイス対応)

マルチデバイス対応のイメージ

  • デジタルデバイスとは?
  • マルチデバイス対応の本質
  • レスポンシブWebデザイン
  • 汎用+専用サイトの制作手法
  • Retinaディスプレイ対応

過去のWeb環境

過去のWeb環境のイメージ

現在のデバイス環境

現在のデバイス環境のイメージ

そもそもデジタルデバイスって?

コンテンツ制作に関わるデジタルデバイスの3要素

  1. 画面解像度
  2. 入力インタフェース
  3. ユーザインタフェース・テクノロジー

デバイスの要素

ユーザインタフェーステクノロジー

HTML、Flash、Ajax、HTML5、ネイティブアプリ、電子書籍フォーマットなど

マルチデバイス対応の本質

Webサイトには
汎用と専用
しか存在しない

専用とは?

専用デバイスのイメージ

専用 : デバイス毎にWebサイトを用意

汎用とは?

デバイスの汎用イメージ

汎用 : 1つのWebサイトで全てのデバイスに対応

汎用:レスポンシブWebデザイン事例

ヤマシタコーポレーション

http://www.yco.co.jp/

汎用 : 1つのWebサイトで全てのデバイスに対応

汎用:レスポンシブWebデザイン

マルチデバイスのイメージ

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

汎用:レスポンシブWebデザイン事例

汎用手法のメリット・デメリット

完全一致はメリットでもあり、デメリットでもある。

マルチデバイス対応(汎用手法のデメリット)

構造が完全一致のため、
ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できない
(ユーザ中心設計ができない)

マルチデバイスのイメージ

スマートフォン対応において汎用手法は専用に劣る
(レスポンシブWebデザイン、コンテントネゴシエーション、Appleの手法)

固定幅PCサイト<汎用手法<モバイル専用サイト

マルチデバイス対応

  1. デバイスの汎用イメージ
    専用 : デバイス毎にWebサイトを用意
    1. PC
    2. 携帯
    3. スマートフォン
    (バラバラなので高コスト、デバイスごとのユーザ中心設計は可能)

    ユーザファースト
  2. 専用デバイスのイメージ
    汎用 : 1つのWebサイトで全デバイスに対応
    1. 全デバイス
    (1つで済むので低コスト、デバイスごとのユーザ中心設計は不可能)

    コストファースト

それではどうするのか?

汎用+専用

デバイスの汎用+専用イメージ

  1. 汎用+専用
    A → A' → 全てのデバイス
    A → A" → モバイル
    (コストは中間、デバイスごとのユーザ中心設計は可能)

    インポータントユーザファースト

マルチデバイス対応(汎用+専用のメリット)

構造を一致しなくても良いため、ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できる(ユーザ中心設計ができる)

マルチデバイスのイメージ

サイト構造は汎用と専用サイトで同じである必要はなく自由度があります。 また、モバイルから考えるWebサイト制作も可能です。 しかも、モバイルファーストのように制作したモバイル専用サイトを汎用化する必要はありません。

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

ウェブユーザビリティの第一人者ヤコブ・ニールセン博士

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

ニールセン博士の発表

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

マルチデバイス対応(汎用+専用の制作手法)

ワンソース・マルチデバイス

ワンソース・マルチデバイスサイトの制作ステップ

構造と関係なくページをコピーできるCMSがあればPCサイトから必要なページを複製するだけで、 運用管理が可能。逆にモバイルからPCサイトに再利用することも可能

マルチデバイス対応(汎用+専用の制作事例)

国立音楽大学 + Web Meister

事例:国立音楽大学

ユーザ、デバイスに合わせた管理を実現 PC⇔モバイルでコンテンツを再利用。
ユーザはモバイルとしての機能を重視したい時にはモバイル専用サイトを、 PCと同じ情報を閲覧したい時は汎用サイトを、ユーザ側で選択可能。

マルチデバイス対応(汎用+専用の制作事例)

事例:法政大学

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

Retinaディスプレイ対応

Retinaディスプレイのイメージ

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

Retinaディスプレイ/レスポンシブWebデザイン対応

ロゴ・アイコン=SVG

SVG(Scalable Vector Graphics)とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。

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以上

android3.0以降も対応しているため、
PC・スマートフォンで安定的に使用できる

Retinaディスプレイ/レスポンシブWebデザイン対応

ロゴ・アイコン=SVG

SVGのイメージ

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

Retinaディスプレイ/レスポンシブWebデザイン対応

写真?

1.Javascriptを使う 2.サーバーサイドで対応 3.APIで対応 4.画像の代替で対応 5.画像サイズを小さくして対応

http://design-spice.com/2012/06/13/responsive-web-design-image/

Retinaディスプレイ/レスポンシブWebデザイン対応

写真?

2.サーバーサイドで対応

http://adaptive-images.com/

汎用+専用 決定しなければならないこと

デバイスの汎用+専用イメージ

決定しなければならないこと

  1. どのように汎用化するのか?
  2. 何を専用化するのか?

HTML5対応CMS

Web Meister

ここまでの話は「Web Meister」で実現可能です。
さらにHTML5対応が可能な理由をお話しします。

HTML5の現状

W3Cは2012年12月17日、HTML5とCanvas 2Dに関する仕様策定完了を発表。これら2つの仕様は勧告候補となり、実質的には仕様策定が完了しています。
つまり、もう使っても問題ありません。

HTMLは文書構造、CSSは体裁、JavaScriptは挙動を担当
つまり、HTML5になってもこれまでと変わりません。

HTML5

HTML5

いつやるか?今でしょ

HTML5

いつやるか?今でしょ

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

ブラウザのイメージ


IE6 IE7 IE8 IE9 Firefox Safari Chrome
情報
デザイン・インタラクション × ×

HTML5対応CMSの条件

HTML5

HTML5の利用もいよいよ本格化してきました。それに伴ってHTML5で制作したコンテンツ管理がこれから重要になってくると思われます。それではHTML5を管理できるCMSとはどのようなCMSでしょうか?

  1. HTML5リッチインタフェース対応
  2. HTML5セマンティクス対応

がその条件となります。

HTML5リッチインタフェース対応

リッチクライアント対応のイメージ

HTML5関連技術ではcanvasタグ+JavaScript、SVGなどによってFlashのような動きのユーザインタフェースを実装することが可能です。 これらのHTML5によるリッチインターフェースをCMS化にする為には更新に関わる部分を外部ファイルとしてXMLなどで持つことが有効です。 特にSVGはSVG自体がXMLでできています。 つまり、ユーザインタフェースとコンテンツを分離し、コンテンツをXMLで管理し更新できるCMSである必要があるということになります。

HTML5、Flash、AjaxなどリッチインタフェースのCMS化

リッチクライアントのイメージ

HTML5、Flash、AjaxのXMLデータ管理

事例:国立音楽大学
事例:国立音楽大学

HTML5、FlashやAjaxなどの外部XMLを管理できるCMSを選択
これまで難しかった追加・更新が誰でもCMS上から行えるようになります。

リッチインタフェースのCMS化事例

事例:法政大学

法政大学

事例:国立音楽大学

国立音楽大学

事例:ウシオ電機

ウシオ電機

AjaxのCMS化:事例

AjaxのCMS化の事例:法政大学

法政大学イベントカレンダー
PC版、Facebookアプリ、スマートフォン版を同じイベントXMLデータを利用し、異なるインターフェースで表示。ワンソース・マルチユースを実現しています。

HTML5セマンティックス対応

文書構造(HTML4)

文書構造(HTML4)イメージ

HTML5セマンティックス対応

文書構造(HTML5)

文書構造(HTML5)イメージ

HTML5セマンティックス対応

HTML5をCMSで管理するには section タグ単位で管理できる必要があります。

HTML5セマンティクス対応

HTML5ではHTML4の文書構造やコンテンツの意味づけとは違うタグを設置する必要があります。 文書構造では記事全体 article タグとその一部分 section タグが存在します。 コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化されることになりました。 そのため、CMSにおいてもコンテンツの粒度がページ単位ではなく section 単位で扱える必要があります。
Web Meister は元々コンテンツの粒度がページ単位ではなく section 単位となっています。 見出し・本文・画像という1セットがコンテンツの最小単位となっており、これが集合することで記事を構成します。 動的テンプレートによって header footer nav aside が自動生成されページとなります。

Web Meisterインターフェース

HTML5事例

製品コンセプト

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

W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発。 W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテンツの構造化を実現。そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能です。

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

Web Meisterのコンセプト

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

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

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

また、公開されているページデザイン上でコンテンツの編集が行えるWYSIWYG エディタ(見たままのものが反映される)や、 リッチテキストエディタによって HTML の知識がなくてもオフィスが扱えればどなたでも利用可能

3ペイン構造のインターフェース

リニューアルのポイント

CMSのイメージ

単なるCMSベンダーではできないWebインテグレーションを提供。
御社にふさわしいデザイン、情報設計を元にコンテンツを継続的に発展させていくWeb環境を提供します

サイズのこだわり

サイズのこだわり

Web CMS選択術-2013 まとめ

マルチデバイス対応 汎用+専用

  1. どのように汎用化するのか?
  2. 何を専用化するのか?

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

IE6~8に関して

HTML5リッチインタフェースのCMS化

HTML5やAjaxなどの外部XMLを管理できるCMSを選択すること

HTML5セマンティックス対応

section タグ単位で管理できるCMSを選択すること

本日はありがとうございました。

xyz corporation

株式会社サイズ xyz corporation

糟谷博陸

代表取締役 糟谷博陸