bookslope blog

エイクエント主催の「IAワークショップ」を実施しており、全国4箇所 (名古屋・福岡・東京・大阪) のうち半分が終わりました。今回のワークショップは、3月に発売した「IAシンキング」の刊行イベントで実施した内容から、もう少しUX寄りに軸足を置いて再構成したものです。

IAという分野においては、浅野さん (@noriyo) のブログ「IA Spectrum」に最近の海外での話題が紹介されているのでご覧ください。

・情報アーキテクチャの現在形「Pervasive Information Architecture」
・クロスチャネルの結晶
・「World IA Day 2012」開催のお知らせ

これらの情報を挟みつつ、そもそも私たちが向き合っているWeb (?) を自分の経験を通して見直してみることで、UXをIAという視点で設計していくことを体験する内容にしています。

当日のアウトライン

・IAについて
・IAの適用例
・サイトストラクチャのパターン
・エクスペリエンスマップ
・ワークショップ (グループワーク)
・発表・講評

もちろんIAの基本的な概要も話すのですが、今回のワークショップでは、IAを学ぶというよりも、どういうときにIAのスキルが活かされるのか、ユーザーの利用シーンを想定してみていくことで、これまで言葉でしか頭に入っていなかったクロスチャネルといったことを具体的に理解・イメージできるような内容にしています。

