bookslope blog

12/3 (土) にあった第5回WebUX研究会「ストーリーテリングをユーザエクスペリエンスデザインに活用する」に参加してきました。その中で気づいた点や自分なりにまとめておきたいことを2つ書いておきます。

• コンテンツとストーリーの関係性は逆にしてはいけない
• ストーリーにすること自体は伝え方のパターンでしかない

このイベントは、書籍「ユーザエクスペリエンスのためのストーリーテリング -よりよいデザインを生み出すストーリーの作り方と伝え方」の翻訳出版記念ということで、前回の同イベントで告知されていたものでした。

イベントの内容

• ストーリーとは何か? (楽天 脇阪さん @wackiesrock )
• ストーリーを集める (NHN Japan 酒井さん @yhsk )
• ストーリーを作る (Zynga Japan 前田さん @t_maeda )
• ユーザーストーリーマッピング (アギレルゴコンサルティング 川口さん @kawaguti )
• パネルディスカッション (スピーカー + 浅野先生 @314satoshi + ネットイヤー 坂本 @bookslope ）

※当日の模様は「Togetter: 2011年12月3日 第5回 #WebUX 研究会 ツイートまとめ」から見ることできます。

「講義 + ワークショップ」という流れで進行したこのイベントですが、ボク自身はワークショップには参加せず (参加できず、が正しい) 最後のパネルディスカッションにだけ登壇するという参加の仕方でした。ぶっちゃけ、翻訳本が手元にない状態でしたので (今もまだないけど)、スピーカーの話を聞きながらいろいろと脳内メモリに書きこんでおりました。

コンテンツとストーリーの関係性は逆にしてはいけない

まず感じたのが、作成したストーリーの良し悪し (評価) をストーリー自体に持たせてしまうと、ただの妄想にしかならないということです。つまり、ストーリーがコンテンツになっている状態 (ストーリーが内輪の図) といえます。この場合だとたしかにストーリー自体が可視化されるので、まわりから見てもわかりやすいです。

それに対してボクの理解では、ストーリーは表現方法 (演出方法) だと思っていたので、このすれ違いが解消されないと、正しく会話ができないと感じました。

• ストーリーが外輪: 読み聞かせやプレゼンなど、ストーリー自体は表現方法 (演出方法) のパターン
• ストーリーが内輪: 新聞や小説など、ストーリー自体がコンテンツになるパターン

ストーリーにすること自体は伝え方のパターンでしかない

ボクたちは「起承転結」や「抑揚をつけて」など伝え方のパターンはすでに学んでいます。もちろん技術的な側面はあるかと思いますが、ストーリーにすることが伝え方のパターンでしかないと思います。そう考えたときに「なぜストーリーにすることが有効か」を考えてみました。

それを示したのが次の図です。つまり、伝えることを仮にA地点からB地点までの距離で定義すると、AからBまでの面積で表現できると思いました。直接的伝達を1にした場合、論理的伝達のほうが階段状になる分面積が広くなり、さらにストーリー的伝達だと曲線として考えられるのでそれよりも面積は広くなります。その曲線が行きすぎてしまうとスパゲティー的伝達になってしまい、結局伝わらないというオチになります。

• 直接的伝達: 直接伝えるパターン
• 論理的伝達: ロジックを積み上げて伝えるパターン
• ストーリー的伝達: 曲線で抑揚をつけて伝えるパターン
• スパゲティー的伝達: 曲線すぎて伝わらないパターン

「コミュニケーション」と言うとそれまでなのですが、結局は相手がいることが前提となるので、相手が受け入れられるポイントがいくつ存在するのかがポイントになると思います。そのポイントを多く持つ = 面積を広げるという発想になります。最近だと、AKB48や少女時代などのグループで大人数にする理由にもつながる考え方かも知れません。

ここまで自分なりに書いてみましたが、まだ本を読んでいないこともあるので、きちんと読ませていただき、改めてまとめてみようと思います。

関連リンク

• 第5回WebUX研究会(12月3日)にてワークショップを行いました。 « UXBC Tokyo / UX Tokyo (準備室)
• 第5回WebUX研究会開催しました | 情報デザイン研究室

エイクエント主催の「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に予定しているので、その日以降には一般公開したいと思います。

「Websig 1日学校2011」に参加してきました。昨年参加できたなかったこともあり、今回はどんなイベントになるのか告知されてから気になっていました。個人的にもモデレーターの方々とは面識があるので、事前にお話を聞いたりさせていただきました。

テーマが「今後のキャリア」に関するものが多かったこともり、自分自身の考えと比べたかったこともあり、「フロントエンドエンジニア」クラスで申し込みました (趣旨と違っていたらゴメンナサイです)。自分自身は「UXデザイナー」というタイトルですので、デザイナーやディレクタークラスに申し込むべきだったかも知れませんが……。

八王子のデジタルハリウッド大学という立地 (会場・アクセス) ですので、まずは遠かった。そして体育館には扇風機しかないので暑かった。予想以上に快晴だったこともあり、遠い昔を思い出すような感覚で夏の学校を体験できました。Instagramからいくつか写真を撮ったのでTwitterから見ることができます (写真: Recent images by @bookslope)。

カレーもうまかったし、レッドブルガールもいたし、体育の先生や保健の先生などコスプレもあり、リスまで登場したし、楽しく過ごすことができました。スタッフのみなさん本当にお疲れさまでした。

参加してみた授業の感想

感想はそれぞれの授業ごとにありますが、いくつか書き留めておこうと思います。

まず、「キャリア」というテーマだと、どうしても自分の話になると思うんです。「わたしはこうでした」「わたしはこう考えます」という具合に。それはそれで別にいいんですが、ボクは業界とか社会という側面で考えた場合に、そうするため・そうなるための「教育や環境」という側面もあるといいと思いました。

また、フリーランスの方の視点と企業 (組織) にいる方の視点とでもかなり違うところがあるので、前提としてどちらかを明示的に分けるクラス分けでもよかったのかなと思いました。

もちろん自分が参加していない授業でそうした視点があったかも知れませんので、あくまで自分が参加した授業を通しての感想です。ちなみに自分が参加したのは、下記の授業でした。

• 「HTML5とはなにか?」マイクロソフトの春日井さん @ykasugai
• 「<career>」ピクセルグリッドの中村享介さん @kyosuke
• 「デザイン視点のコミュニケーション術」couldのヤスヒサくん @yhassy
• 「キミたちはどう生きるか」元IMJの荒井先生 @naohidearai
• 「仕事を通じて社会に提供している価値とは」ワールドカフェスタイルで全員参加

仕事を通じて社会に提供している価値

最後のワールドカフェ (風?) なグループワークでは「仕事を通じて社会に提供している価値」というテーマでしたが、いくつかのポイントをその場でまとめることができたので、ついでに絵にしてみました。

つまり、我々は〈カタチをつくる〉ことによって〈社会を豊か〉にし、その結果〈人々をハッピーにする〉という図式です。当たり前ではあるのですが、いろいろな方々の意見がこの手段と社会的な結果と個人（情緒）的な結果に分けられたので、そのように整理してみました。また、〈カタチ〉はこの場合は〈Web〉になるわけですが、カタチをつくるほかにもカタチにすることも含まれている感じです。

ただそれだけだとほかの業界や業種にも当てはまるので、Webの業界だから言えることを考えたところ、「ハッピーにする」ほかにあった「成長に貢献する」ことでも言えますが、「圧倒的なスピードで加速させていること」「尋常なないくらいな広がりをみせていること」が言えると思います。また、「なぜそれだけ情報を提供する必要があるのか」という問には「信頼」というのもありました。ボクはこの議論を最後まで続けられませんでしたが、「平和」につながるキーワードだったんじゃないかと帰りの電車で思ったくらいです。

あなたが考える「デザイナー」ってどんなイメージですか?

カタチにするという話では、ヤスヒサくんからの問い「あなたが考える「デザイナー」ってどんなイメージですか?」でも考えたことが当てはまると思うのですが――

デザイナーとは「創造できる人」だと思っています。
創造できる人とは、潜在的な事象を顕在化できること、顕在化したものを具現化できることだと思っています。

潜在的な事象を顕在化することとは、顧客やユーザーが意識していない・意識できていない課題を見つけることを指しています。顕在化したものを具現化することは、その見つかった課題を解決することを指しています。課題にはさまざまあると思います。「売上が上がらない」「操作がしにくい」など。こうしたことはある事象のもとに判断していますので、その判断ができることも創造力の1つだと思います。単純な数字を見て「これはこういうことだ」と考えること〈仮説力〉にも通じる解釈だと思います。

また、具現化することはカタチにすることを指しています。「プロジェクト計画を立てる」ということも含まれますし「ビルを建てる」ことも「料理する」ことも含まれます。

とりわけ、自分自身で考えてみると、前者の〈潜在的な事象を顕在化すること〉が仕事の大半を占めていることに気づきます。最終的には、Webサイトというカタチになったり、今後のマイルストーンというカタチになっているような気がします。その流れを線でとらえるとヤスヒサくんのプレゼン「デザイン視点のコミュニケーション術」にもあった「プロセスへの参加」ということにつながるのかも知れません。

最後に「明日からできる一歩」は自分としては「知らない人に声をかけること」にしました。TwitterやFacebookでフォローしている人が増えている中、リアルでそうしたことができない性格なので、少しでもいろいろな方々をお話をしていくことが自分の成長にもつながるのかなと思いました。

最近は話す方が多い中で、こうしてほかの方のお話を聞く機会に出会えて新鮮でした。

今回のイベントに参加したことで「Websig 1日学校2011」というデザインプロセスに参加できたのかな、と思います。ありがとうございました。そして関係者の皆さん・参加された皆さん本当にお疲れさまでした。

来年も参加したいと思います。

先日 (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 でも参照してご覧いただけます。

先週まで、ワークスコーポレーションと共同で「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) が発売日になります。
ようやく漕ぎ着けた、という表現がふさわしい道のりでした。

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

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

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

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

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

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

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

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

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

事前課題にあげた「サイトマップ」については、当日間近 (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スペシャル」

先週開催された「CSS Nite DISK, LP 7」のワークショップを解説含めて振り返りをしてみたいと思います。

撮影: 飯田昌之

当日のスライドはSlideshareにもアップしています。「IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)」もご覧ください。

事前課題

事前課題を出したのは、当日までに気分を盛り上げる作用もありますが、どちらかというと参加者が期待されている「IA」をワークを入れて全体像をつかむには1時間内ではどうしても時間が足りなかったせいです。

これまで参加したことのあるワークショップでは、前提となる参加者の状況や役割により意見が分かれて論点がブレてしまう傾向があると感じたため、状況を決めてしまうところから考え始めました。

• 自分は30代のWebディレクターである
• 勤務先の制作会社では、内部にデザイナーやコーダーがいる
• 来週顧客に説明に持っていく資料
• その資料は、要点が書かれていればよい
• 上司 (営業) もいっしょに同行する

この状況ですと、「サイトマップ」と言ったときに想像するものは詳細なサイトマップである必要はありませんし、デザイナーではないのでデザイン的に作り込む必要もありません。時間的にもそれほどあるわけではありませんので、時間をかけて課題に取り組む必要もないことになります。

対象サイトの選定

「飛島建設」さんのウェブサイトを対象にしたのは以下3つの理由です。

• 今どき珍しいレガシーなつくりだった
• ざっと見た程度でも改善点が見つけやすかった
• 建設業界という大きな業界のため類似サイトが多く見つけやすかった

最適なメインメニューを考えてみよう

あえて「メニュー」という言葉を使ったのは「ナビゲーション」という言葉の持つ意味と分けて考えたかったからで決して言葉の定義が揺らいでいるわけではありません。また、「7つのナビゲーション」を出したのは、前のセッションの振り返りの意味があります。

まず、サイト全体を把握することからはじめると思いますが、その際には――

• メインメニュー (ナビゲーション類) を見る
• サイトマップページを見る
• 一定時間いろいろ触ってみる

をしていくことになると思います。ヒューリスティック分析やユーザビリティ調査をしたことのある方にとってみれば、もう少し細かい作業をするかも知れませんが。もちろん個別の情報を得るにはアクセス分析ツールを見ることや、プリフェッチャソフトなどでファイルを取得して物理的な情報を見るというのもあります。

さて、その中でサイトマップページには2つの側面があります。

1. そのサイトで扱う情報 (ページ) の大分類がわかる (反対に上位階層だけの場合がある)
2. (実は) 提供側で見てほしい情報が隠されている場合がある (階層で割り切れない場合がある)

とくに2は経験がある方も多いと思います。

課題サイトでは、メインメニューで扱っている分類とサイトマップページで扱っている大分類とでやはり違いが見つけられます。これが2にあたる部分だと推測できるのですが、この段階でメインメニューの分類とサイトマップページの分類に違いがある点を見つけられればOKです。

実体をもたない情報分類

課題サイトのサイトマップページ左上には「トップページ〜」という3つの分類があります。これも前述の2にあたる部分ではありますが、どうしても画面要素で分類しがちな点は必ずつきまといます。これら3つの分類は、実体をもたない集合体でいわゆるショートカットリンク集にあたります。つまり、実体はほかの分類として分けられているのに、画面要素での分類でも見せたいという意図 (前述の2) が理由としては考えられます。

当日は3つとも対象外として説明しましたが、実は3つめの「トップページ下部メニュー」というのは無視してはいけません。「サイトの利用規約」や「プライバシーポリシー」はサイトに必要な情報群としてまとめるケースがあります (例: サイト情報)。当日は論点をメインメニューにしたかったのでここの説明は省きました。

共通項目をまとめてグルーピングしてみよう

「KJ法」や「カードソーティング」という言葉で聞くように、情報に分類にはいろいろな方法があります。課題サイトで扱うメインメニューを考える際に、そのサイトで扱う情報構造の最上位を自分の視点でグルーピングしてみるところから考えてみました。

当日も話しましたが、事前課題で取り組まれた参加者のほとんどが画面要素に分解して考えていたこと (つまりワイヤーフレームで考えていたこと) には驚きました。あえて「メニュー」と表現したの真意は、まずは情報の分類を純粋なリストで考えてみてほしかったからです。

課題サイトを改めて見た場合、ホームページと下位階層ページのナビゲーションが違っていることに気づきます。ここで、下位階層ページのナビゲーションを、ある視点で分類 (グルーピング) したものがホームページでのナビゲーションになると思ってしまうとNGです。

例として線を引いたものがありますが、さきほどのサイトマップページの分類とホームページのメニューとで突き合わせた場合に、結局まとめきれずに「防災のトビシマ」と「Bespokeサービスソリューション」が余ってしまうことになります。したがって、この2つをグルーピングしなければ、サイトの情報分類の最上位を整理できたことにはなません。例では「サービス・ソリューション」という分類を追加しています。

少し長くなってしまったので、ここでいったん区切ります。

関連エントリー

• 企業サイトにおける4+1のメニュー分解 (CSS Nite LP7 Redux 02)
• IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)
• CSS Nite LP7「IAスペシャル」

