xyz corporation

2012年4月19日
Web担当者Forum ミーティング2012 Spring

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

Web Meister

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

PCの方はこちら

xyz corporation

Index

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

現在のWeb環境

マルチデバイス対応 汎用手法

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

リッチクライアント

ソーシャルメディア連携

SEO対策

多言語対応

HTML5 CMS - Web Meister の特長

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

Web Meister 主な実績

xyz corporation

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

xyz corporation

ウェブマスター進化論 コーポレートサイトに未来をもたらす仕事術

参考:三菱電機
http://www.mitsubishielectric.co.jp/
参考:法政大学
http://www.hosei.ac.jp/
xyz corporation

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

xyz corporation

株式会社サイズ / xyz corporation

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

Web制作とCMS導入のご依頼お待ちしております。

facebookページ : よければ「いいね」してくれると嬉しいです。

xyz corporation

自己紹介 : 経歴

糟谷 博陸 / Hiromichi Kasuya

1994年、セガ入社。主に電波メディアを担当。

ロゴ:SEGA

2000年、IMJに入社。事業本部長として大規模サイトを多数構築する

ロゴ:INTER MEDIA JAPAN

2005年、CMS - Web Meisterを完成。

ロゴ:Web Meister

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

2008年、IMJよりWeb Meister事業を譲受し、株式会社サイズ設立。単なるCMSベンダーではできないWebインテグレーションを提供中。

ロゴ:xyz corporation

慶應義塾大学経済学部卒業
法政大学大学院経営学専攻マーケティングコース修了
2004~6年、慶大SFC外部講師

xyz corporation

自己紹介 : 経歴(セガ)

参考:セガサターン ポスター
セガサターン ポスター
参考:Dreamcast ポスター
Dreamcast ポスター
xyz corporation

自己紹介 : 経歴(IMJ)

2006年:DESIGN IT 「Web 2.0 ≒ Web Meister 2.0 その理由」

参考:製品コンセプト資料
xyz corporation

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

糟谷博陸

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

世界一周のルート
xyz corporation

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

書籍・刊行物

【web creators特別号 Webサイト制作 最新トレンドの傾向と対策】

【Web Site Expert】

講義・講演・セミナー

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

xyz corporation

現在のWeb環境

従来環境のイメージ

言葉があふれかえって意味不明です。
マルチデバイス対応ではレスポンシブWebデザイン、モバイルファースト。
リッチクライアントもFlashだけでなくJava Script、HTML5。
ソーシャルメディア連携ってどうするの?
HTML 5、プログレッシブエンハンスメントって?
もちろんSEO対策や多言語対応も求められます。

xyz corporation

マルチデバイス対応

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

過去のWeb環境

過去のWeb環境のイメージ
xyz corporation

現在のデバイス環境

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

そもそもデジタルデバイスって?

コンテンツ制作に関わるデジタルデバイスの3要素

  1. 画面解像度
  2. 入力インタフェース
  3. ユーザインタフェース・テクノロジー
デバイスの要素

ユーザインタフェーステクノロジー

HTML、Flash、Ajax、HTML5、スマートフォンネイティブアプリ、電子書籍フォーマットなど

xyz corporation

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

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

xyz corporation

専用とは?

デバイスの汎用イメージ

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

xyz corporation

汎用とは?

デバイスの汎用イメージ

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

xyz corporation

マルチデバイス対応(汎用:コンテントネゴシエーション)

コンテントネゴシエーションとは、
クライアント(ブラウザ)からのリクエストに応じてサーバが最適なファイルを自動的に判断してレスポンスを返す仕組みのことである。

動的CMSの多くはこのタイプ

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

マルチデバイス対応(汎用:レスポンシブWebデザイン)

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

「Responsive Web Design:レスポンシブ・ウェブ・デザイン」
過去においてはリキッドデザイン(サイズ可変デザイン)と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。

過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったこと。

xyz corporation

マルチデバイス対応(汎用:レスポンシブWebデザイン事例)

事例:Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2012/02/24/12201
xyz corporation

マルチデバイス対応(汎用:レスポンシブWebデザイン事例)

事例:speckyboy
http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/
事例:inspirationfeed
http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
xyz corporation