なお、今回は4地域を隔週で回るスケジュールになるため共通のテーマで実施しており、当日使用したスライドは非公開で参加者のみにワークショップ終了後に通知しています。有料ということもあり、次回以降に参加する皆さんのためにもネタバレにならない範囲での感想やツイート (#aqjp) をお願いしています。

最後の大阪開催を11/23に予定しているので、その日以降には一般公開したいと思います。

先日 (7/9)、青森地区×下北地区スペシャル企画のイベント「『Webサイトを運営する』ということを見直そう」というイベントで講演をしてきました。今回は「IAシンキング」で対談した長谷川恭久さんと一緒です。彼のセッション内容やスライドについては彼のブログ「青森で今必要とされるコンテンツとWebサイトのあり方について講演しました」をご覧ください。また、パネルディスカッションでは元中の人である山本さんと3人で「震災を経てWebとの関わり方がどう変わったのか」というような内容でお話することができました。まとめることが難しいテーマではありましたが、所々の感じ方やコミュニケーションの捉え方を共有することができたと思います。

実は青森へは今回は2回目で、前回はWeb協会の「Web会議」というイベントで「自治体サイトに役立つIA視点 (Slideshare)」という講演をさせてもらいました。そのときはちょうど12月の真冬でしたので雪も積もっていたのですが、今回は東京の暑さとは少し違う若干涼しい感じの青森でした。

セッションの内容はというと「運用」にかけて「サステナブルな情報アーキテクチャ」というテーマにしました。時間の変化とともにWebサイトがどのように変化していくのか、または変化しないのか、そうしたポイントでWebサイトの情報アーキテクチャを考える内容にしました。もちろんワークショップ形式を主体としましたので、いくつかのワークとグループワークを実施し、最後には2名の方に発表をしていただき、講評をするという流れで行いました。

講義

あまりクドクド話すのが苦手なので、率直に「運用」を踏まえて情報アーキテクチャを考えるのであれば――

・時間変化による違い (が重要)
・(情報アーキテクチャとは) 計画的な成長を可能にするもの

この2点を今回のメッセージとしてお話ししました。

細かいところは「ペースレイヤリング」を題材にしてWebでの捉え方を少しだけ解説しました。

ペースレイヤリングについては、IA100やWeb担当者Forumの記事「建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか」を読んでもらえると理解が深まると思います。

ワークショップ

今回も講演中に、2点ほど簡単な線で結ぶワークをしていただき、そのあとでもう少しジックリ考えてもらうワークショップを実施しました。

まず「ニーズ・利用目的」から「目的のコンテンツ」を定め、そのコンテンツにはどのように誘導すべきか (どう見せるか) を「手段・方法」に記してニーズからコンテンツをつなげてもらうストーリーを描いてもらいます。

このワークショップでは「コンテンツありきで考える」のその前に「目的ありきで考える」ことを実体験していただくような構成で取り組んでもらいました。

結果は思ったよりも (参加者どうしで) ブレなく一定のクオリティでアウトプットできていた (?!)ような印象を持ったので、伝え方は間違っていいなかったような気がする反面、イベントとしては振り切った案があるほうがいいなと思いました。どっちもどっちかと思いますが、こうしたワークではある程度〈遊び〉があるほうがいいんだなと改めて考えるキッカケになりました。

参照リンク

スライドで参照しているサイトなども参考にしてみてください。

・宮城県
・ユニバーサルメニュー (UM)
・復旧復興支援ナビポータル
・ネットアクション2011
・OpenUM

当日の模様は Togetter でも参照してご覧いただけます。

先週6/7 (火) に、FatWireが主催している無料セミナー「IAとグローバルWeb」に参加しました。会場には15名くらいの参加者がいつつUSTREAM中継 (FatWireJP) もされるため、なかなかはじめての体験でした。

FatWireのセミナーでお話するのははじめてなのと、オーディエンスがこれまでしていたWeb制作者よりではなく企業の情報システム担当担当とかに近いいため、どちらかというと初心に戻り情報アーキテクチャの視点でWebサイトを見ていくというプレゼンにしました。

グローバル対応という視点では「多言語対応」「マルチデバイス対応」が必須であると同時に、それを踏まえた情報アーキテクチャの視点が重要になってきます。田中さんのいう「Webデータマネジメント (スライド参照: Webデータマネジメントへの道)」に相当する役割が注目されることになるでしょう。そうした領域についての具体的な内容は、ボクのあとにプレゼンしていただいた佐藤さんのスライドを見るとスッキリします。スッキリするというか、どういう範囲の話をしているのか具体的にイメージしやすいと思いますのでぜひご覧ください。

これまでのプレゼンでボクが話していた「階層構造」と「目的別アプローチ」という2つの視点を同時にマネジメントしている様子がわかると思います。ただ、その方法論としての使い方の側面とは別に、「なぜそうするのか」という企画の側面とが改めて重要なことに気づきます。今回FatWire製品で「できること」を紹介していただきましたが、それを永続的に続けるためには「方針」としてきちんと定義しなければいけません。その方針に沿った方法論として「階層構造」と「目的別アプローチ」などをきちんと見定めて、マネジメントしていく必要があります。

今回の参加で自分自身が話している内容が最終的にどういうオペレーションにつながっているのかがわかりやすく垣間見れたような気がします。

先週まで、ワークスコーポレーションと共同で「IAシンキング」刊行記念イベントを各地で実施してきました。
5/21 (土) と5/22 (日) に名古屋・大阪で実施しており、その前の5/14 (土) にはアップルストア銀座店 (東京) でも実施をしています。4月にはロフトワーク「OpenCU」イベントでも事前に実施いたしました。

• 4/25 (月) ロフトワーク「OpenCU」イベント (東京)
• 5/14 (土) アップルストア銀座店 (東京)
• 5/21 (土) アップルストア栄 (名古屋)
• 5/22 (日) アップルストア心斎橋 (大阪)
• 5/22 (日) デジタルハリウッド大阪校 (大阪)

なお、今週末の土曜にはイマジカデジタルスケープのイベント「Open-Iセミナー」を予定しています。内容は、デジタルハリウッド大阪校と同じ3時間枠になるため、いくつかの課題を複数人でワークショップができる内容を計画しています。

• イマジカデジタルスケープ Open-Iセミナー2011 「Web制作者・担当者のためのIAワークショップ」

以上のツアーを考えると、トータルだと200人以上の方々と向き合ったことになり、回ごとの濃度を考えると、これまでには経験したことがないくらい濃い時間を過ごすことができました。参加者の皆さん、本当にありがとうございました。

当日のプレゼン資料 (スライド) については、Slideshareのほうですべて公開しておりますので、興味ある方はパラパラとめくってもらい (なぞ) 復習や改めて自主学習などに使っていただければと思います。内容は、書籍と同じように「講義 + 演習」という組み合わせて、何問かの課題を手元でシミュレーションしていただき、後半にはその集積の課題を大きな視点で考えてもらう感じです。

また、当日のトゥギャッターも「#iathinking」というハッシュタグで展開されているので、読み返しという意味でご覧いただければ当日の状況が見えていくるかと思います。

• Togetter – 「2011年5月14日 IAシンキング Web制作者・担当者のためのIA思考術 銀座 #IAthinking」
• Togetter – 「2011年5月21日 IAシンキング Web制作者・担当者のためのIA思考術 名古屋 #IAthinking」
• Togetter – 「2011年5月22日 IAシンキング Web制作者・担当者のためのIA思考術 大阪 #IAthinking」

これを機会に各地での勉強会やワークショップなどのイベント企画などあれば、積極的に参加していきたいと思います。

先週 (3/25) 発売になった「IAシンキング」の巻末付録には長谷川恭久さんとの対談があります。 彼とは以前から何度か話す機会があり、彼のポッドキャスト「Inflame Casting」にも参加させてもらったことがあります。現在は「Automagic」という名前に変え、Facebookグループで公開をされています (参考: ポッドキャストを再開します)。

• Inflame Casting: IC #65 June 17 2006
• Inflame Casting: IC #66 June 22 2006
• Inflame Casting: IC #145 August 6 2009

アマゾンなどのネット書店では3/29 (火) に届くところが多いようですので、まだ手元にない方や興味あるけど中身がわからないという方に、彼との対談の付録部分を無料で公開したいと思います。下記リンクからPDF形式のファイルをダウンロードできるようにしましたので、興味ある方はダウンロードしてご覧ください。iPhoneで取得した場合には、iBooksやi文庫HD、GoodReaderなどにご登録して見ていただくことが可能です。

なお、内容の編集と印刷はできませんのでご了承ください。また、この無料ダウンロードは1カ月を期限にさせていただく予定です。

WebにとってIAができること (PDF)

長谷川恭久 @yhassy × 坂本貴史 @bookslope

日本のWeb業界には、まだまだIAというスキルが定着しているとは言えません。 IAは本当に難しい概念なのでしょうか。著者の友人であり、フリーランスでご自身のブログやポッドキャストでIAやUXについて度々言及されている長谷川恭久さんと、IAの必要性や今後の課題などをお話いただきました。

© 2011 Takashi Sakamoto, Works Corporation Inc. All Rights Reserved.

ということで、本日 (3/25) が発売日になります。
ようやく漕ぎ着けた、という表現がふさわしい道のりでした。

アマゾンなどのネット書店では、入荷のバッファをみて3/29としております。
ワークスコーポレーションさんのオンライン書店だと一部早めに届いているようです。

そして、今後はアップルストアでのセミナーイベントも予定しています。
東京だけではなく、関西のほうにも足を延ばす計画があります。 こちらは詳細決まり次第お知らせしていきます。

さて、発売日を迎えるにあたり、やはりこれまでの道のりで考えたことを記録しておきたいと思います。

まず、林さんのブログにも書かれていますが、「教育」という範囲において考えていることがあります。それはセミナー講師などで得た経験をふまえて「思考のプロセスを可視化」することが、真の学び (?) に通ずるのでは、という仮説を立てました。

これまでにも同僚やお客さんから「なんでそう考えたのですか?」という質問を受けることもあり、その場で説明することはあるのですが、同じようなことを同僚やお客さんが自ら説明できるようになるには、根底にある前提知識や前提となる方針を共有しておかないと応用できないと考えるようになりました。

IAじゃなくてももちろんいえることですが、この考える前提となるフレームワークを構築しておかないと説明も中途半端となり、一夜漬けのテストとかでみられる記憶の勝負になってしまいがちです。

そういう意味で、考える前提のフレームワークを共有することが、一番実現したかったことになります。
そして、その形のまず第一歩がこの本という位置づけです。

発売日当日ですので、店頭で見かけたら写真を取ってFacebookなどソーシャルメディアで共有していただけるとうれしいです。

Facebookのほうにも公式ページ (なぞ) を立ち上げましたので、経緯や関連する情報、今後の予定などをお知らせします。こちらで「いいね！」ボタンを押してもらえばOKです。

つまるところ、2011年に「自分が何をしたいか」に尽きるわけですが、そのひとつとして、今年前半（2011年2月末ごろ）に自分の書籍を発売します。

書籍タイトルは「IA Thinking  (アイエー・シンキング)」です。

こちらの詳細は追ってこのブログでも案内するとして、自分の知識や経験をいくつかのカタチでアウトプットする（世の中に残す）ことは今後もし続けていきたいと思います。これまでも寄稿というのはいくつかしてきましたが、自分だけの本ははじめてになります。

ちなみに「IA Thinking」という言葉はボクの造語です。昨年のIAサミットでは「Design Thinking」というテーマが多かったと聞きますが、これに擬えています。

アウトラインは以下のような感じですが、いわゆる教科書というより、自習や演習ができるよう問題集のような本にしています。これまでしてきた一般向けの講座やセミナーでのアウトプットをまとめたような感じになります。

アウトライン

• 第1章 IAとは
• 第2章 情報の整理から情報設計
• 第3章 サイトストラクチャと導線
• 第4章 ナビゲーションと使い方
• 第5章 ランディングページの最適化
• 第6章 ワイヤーフレームの活用
• 第7章 事例
• 第8章 対談

UXやマーケティングの重要性が声高に聞こえてはいますが、どちらかというと初心に戻るという感じです。「今さら?」と思うところもあると思いますが、「その部分」に対して残しておかないと次に行けない感じがしています。「IA」という言葉は浸透してきたところもありますが、その思考力はまだまだ（全然?!）ついていないと感じることのほうが多いです。そういう意味でも、自分が次に行くための投資だと考えています。そういうふうに考えると、教育とか育成というキーワードも考えないといけない領域だと感じています。

ウィリアム・シェークスピアの好きな言葉で、

There is nothing either good or bad , but thinking makes it so.

というのがあります。日本語訳としては「良いとか悪いとか、そういうことはではなく、要は本人の考え方次第だ」というらしいのですが、その「考える」思考力がないと「良い悪い」もなくなってしまいます。これだけ人の意見が数多く見れる現代においては、自らが「考える」ことをし続けないとあらゆる波に飲まれていってしまうような気さえします。

詳細がわかり次第、いろいろなところでご紹介したいと思います。
電子書籍化も考えていますが、まずは紙の本です。

とりあえず、ボクの2011年はこの本の発売からはじまるということで。

先日、カードソーティングのワークショップをしたこともあり、カードソーティングについて改めて興味を持ち始めています。基本的にはアイデア発想法に近いところがその理由かも知れません。

「カードソティング」という言葉より、品質管理でいう「新QC七つの道具」の「親和図法 (Affnity Diagram)」および「KJ法」という言葉のほうが、日本ではもしかしたら知っている人は多いのかも知れません。

とりあえず、メソッドの理解というより便利なツールをまとめておこうと思います。

カードソーティングと言えばDonna Spencerさんの名前がまず思い浮かぶこともあり、彼女のブログ「DonnaM」を見ていくだけでも非常に参考になります。また、Boxes and Arrowsのほうに詳しく書かれた記事があります。ちなみに今年のIAサミット2009でも実際に彼女にもお会いすることができました。

• DonnaM – IA – card sorting
• Card sorting tools – a short summary
• Card sorting: a definitive guide – Boxes and Arrows: The design behind the design

そのDonna Spencerさんが書かれた書籍「CARD SORTING」の「Manual vs Software」p. 55にツールについての紹介がされています。本を買わなくても、Rosenfeld Mediaサイトの「Card sorting software tools」からも見ることができます。

また、ナビゲーションについて詳しく書かれた書籍「デザイニング・ウェブナビゲーション」の「カードソーティング」p. 178でもツールがいくつか書かれていました。こちらは2007年にJames Kalbachさんが書かれたものを浅野さんやコンセントの長谷川さんが翻訳された本ですね。

Card Sorting Tools

1. OptimalSort
   OptimalSort – online and easy cardsorting
2. Websort
   Card Sorting with Results | WebSort.net
3. MindCanvas (Open Sort & TreeSort)
   MindCanvas | A research service from Uzanto
4. xSort
   xSort is a free card sorting application for Mac OS X
5. SynCaps
   Design for Usability – Card Sorting Introduction
6. Card sort analysis spreadsheet
   Rosenfeld Media – Card Sorting: Card sort analysis spreadsheet
7. CardZort
   Jorge A. Toro
8. CardSort
   CardSort – UCD Tool for Information Architecture ※<index.php> がエラー
9. CardSword
   CardSword
10. WebSort
    Card Sorting with Results | WebSort.net
11. WebCAT
    WebCAT: Overview
12. uzCardsort
    mozdev.org – uzilla: cardsort
13. EZSort
    IBM Ease of Use – EZSort (beta release) ※サーバーエラーのためアーカイブを参照。
14. Socratic Card Sort
    Socratic Technologies, Inc.
15. StickySorter
    Microsoft Office Labs – StickySorter
16. Classified
    URL不明

ということで、合計16のツールがカードソーティングのツールとしてまとめることができます。

実際に「card sorting」で検索してみると、たくさんの記事があることがわかります。実際、以下のようなサマリーサイトがたくさんありました。このエントリーを書く上でも参考になりました。

• Card sorting (A-Z of user experience design resources)

最後に、Slideshareでタグ「card-sorting」での検索結果は下記から見ることができます。

• Presentations and Documents tagged card sorting

その中でBenny Skogberg氏がまとめている「Card Sorting Tools」というスライドがあったのでご紹介します。

事前課題にあげた「サイトマップ」については、当日間近 (8/29) にあった第24回Websig24/7会議「100人で考える、理想的なサイトマップの形と標準書式」を参考にしてそこで得た知識をなるべく話そうとしました。

決して、「サイトマップ (ページ)」のことを指しているわけではありませんので、あえて「ページ」をつけています。

サイトマップとは
Webサイトに掲載する情報を組織化し、その論理的な構造をツリー図として表現した資
料。画面遷移のフローチャートとして使用できるように情報が付加されることもある。

このブログのエントリーでも書きましたが、Websig24/7会議の模様は下記エントリーを参照してください。

• 第一部発表で紹介したサイトマップ(一部)公開 (WebSig24/7)
• グループワークで作成したサイトマップ公開 (WebSig24/7)

ここでも提出させてもらったサンプルがあるのですが、等斜角を持ったアイソメ図からExcelで作成したツリー図・Visioで作成したダイヤグラムなど、さまざまなカタチがあります。これはもちろん異なるプロジェクトにおいての成果物サンプルなのですが、やはりそれぞれのプロジェクト体制やドキュメントの目的は異なります。

ビジュアルボキャボラリーを活用する

「サイトマップの書式」という言い方をする場合がありますが、ドキュメントの書式というのとドキュメントで扱う情報の表現 (凡例) とは異なります。ここでは後者について概念的な理解として「ビジュアルボキャブラリー」を紹介しました。

ジェシージェームスギャレット氏の「Visual Vocabulary for Information Architecture」をコンセントの長谷川さんが翻訳したサイト「jjg.net: a visual vocabulary（日本語版）」があります。

これは，インフォメーションアーキテクトあるいはインタラクションデザイナーが，
ウェブサイトにおけるストラクチャーあるいはユーザー経験のフロー，またはその両方
を抽象度の高いレベルで記述するためのものだ。

このビジュアルボキャブラリーをすべて覚えるのでもいいのですが、抽象的な情報の (サイトマップとしての) 表現方法を理解し、ふだん作成しているサイトマップ上での表現に活かしてほしいと思います。

gihyo.jpで連載していた「Web情報アーキテクチャ（IA）とツール」も参照のこと。

ふだん扱う情報の凡例としては次のようなものが考えられます。

• 単一ページ
• リンク
• グループ
• 別ウィンドウ
• 複数ページ
• 導線
• 関連性 (関係線)

Websigでもあったのですが、この「線」の扱いについて「導線」と「関連性 (関係線)」を同一と考えている傾向が多々あるようです。ホームページから全カテゴリートップページに矢印がついているサイトマップをよく見かけるのですが、これは不適切だといえます。

矢印はステップ (進み方) としても理解できるため、ホームページと全カテゴリートップページとを結ぶ線は必ずしもその順番で画面を遷移しないといけないわけではありません。したがって、表現する場合は矢印ではなくコネクタとして (ただの線で) 表現するほうが好ましいでしょう。

最低限必要なサイトの情報

また、サイトマップには最終的に物理的 (ページ) にするための情報も含まれるため、以下のような最低限必要なページ (情報) も含めておくといいでしょう。

サイト情報/Site Information

• サイトマップ
  
• サイトの利用規約
  
• プライバシーポリシー

機能/Function

• サイト内検索
  
• RSS配信
  
• 文字サイズ変更
  
• 印刷

Flickrのほうにあげていただいたサンプルについてもいくつかコメントさせていただきましたが、こちらは別途細かく見ていくとしていくつか注意点があげられます。

• 関係性を矢印で表現しない
  
• 階層はわかりやすく構造化する
  
• 画面エリアで整理しない (見た目で分類しない)
  
• 導線にあたる線は矢印にする

潜在意識にあるサイトマップを描いて共通認識を探る

ワークとして、「企業情報」配下のツリー図を描いてみることをしました。これは潜在的に自分の中にある (ある意味) 基本的な情報構造を表現したみた場合に、他人とは違う点、また、とらえ方にも個人差があり共通項を見つけることが難しい点を体感してほしかったことが理由です。

たとえば、「プレスリリース」と言ったときにはどうでしょうか。2009年の情報をプレスリリース (インデックス) ページに含めるのか含めないのかでも書き方は変わってきます。リダイレクトするなどの情報をどう表現すれば伝わりやすくなるのか考えてほしかったわけです。

事前改題の回答例

サイトマップは比較的抽象的で構いません。何度も言っていますが、事前課題の状況を踏まえた場合の詳細度でOKです。凡例としては大分類のグルーピングがされていればほかはとくに気にならないかと思います。

ポイントとしては、以下2点が表現されていることになるかと思います。

• 「サービス・ソリューション」「施工実績」配下に共通にある「分野」などの情報分類と相互リンク (関係性) の表現。
  
• 「お問い合わせ」および「サポート情報」への矢印 (つながりの) 表現。

さて、次は「ナビゲーションを考えてみよう」を振り返ってみます。

関連エントリー

• 企業サイトにおける4+1のメニュー分解 (CSS Nite LP7 Redux 02)
• 最適なメインメニューを考えてみよう (CSS Nite LP7 Redux 01)
• IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)
• CSS Nite LP7「IAスペシャル」

