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

先週 (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年はこの本の発売からはじまるということで。

「アンビエント・ファインダビリティ」や「デザイニング・インターフェイス」、「マイクロフォーマット」の翻訳でご活躍の浅野さんのブログにもあるとおり、ここ最近「IAI (Information Architecture Institute)」のMLで「UX (User Experience) Book Club」という読書会のプランについての議論が非常に盛り上がっています。

• IA Spectrum: 「UX Book Club Tokyo」、実現に向けて。

UX関連での書籍といえば、「Rosenfeld Media」のウェブサイトでも購入できる「MENTAL MODELS」や「WEB FORM DESIGN」などが一番わかりやすいかと思います。

• MENTAL MODELS: Aligning design strategy with human behavior
• WEB FORM DESIGN: Filling in the Blanks

ただ、どちらも洋書というだけあったなかなか手が出せない方も多いと多いと思いますが、そんな方にもこの「UX Book Club」は後押ししてくれるいい機会になると思います。

• tokyo [UXBookClub.org]

「UX Book Club Tokyo」は、東京で開催を計画しているUX関連の読書会です。実現に向けてのアイデアやご意見をぜひお寄せください。 参加にご興味をお持ちの方は、以下のメンバーリストにお名前とコンタクト情報（メールアドレス、ブログURL、各種SNSのアカウントなど）を追加してください。5名を超えるようであれば、発起人の浅野が中心となって具体的にプランニングを進めたいと思っています。

まだ、活動自体は明らかになっていませんが、すでに参加を希望している有志が名前を連ねているようで、そんなボクも参加を希望させていただきました。

自分でもなかなか読書に時間を避けなくなってきているので、この機会にまた読書するサイクルにできればと思います。というわけで、今後の期待する取り組みとしてご紹介します。

尊敬する山岡俊樹という大学教授がいるのですが、氏が編著した書籍『デザインセクションに見る 創造的マネージメントの要諦 (ようてい)』を紹介します。

Amazon.co.jp： デザインセクションに見る創造的マネージメントの要諦: 本: 山岡 俊樹

デザイン畑からシステムを考える今の自分の立場からしても非常にわかりやすく、まとめて読むことができるので、オススメです。

ここで述べられている一部を要約すると、「デザイン」を以下のように分類にすることができるらしい。

1. 可視化作業
2. システム系デザイン業務
3. 研究業務
4. 調査業務
5. 評価業務
6. 提案業務
7. ソリューション業務
8. 全社業務

いずれも、「有機的思考力である論理力」が必要な能力としているので、まさに今求められていることとシンクロします。もちろんADにしろIAにしろ同じデザイン業務として一緒に考えています。

また、「考える作業」と「実行する作業 (可視化)」とで分けた場合、「考える作業」にウェイトを置くべき (教育機関は注力すべき) とあります。こちらも納得。

さらに、「デザイン」には、既存の学問である――コンピュータサイエンス、人間工学、認知科学、システム科学、経営学、社会学、統計学、機械工学、建築学などが下支えをするため、これらのうち2つ以上をマスターする必要がある、とも謳っています。

たとえば「人間工学 > デザイン」の人材であれば、ユーザリクアイアメントの抽出やユーザビリティ関係の業務をこなすことが可能であろう。という具合。

いろいろあるので自分で読んだらいいと思うのですが、デザインの分類について少し詳細を書き出すと以下のようになります。

01) 可視化作業

工業デザイン、パッケージデザイン、グラフィックデザイン、他

02) システム系デザイン業務

ユーザーインターフェースデザイン、ユニバーサルデザイン、エコロジーデザイン、他

03) 研究業務

人間工学研究、感性工学研究、認知研究などによる人間系の研究、多用なユーザーの基礎データベース構築 (生理・認知・身体など)、システム系の研究、他

04) 調査業務

ユーザリクアイアメント抽出、ユーザ調査、他

05) 評価業務

ユーザビリティ評価、ユニバーサルデザイン評価、他

06) 提案業務

商品提案 (単なる形状提案ではなく、商品計画をも包含)、コンセプト構築、他

07) ソリューション業務

システム設計のユーザ部分、システム提案、コンセプト構築、システムの運用面の構築 (マクロエルゴノミクス)、他

08) 全社業務

ブランド戦略、CI、他

自分が、これらのうちどういう分野の業務が得意か、どういう分野に興味があるかなどを計る指標にもなるかなと思います。

karadesign原さんからのお声がけで『プロセス オブ ウェブデザイン――企画からデザインへ 落とし込みの技術 (WEB CREATORS LAB. 著)』への寄稿をしましたのでご紹介。

本邦初！「Nokia」「トヨタist」「KDDIリスモ」…etc.
ウェブデザインの過程で発生した実際の企画書、ラフ、仕様書など全てを見せて解説！

