わかる!Web CMS選択術-2013-
+ HTML5 CMS - Web Meister

Web Meister

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

わかる!Web CMS選択術-2013- + HTML5 CMS - Web Meister 概要

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

xyz corporation

株式会社サイズ / xyz corporation

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

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): 慶應義塾大学湘南藤沢キャンパス

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

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

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

W3C仕様への準拠

自己紹介 : 経歴(IMJ): 慶應義塾大学湘南藤沢キャンパス

Web Designing

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

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

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

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

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

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

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

書籍・刊行物

講義・講演・セミナー

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

サイズのこだわり

サイズのこだわり

本日の講演内容

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

Web担当者Forum ミーティング'12春
わかる!Web CMS選択術2012 + HTML5 CMS ― Web Meister
人気ランキング総合5位
Web担当者Forum ミーティング'12秋
わかる!マルチデバイス対応 + HTML5 CMS ― Web Meister
人気ランキング総合3位

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が行うべきものが抜けていないか確認しましょう。

多言語対応のポイント

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

決算公表前に情報漏洩が顕在化

security

なぜ、こんなことに?

編集長ブログ―安田英久 2013年2月5日

webtan

この記事ではCMSの時限公開には4つのパターンがあるとしています。

  • ×リンク自動掲載型
  • ×ページアクセス制御型
  • △全アセットアクセス制御型
  • ○日時指定デプロイ型
  • このうち、

  • ×リンク自動掲載型
  • ×ページアクセス制御型
  • は新聞の記事の問題に該当し、非常に危険です。
    高いセキュリティレベルが求められるコンテンツは
    静的CMS:○日時指定デプロイ型を選択するべき

    Web Meister は○日時指定デプロイ型です。

    Movable TypeをCMSとして使用した場合の情報漏洩リスクについて

    mt

    先日の上場企業の情報漏洩の事件は上場企業の広報様を始め多くの関係者が驚いたかと思います。実際に使用されたCMSや、情報(PDF?)を取得した方法については不明ですがMovable Type(以下MT)でも同じ問題が発生する可能性があります。

    対策ですが、主に上場企業様への対応としてAssetPublicityとSafePreviewというプラグインを提供しています。

    Movable Type は

  • ×ページアクセス制御型
  • 対応しても

  • △全アセットアクセス制御型まで
  • 静的CMSと動的CMSの違い

    比較

    用途に応じて使いわける、もしくは、組み合わせるべき

    HTML5対応CMS

    Web Meister

    Web Meister」がHTML5対応可能な理由をお話しします。

    HTML5の現状

    W3Cは2012年12月17日、HTML5とCanvas 2Dに関する仕様策定完了を発表。これら2つの仕様は勧告候補となり、実質的には仕様策定が完了しています。
    さらに、高機能なブラウザ(モダンブラウザ)には既に実装されています。
    つまり、もう使っても問題ありません。

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

    HTML5

    HTML5

    いつやるか?今でしょ

    xyz corporation

    xyz corporation

    「HTML5 + CSS3 + JavaScript + SVG」でリニューアル

    xyz corporation study01 [draw]

    study01

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

    xyz corporation study02 [TATE]

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

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

    デザインスイッチのHTML5版。通常、ヨコで表示される文字をタテに並べ直しています。縦横スイッチで切り替えることができます。

    IMJからxyzへのストーリーをコンテンクスト化

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

    ブラウザのイメージ


    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のような動きのユーザインタフェースを実装することが可能です。 更新に関わる部分を外部ファイルとしてXMLなどで持つことが有効です。特にSVGはSVG自体がXMLでできています。

    ユーザインタフェースとコンテンツを分離し、コンテンツをXMLで管理し更新できるCMSが必要です。

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

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

    HTML5、AjaxのXMLデータ管理

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

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

    AjaxのCMS化:事例

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

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

    HTML5セマンティックス対応

    文書構造(HTML4)

    文書構造(HTML4)イメージ

    HTML5セマンティックス対応

    文書構造(HTML5)

    文書構造(HTML5)イメージ

    HTML5セマンティックス対応

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

    HTML5セマンティクス対応

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

  • 文書構造では記事全体 article タグとその一部分 section タグが存在
  • コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化
  • CMSもコンテンツの粒度がページ単位ではなく section 単位で扱える必要がある
  • HTML5セマンティクス対応

    Web Meister は元々コンテンツの粒度がページ単位ではなく section 単位となっています。 見出し・本文・画像という1セットがコンテンツの最小単位となっており、これが集合することで記事を構成します。 動的テンプレートによって header footer nav aside が自動生成されページとなります。

    Web Meisterインターフェース

    HTML5事例

    マルチデバイス対応

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

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

    現在のデバイス環境

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

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

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

    専用とは?

    専用デバイスのイメージ

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

    汎用とは?

    デバイスの汎用イメージ

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

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

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

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

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

    法政大学 大学院

    法政大学 大学院 http://www.hosei.ac.jp/gs/english/index.html

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

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

    ヤマシタコーポレーション http://www.yco.co.jp/

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

    xyz corporation

    xyz corporation http://www.x-yz.co.jp/

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

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

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

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

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

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

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

    マルチデバイス対応

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

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

      コストファースト

    それではどうするのか?

    汎用+専用

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

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

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

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

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

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

    サイト構造は汎用と専用サイトで同じである必要はなく自由度があります。
    ユーザエクスペリエンスとコストのバランスを取ることが可能です。

    レスポンシブ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(ベクターデータ)で作成しているため、どんなに拡大しても画像が粗くなりません。

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

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

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

    1. どのように汎用化するのか?(まずは汎用化すべし)
    2. 何を専用化するのか?(ユーザエクスペリエンスの向上)

    製品コンセプト

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

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

    Web Meisterのコンセプト

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

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

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

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

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

    Webインテグレーションのポイント

    CMSのイメージ

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

    Web CMS選択術-2013 まとめ

    静的CMSと動的CMSの違いを理解すること

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

    1. どのように汎用化するのか?(まずは汎用化すべし)
    2. 何を専用化するのか?(ユーザエクスペリエンスの向上)

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

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

    HTML5セマンティックス対応

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

    さいごに

    HTML5




    ゲームのルールが変わることは決まっている。
    今日、ここから変えましょう!

    サイズのこだわり

    サイズのこだわり






    そんな みなさんを全力でサポートします!

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

    xyz corporation

    株式会社サイズ xyz corporation

    糟谷博陸

    代表取締役 糟谷博陸