マルチデバイス対応(汎用:レスポンシブWebデザイン事例)

事例:xyz corporation
http://www.x-yz.co.jp/
事例:xyz corporation Service
http://www.x-yz.co.jp/service/
xyz corporation

マルチデバイス対応(汎用:Apple)

事例:Apple
http://www.apple.com/jp/

サイズの拡大・縮小を考慮に入れて制作する手法。手法の名前はありません。

考察:Appleはスマホサイトを作らない。
http://www.pxt.jp/ja/diary/article/257/index.html

xyz corporation

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

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

xyz corporation

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

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

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

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

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

xyz corporation

モバイルファーストとは?

「モバイル・ファースト」というのは、
ウェブサイトの設計をするときにモバイル版のウェブサイトの設計から始めるという手法です。 すこし噛み砕くと、デスクトップ版を作成し、その情報をそぎ落としてモバイル版を作成する「デスクトップファースト」ではなく、 本当に必要な情報や機能を最初に決定してモバイル版を作成してから、デスクトップ版では他に必要だとおもわれる情報を慎重に付け加えていく手法です。

事例:allWebクリエイター塾
http://all-web-blog.blogspot.jp/2011/03/blog-post_18.html
xyz corporation

モバイルファーストとは?

「モバイルファースト」は、まずモバイルからユーザーを考えてコンテンツを企画し、制作していくという考え方であり、 決して「スマートフォン向けサイトを先に作る」という作業手順ではない。

モバイルファーストの実践基本ステップ

事例:Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2012/03/14/12281

モバイル専用サイトの制作フローとどこが違うのか?
デスクトップ版では他に必要だとおもわれる情報を慎重に付け加えていく手法はどこにいった?

xyz corporation

モバイルファーストとは?

事例:Web担当者Forum

「モバイルファースト」を採用する企業達

「モバイルファースト」ですが、すでに企業として手法として取り入れています。 欧米では新しいコンセプトではありません。「モバイルファースト」を手法として取り入れている企業を紹介します。

GoogleやAdobeやFacebookのトップがWeb制作手法について語るでしょうか?
欧米の「Mobile First」とは事業戦略において急拡大しているモバイル市場を優先するということであり、Web制作手法ではありません。
例:GoogleによるAndroid、AdobeによるPhoneGap、FacebookによるInstagramの買収など

xyz corporation

モバイルファーストの課題

欧米の「Mobile First」と日本の「モバイルファースト」は別のものです。
日本の「モバイルファースト」に関して3つの視点で検討する必要性があります。

  1. 事業戦略
    Google、Adobe、FacebookのようなWeb企業の事業戦略において「モバイルファースト」は存在します。 日本でも新しいコンセプトではありません。
    グリー、モバゲー、ミクシィなどモバイルに事業の中心を移行している企業は多数存在します。
  2. マーケティング戦略
    Webをマーケティング・プロモーションの場として活用している企業の場合、モバイルが多数のターゲットが存在する最優先メディアであり、最優先メディアと位置づけた場合、「モバイルファースト」になります。 ターゲットがいない場合、そのようなことをする必要は全くありません。例えばシルバー向け商材など。
    これまでのプロモーションミックスの検討と変わりはありません。
  3. Web制作手法
    「デスクトップ版では他に必要だとおもわれる情報を慎重に付け加えていく手法」が明らかになっていません。ディレクション、実装方法を明らかにすべきです。
    ※注意:Web制作会社にモバイルファーストでWeb制作を行うと言われた場合、モバイルサイトを汎用化する手法を必ず確認してください。
xyz corporation

それではどうするのか?

それではどうするのか?

xyz corporation

マルチデバイス対応

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

汎用+専用

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

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

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

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

サイト構造は汎用と専用サイトで同じである必要はなく自由度があります。また、モバイルから考えるWebサイト制作も可能です。しかも、モバイルファーストのように制作したモバイル専用サイトを汎用化する必要はありません。

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

xyz corporation

マルチデバイス対応(汎用+専用の制作手法)

ワンソース・マルチデバイス

ワンソース・マルチデバイスサイトの制作ステップ

