大学サイトにおけるマルチデバイス対応のポイント＋ HTML5 CMS - Web Meister

Confidential
http://www.x-yz.co.jp/
Copyright © xyz Corporation. All Rights Reserved.
2014.05. 30
大学サイトにおけるマルチデバイス対応のポイント
＋ HTML5 CMS - Web Meister

レスポンシブ Web デザインや
HTML5などを活用したWebサイトを
HTML5 CMS – Web Meister に実装する
Webインテグレーターです。
2013年度
日本テクノロジー Fast50
17位受賞
株式会社サイズについて

経歴
1994年、セガ入社。主に電波メディアを担当。
2000年、Web制作を行うIMJに入社。
スカイパーフェクTV!、ユニクロなどIMJを代表する案件の組織マネジメント、プロデュースを事業本部長として行う。
2005年、CMS - Web Meisterを完成。
2007年、世界40ヵ国を旅する。
2008年、株式会社サイズ設立。
2013年、日本テクノロジー Fast50 17位受賞
2004～6年、慶大SFC外部講師

4
経歴：セガ
セガサターンとドリームキャストのTV媒体を担当

経歴：IMJ
XMLで全てのコンテンツを管理するCMS（Web Meister）を開発
デザインをデザインスイッチで切り替えることが可能。
日本における
レスポンシブWebデザインの元祖。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、
世界のWebサイトをリードしていく立場にあるキャンパス。
＝

経歴：IMJ
6
Web Designing 2011年6月号
毎日コミュニケーションズ
特集1：Webクリエイティブの10年−記憶に刻むべき21世紀最初のディケード−
誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」
弊社、糟谷・山本が2004年に制作した慶應義塾大学湘南藤沢キャンパスが掲載「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」

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

経歴：xyz corporation
8

「日本テクノロジー Fast50」で17位を受賞～175%の収益成長を記録～
9
14位にはパズル＆ドラゴンズ（パズドラ）のガンホー・オンライン・エンターテイメント株式会社が179%で入賞しており、同等の成長率を記録しました。

会社概要：Web担当者Forum 人気記事ランキング
10
人気ランキング総合5位
http://web-tan.forum.impressrd.jp/e/2012/05/23/12714

11
弊社チーム大学サイト制作
時系列実績

2004年：慶應義塾大学湘南藤沢キャンパス
XMLで全てのコンテンツを管理するCMS（Web Meister）を開発
デザインをデザインスイッチで切り替えることが可能。
日本における
レスポンシブWebデザインの元祖。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、
世界のWebサイトをリードしていく立場にあるキャンパス。
＝

13
2003年～2008年：慶應義塾大学
慶應義塾大学
日吉キャンパス
経済学部
Gomez 大学サイトランキング
2009年：11位
2010年：19位
2013年：22位

14
2010年～：国立音楽大学
PCサイト
携帯サイト

2011年～：法政大学
15
PCサイト
スマートフォンサイト
多言語サイト
レスポンシブWebデザイン
2009年：20位以下
2010年：20位以下
2013年：7位

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

17
HTML5事例
・ページ単位ではなくHTML5 <section>単位で管理
・ロゴ・アイコンはSVGで作成。Retinaディスプレイ対応

18
ロゴ・アイコンはSVG（ベクターデータ）で作成しているため、
どんなに拡大しても画像が粗くなりません。
マルチデバイス対応（SVG：事例）

法政大学合格者向けサイト
19

20
2012年～：明治大学
2009年：20位以下
2010年：20位以下
2013年：1位
ABOUT THE SCHOOL
Meiji University and sports

2014年～：デジタルハリウッド
21
レスポンシブWebデザイン（アダプティブデザイン）

2014年～：神戸大学
22
レスポンシブWebデザイン（アダプティブデザイン）

2014年～：東京農工大学
23
2009年：5位
2010年：2位
2013年：7位

24
マルチデバイス対応

レスポンシブWebデザインとは？
過去においてはリキッドデザインと呼ばれた、画面幅に応じて横幅が拡大・縮小するレイアウトのこと。
固定幅のエクスペリエンスも内包。
新しく固定幅でつくることは無意味。
レスポンシブWebデザインの依頼しか来ないので
固定幅サイトのつくり方を忘れました。

レスポンシブWebデザイン + CMS ：法政大学大学院グローバルサイト
26

汎用： 1つのWebサイトで全てのデバイスに対応
1つで済むので低コスト、構造が一致するため
デバイスごとのユーザ中心設計は不可能
コストファースト
レスポンシブWebデザイン（汎用サイト）の弱点

