オウンドメディアの最新マーケティング戦略とその制作手法
株式会社サイズ 代表取締役 糟谷 博陸
HTML5 CMS - Web Meister (コンテンツ管理システム)による PC・携帯・スマートフォンへマルチデバイス化した Web サイトを制作する Webインテグレーターです。
レスポンシブ Web デザインやjQuery Mobileなどを活用したスマートフォンサイト制作にも積極的に取り組んでおります。
Web制作とCMS導入のご依頼お待ちしております。
facebookページ : よければ「いいね」してくれると嬉しいです。
1994年、セガ入社。主に電波メディアを担当。
2000年、IMJに入社。事業本部長として大規模サイトを多数構築する
2005年、CMS - Web Meisterを完成。
2007年、アジア→ヨーロッパ→中東→アフリカ→アメリ大陸世界40ヵ国を旅する。世界遺産検定2級。
2008年、IMJよりWeb Meister事業を譲受し、株式会社サイズ設立。単なるCMSベンダーではできないWebインテグレーションを提供中。
慶應義塾大学経済学部卒業
法政大学大学院経営学専攻マーケティングコース修了
2004~6年、慶大SFC外部講師
2007年、アジア、ヨーロッパ、中東、アフリカ、アメリカ大陸の世界40ヵ国を旅する。世界遺産検定2級
講演・執筆のご依頼お待ちしております。
[Web担当者Forum]
わかる!マルチデバイス対応 + HTML5 CMS ― Web Meister
人気ランキング総合3位
わかる!Web CMS選択術2012 + HTML5 CMS ― Web Meister
人気ランキング総合5位
HTML、Flash、Ajax、HTML5、ネイティブアプリ、電子書籍フォーマットなど
Webサイトには
汎用と専用
しか存在しない
専用 : デバイス毎にWebサイトを用意
汎用 : 1つのWebサイトで全てのデバイスに対応
コンテントネゴシエーションとは、
クライアント(ブラウザ)からのリクエストに応じてサーバが最適なファイルを自動的に判断してレスポンスを返す仕組みのことである。
動的CMSや変換エンジンの多くはこのタイプ
「Responsive Web Design:レスポンシブ・ウェブ・デザイン」
過去においてはリキッドデザイン(サイズ可変デザイン)と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。
過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったこと。
レスポンシブWebデザインでWebサイトを制作した場合、Facebookページでも横幅が自動的に縮小されてそのまま使用できます。 今後、mixi、google、Yahoo、twitterで同様のiframe企業サイト制作が可能になった場合もそのまま使用できます。
サイズの拡大・縮小を考慮に入れて制作する手法。手法の名前はありません。
考察:Appleはスマホサイトを作らない。
http://www.pxt.jp/ja/diary/
article/257/index.html
完全一致はメリットでもあり、デメリットでもある。
構造が完全一致のため、
ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できない
(ユーザ中心設計ができない)
スマートフォン対応において汎用手法は専用に劣る
(レスポンシブWebデザイン、コンテントネゴシエーション、Appleの手法)
固定幅PCサイト<汎用手法<モバイル専用サイト
それではどうするのか?
構造を一致しなくても良いため、ターゲットユーザや利用シーン、サイトの目的をデバイスごとに設定できる(ユーザ中心設計ができる)
サイト構造は汎用と専用サイトで同じである必要はなく自由度があります。 また、モバイルから考えるWebサイト制作も可能です。 しかも、モバイルファーストのように制作したモバイル専用サイトを汎用化する必要はありません。
レスポンシブWebデザイン+モバイル専用サイト
ウェブユーザビリティの第一人者ヤコブ・ニールセン博士が同様のこと(汎用+専用サイトにすべき)を発表している。
構造と関係なくページをコピーできるCMSがあればPCサイトから必要なページを複製するだけで、 運用管理が可能。逆にモバイルからPCサイトに再利用することも可能
ユーザ、デバイスに合わせたコンテンツ管理を実現
PC⇔モバイルでコンテンツを再利用。
ユーザはモバイルとしての機能を重視したい時にはモバイル専用サイトを、
PCと同じ情報を閲覧したい時は汎用サイトを、ユーザ側で選択可能。
ハイエンドにはより高解像度の画像がローエンドにはより軽量な画像(テキスト)の対応が必要に
SVG(Scalable Vector Graphics)とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。
Webブラウザ | 対応するバージョン |
---|---|
Internet Explorer | 9以上 |
Firefox | 3.0以上 |
Chrome | 4.0以上 |
Mac OS X Safari | 3.2以上 |
Opera | 9.0以上 |
iOS Safari | 3.2以上 |
Androidブラウザ | 3.0以上 |
android3.0以降も対応しているため、
来年以降はPC・スマートフォンで安定的に使用できる
ロゴ・アイコンはSVG(ベクターデータ)で作成しているため、どんなに拡大しても画像が粗くなりません。
1.Javascriptを使う 2.サーバーサイドで対応 3.APIで対応 4.画像の代替で対応 5.画像サイズを小さくして対応
2.サーバーサイドで対応
ここまでの話は「Web Meister」で実現可能です。
さらにHTML5対応が可能な理由をお話しします。
HTML5の利用もいよいよ本格化してきました。それに伴ってHTML5で制作したコンテンツ管理がこれから重要になってくると思われます。それではHTML5を管理できるCMSとはどのようなCMSでしょうか?
がその条件となります。
HTML5関連技術ではcanvasタグ+JavaScript、SVGなどによってFlashのような動きのユーザインタフェースを実装することが可能です。 これらのHTML5によるリッチインターフェースをCMS化にする為には更新に関わる部分を外部ファイルとしてXMLなどで持つことが有効です。 特にSVGはSVG自体がXMLでできています。 つまり、ユーザインタフェースとコンテンツを分離し、コンテンツをXMLで管理し更新できるCMSである必要があるということになります。
HTML5、Flash、AjaxのXMLデータ管理
HTML5、FlashやAjaxなどの外部XMLを管理できるCMSを選択
これまで難しかった追加・更新が誰でもCMS上から行えるようになります。
法政大学イベントカレンダー
PC版、Facebookアプリ、スマートフォン版を同じイベントXMLデータを利用し、異なるインターフェースで表示。ワンソース・マルチユースを実現しています。
IE6 | IE7 | IE8 | IE9 | Firefox | Safari | Chrome | |
---|---|---|---|---|---|---|---|
情報 | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
デザイン・インタラクション | × | × | △ | ○ | ○ | ○ | ○ |
HTML5ではHTML4の文書構造やコンテンツの意味づけとは違うタグを設置する必要があります。
文書構造では記事全体 article タグとその一部分 section タグが存在します。
コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化されることになりました。
そのため、CMSにおいてもコンテンツの粒度がページ単位ではなく section 単位で扱える必要があります。
Web Meister は元々コンテンツの粒度がページ単位ではなく section 単位となっています。
見出し・本文・画像という1セットがコンテンツの最小単位となっており、これが集合することで記事を構成します。
動的テンプレートによって header footer nav aside が自動生成されページとなります。
W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発。 W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテンツの構造化を実現。そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能です。
高度な知識がなくても、今後のWeb環境の変化にも柔軟に対応できるCMSです。
『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。 メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。
また、公開されているページデザイン上でコンテンツの編集が行えるWYSIWYG エディタ(見たままのものが反映される)や、 リッチテキストエディタによって HTML の知識がなくてもオフィスが扱えればどなたでも利用可能
単なるCMSベンダーではできないWebインテグレーションを提供。
御社にふさわしいデザイン、情報設計を元にコンテンツを継続的に発展させていくWeb環境を提供します
IE6~8に関して
HTML5、FlashやAjaxなどの外部XMLを管理できるCMSを選択すること
実はCMSより圧倒的に重要です。但し、自社サイト内でできるソーシャルメディア連携が可能かどうかはしっかり確認しましょう。
SEO対策の内容が公開されているCMSを選ぶこと
CMS独自の秘密の対応策は存在しません。SEO対策の実施内容は確認することができます。
ブラックなことをしていないか、ホワイト高品質のものでCMSが行うべきものが抜けていないか確認しましょう。
たくさんあるのでご相談ください。
慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、世界のWebサイトをリードしていく立場にあるキャンパス。
XMLで全てのコンテンツを管理するCMS(Web Meister)を構築
スタイルシートでデザインパターンを3つに分けて表示することが可能であり、ユーザーの好みに合わせたクリエィティブを表現。
Web Designing 2011年6月号
毎日コミュニケーションズ
特集1 : Webクリエイティブの10年 ?記憶に刻むべき21世紀最初のディケード? 誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」
弊社、糟谷・山本が2004年に制作した慶應義塾大学 湘南藤沢キャンパスが掲載「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。 CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」
各時代における音楽文化を担う人材を多数世に送り出してきた音楽大学
「自由と進歩」を基礎に、15学部を擁する日本有数の総合大学
情報サービス分野のリーディングカンパニー東芝情報システム株式会社のWebサイト
「世界No.1の機械メーカー」を目指す東芝機械のWebサイト
携帯・スマートフォン兼用のモバイルサイトをAjaxライブラリ「jQuery Mobile」と携帯コンテンツ変換エンジン「roundabout」を用いて構築