構造と関係なくページをコピーできるCMSがあればPCサイトから必要なページを複製するだけで、 運用管理が可能。逆にモバイルからPCサイトに再利用することも可能

xyz corporation

マルチデバイス対応(汎用+専用の制作事例)

国立音楽大学 + Web Meister

事例:国立音楽大学

ユーザ、デバイスに合わせたコンテンツ管理を実現 PC⇔モバイルでコンテンツを再利用。
ユーザはモバイルとしての機能を重視したい時にはモバイル専用サイトを、 PCと同じ情報を閲覧したい時は汎用サイトを、ユーザ側で選択可能。

xyz corporation

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

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

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

  1. どのように汎用化するのか?
  2. 何を専用化するのか?
xyz corporation

現在のWeb環境(リッチクライアント)

現在のWeb環境(リッチクライアント)のイメージ
xyz corporation

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

ブラウザのイメージ

情報 デザイン・インタラクション
IE6 ×
IE7 ×
IE8
IE9
Firefox
Safari
Chrome
xyz corporation

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

事例:明治大学
http://www.meiji.ac.jp/cip/english/sports/
xyz corporation

プログレッシブ・エンハンスメント 決定しなければならないこと

ブラウザのイメージ

情報 デザイン・インタラクション
IE6 ×
IE7 ×
IE8
IE9
Firefox
Safari
Chrome

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

IE6~8に関して

xyz corporation

リッチクライアント対応

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

ユーザインタフェースとコンテンツを分離できる場合、コンテンツをXMLで持つことによりUIテクノロジーや仕様に関係なくリッチクライアントをCMS化できます。

XMLコンテンツをFlash、Ajax、HTML5などの異なったUIテクノロジーに配信し、ワンソース・マルチユース化することも可能です。

xyz corporation

リッチクライアントのCMS化

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

HTML5、Flash、AjaxのXMLデータ管理

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

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

xyz corporation

リッチクライアントのCMS化事例

事例:法政大学
法政大学
事例:国立音楽大学
国立音楽大学
事例:ウシオ電機
ウシオ電機
xyz corporation

リッチクライアント対応CMSの将来像

リッチクライアント対応CMSの将来像のイメージ
http://jsdo.it/event/svggirl

SVGで制作され色やテキストをカスタマイズできることでも話題になったSVG Girl
このようなWebサイトもユーザインタフェースとコンテンツを分離することでCMSで更新することが可能です。

xyz corporation

リッチクライアント対応CMSの将来像

リッチクライアント対応CMSの将来像のイメージ

今後、冷蔵庫や車にWebが繋がったとしてもユーザインタフェースとコンテンツを分離しておけば、CMSで更新できるはず?

xyz corporation

リッチクライアントのCMS化 決定しなければならないこと

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

HTML5、Flash、AjaxのXMLデータ管理

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

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

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

xyz corporation

現在のWeb環境(ソーシャルメディア連携)

現在のWeb環境(ソーシャルメディア連携)のイメージ
xyz corporation

CMSでできるソーシャルメディア連携

自社サイト内で

自社サイト
矢印

ソーシャルメディア内で

ソーシャルメディアのイメージ

Web CMSでできるソーシャルメディア連携は2種類

xyz corporation

CMSでできるソーシャルメディア連携(自社サイト内)

xyz corporation

CMSでできるソーシャルメディア連携(自社サイト内)

参考:法政大学
http://www.hosei.ac.jp/
xyz corporation

CMSでできるソーシャルメディア連携(SNS内)

Facebookページ上で

参考:xyz Facebook
xyz corporation

CMSでできるソーシャルメディア連携(SNS内)

参考:武雄市Facebookページ
参考:レイアウト変更後の武雄市Facebookページ

横幅が固定だった為にFacebookページのタイムライン化に伴いレイアウト変更を行なっている。

xyz corporation

CMSでできるソーシャルメディア連携(SNS内)

固定幅のイメージ
固定幅の場合、オーバーした分は横スクロールしないと表示されない
幅可変のイメージ
レスポンシブWebデザインの場合、横幅にあったサイズに自動的に縮小される