さて、「最適なメインメニューを考えてみよう」のつづきです。

撮影: 飯田昌之

企業サイトの情報分類

ひとくちに「企業サイト」といっても昨今の企業サイトを見れば単純な会社情報だけを扱っていないことに気づきます。つまり「事業内容」が肥大化してサービス情報として大きく取り扱う傾向があります。

企業サイトと言われるほとんどが――

• その企業の情報を扱う「会社情報系」
• その企業の事業を象徴する「商品・サービス系」

とに大きく分類することができます。

例にならって課題サイトのメインメニューを「会社情報系」「商品・サービス系」に分類してみると、ほとんどの情報が収まることがわかります。

サイトマップページには「(実は) 提供側で見てほしい情報が隠されている場合がある」と書きましたが、やはりメインメニューにも提供側の意図が見え隠れしてきます。つまり、企業情報を主にしている場合には「会社情報系」を主軸に、サービス情報を主にしたければ「商品・サービス系」を主軸に分類していることがあります。

また、「企業情報サイト」「サービスサイト」というサイト単位で分けているケースもあります。ドメインから分ける場合や管轄部署を分ける場合など理由はさまざまありますが、その企業の事業範囲とサイトに掲載している情報の規模によりどこに主軸を置くかは検討が必要です。例として、ソフトバンクモバイル株式会社の企業情報サイトとサービスサイトがあります。