　本書は、デザインが生まれるプロセスで発生する成果物（企画書、ラフ、スケッチ、メモ、モックアップ、プロトタイプ、サイトマップ、仕様書、要件定義などなど）を題材にして、ディレクションを行う立場の人が折々で発生する問題をどう解決していくか、同時にクライアント、その上司、デザイナーといった立場の人が行うべき大切なことも含めて、実際の事例に関わった人が解説していきます。
　制作の方法やワークフローに関する書籍は多数出ていますが、依然としてウェブのデザインプロセスで生まれる成果物はブラックボックスに包まれています。実例を中心に扱った書籍はありません。ウェブ業界に携わる方、これから業界を目指す方にとって非常に価値ある一冊です！！

■スペシャルインタビュー■
KDDI：1年の構想を経て、「LISMO」デザインが誕生！
Method：国際的なWebデザインの落とし込みプロセスがわかる！

■事例（抜粋）■
◆ガリバー221616.comプロジェクト
◆Tokatsu Film Festival 2005 東葛映画祭
◆Nokia6680 Vodafone 702NK IIのブランディングサイト
◆id＝Nagano「長野のWebを楽しく」
◆ブログdeバーチャル駅長の一連プロジェクト
◆マクロメディア「EIGHT THE PROJECT」プロモーション
◆くすぐるスタイルist
◆auトップページのリニューアル
◆ラーメン花月ショップサイトリニューアル

ということで、昨年末から原さんからお誘いのお話があってから幾度かの修正などを経て、なんとかAmazonで予約可能にまでなりました。

わたしは、目次にある「auトップページのリニューアル」を12P程度ですが担当しています。

この書籍の企画は、10数人の現場で活躍するディレクターを対象に事例を紹介し、デザインに落とすまでのプロセスをフィーチャーしたものです。

現場のラフやサンプルも掲載してあるので必見です。

「Webディレクション標準ガイド」発刊にあたって | コラム | ミツエーリンクス
http://www.mitsue.co.jp/column/backnum/20050325a.html

株式会社ワークスコーポレーション
http://www.wgn.co.jp/shop/books/info/3059/

今、企業や制作会社が一番求めている最強のWebディレクターになれる本！

Webの知識はもちろんのこと、トレンド対応力、マネジメント能力、コミュニケーション能力、
情報設計力、分析能力、企画力･･･Webディレクターに求められるものは多岐に渡ります。
プロジェクト始動からサイトの設計・構築まで、Webディレクターに求められる、
「ディレクションスキルと即戦力ノウハウ」を身に付けるための1冊です。

だって。

こういう教育用の書籍とかは会社に置いておけばいいですかな。

Research-Based Web Design & Usability Guidelines
http://usability.gov/pdfs/guidelines.html

に「Research-Based Web Design & Usability Guidelines」というガイドラインの情報があります。

これをアクセシビリティについて活発な活動をされているインフォアクシア (植木さん) が翻訳されているのでご紹介。

『Research-Based Web Design ＆ Usability Guidelines』日本語訳 ? インフォアクシア
http://www.infoaxia.com/resources/research_based/index.html

最近更新された「第2章：ユーザー・エクスペリエンスの最適化」なんかはまさにウチが専門分野としてあつかっている分野なだけにこういう活動 (翻訳) には脱帽です。

第2章：ユーザー・エクスペリエンスの最適化 ? インフォアクシア
http://www.infoaxia.com/resources/research_based/chapter02/index.html

Designing for the Scent of Information
http://www.uie.com/reports/scent_of_information/

Designing for the Scent of Information
The Essentials Every Designer Needs to Know About How Users Navigate Through Large Web Sites
By Jared M. Spool, Christine Perfetti, and David Brittan

ということで、大規模サイトにおけるナビゲーションなどを科学的にまとめたレポートが出版されるようですので、メモ。

下記のようなことが書かれているらしいので見てみたいんだけど、いかんせん英語だけだと辛いものがあるので翻訳されることを祈る……。

• An Introduction to Scent. We start with an example of what scent looks like when it works. You’ll see how a user successfully works their way straight to their desired content, hidden deep within HP.com’s web site.
• Things that Block Scent. We’ll then walk through some of the most common ways designers block scent on web sites: iceberg syndrome, camouflaged links, banner blindness, links that lie, missing words, and misplaced links. You’ll see examples of both good and bad trigger words from a variety of sites, such as the sites for the Boston Globe and the Discovery Channel.
• Navigation-Panel Shell Games. You’ll see the problems we frequently find with navigation panels and global navigation. We’ll show you some classic problems from Amazon.com, Fidelity.com, and other sites, as they try, unsuccessfully to help users move toward their targets.
• Longer is Better. What is the optimal length of a link? How long should your pages be? Looking at the data we’ve collected in thousands of clickstreams, you’ll see exactly how long your links and pages should be, including insightful examples from CNN and Sprint.com.
• The Scent of Graphics. Our research has identified and classified the three types of graphics: navigation graphics, content graphics, and decorative graphics.