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研究会開催しました | 情報デザイン研究室

© All rights reserved by snerdinski

時代の潮流と逆行する考え方かもしれませんが。

デジタルガレージのイベント「New Context Conference 2011 Fall (Lean Startup Camp Tokyo)」および「Lean UX」関連のイベント「第7回 #ShibuyaUX Meeting “Lean UX Special”」に参加して思ったことを書いておこうと思います。

「Lean UX」という言葉を最近よく聞くわけですが、いろいろと見聞きした結果、個人的には非常に消化不良なテーマだと感じました。「Lean UX」については、LUXr社のJanice Fraserさんの東京でしたワークショップのスライドをご覧ください。

サイクルを早くする (スピードを上げる) ことは、効率を考える上で必ず出てくる話なので、それ自体を否定するわけではないのですが、それもこれも一定の品質保証ができてはじめて言えることだと思っています。

たとえば、ローンチを早くしてローンチ後にFBをもらって向上していくというサイクルがよく示されたりしますが、ローンチ後のFBで変えられる範囲はごく限られます。それこそボタンの位置や装飾の度合いなどだったりするでしょう。あとでゼロから作りなおすことができる状態であれば別ですが、そんなことはまずありえないです。

「Lean UX」の事例を質問したところ、A/Bテストを解説していたときの違和感も記憶に新しいです。A/Bテスト自体は分析方法の1つで、それを解説されてもただのPDCAサイクルとなんら変わらないことは自明です。

なんだかんだで、はじめて目にするUIがすべての印象を形成すると思うので、その後すぐに変えたからといって、はじめの印象が変わるとは思いません。そうすると、この「Lean UX」で言っている文脈では、印象やブランドを形成するデザインに関する話がすっぽり抜けていると思うわけです。

分析結果をもとに良い方向に変えていくことを否定するつもりはないのですが、そこだけに偏ると数字至上主義にもなりかねない傾向になると思います。

「UX」と言うからには入っていて然るべき「ブランド」や「ブレてはいけない部分」が、検討期間や実装期間を早めることでスポイルされてしまわないようにしないとダメだろうなと改めて痛感しました。「期間が短い = 品質が低い」とならないようにしないといけないと思います。

そんなわけで個人的に「Lean UX」は、一定の品質保証ができてはじめて言える開発手法だと思います。

「Lean UX」とか言う前に「ブレてはいけない部分」の品質を高めることにもっと時間をかけたいと思いますし、その品質が保証できないのであれば、ローンチするのではなく撤退することを判断できるチームワークが必要だと思います。

先週末 (6/4 (土))、情報デザイン教育研究会が主催している「WebUX研究会」に参加してきました。今回は第4回目ということで、これまでにも参加されたことのある方が多く、産業技術大学で「人間中心デザイン」を履修された方も多かった印象でした。HCD (Human Centerd Design) について学習されている方も多く、渋谷界隈で「ShibuyaUX」というコミュニティをつくり活動している方々の発表がありました。※詳しくは、浅野先生のブログ (前編・後編) を参照してください。

当日は、その雰囲気に飲み込まれそうになるくらいアットホームな空気に包まれていたわけですが、そうした中で「WebとUX」についてテーマで話すことになったわけです。話したテーマは「UXデザインプロジェクトガイド」。ちょうど「IAシンキング」が発売されてまもなく書店で見つけた翻訳本が元です。もともとRuss Unger氏の洋書は手元にはあったのですが、翻訳されていることをまったく知りませんでした。

今回のプレゼンは1人30分以内ということで、その短い間にどれだけ記憶に残るプレゼンをするかがポイントと考えていたわけですが、その中で前述した背景や参加者が想定できたため、あえて「手法やモデル」の話には触れず、それを現実のものにするための視点 (ここではプロジェクトのエコシステム) をプレゼンに加えようと考えました。それと「IAシンキング」にも書きましたが、見えにくいタスクを見えるようにするという意味での「タスク化」そうすることではじめてできる「対価への変換」をメッセージに持ってきたいと考えるようになりました。

対価にすること、タスク化すること