企業サイトにおける4+1のメニュー分解

経験則ですが、企業サイトで扱うサービス情報には相対する「サポート情報」が含まれます。それは、そのサービス情報には「これから利用する人」「すでに利用している人」が想定できるからです。

• 新規 (商品・サービス/Webサイト) 利用者向け
• 既存 (商品・サービス/Webサイト) 利用者向け

多くの企業サイトで「お問い合わせ」が目立つ位置にあるのはこの情報群を取り出しているせいです。もちろんコンバージョンを意識した「アクション」として位置づけているケースもありますが、ここでは情報の種類で説明しています。したがって、企業サイトで扱う情報のほとんどがさきほどの2つ (会社情報系・サービス系) をこの4つにさらに分解することができます。

1. サービス
2. サポート
3. 企業情報
4. ニュース
5. 独自

また、「独自」な情報群としてその企業の独自性 (アイデンティティ) を象徴するような情報があれば情報の粒 (粒度) が異なっても含めておくほうがいいでしょう。例では、「防災のトビシマ」を独自な情報群として説明しました。

この「企業サイトにおける4+1のメニュー分解」に課題サイトのメインメニューを当てはめたものが下記です。

他社サイトの把握と業界標準

業界ごとにWebサイトを見ていくと、その業界・業態によりデファクトスタンダードが存在していることに気づきます。例では建設業界 (清水建設・鹿島建設・大成建設・戸田建設) でしたが製薬業界や金融業界などやはり一定のメニューに集約されています。ここで取り上げた他社の企業サイトでも「会社情報系」と「商品・サービス系」とに分けてみると明確にその企業の意志が伝わってきます。