レスポンシブWebデザインでWebサイトを制作した場合、Facebookページでも横幅が自動的に縮小されてそのまま使用できます。 今後、mixi、google、Yahoo、twitterで同様のiframe企業サイト制作が可能になった場合もそのまま使用できます。

xyz corporation

CMSでできるソーシャルメディア連携

参考:ユニクロWebサイト

CMSを導入してもこのようなことができるわけではありません。

xyz corporation

CMSでできるソーシャルメディア連携 決定しなければならないこと

自社サイト内で

自社サイト
矢印

ソーシャルメディア内で

各ソーシャルメディア

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

実はCMSより圧倒的に重要です。但し、自社サイト内でできるソーシャルメディア連携が可能かどうかはしっかり確認しましょう。

xyz corporation

現在のWeb環境(SEO対策)

Web Meister
xyz corporation

SEO対策の基本

SEOmoz - 検索マーケティングのニュース&テクニック
SEOに関するきわめて重要な4つのインフォグラフィック

SEO戦略の位置づけ
http://web-tan.forum.impressrd.jp/e/2009/09/10/6473

SEO対策の項目は全て明らかになっています。

xyz corporation

SEO対策の基本

SEOmoz - 検索マーケティングのニュース&テクニック
SEOに関するきわめて重要な4つのインフォグラフィック

サイトをSEOフレンドリーにする作業手順
http://web-tan.forum.impressrd.jp/e/2009/09/10/6473
xyz corporation

SEO対策の基本

More Access,More Fun!
http://www.landerblue.co.jp/blog/?p=2481

Googleの考える「いいサイト」は、

  1. きちんと更新されていて、
  2. ページが増えていて、しかも内容がオリジナルで、
  3. アクセスも増えていて、
  4. みんなが凄いといって紹介してくれていて
  5. 小ずるいことしていない
xyz corporation

CMSでできるSEO対策 決定しなければならないこと

SEOmoz - 検索マーケティングのニュース&テクニック
SEOに関するきわめて重要な4つのインフォグラフィック

SEO戦略の位置づけ
http://web-tan.forum.impressrd.jp/e/2009/09/10/6473

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

SEO対策の内容が公開されているCMSを選ぶこと
CMS独自の秘密の対応策は存在しません。SEO対策の実施内容は確認することができます。
ブラックなことをしていないか、ホワイト高品質のものでCMSが行うべきものが抜けていないか確認しましょう。

xyz corporation

Web Meister の SEO対策

SEOmoz - 検索マーケティングのニュース&テクニック

重要度1

<内容>
検索エンジンに特化したプロトコル(robot.txt、XMLサイトマップ、ウェブマスターツール)

<対策>
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>

最終更新時間が記述される仕様になっていますので検索エンジンにインデックスされる時間が短縮されることになります。

重要度2

<内容>
垂直検索向けSEO(フィード作成、垂直検索サイトへの登録など)

<対策>
RSS
RSS 1.0 RDF Site Summary
RSS 2.0 Really Simple Syndication
Atom
上記規格に対応。ニュースを自動的に配信

重要度3

<内容>
正規化(リダイレクト、URL正規化タグなど)

<対策>
正規化イメージ
googleやYahoo!、MSNなど検索エンジン各社も、URL正規化タグをサポートすることを発表
URL正規化タグ「rel="canonical"」を正規バージョンと複製バージョンに自動生成

重要度4

<内容>
メタデータ(meta directionタグ、meta keywordタグ、ジオタグ)

<対策>
共通部分を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" />

xyz corporation

現在のWeb環境(多言語対応)

Web Meister
xyz corporation

多言語対応のポイント

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

Webサイト構造が同一で多言語展開する場合、次の手法が使えます。

xyz corporation

多言語サイトの制作方法

多言語サイト制作フロー

日本語版を元に環境を構築、翻訳したテキストを取り込むことで完成。
デザイントーンの統一、制作時間の短縮が可能

xyz corporation

多言語対応事例

事例:ウシオ電機
ウシオ電機
事例:THK
THK
xyz corporation

Web Meister の特長

Web Meister

ここまでの話は「Web Meister」で実現可能です。
さらにHTML5対応が可能な理由をお話しします。

xyz corporation

製品コンセプト

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

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

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

Web Meisterのコンセプト
xyz corporation

