大学サイトにおけるマルチデバイス対応のポイント＋ 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外部講師

Copyright © xyz Corporation. All Rights Reserved. 4

経歴：セガ

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


経歴：IMJ

XMLで全てのコンテンツを管理するCMS（Web Meister）を開発デザインをデザインスイッチで切り替えることが可能。

日本におけるレスポンシブWebデザインの元祖。

慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、

世界のWebサイトをリードしていく立場にあるキャンパス。

＝

http://www.sfc.keio.ac.jp/index.html?style=simple

http://www.sfc.keio.ac.jp/index.html?style=cool

http://www.sfc.keio.ac.jp/index.html?style=hot


経歴：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サイトをリードしていく立場にあるキャンパス。

＝

http://www.sfc.keio.ac.jp/index.html?style=simple

http://www.sfc.keio.ac.jp/index.html?style=cool

http://www.sfc.keio.ac.jp/index.html?style=hot


2003年～2008年：慶應義塾大学

慶應義塾大学

日吉キャンパス経済学部

Gomez 大学サイトランキング 2009年：11位 2010年：19位 2013年：22位


2010年～：国立音楽大学

PCサイト

携帯サイト


2011年～：法政大学

15 PCサイト

スマートフォンサイト

多言語サイトレスポンシブWebデザイン

Gomez 大学サイトランキング 2009年：20位以下 2010年：20位以下 2013年：7位


AjaxのCMS化：事例

16

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


HTML5事例

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


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

マルチデバイス対応（SVG：事例）


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

19


2012年～：明治大学


ABOUT THE SCHOOL

Meiji University and sports


2014年～：デジタルハリウッド

21

レスポンシブWebデザイン（アダプティブデザイン）


2014年～：神戸大学

22

レスポンシブWebデザイン（アダプティブデザイン）


2014年～：東京農工大学

23

Gomez 大学サイトランキング 2009年：5位 2010年：2位 2013年：7位

レスポンシブWebデザイン


24

マルチデバイス対応


レスポンシブWebデザインとは？

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


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

26


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

1つで済むので低コスト、構造が一致するためデバイスごとのユーザ中心設計は不可能

コストファースト

レスポンシブWebデザイン（汎用サイト）の弱点


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


専用：デバイス毎にWebサイトを用意 PC＋携帯＋スマートフォンなどこれまでの制作手法

バラバラなので高コスト、構造がバラバラで良いので

デバイスごとのユーザ中心設計は可能

ユーザファースト

専用サイトのメリット


レスポンシブWebデザイン化後のマルチデバイス対応

構造を一致しなくても良いため、ターゲットユーザ

や利用シーン、サイトの目的をデバイスごとに設定できる（ユーザ中心設計ができる）

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


2010年～：国立音楽大学

PCサイト

携帯サイト

大幅な改修をせずにレスポンシブWebデザイン（アダプティブデザイン）化可能。

その時に携帯サイト（専用サイト）が活きてくる。


2011年～：法政大学

32

スマートフォンサイト

多言語サイトレスポンシブWebデザイン


レスポンシブWebデザイン（アダプティブデザイン）化可能。


製品コンセプト

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

『Web Meister』は、W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発され

ました。W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテン

ツの分離、コンテンツの構造化を実現しています。

そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能

です。

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


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

『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 ・ユニリーバ

効率的・リスク集約柔軟・リスク分散


国立音楽大学 – マスターブランド

国立音楽大学音楽学部入学案内

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


法政大学 - ハイブリッドブランド

法政大学法学部大学院

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


慶應義塾大学 - 保証付きブランド

慶應義塾大学

湘南藤沢キャンパス矢上キャンパス・理工学部

日吉キャンパス

経済学部など


サイト構造

A

A A A

A

A B C

A

B C D

A

B C D

マスターブランドハイブリッドブランド保証付きブランド個別ブランド

B C D

+ + +

A A A

効率的・リスク集約柔軟・リスク分散

最終的にどこを目指すのか意思を持たないと本体と学部・センターの関係が個別対応になってしまう。


ユーザーの企業ブランド体験が、マーケティング活動の展開を「支援」（商品ブンラド価値増大を促進）

積極利用

保証魅力

ユーザーの商品ブランド体験が、企業ブランド価値（企業価値）を高めるのに「貢献」

向上・付加

向上付加

支援

企業

商品サービス

貢献活動

[支援- 貢献ポートフォリオ分析]

ブランド戦略（支援ー貢献ポートフォリオ分析）


支援×貢献ポートフォリオ

階層の設計：「上位・下位の支援し貢献する状態」の適切化

・支援（企業ブランドからの保証／魅力付け／積極購入の促進）

・貢献（現在の強み維持／弱み克服／ビジョン強化）

CHECK POINT ●ユーザーに対して、上位ブランドと下位ブランドが、相互に適切なベネ

フィットを提供できるように関係づけられ、働き合っているか。

・上位ブランドが下位ブランドのビジョンや価値提供を「支援」する力

・下位ブランドが上位ブランドのビジョンや価値提供に「貢献」する力

●ユーザーに対して理解しやすいカテゴリの括りとなり、適切なブランド領

域を設定できているか。

・ユーザーにとっての括りの納得性、ふさわしさ

・将来の拡大カテゴリ設定の適切さ

ブランド戦略（支援ー貢献ポートフォリオ分析）


最後に

48

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


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

e-mail：[email protected] 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

Marketing

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

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

Marketing

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

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

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