それではこれからどうなるのか？

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

レスポンシブWebデザイン化後のマルチデバイス対応
構造を一致しなくても良いため、ターゲットユーザ
や利用シーン、サイトの目的をデバイスごと
に設定できる（ユーザ中心設計ができる）
レスポンシブWebデザイン＋モバイル専用サイト

31
2010年～：国立音楽大学
PCサイト
携帯サイト
大幅な改修をせずに
レスポンシブWebデザイン（アダプティブデザイン）化可能。
その時に携帯サイト（専用サイト）が活きてくる。

2011年～：法政大学
32
スマートフォンサイト
多言語サイト
2009年：20位以下
2010年：20位以下
2013年：7位
レスポンシブWebデザイン（アダプティブデザイン）化可能。

33
製品コンセプト
W3C の理想を体現する HTML5 CMS - Web Meister
『Web Meister』は、W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発されました。W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテンツの構造化を実現しています。
そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能です。
『Web Meister』は、高度な知識がなくても、今後のWeb環境の変化にも柔軟に対応できるCMSです。

34
マニュアルを必要としない操作性
『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。
また、公開されているページデザイン上でコンテンツの編集が行える
WYSIWYG エディタ（見たままのものが反映される）や、リッチテキストエディタによって HTML の知識がなくてもオフィスが扱えればどなたでも利用可能
3ペイン構造の基本画面
ページデザイン上で
編集できる
WYSIWYGエディター
画像配置パターン選択画面
XMLモジュール
リッチテキストエディタ
Webコンテンツ編集に必要な機能に絞ることで「Web制作のプロがつくったサイト・クオリティを維持・管理」
Web Meister のユーザインターフェース

ページやメニューの自動生成
設定したルールに基づいて自動生成
ニュース記事
Topページ
ニュース
エリア
カテゴリ
Topページ
ニュース
エリア
ニュース
一覧
年度
アーカイブ
自動生成
HOME
事業内容
HOME ＞採用情報
採用情報
リード文リード文リード文リード文リード文リード文リード文リー
自動生成
ニュースの自動生成
記事を作成すると
発信日、カテゴリ、ニュースタイトルを
該当ページのニュースエリアに生成
ローカルメニュー、パンくずリストの自動生成
ページを作成した場所（ディレクトリ）に
適したメニューやパンくずリストを生成
自動生成
アイコンの自動生成
拡張子やURLを
自動判断し
アイコンを生成
⇒第2階層メニュー
→４階層メニュー
→ページタイトル
35

公開設定・バージョン管理
公開・非公開予約と３世代バージョン管理
公開期間設定
公開開始日時と公開終了日時の予約設定が可能
バージョン管理
公開したページ３世代をバージョン管理
公開および非公開設定を「日/時/分」単位で予約することが可能。
公開したページは3世代バージョン管理され、間違ったオペレーションをしてしまった場合でも、すぐに前のバージョンに戻すことがきます。
36

承認フロー
更新ルーチンに合わせ柔軟な承認フローが可能
ディレクトリ（フォルダ）または、ページ単位で、
3次承認まで設定することができます。
承認や却下依頼の通知は、メールの自動送信で行われます。
※承認フローを使用するには、「Standard Edition」のライセンスが必要です。
「Standard Edition Lite」のライセンスでは使用できません。
37

グループサイトの管理
複数のサイトを管理、情報の一元管理も可能
複数のサイト（ドメイン）を管理することが可能。
すべての情報を一元管理することができ
同じコンテンツを再利用したい場合や
統一されたデザインガイドラインを準拠したい場合など
グループサイトや多言語サイトの管理に向きます。
38

SEO対策
○
○
○
1
4
2
重要度
内容
対策
3
○
sitemap.xmlを自動生成
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://www.web- meister.jp/NEWS/press/20081001.html</loc>
<lastmod>2009-06- 04T17:45:28+09:00</lastmod></url><url>・・・繰り返し・・・ </url></urlset>
RSS各種規格に対応。ニュースを自動的に配信
RSS 1.0 RDF Site Summary
RSS 2.0 Really Simple Syndication
Atom
共通部分をXMLで一括管理。1か所変更すれば全ページに反映
<variable value="：XML CMS(コンテンツ管理システム)-Web Meister(ウェブマイスター)" name="site_label" />
<variable value="W3C の理想を体現するXML CMS「Web Meister」は、コンテンツの再利用ができるWeb CMS(コンテンツ管理システム)です。" name="site_description" />
<variable value="Web CMS,XML CMS,CMS 制作,CMS 導入,コンテンツ管理システム,ウェブマイスター,Web Meister,株式会社サイズ" name="site_keywords" />
URL正規化タグ「rel="canonical"」を正規
バージョンと複製バージョンに自動生成
googleやYahoo!、MSNなど検索エンジン各社も、
URL正規化タグをサポートすることを発表
SEOにおいて重要とされる施策を自動生成
39