これは、受託側の視点と思われてしまいそうですが、必ずしも受託側だけの視点ではなく発注側の視点にも重要な視点だと思います。そうしたことを考えずに、手法やモデルの話をしているだけだといけない、正直「ただの趣味」になってしまっては意味が無いと感じました。これは、ただの学生の発表会ではないわけで、ただの趣味友達の集まりではないわけで、実際の現場で実践できる人たちの集まりなのだから、どう価値を高めて、まわりの人に (それこそHCDやUXを知らない人たちに) どう理解してもらえるかを真剣に考える機会だと思い、あえてそうした視点でお話をさせていただきました。もちろんプレゼンターは、ボク以外にもCAの鈴木さん・GMOの伊藤さん・ECナビの榎本さんや千葉工大の安藤先生・楽天の脇坂さんがいたことも、そうしたエッセンスにさせてもらった理由でもあります。

なお、今月末 (6/25 (土)) に実施する「第58回 日本デザイン学会 春季研究発表大会」でも同じ講演とパネルディスカッションをするわけですが、オーディエンスがこれまた違うのでどういう反応になるのか今から心配です……。

先週まで、ワークスコーポレーションと共同で「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.

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

「カードソティング」という言葉より、品質管理でいう「新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」というスライドがあったのでご紹介します。

IAAJでも公開しましたが、来る9月4日 (金) に、IAカクテルアワーを行いたいと思います。前回からかなり時間が空いてしまいました。前回までの活動風景はFlickrで「iaaj」タグで検索していただけるとご覧いただけます。

• Flickr: “iaaj”

今回は、(株) ビジネス・アーキテクツの奥さんから6月に参加されたUX Insentive (サンフランシスコ) の参加報告をしていただけることになりました。
現地でのワークショップということですので、日頃の共有方法やブレストなどで参考になることが多いかと思います。興味ある方がぜひご参加ください。

【IA Cocktail Hour Tokyo】
内容: UX Insenticve参加報告
日時: 09/04 (金) 18:30～21:00
場所: (株) ビジネス・アーキテクツ 会議室
定員: 30名～40名程度
会費: 1,000円程度 (ドリンク代)
主催: IAAJ
協力: (株) ビジネス・アーキテクツ

人数制限としては、30名～40名程度とさせていただきたいと思います。
参加表明は、直接 <entry@iaaj.org> までメールをお送りください。氏名 (できれば読みがな)、所属先、メールアドレスを記載ください。

■補足

UX Intensive
2009年6月14日～17日にサンフランシスコにて開催。
プロダクトデザイン、UI、オンラインサービスのユーザーエクスペリエンス構築のステップアップを目指す、UXプロフェッショナル向けの4日間のワークショップ形式のセミナー。1日づつテーマを分けて実施。

• 1日目: デザイン戦略
  デザインをビジネスへの関連性を明確にしていくために必要なツールを紹介。
• 2日目: デザイン調査
  最も利用して欲しいユーザーの洞察を通してデザインに役立つ情報を収集するアプローチを紹介。
• 3日目: 情報アーキテクチャ
  今回は通常のIAプロセスではなく、メタデータ、コンテンツ分析、検索、分類とサイト構成例についてのアプローチを紹介。
• 4日目: インタラクション・デザイン
  モデル化やデザインコンセプトの制作から、クイックプロタイピングまでのアプローチをテスト課題に沿って実践。

Adaptive path Inc.
米国を代表する、ユーザーエクスペリエンスをテーマにプロダクツから、ウェブサービスのデザインコンサルティングを行う会社。
「Ajax」を命名した人物としても有名なジェシー・ジェームス・ギャレット氏は、「blog」の命名に貢献したといわれるピーター・メイホールズ氏と共に創設メンバーであり、共同経営者。

■関連URL

• adaptive path >> product experience strategy and design
• [bA] Business Architects Inc.

以上、よろしくお願いします。

IA Summit 2009およびUIE Web app Summitに引き続いてまた海外でUX系のイベントです。

6月15日〜17日まで、カンバーランド (ロンドン) で「UX London」が開催されます。
IA Summit 2009で配られていたチラシでも見ていたので非常に気になってはいたのですが、すでに売り切れの模様……。

写真はFlickrで「uxlondon」で見れます。

それはそうと、海外でのイベントのスピーカーはどこに行ってもほとんど同じですね……。以下がUX Londonのスピーカーですが、やはりIA Summit 2009でも講演されていた方が多数います。個人的にはまだ聴けていないLuke Wroblewski氏の講演に一度参加したいと思ってはいるのですが、なかなかその機会がありませんね。

