Confidential
http://www.x-yz.co.jp/
Copyright © xyz Corporation. All Rights Reserved.
2014.05. 30
大学サイトにおけるマルチデバイス対応のポイント + HTML5 CMS - Web Meister
Copyright © xyz Corporation. All Rights Reserved.
レスポンシブ Web デザインや HTML5などを活用したWebサイトを HTML5 CMS – Web Meister に実装する Webインテグレーターです。
2013年度 日本テクノロジー Fast50 17位受賞
株式会社サイズについて
Copyright © xyz Corporation. All Rights Reserved.
経歴
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媒体を担当
Copyright © xyz Corporation. All Rights Reserved.
経歴:IMJ
XMLで全てのコンテンツを管理するCMS(Web Meister)を開発 デザインをデザインスイッチで切り替えることが可能。
日本における レスポンシブWebデザインの元祖。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、
世界のWebサイトをリードしていく立場にあるキャンパス。
=
Copyright © xyz Corporation. All Rights Reserved.
経歴:IMJ
6
Web Designing 2011年6月号 毎日コミュニケーションズ 特集1:Webクリエイティブの10年−記憶に刻むべき21世紀最初のディケード− 誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」 弊社、糟谷・山本が2004年に制作した慶應義塾大学 湘南藤沢キャンパスが掲載「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」
Copyright © xyz Corporation. All Rights Reserved.
経歴:世界一周
7
2007年、アジア、ヨーロッパ、中東、アフリカ、アメリカ大陸の世界40ヵ国を旅する。世界遺産検定2級
Copyright © xyz Corporation. All Rights Reserved.
経歴:xyz corporation
8
Copyright © xyz Corporation. All Rights Reserved.
「日本テクノロジー Fast50」で17位を受賞~175%の収益成長を記録~
9
14位にはパズル&ドラゴンズ(パズドラ)のガンホー・オンライン・エンターテイメント株式会社が179%で入賞しており、同等の成長率を記録しました。
Copyright © xyz Corporation. All Rights Reserved.
会社概要:Web担当者Forum 人気記事ランキング
10
人気ランキング総合5位
http://web-tan.forum.impressrd.jp/e/2012/05/23/12714
人気ランキング総合3位
http://web-tan.forum.impressrd.jp/e/2012/11/07/13898
人気ランキング総合4位
http://web-tan.forum.impressrd.jp/e/2014/02/21/16753
Copyright © xyz Corporation. All Rights Reserved.
11
弊社チーム 大学サイト制作
時系列実績
Copyright © xyz Corporation. All Rights Reserved.
2004年:慶應義塾大学湘南藤沢キャンパス
XMLで全てのコンテンツを管理するCMS(Web Meister)を開発 デザインをデザインスイッチで切り替えることが可能。
日本における レスポンシブWebデザインの元祖。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、
世界のWebサイトをリードしていく立場にあるキャンパス。
=
Copyright © xyz Corporation. All Rights Reserved. 13
2003年~2008年:慶應義塾大学
慶應義塾大学
日吉キャンパス 経済学部
Gomez 大学サイトランキング 2009年:11位 2010年:19位 2013年:22位
Copyright © xyz Corporation. All Rights Reserved. 14
2010年~:国立音楽大学
PCサイト
携帯サイト
Copyright © xyz Corporation. All Rights Reserved.
2011年~:法政大学
15 PCサイト
スマートフォンサイト
多言語サイト レスポンシブWebデザイン
Gomez 大学サイトランキング 2009年:20位以下 2010年:20位以下 2013年:7位
Copyright © xyz Corporation. All Rights Reserved.
AjaxのCMS化:事例
16
法政大学イベントカレンダー PC版、Facebookアプリ、スマートフォン版を 同じイベントXMLデータを利用し、 異なるインターフェースで表示。 ワンソース・マルチユースを実現しています。
Copyright © xyz Corporation. All Rights Reserved. 17
HTML5事例
・ページ単位ではなくHTML5 <section>単位で管理 ・ロゴ・アイコンはSVGで作成。Retinaディスプレイ対応
Copyright © xyz Corporation. All Rights Reserved. 18
ロゴ・アイコンはSVG(ベクターデータ)で作成しているため、 どんなに拡大しても画像が粗くなりません。
マルチデバイス対応(SVG:事例)
Copyright © xyz Corporation. All Rights Reserved.
法政大学 合格者向けサイト
19
Copyright © xyz Corporation. All Rights Reserved. 20
2012年~:明治大学
Gomez 大学サイトランキング 2009年:20位以下 2010年:20位以下 2013年:1位
ABOUT THE SCHOOL
Meiji University and sports
Copyright © xyz Corporation. All Rights Reserved.
2014年~:デジタルハリウッド
21
レスポンシブWebデザイン(アダプティブデザイン)
Copyright © xyz Corporation. All Rights Reserved.
2014年~:神戸大学
22
レスポンシブWebデザイン(アダプティブデザイン)
Copyright © xyz Corporation. All Rights Reserved.
2014年~:東京農工大学
23
Gomez 大学サイトランキング 2009年:5位 2010年:2位 2013年:7位
レスポンシブWebデザイン
Copyright © xyz Corporation. All Rights Reserved.
24
マルチデバイス対応
Copyright © xyz Corporation. All Rights Reserved.
レスポンシブWebデザインとは?
過去においてはリキッドデザインと呼ばれた、画面幅に応じて横幅が拡大・縮小するレイアウトのこと。 固定幅のエクスペリエンスも内包。 新しく固定幅でつくることは無意味。 レスポンシブWebデザインの依頼しか来ないので 固定幅サイトのつくり方を忘れました。
Copyright © xyz Corporation. All Rights Reserved.
レスポンシブWebデザイン + CMS :法政大学 大学院グローバルサイト
26
Copyright © xyz Corporation. All Rights Reserved.
汎用 : 1つのWebサイトで全てのデバイスに対応
1つで済むので低コスト、構造が一致するため デバイスごとのユーザ中心設計は不可能
コストファースト
レスポンシブWebデザイン(汎用サイト)の弱点
Copyright © xyz Corporation. All Rights Reserved.
それではこれからどうなるのか?
Copyright © xyz Corporation. All Rights Reserved.
専用 : デバイス毎にWebサイトを用意 PC+携帯+スマートフォンなどこれまでの制作手法
バラバラなので高コスト、構造がバラバラで良いので
デバイスごとのユーザ中心設計は可能
ユーザファースト
専用サイトのメリット
Copyright © xyz Corporation. All Rights Reserved.
レスポンシブWebデザイン化後のマルチデバイス対応
構造を一致しなくても良いため、ターゲットユーザ
や利用シーン、サイトの目的をデバイスごと に設定できる(ユーザ中心設計ができる)
レスポンシブWebデザイン+モバイル専用サイト
Copyright © xyz Corporation. All Rights Reserved. 31
2010年~:国立音楽大学
PCサイト
携帯サイト
大幅な改修をせずに レスポンシブWebデザイン(アダプティブデザイン)化可能。
その時に携帯サイト(専用サイト)が活きてくる。
Copyright © xyz Corporation. All Rights Reserved.
2011年~:法政大学
32
スマートフォンサイト
多言語サイト レスポンシブWebデザイン
Gomez 大学サイトランキング 2009年:20位以下 2010年:20位以下 2013年:7位
レスポンシブWebデザイン(アダプティブデザイン)化可能。
Copyright © xyz Corporation. All Rights Reserved. 33
製品コンセプト
W3C の理想を体現する HTML5 CMS - Web Meister
『Web Meister』 は、W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発され
ました。W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテン
ツの分離、コンテンツの構造化を実現しています。
そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能
です。
『Web Meister』は、高度な知識がなくても、今後のWeb環境の変化にも柔軟に対応できるCMSです。
Copyright © xyz Corporation. All Rights Reserved. 34
マニュアルを必要としない操作性
『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。
また、公開されているページデザイン上でコンテンツの編集が行える
WYSIWYG エディタ(見たままのものが反映される)や、リッチテキス
トエディタによって HTML の知識がなくてもオフィスが扱えればどなた
でも利用可能
3ペイン構造の基本画面
ページデザイン上で 編集できる
WYSIWYGエディター
画像配置パターン選択画面
XMLモジュール
リッチテキストエディタ Webコンテンツ編集に必要な機能に絞ることで「Web制作のプロがつくったサイト・クオリティを維持・管理」
Web Meister のユーザインターフェース
Copyright © xyz Corporation. All Rights Reserved.
ページやメニューの自動生成
設定したルールに基づいて自動生成
ニュース記事
Topページ
ニュース エリア
カテゴリ Topペー
ジ ニュース エリア
ニュース 一覧
年度 アーカイ
ブ
自動生成
HOME 事業内容
HOME > 採用情報
採用情報
リード文リード文リード文
リード文リード文リード文
リード文リー
自動生成
ニュースの自動生成 記事を作成すると 発信日、カテゴリ、ニュースタイトルを 該当ページのニュースエリアに生成
ローカルメニュー、パンくずリストの自動生成 ページを作成した場所(ディレクトリ)に 適したメニューやパンくずリストを生成
自動生成
アイコンの自動生成 拡張子やURLを 自動判断し アイコンを生成
⇒第2階層メニュー
⇒第3階層メニュー
⇒第3階層メニュー
→4階層メニュー
→ページタイトル
⇒第2階層メニュー
⇒第2階層メニュー
35
Copyright © xyz Corporation. All Rights Reserved.
公開設定・バージョン管理
公開・非公開予約と3世代バージョン管理
公開期間設定 公開開始日時と公開終了日時の予約設定が可能
バージョン管理 公開したページ3世代をバージョン管理
公開および非公開設定を「日/時/分」単位で予約することが可能。
公開したページは3世代バージョン管理され、間違ったオペレーションを
してしまった場合でも、すぐに前のバージョンに戻すことがきます。
36
Copyright © xyz Corporation. All Rights Reserved.
承認フロー
更新ルーチンに合わせ柔軟な承認フローが可能
ディレクトリ(フォルダ)または、ページ単位で、
3次承認まで設定することができます。
承認や却下依頼の通知は、メールの自動送信で行われます。
※承認フローを使用するには、「Standard Edition」のライセンスが必要です。 「Standard Edition Lite」のライセンスでは使用できません。
37
Copyright © xyz Corporation. All Rights Reserved.
グループサイトの管理
複数のサイトを管理、情報の一元管理も可能
複数のサイト(ドメイン)を管理することが可能。
すべての情報を一元管理することができ
同じコンテンツを再利用したい場合や
統一されたデザインガイドラインを準拠したい場合など
グループサイトや多言語サイトの管理に向きます。
38
Copyright © xyz Corporation. All Rights Reserved.
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
Copyright © xyz Corporation. All Rights Reserved.
40
リニューアルの前に
Copyright © xyz Corporation. All Rights Reserved.
サイト構造
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 ・ユニリーバ
効率的・リスク集約 柔軟・リスク分散
Copyright © xyz Corporation. All Rights Reserved. 42
国立音楽大学 – マスターブランド
国立音楽大学 音楽学部 入学案内
トップページから学部・入学案内まで同一のナビゲーション・デザインルールに統一。 コーポレートブランド(国立音楽大学)にブランド管理を集中することで 自由度に欠けますが、効率性が高いものとなっています。
Copyright © xyz Corporation. All Rights Reserved. 43
法政大学 - ハイブリッドブランド
法政大学 法学部 大学院
トップページと下層で共通なのはヘッダとフッタ。 コンテンツ内部のナビゲーション・デザインルールはそれぞれ自由度があります。 コーポレートブランドによる一定の管理のもとサブブランドによる主体性を発揮したい場合に向いています。
Copyright © xyz Corporation. All Rights Reserved. 44
慶應義塾大学 - 保証付きブランド
慶應義塾大学
湘南藤沢キャンパス 矢上キャンパス・理工学部
日吉キャンパス
経済学部など
Copyright © xyz Corporation. All Rights Reserved.
サイト構造
A
A A A
A
A B C
A
B C D
A
B C D
マスターブランド ハイブリッドブランド 保証付きブランド 個別ブランド
B C D
+ + +
A A A
効率的・リスク集約 柔軟・リスク分散
最終的にどこを目指すのか意思を持たないと 本体と学部・センターの関係が個別対応になってしまう。
Copyright © xyz Corporation. All Rights Reserved. 46
ユーザーの企業ブランド体験が、 マーケティング活動の展開を 「支援」(商品ブンラド価値 増大を促進)
積極利用
保証 魅力
ユーザーの商品ブランド体験が、 企業ブランド価値(企業価値) を高めるのに「貢献」
向上・付加
向上 付加
支援
企 業
商品サービス
貢献 活 動
[支援- 貢献ポートフォリオ分析]
ブランド戦略(支援ー貢献ポートフォリオ分析)
Copyright © xyz Corporation. All Rights Reserved. 47
支援×貢献 ポートフォリオ
階層の設計:「上位・下位の支援し貢献する状態」の適切化
・支援(企業ブランドからの保証/魅力付け/積極購入の促進)
・貢献(現在の強み維持/弱み克服/ビジョン強化)
CHECK POINT ●ユーザーに対して、上位ブランドと下位ブランドが、相互に適切なベネ
フィットを提供できるように関係づけられ、働き合っているか。
・上位ブランドが下位ブランドのビジョンや価値提供を「支援」する力
・下位ブランドが上位ブランドのビジョンや価値提供に「貢献」する力
●ユーザーに対して理解しやすいカテゴリの括りとなり、適切なブランド領
域を設定できているか。
・ユーザーにとっての括りの納得性、ふさわしさ
・将来の拡大カテゴリ設定の適切さ
ブランド戦略(支援ー貢献ポートフォリオ分析)
Copyright © xyz Corporation. All Rights Reserved.
最後に
48
大学サイトにおいてマルチデバイス対応は必須 ■サイト構造の検討 ■まず、レスポンシブWebデザイン化 → その後、+専用サイト ■それを継続的に更新できる HTML5 CMS – Web Meister の導入
Copyright © xyz Corporation. All Rights Reserved. 49
株式会社サイズ 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
Top Related