HTML5対応CMSの条件

HTML5の利用もいよいよ本格化してきました。それに伴ってHTML5で制作したコンテンツ管理がこれから重要になってくると思われます。それではHTML5を管理できるCMSとはどのようなCMSでしょうか?

  1. HTML5リッチインタフェース対応
  2. HTML5セマンティクス対応

がその条件となります。

HTML5
xyz corporation

HTML5リッチインタフェース対応

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

HTML5関連技術ではcanvasタグ+JavaScript、SVGなどによってFlashのような動きのユーザインタフェースを実装することが可能です。 これらのHTML5によるリッチインターフェースをCMS化にする為には更新に関わる部分を外部ファイルとしてXMLなどで持つことが有効です。 特にSVGはSVG自体がXMLでできています。 つまり、ユーザインタフェースとコンテンツを分離し、コンテンツをXMLで管理し更新できるCMSである必要があるということになります。

xyz corporation

HTML5セマンティクス対応

HTML5ではHTML4の文書構造やコンテンツの意味づけとは違うタグを設置する必要があります。 文書構造では記事全体 article タグとその一部分 section タグが存在します。 コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化されることになりました。 そのため、CMSにおいてもコンテンツの粒度がページ単位ではなく section 単位で扱える必要があります。
Web Meister は元々コンテンツの粒度がページ単位ではなく section 単位となっています。 見出し・本文・画像という1セットがコンテンツの最小単位となっており、これが集合することで記事を構成します。 動的テンプレートによって header footer nav aside が自動生成されページとなります。

Web Meisterインターフェース
xyz corporation

リニューアルのポイント

CMSのイメージ

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

xyz corporation

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

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

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

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

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

情報設計を自動生成する動的テンプレート(Webページ)

一般的な下層(記事)ページレイアウト

レイアウトテンプレートイメージ
xyz corporation

情報設計を自動生成する動的テンプレート(Webページ)

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

情報設計を自動生成する動的テンプレート : 事例

メニュー、パンくずリスト、ニュースの自動生成

パンくずリスト、ローカルメニュー、バックナンバーを自動生成

設定したルールに従って自動生成
サイト構造を気にすることなくページを作成できる

xyz corporation

情報設計を自動生成する動的テンプレート : 事例

ページ(ディレクトリ・XMLモジュール)の共有・一元管理

自動生成の例1
自動生成の例2

コピーペーストで同一ページを違うカテゴリ(導線)で表示・共有管理
目的やターゲットに合わせたユーザビリティと一元管理を実現

xyz corporation

HTML5 CMS - Web Meister 主な実績

HTML5 CMS - Web Meister 主な実績

xyz corporation

大学サイトの制作実績 : 慶應義塾大学湘南藤沢キャンパス

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

事例:慶應義塾大学SFC
事例:慶應義塾大学SFC
XMLで全てのコンテンツを管理するCMS(Web Meister)を構築
スタイルシートでデザインパターンを3つに分けて表示することが可能であり、ユーザーの好みに合わせたクリエィティブを表現。

W3C仕様への準拠

xyz corporation

大学サイトの制作実績 : 慶應義塾大学湘南藤沢キャンパス

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

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

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

xyz corporation

大学サイトの制作実績 : 国立音楽大学

各時代における音楽文化を担う人材を多数世に送り出してきた音楽大学

事例:国立音楽大学
xyz corporation

大学サイトの制作実績 : 法政大学

「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学

事例:法政大学
xyz corporation

大学サイトの制作実績 : 法政大学

Web担当者Forum
Web担当者Forum
震災時でも休むことなく情報発信を続けられた、スキルを問わずだれでも使えるCMS/法政大学+Web Meister
http://web-tan.forum.impressrd.jp/e/2011/09/08/10699
CMS関連の人気記事1位になりました!(2011/09/09~23)
xyz corporation

企業サイトの制作実績 : ウシオ電気株式会社

事例:ウシオ電気株式会社
xyz corporation

企業サイトの制作実績 : THK株式会社

事例:THK株式会社
xyz corporation

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

株式会社サイズ xyz corporation

xyz corporation

代表取締役 糟谷博陸

糟谷博陸