CSS Nite LP, Disk 7「IAスペシャル」（2009年9月12日開催）

先日 (9/12) 行われた「CSS Nite LP, DISK 7」は、300人を越す参加者となり予想以上に大人数かつ大きな部屋に大きなスクリーンで、これまでにはないシチュエーションでした。

前半のセッションではどちらかというと参加者が聴く姿勢になるので、わたしのセッションではできるだけ手や頭を動かせるワークショップ形式にさせていただきました。300人強でワークショップ (?!) というのははじめてで大きなチャレンジでしたのではじめはどうなることかと思っていたのですが、みなさんの協力あってカタチにすることができました。

当初、もう少し参加者と近い距離を想定していたため、その場で課題に対する質疑応答なども考えていたのですが、想定以上に部屋が大きかったこともあり (参加者が多いということもあり) かなり小刻みにタンタンと進めるような格好になりました。

撮影: 飯田昌之

結果としては、事前課題に取り組めた方と取り組めなかった方とで大きく反応が分かれましたが、伝えたかったこと (感じてほしかったこと) は、十分に伝えることができたと思っています。

ワークについては、課題の出し方・取り組み方がうまく伝え切れずに消化不良にさせてしまった点がありました。ただ、このテーマを考える上で重要な点は伝え切れたと思います。あの場で理解できなくてもあとあと「こういうことを言わんとしていたのか」と思う場面が必ず出てくると思うので、そういった場面で活かせられれば幸いです。

