わかる！Web CMS選択術-2013-＋ HTML5 CMS - Web Meister
株式会社サイズ 代表取締役 糟谷 博陸
株式会社サイズ 代表取締役 糟谷 博陸
HTML5 CMS - Web Meister （コンテンツ管理システム）による PC・携帯・スマートフォンへマルチデバイス化した Web サイトを制作する Webインテグレーターです。
HTML5やレスポンシブ Web デザインなどを活用したサイト制作に積極的に取り組んでおります。
Web制作とCMS導入のご依頼お待ちしております。
facebookページ ： よければ「いいね」してくれると嬉しいです。
1994年、セガ入社。主に電波メディアを担当。
2000年、IMJに入社。事業本部長として大規模サイトを多数構築する
2005年、CMS - Web Meisterを完成。
2007年、アジア→ヨーロッパ→中東→アフリカ→アメリ大陸世界40ヵ国を旅する。世界遺産検定2級。
2008年、IMJよりWeb Meister事業を譲受し、株式会社サイズ設立。単なるCMSベンダーではできないWebインテグレーションを提供中。
慶應義塾大学経済学部卒業
法政大学大学院経営学専攻マーケティングコース修了
2004～6年、慶大SFC外部講師
セガサターン ポスター
Dreamcast ポスター
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、世界のWebサイトをリードしていく立場にあるキャンパス。
XMLで全てのコンテンツを管理するCMS（Web Meister）を構築
スタイルシートでデザインパターンを3つに分けて表示、デザインスイッチによりユーザーの好みに合わせたクリエィティブを表現。
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位
なぜ、こんなことに？
この記事ではCMSの時限公開には4つのパターンがあるとしています。
このうち、
は新聞の記事の問題に該当し、非常に危険です。
高いセキュリティレベルが求められるコンテンツは
静的CMS：○日時指定デプロイ型を選択するべき
Web Meister は○日時指定デプロイ型です。
先日の上場企業の情報漏洩の事件は上場企業の広報様を始め多くの関係者が驚いたかと思います。実際に使用されたCMSや、情報（PDF？）を取得した方法については不明ですがMovable Type(以下MT)でも同じ問題が発生する可能性があります。
対策ですが、主に上場企業様への対応としてAssetPublicityとSafePreviewというプラグインを提供しています。
Movable Type は
対応しても
用途に応じて使いわける、もしくは、組み合わせるべき
「Web Meister」がHTML5対応可能な理由をお話しします。
W3Cは2012年12月17日、HTML5とCanvas 2Dに関する仕様策定完了を発表。これら2つの仕様は勧告候補となり、実質的には仕様策定が完了しています。
さらに、高機能なブラウザ（モダンブラウザ）には既に実装されています。
つまり、もう使っても問題ありません。
HTMLは文書構造、CSSは体裁、JavaScriptは挙動を担当
つまり、HTML5になってもこれまでと変わりません。
「HTML5 + CSS3 + JavaScript + SVG」でリニューアル
ローカルの画像をドラッグ＆ドロップで背景にアップロードし、その上にメッセージやイラストを描画することができます。作成したイメージは、facebook に投稿することができます。
XMLで全てのコンテンツを管理するCMS（Web Meister）を構築
スタイルシートでデザインパターンを3つに分けて表示、デザインスイッチによりユーザーの好みに合わせたクリエィティブを表現。
デザインスイッチのHTML5版。通常、ヨコで表示される文字をタテに並べ直しています。縦横スイッチで切り替えることができます。
IMJからxyzへのストーリーをコンテンクスト化
| IE6 | IE7 | IE8 | IE9 | Firefox | Safari | Chrome | |
|---|---|---|---|---|---|---|---|
| 情報 | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| デザイン・インタラクション | × | × | △ | ○ | ○ | ○ | ○ |
HTML5の利用もいよいよ本格化し、HTML5で制作したコンテンツ管理がこれから重要になってきます。それではHTML5を管理できるCMSとはどのようなCMSでしょうか？
がその条件となります。
HTML5関連技術ではcanvasタグ＋JavaScript、SVGなどによってFlashのような動きのユーザインタフェースを実装することが可能です。 更新に関わる部分を外部ファイルとしてXMLなどで持つことが有効です。特にSVGはSVG自体がXMLでできています。
ユーザインタフェースとコンテンツを分離し、コンテンツをXMLで管理し更新できるCMSが必要です。
HTML5、AjaxのXMLデータ管理
HTML5やAjaxなどの外部XMLを管理できるCMSを選択
これまで難しかった追加・更新が誰でもCMS上から行えるようになります。
法政大学イベントカレンダー
PC版、Facebookアプリ、スマートフォン版を同じイベントXMLデータを利用し、異なるインターフェースで表示。ワンソース・マルチユースを実現しています。
HTML5をCMSで管理するには section タグ単位で管理できる必要があります。
Web Meister は元々コンテンツの粒度がページ単位ではなく section 単位となっています。 見出し・本文・画像という1セットがコンテンツの最小単位となっており、これが集合することで記事を構成します。 動的テンプレートによって header footer nav aside が自動生成されページとなります。
専用 ： デバイス毎にWebサイトを用意
汎用 ： 1つのWebサイトで全てのデバイスに対応
過去においてはリキッドデザイン（サイズ可変デザイン）と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。
過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったこと。
構造が完全一致のため、
ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できない
（ユーザ中心設計ができない）
スマートフォン対応において汎用手法は専用に劣る
（レスポンシブWebデザイン、コンテントネゴシエーション、Appleの手法）
固定幅PCサイト＜汎用手法＜モバイル専用サイト
構造を一致しなくても良いため、ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できる（ユーザ中心設計ができる）
サイト構造は汎用と専用サイトで同じである必要はなく自由度があります。
ユーザエクスペリエンスとコストのバランスを取ることが可能です。
レスポンシブWebデザイン＋モバイル専用サイト
ウェブユーザビリティの第一人者ヤコブ・ニールセン博士が同様のこと（汎用＋専用サイトにすべき）を発表している。
http://www.usability.gr.jp/alertbox/mobile-vs-full-site.html
構造と関係なくページをコピーできるCMSがあればPCサイトから必要なページを複製するだけで、 運用管理が可能。逆にモバイルからPCサイトに再利用することも可能
ユーザ、デバイスに合わせた管理を実現
PC⇔モバイルでコンテンツを再利用。
ユーザはモバイルとしての機能を重視したい時にはモバイル専用サイトを、
PCと同じ情報を閲覧したい時は汎用サイトを、ユーザ側で選択可能。
ハイエンドにはより高解像度の画像がローエンドにはより軽量な画像（テキスト）の対応が必要に
ロゴ・アイコンはSVG（ベクターデータ）で作成しているため、どんなに拡大しても画像が粗くなりません。
W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発。 W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテンツの構造化を実現。そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能です。
『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。 メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。
また、公開されているページデザイン上でコンテンツの編集が行えるWYSIWYG エディタ（見たままのものが反映される）や、 リッチテキストエディタによって HTML の知識がなくてもオフィスが扱えればどなたでも利用可能
単なるCMSベンダーではできないWebインテグレーションを提供。
御社にふさわしいデザイン、情報設計を元にコンテンツを継続的に発展させていくWeb環境を提供します
ゲームのルールが変わることは決まっている。
今日、ここから変えましょう！
そんな みなさんを全力でサポートします！