B2Bにける商品・サービス系には必ずと言っていいほど「事例」や「実績」が取り上げられます。例で取り上げた他社サイトも4サイトのうち2サイトが「実績」がメインメニューに含まれていました。

最適なメインメニューのまとめ

今回の課題では、以下の2点が考慮されていればメインメニューの最適化という課題に対しては妥当性のある回答と考えられます。

• 商品・サービス系として「ソリューション」をまとめること
• 「お問い合わせ」つまり「サポート情報」を加えること

いかがでしたでしょうか。スライドでは、以下の情報群でまとめました。

• 技術・ソリューション: 商品・サービス系 (※1) としてまとめる
• 施工実績: B2B特有の情報として※1から取り出す
• お客様サポート: 「お問い合わせ」を含む情報として加える
• 企業情報: 採用情報を含む会社情報系 (※2) の根幹
• 株主・投資家情報: 上場企業としての重要な情報配信を※2から取り出す
• ニュース: 広報としての情報配信として※2から取り出す

最適なメインメニューの最適化として、さいごにまとめたのが下記3点です。

• 情報の共通項を見つける: グルーピングから情報整理ははじまる
• 他社との共通項を見つける: 業界標準を意識する
• 重視する方向性を決める: 企業情報にはその企業の意図が含まれている

ということで、「最適なメインメニューを考えてみよう」だけで2エントリーになってしまったのですが、週1くらいで振り返っていこうと思います。

関連エントリー

• サイトマップを描いてみよう (CSS Nite LP7 Redux 03)
• 最適なメインメニューを考えてみよう (CSS Nite LP7 Redux 01)
• IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)
• CSS Nite LP7「IAスペシャル」