3Sマッチング型Webの作り方　3.骨格と表層

Home > メソッド > 実践！Webマーケティング：Blog > 3Sマッチング型Webの作り方　3.骨格と表層

このコーナーでは、企業でWebサイトの運営に携わっている方、マーケティング部門等でWebの活用法について考えておられる方向けに、Webマーケティングの実践のための手法やノウハウ、事例をご紹介していきます。市場に出回る書籍や雑誌では論じられることない、Webマーケティングの最前線に触れていただければと思います。

2006年03月03日

マーケティングユニット棚橋

今回はこれまで2回にわたってご紹介してきた「3Sマッチング型Webの作り方」の最終回です。
前回までで、ツインタワー型5 Planes Modelの"戦略Plane"、"要件Plane"、"構造Plane"と話を進めてきましたので、今回は残りの"骨格Plane"、"表層Plane"について考えてみたいと思います。
※「3Sマッチング型Web構築サービス」についての情報はこちら

3Sマッチング型Webの"骨格Plane"

通常のWeb構築における"骨格Plane"では、"構造Plane"での構造にさらに磨きをかけるため、下記の3つのポイントで具体的な機能性を特定していきます。

インフォメーションデザイン
ナビゲーションデザイン
インターフェイスデザイン

ただし、3Sマッチング型Webでは、ここまで見てきたとおりサイトの内/外の両面を意識したユーザーエクスペリエンスの向上を目指しており、ナビゲーションやインターフェイス、インフォメーションデザインにおける機能の特定においても、サイトの内/外におよぶ設計が必要となります。

インフォメーションデザイン

サイトの内/外でのインフォメーションデザイン、HTMLとRSS/Atom Feed

3Sマッチング型Webの戦略目標でもある3S（Search、Subscribe、Share）に照準を合わせたユーザーエクスペリエンスの最適化を目指すには、インフォメーションデザインを行う際にもサイトの内/外に目を向ける必要があります。
具体的には、サイト内部のインフォメーションデザインを実装形を表現するものがHTMLだとすれば、サイト外部のインフォメーションデザインを実装形を表現するものはRSS/Atom Feedとなります。

モジュール化とCMS機能

まず、サイト内部のインフォメーションデザインの実装形を表現するHTMLの設計を行う際、念頭においておくべきなのは、ページ単位ではなくモジュール単位で情報設計を行うということです。
以前に「カスタマイズとモジュール化」というエントリーで、「CMSを使ったWebサイトでは、ページ単位でデザインを考えるのではなく、必要な構成要素を抽出した上で、各構成要素単位でデザイン・モジュールを作成」すると書きましたが、3Sマッチング型Webでも同様にモジュール単位の設計方法を用います。
3Sマッチング型Web構築サービスでは、ExpressionEngineをベースにCMS（コンテンツ･マネジメント･システム）機能を実現しますが、CMSでは実際のページをひとつひとつ作成するのではなく、モジュールの組み合わせによるテンプレート＋情報によって動的にページを生成します。そのため、最終的なページデザインをイメージしながらも、実際にデザインを行うのは情報のモジュールとなります。
また、モジュール作成を行う場合には、CMSの管理画面での情報の入力を考慮した上で情報設計をしておくと、実際に運用段階にはいった際の情報のメンテナンス性が向上（例えば、入力の際にほとんどHTMLタグを入力する必要がない etc.）します。

テンプレートの作成

インフォメーションデザインと"骨格Plane"での他の２つの要素（インターフェイス、ナビゲーション）は非常に密接な関係にあります。この３つの要素を厳密な意味で区別するのはむずかしいでしょう。モジュールの中には当然、ナビゲーション・モジュールが含まれますし、フォーム要素やボタン要素などのインターフェイス・モジュールも含まれます。こうしたモジュール群をどのように（並び順、階層構造 etc.）組み合わせるかを決めていく作業がテンプレートの設計～作成の作業にあたります。

RSS/Atom Feedのインフォメーションデザイン