Speakers

• Don Norman (Nielsen Norman Group)
• Leisa Reichelt (User Experience Designer)
• Dan Saffer (Principal, Kicker Studio)
• Luke Wroblewski (Senior Director, Yahoo!)
• Jared Spool (Director, UIE)
• Jeff Veen (Entrepreneur)
• Eric Reiss (CEO, FatDUX Group)
• Peter Merholz (President, Adaptive Path)

それにしてもこのサイト非常にキレイですね。「Silverback」で有名になったClearleft社の協力のようです。Clearleft社ということはAndy氏が代表を務める会社ですが、この会社のサイトもやっぱりキレイです。

しかし、「UX」という冠がつくことがひっかかりますね。IA Summit 2009でJesse James Garrett氏が話された「The Memphis Plenary」の一文に影響を受けてのことですが、「UX」という冠にしてしまうとすべてが包含されてしまうので、これからはすべて「UX」がつくのかと考えさせられてしまいます。

Fred Beecher氏は「Axure」についてもワークショップを開いていたりするようですが、これに関係して「ワイヤーフレーム」や「プロトタイピング」に関するエントリーがあったのでご紹介します。

まず「Get Wireframing」という下記エントリーですが、すごいですね。よくまとめたなと感心してしまいます。

• Get Wireframing: The All-In-One Guide | Hi, I’m Grace Smith

内容は下記のアウトラインになっているので、すべてがいいリファレンスになりますな。
「Article」などは個別に集めてたまに読む程度だったのですが、まとまっているのでいつでも参照できます。

• Techniques
• Tools
• Wireframe Examples
• Wireframing Articles of Interest
• Paper Prototyping
• Useful Wireframing Resources
• Kick Ass Books

次に「16 Design Tools for Prototyping and Wireframing」ですが、これはツールを16個あげてそれぞれをレビューしています。

• 16 Design Tools for Prototyping and Wireframing [Design Practice]

と、この2つのエントリーだけでもリストアップしてみると24ものツールがあることになります。
もちろん「multifunctional applications (多機能なツール)」としてしまえば、世の中のほとんどのツールが含まれてしまうかも知れませんが。

これからツールを検討しようとしていた場合、このリストアップは参考になるのではないでしょうか。ボク自身触ったことがあるのはごくごく一部のような気がしますので時間のあるときにでも試してみたいと思います。

1. Visio – Visualize, explore, and communicate complex information.
2. OmniGraffle Pro – Create diagrams, process charts, quick page layouts and website mockups
3. Axure RP Pro – Rapidly create wireframes, prototypes and specifications for applications and web sites.
4. iRise Pro
5. Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.
6. SmartDraw
7. MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
8. Balsamiq Mockups – Easily and quickly created rough mockups with predefined elements
9. Lucid Spec
10. ConceptDraw Pro
11. iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
12. Go Analogue
13. PowerPoint or Keynote
14. Adobe Fireworks
15. HTML
16. Adobe Flash
17. Fluid IA – Agile UI Prototyping
18. OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
19. Justinmind – Design a wireframe and test their web usability
20. EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
21. Gliffy – Create website wireframes and share web mockups with anyone.
22. Jumpchart – Online collaborative wireframe
23. Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
24. Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.

UX Australia

「UX Australia 2009」が、キャンベラ (オーストラリア) で3日間 (8/25〜8/27) 開催されます。
こちらの「Call for proposals (CFP)」がDonna Spencerさんからから告知されていましたので引用します。オーストラリアのIAコミュニティは一度参加してみたいですね。

• UX Australia 2009

We are very pleased to announce the call for proposals for UX Australia 2009. 
The conference program for UX Australia 2009 will be based on your input, to ensure that the conference reflects current user
experience practice and also reflects the types of presentations you would like to see. 
We are calling for proposals for main conference presentations and for pre-conference workshops.

• Call for proposals – main conference < UX Australia
• Call for proposals – pre-conference workshops < UX Australia

開催までのスケジュール (The Key dates) は以下のようになっています。

• 16 Feb 2009: Call for proposals open
• 29 Mar 2009: Proposals close (this is not a flexible date – we will close on midnight AEST this date)
• 30 Mar 2009: Reviewing starts
• 11 Apr 2009: Speakers notified
• 1 May 2009: Conference registration opens (with full program available)