40
リニューアルの前に

サイト構造
A
A
A
A
A
A
B
C
A
B
C
D
A
B
C
D
マスターブランド
ハイブリッドブランド
保証付きブランド
個別ブランド
B
C
D
+
+
+
A
A
A
・全てコーポレートブランド
（CB）を冠する
・ブランド投資効果大
・戦略失敗のダメージ大
・APPLE
・Virgin
・国立音楽大学
・マスターブランドと個別
ブランドの共存
・棲み分けに失敗すると
顧客が混乱を起こす。
・サントリー
・ディズニー
・法政大学
・サブブランドは独立している
がCBにより保証されている
・CBの訴求力を活用できる
・ソニー
・ネスレ
・慶應義塾大学
・東京農工大学
・神戸大学
・各サブブランドは独立している
・多面的事業展開が可能
・シナジーがないため投資が
非効率的
・P&G
・ユニリーバ
効率的・リスク集約
柔軟・リスク分散

42
国立音楽大学 – マスターブランド
国立音楽大学
音楽学部
入学案内
トップページから学部・入学案内まで同一のナビゲーション・デザインルールに統一。
コーポレートブランド（国立音楽大学）にブランド管理を集中することで
自由度に欠けますが、効率性が高いものとなっています。

43
法政大学 - ハイブリッドブランド
法政大学
法学部
大学院
トップページと下層で共通なのはヘッダとフッタ。
コンテンツ内部のナビゲーション・デザインルールはそれぞれ自由度があります。
コーポレートブランドによる一定の管理のもとサブブランドによる主体性を発揮したい場合に向いています。

44
慶應義塾大学 - 保証付きブランド
慶應義塾大学
湘南藤沢キャンパス
矢上キャンパス・理工学部
日吉キャンパス
経済学部など

サイト構造
A
A
A
A
A
A
B
C
A
B
C
D
A
B
C
D
マスターブランド
ハイブリッドブランド
保証付きブランド
個別ブランド
B
C
D
+
+
+
A
A
A
効率的・リスク集約
柔軟・リスク分散
最終的にどこを目指すのか意思を持たないと
本体と学部・センターの関係が個別対応になってしまう。

46
ユーザーの企業ブランド体験が、
マーケティング活動の展開を
「支援」（商品ブンラド価値
増大を促進）
積極利用
保証
魅力
ユーザーの商品ブランド体験が、
企業ブランド価値（企業価値）
を高めるのに「貢献」
向上・付加
向上
付加
支援
企業
商品サービス
貢献
活動
[支援- 貢献ポートフォリオ分析]
ブランド戦略（支援ー貢献ポートフォリオ分析）

47
支援×貢献
ポートフォリオ
階層の設計：「上位・下位の支援し貢献する状態」の適切化
・支援（企業ブランドからの保証／魅力付け／積極購入の促進）
・貢献（現在の強み維持／弱み克服／ビジョン強化）
CHECK POINT
●ユーザーに対して、上位ブランドと下位ブランドが、相互に適切なベネフィットを提供できるように関係づけられ、働き合っているか。
・上位ブランドが下位ブランドのビジョンや価値提供を「支援」する力
・下位ブランドが上位ブランドのビジョンや価値提供に「貢献」する力
●ユーザーに対して理解しやすいカテゴリの括りとなり、適切なブランド領域を設定できているか。
・ユーザーにとっての括りの納得性、ふさわしさ
・将来の拡大カテゴリ設定の適切さ
ブランド戦略（支援ー貢献ポートフォリオ分析）

最後に
48
大学サイトにおいてマルチデバイス対応は必須
■サイト構造の検討
■まず、レスポンシブWebデザイン化 → その後、＋専用サイト
■それを継続的に更新できる
HTML5 CMS – Web Meister の導入

49
株式会社サイズ
xyz corporation
代表取締役糟谷博陸
e-mail：kasukasu@x-yz.co.jp
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

大学サイトにおけるマルチデバイス対応のポイント＋ HTML5 CMS - Web Meister

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 大学サイトにおけるマルチデバイス対応のポイント＋ HTML5 CMS - Web Meister

Similar to 大学サイトにおけるマルチデバイス対応のポイント＋ HTML5 CMS - Web Meister (20)