ここまで何度も書いてきたように、ユーザーは自身のRSSリーダーでRSS/Atom Feedの内容を読む場合があります。ユーザーがRSSリーダーでコンテンツの閲覧を行うことを想定に入れると、RSS/Atom Feedにも読みやすさは求められます。残念ながら当BlogのRSSファイルは、ユーザーがRSSリーダーで読むことを想定したものになっているとはいえません（当BlogのRSSファイル）。読みやすさを考慮すれば、WebブラウザでHTMLを読むのと同様に改行や見出しを適切に用いた情報設計を行うことがRSS/Atomファイルの設計にも求められます。
また、RSS/Atom Feedの情報設計の際には、そもそもどういった項目をFeedに含めるか、コンテンツはどの程度Feedに含めるか、Blog以外の静的なページへの関連情報を含めるか、などに関しても考えることが必要でしょう。

ナビゲーションデザイン

サイト内コンテンツのためのナビゲーション設計

サイト内コンテンツへのナビゲーションの設計には、"構造Plane"で作成したサイトマップ、ER図を使います。以下の５つのナビゲーションのうち、上記3つはサイトマップの階層構造を元にしたもので、下の2つはER図によりコンテンツ（カテゴリー）間の関係性を元に設計します。
グローバルナビゲーション ：サイトの主要な第1階層カテゴリーへの移動を可能にするナビゲーション
ローカルナビゲーション ：カテゴリー内の同一階層やさらに下層のコンテンツへの移動を可能にするナビゲーション
リモートナビゲーション ：ページのヘッダー部、フッター部に共通で設置される「お問合せ」や「サイトポリシー」など、すべてのページに共通で使われるナビゲーション
コンテクストナビゲーション（a.ルール化されて設置されるもの） ：前回も例としてあげたような「商品」をキーにして「商品情報」「イベント情報」「活用事例」などの異なるカテゴリーをリンクするためのナビゲーション。また、動的に作成されるナビゲーションとしてはランキング形式（ユーザーの人気ランキング、売上ランキング、トラックバック・ランキング etc.）も考えられる
コンテクストナビゲーション（b.ランダムに設置されるもの） ：コンテンツ内容にあわせてランダムにリンクの設定が行われるナビゲーション。Blogのトラックバックもその１つ

サイト外のコンテンツへのナビゲーション設計

3Sマッチング型Webのナビゲーション設計は、単にサイト内部へのナビゲーションを行えばよいのではありません。3Sの利便性を高めるため、外部へのナビゲーションを設置することも時には必要になります。
例えば、上記であげたBlogのトラックバックによるナビゲーションもその１つです。
また、想定されるターゲットユーザー層が多いオンライン型のRSSリーダーでの購読を促進するため、以下のようなリンクバナーを設置することも有効でしょう。ユーザーは自身の使っているRSSリーダーのバナーをクリックするだけでRSSの購読登録が可能ですので、利便性が高まります。

RSS/Atom Feedの登録（購読予約＝Subscribe）を促すリンクバナーの例

具体的には下記のような形でリンクバナーの設定が可能です。
Bloglinesで購読
Hatena::RSSで購読
My Yahoo!で購読
feedpathで購読

Feedの効果測定を行うために