別途、課題についてのエントリーも書こうと思います。

ちなみに今回「IAスペシャル」だったのですが、「IA」を専門職の領域だとかある意味遠くて現実的ではないと思われてしまうことを嫌って、このセッションでは「IA」という言葉を一回も使わずに進行してみました。また、テーマに「LPO」とあるのですが、こちらもあえて「LPO」「ランディング」という言葉はいっさい使わずに、考え方や手を動かすことで中身を伝えるようにしました。

というのも、参加者が自分たちの関わっている業務に直接関係している範囲で考えてほしかったのと専門用語を使うことで「知っている」というふうに安直にとらえてほしくなかったことが理由です。手を動かすことで「知っている」のではなく「理解できている」ということを自身で感じてほしかったことが一番の理由です。

撮影: 飯田昌之

懇親会の場で安藤さんと建設業界におけるウェブでのソリューション訴求は実際にはあまり意味がないので、現実味が薄かったとご指摘もいただきました。建設会社さんを題材にした理由は、たまたま見つけたレガシーなつくりだったことと間違い探しをしていく上で説明がしやすかったのが理由で、それ以外にはありません。

反省点

アンケートのほうで皆さんからご指摘いただけことも、自戒を込めて今後の活動に活していくようしたいと思います。

• 事前課題を取り組んでもらうような促し方ができなかった。
• 課題の取り組み方とアウトプットイメージを伝えきれなかった。
• 所々早口になってしまった。
• スライドの文字が小さい部分があり遠くの方から見えにくかった。
• グループディスカッションに時間をあまり割けられなかった。
• 時間を延長してしまった。

今後の取り組み

最後にご紹介したデジタルスケープのワークショップは、下記からご覧いただけます。

• デジタルスケープ｜セミナー・トレーニング
• 坂本貴史氏に学ぶ、WebディレクターのためのIA入門｜ワークスコーポレーション

今回の反省点を活かして、さらにパワーアップしてお届けしていきます。

• CSS Nite LP, Disk 7「IAスペシャル」が終了しました | CSS Nite公式サイト

関連エントリー

• 最適なメインメニューを考えてみよう (CSS Nite LP7 Redux 01)
• CSS Nite LP7「IAスペシャル」