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

わかる!マルチデバイス対応 + 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)

2006年: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サイトで全てのデバイスに対応

マルチデバイス対応(汎用:コンテントネゴシエーション)

コンテントネゴシエーションとは、
クライアント(ブラウザ)からのリクエストに応じてサーバが最適なファイルを自動的に判断してレスポンスを返す仕組みのことである。

動的CMSや変換エンジンの多くはこのタイプ

事例:慶應義塾大学SFC
事例:慶應義塾大学SFC

マルチデバイス対応(汎用:レスポンシブWebデザイン)

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

「Responsive Web Design:レスポンシブ・ウェブ・デザイン」
過去においてはリキッドデザイン(サイズ可変デザイン)と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。

過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったこと。

マルチデバイス対応(汎用:レスポンシブWebデザイン)

事例:Web担当者Forum

http://web-tan.forum.impressrd.jp/e/2012/02/24/12201

マルチデバイス対応(汎用:レスポンシブWebデザイン事例)

事例:Responsive Web Design JP

http://responsive-jp.com/

事例:inspirationfeed

http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/

マルチデバイス対応(汎用:レスポンシブWebデザイン事例)

マルチデバイス対応(汎用:レスポンシブWebデザイン事例)

固定幅のイメージ

固定幅の場合、オーバーした分は横スクロールしないと表示されない

幅可変のイメージ

レスポンシブWebデザインの場合、横幅にあったサイズに自動的に縮小される

レスポンシブWebデザインでWebサイトを制作した場合、Facebookページでも横幅が自動的に縮小されてそのまま使用できます。 今後、mixi、google、Yahoo、twitterで同様のiframe企業サイト制作が可能になった場合もそのまま使用できます。

マルチデバイス対応(汎用:Apple)

サイズの拡大・縮小を考慮に入れて制作する手法。手法の名前はありません。

考察:Appleはスマホサイトを作らない。
http://www.pxt.jp/ja/diary/
article/257/index.html

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

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

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

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

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

スマートフォン対応において汎用手法は専用に劣る
(レスポンシブ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対応CMSの条件

HTML5

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

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

がその条件となります。

現在のWeb環境(リッチクライアント)

現在のWeb環境(リッチクライアント)のイメージ

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データを利用し、異なるインターフェースで表示。ワンソース・マルチユースを実現しています。

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

ブラウザのイメージ


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

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

事例:明治大学

http://www.meiji.ac.jp/cip/english/sports/

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

事例:法政大学

http://www.hosei.ac.jp/

HTML5セマンティクス対応

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

Web Meisterインターフェース

HTML5セマンティックス対応

文書構造(HTML4)

文書構造(HTML4)イメージ

HTML5セマンティックス対応

文書構造(HTML5)

文書構造(HTML5)イメージ

HTML5セマンティックス対応

HTML5事例

情報設計を自動生成する動的テンプレート(Webページ)

一般的な下層(記事)ページレイアウト

レイアウトテンプレートイメージ

情報設計を自動生成する動的テンプレート(Webページ)

情報設計テンプレートイメージ

製品コンセプト

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選択術-2012 まとめ

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

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

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

IE6~8に関して

リッチクライアントのCMS化

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

Web CMS選択術-2012 まとめ

CMSでできるソーシャルメディア連携

実はCMSより圧倒的に重要です。但し、自社サイト内でできるソーシャルメディア連携が可能かどうかはしっかり確認しましょう。

CMSでできるSEO対策

SEO対策の内容が公開されているCMSを選ぶこと
CMS独自の秘密の対応策は存在しません。SEO対策の実施内容は確認することができます。
ブラックなことをしていないか、ホワイト高品質のものでCMSが行うべきものが抜けていないか確認しましょう。

多言語対応のポイント

たくさんあるのでご相談ください。

HTML5 CMS - Web Meister 主な実績

大学サイトの制作実績 : 慶應義塾大学湘南藤沢キャンパス

慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、世界のWebサイトをリードしていく立場にあるキャンパス。

事例:慶應義塾大学SFC
事例:慶應義塾大学SFC

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

W3C仕様への準拠

大学サイトの制作実績 : 慶應義塾大学湘南藤沢キャンパス

Web Designing

Web Designing 2011年6月号
毎日コミュニケーションズ

特集1 : Webクリエイティブの10年 ?記憶に刻むべき21世紀最初のディケード? 誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」

弊社、糟谷・山本が2004年に制作した慶應義塾大学 湘南藤沢キャンパスが掲載「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。 CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」

大学サイトの制作実績 : 国立音楽大学

各時代における音楽文化を担う人材を多数世に送り出してきた音楽大学

事例:国立音楽大学

  • Flash、AjaxのファイルデータをCMS上で管理、自動生成
  • PCサイト→モバイルサイトのワンソース・マルチデバイス
  • 目的別(カテゴリ)とユーザー別に導線を確保、一元管理
  • キーワード・ディスクリプション、ファイルアイコンなど自動生成
  • CMS(Web Meister)の導入

大学サイトの制作実績 : 法政大学

「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学

事例:法政大学

  • ソーシャルメディア連携
  • Flash、AjaxのファイルデータをCMS上で管理、自動生成
  • 目的別(カテゴリ)とユーザー別に導線を確保、一元管理
  • キーワード・ディスクリプション、ファイルアイコンなど自動生成
  • CMS(Web Meister)の導入

大学サイトの制作実績 : 法政大学

Web担当者Forum

Web担当者Forum
震災時でも休むことなく情報発信を続けられた、スキルを問わずだれでも使えるCMS/法政大学+Web Meister
http://web-tan.forum.impressrd.jp/e/2011/09/08/10699
CMS関連の人気記事1位になりました!(2011/09/09~23)

企業サイトの制作実績 : ウシオ電気株式会社

事例:ウシオ電気株式会社

企業サイトの制作実績 : THK株式会社

事例:THK株式会社

企業への導入実績 : 東芝情報システム株式会社

情報サービス分野のリーディングカンパニー東芝情報システム株式会社のWebサイト

事例:東芝情報システム株式会社

  • 東芝制作ガイドラインに準拠。
  • 5年経ってもガイドラインから外れていない。
  • 全ての更新をお客様で対応している

Web Meister導入・制作実績: 東芝機械

「世界No.1の機械メーカー」を目指す東芝機械のWebサイト

事例:東芝機械

  • 日本語サイトと英語サイトを1対1で管理
  • 東芝グループの厳しい品質基準、ガイドラインをクリア
  • TopページメインエリアはjQuery(JavaScript)で実装」

マルチデバイス対応(専用サイト:事例)

事例:カプコンフィギュアビルダー(CFB)

「カプコンフィギュアビルダー(CFB)」

事例:AIROU FROM THE MONSTER HUNTER「アイルー」公式サイト

AIROU FROM THE MONSTER HUNTER「アイルー」公式サイト

携帯・スマートフォン兼用のモバイルサイトをAjaxライブラリ「jQuery Mobile」と携帯コンテンツ変換エンジン「roundabout」を用いて構築

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

xyz corporation

株式会社サイズ xyz corporation

糟谷博陸

代表取締役 糟谷博陸