「ナビゲーション設計」という観点からは話が逸れますが、RSS/Atom Feedの効果測定についてもすこし触れておきます。
RSS/Atom Feedはサイトを訪れることなく、普段使っているRSSリーダーで情報の閲覧が可能なため、ユーザーの利便性を向上しますが、反面、企業側からみると、どれだけの人がRSS/Atom Feedを登録してくれているかがわからないといった側面もあります。
オンライン型のRSSリーダーの場合、クローラーがUser-AgentにFeedの登録者数を残してくれたりしますので、アクセスログ解析でこの数字をカウントすることは可能です（参考：My RSS 管理人ブログ「RSSリーダーのクローラーが提供すべき User-Agent の値」）。しかし、すべてのRSSリーダーがUser-Agentに登録者数を載せてはいませんので、より正確に把握したい場合、別の方法が必要になります。
１つの方法はFeedBurnerを使う方法です。FeedBurnerは、発行しているRSS/Atom FeedをRSS⇒Atom、Atom⇒RSSに変換してくれる機能や、Feedの購読状況（リアルタイム購読状況、ブラウザ/RSSリーダー別の購読状況 etc.）のレポート作成機能をもったサービスです。ユーザーに登録してもらうRSS/Atom FeedをすべてFeedBurner経由のものにすることで、サイト/BlogのRSS/Atom Feed購読者数が正確に把握でき、かつ、どのブラウザ/RSSリーダーが使われているかも知ることができるようになります。
もう１つの方法はFeedのコンテンツ部分にWebビーコン（情報収集用の極めて小さい画像）を埋め込んでおくことでしょう。Webビーコンを埋め込んでおけば、ユーザーが自身のRSSリーダー内で開いた際にも、Webビーコンの画像に対してサーバー側にリクエストがあるので、アクセスログが残り、ログ解析が可能になります。

インターフェイスデザイン: インターフェイスデザインに関しては、3Sマッチング型Webに固有な要素はありません。もちろん、RSS/Atom Feedのコンテンツをよりリッチにするという意味で、フォーム要素を用いたアンケートを挿入するといったことも考えられるでしょう。サイト内に限れば、次の"表層Plane"とも関わるところでAjaxを用いたフォームの入力補助やナビゲーションの補助なども考えられるでしょう。

3Sマッチング型Webの"表層Plane"

CSSによるHTMLのプレゼンテーション

3Sマッチング型Webの作り方の最後は"表層Plane"です。サイト側のプレゼンテーションの基本となるのはCSSです。"骨格Plane"でのインフォメーションデザインの段階で、きちんとしたマークアップ指針の決定、基本的な名前（id属性値/class属性値）の設定が行われていれば、CSSによるビジュアル・コントロールの設計を効率化することができるでしょう。

Ajax、FLASHを用いたリッチなプレゼンテーション

CSS以外のプレゼンテーション方法としては、AjaxやFLASHを用いたよりリッチなプレゼンテーションが考えられます。CMSによって情報とビジュアルデザインは完全に切り離された状態にできますので、テンプレートにAjaxを用いたHTMLを使ったり、FLASHを使ったりすることは可能です。
AjaxやFLASHを用いることでページ遷移のないシームレスなユーザー体験、より直感的なユーザインターフェイスの実現が可能になります。

XSLTによるRSS/Atom Feedのプレゼンテーション

RSS/Atom FeedをXSLTを適用してHTMLなどに変換することは可能ですが、ユーザーが利用しているRSSリーダーの見た目をXSLTでコントロールすることはできません。Feedの登録を促進する際にXLSTで整形した内容をサンプルで見せるという使い方は可能でしょう。先に紹介したFeedBurnerでもこのようにFeedをXSLTによって整形したページの作成が可能です。

ここまで3Sマッチング型Web構築のポイントを5 Planes Modelに従い、解説してきました。
こうした点に考慮して設計～実装を行うことで、3Sマッチング型Webを貴社にとってユーザーエクスペリエンス向上のための最強のコミュニケーション･プラットフォームに仕立てることが可能になるはずです。
ここまで読んでいただき、「3Sマッチング型Web構築サービス」について詳しくお知りになりたい方は、是非お問い合わせページよりお気軽にお問い合わせください。貴社のご要望にあった3Sマッチング型Webをご提案させていただきます。

「3Sマッチング型Webの作り方　1.戦略と要件」へ
 「3Sマッチング型Webの作り方　2.構造」へ

関連コラム「Web2.0環境におけるユーザー行動の3つのS」へ

次回は「スモールワールド・ネットワークとWebマーケティング」と題して、ネットワーク科学の視点からWeb2.0時代のWeb戦略を考えてみようと思います。お楽しみに。

2006年03月03日