『モバイルIAシンキング』発売中止のお知らせとお詫び

先日発売されました書籍『モバイルIAシンキング』ですが、諸事情により発売を中止することになり、書店より回収することが決まりましたのでお知らせいたします。

また、書籍の発売と連動するイベント(東京・名古屋・大阪・福岡)についても中止が決まりましたので、重ねてお知らせいたします。

関係者のみなさまには、多大なるご迷惑をおかけしたことを深くお詫びいたします。

発売中止にともない、書籍に関連する情報については一部ご覧いただけない箇所がありますので、ご了承ください。


TOHOKU seminars and volunteer #6

東北セミボラ南相馬ボランティアセンター

先週、4/4 (金) に仙台(せんだいメディアテーク)で開催されたWeb広告研究会主催の第六回東北セミボラに参加してきました。

トライバルメディアハウス池田さん電通レイザーフィッシュ得丸さんという豪華なスピーカーとともに、ボクが担当するIAセッションでは、ツルカメ森田さんグリー村越さんインテリジェントネット和田さん専修大学上平さんとで登壇しました。

今回は、森田さんから事前に声をかけてもらい、IAセッションを担当することになったわけですが、ただの講義スタイルではなく、その場で要件を詰めていく過程をワークショップのようなカタチにできないか、という話からはじまりました。

プレゼンテーション

IA/UXワークショップ(カバー)

閲覧パスワードは「webken」です。

今回のワークショップでは、ボクが司会を担当することになったので、お三方に意見をいただきながら森田さんがリアルタイムドキュメンテーションするという格好になりました。なのでスライドはその場で話を進めるための頭出しにしかなっていないので、中身はありません。

ただ、課題となるRFPづくりを上平さん・和田さんとで作成いただいたため、議論がブレないようにすることができました。今回の課題の題材は「東北物語」のモバイルサイトのリニューアルです。

IA/UXデザインワークショップ

ワークショップの内容

セッション時間が70分というかなり少ない時間の中で、IAのエッセンスを注入したワークショップを構成するため、なかなか難しい作業でしたが「コンテクストを整理する」という部分にフォーカスして話ができるようにしました。ここで言うコンテクストとは「目的・ユーザー・コンテンツ」を指しています。

ディスカッション

途中で、いくつかボクのほうから質問を投げさせていただきました。

  • RFP受領時にどういう点を気にするか?
  • サイトの印象はどうか?
  • どういう目的のサイトだと思うか?
  • どういう人が利用するか?
  • いつ利用されるものか?
  • 目的に戻ると、コンセプトはどういうものが考えられるか?
  • コアコンテンツはなにか? コンセプトを考えると足りているか?

やりとりの内容は、森田さんがタイピングしていただいているので、後日整理したものを村越さんのほうでまとめてもらう予定です。

当初は、ホワイトボードを使うことや付箋に書いてマッピングするなども考えていたのですが、進め方の詳細まで事前のすり合わせがしきれなかったことと、思ってたよりも時間が足りないことがわかったため、結果としてはそこまではしない判断をし、パネルディスカッション風なものにしました。

したがって、いくつか反省点はあるものの、コンテクストを決めることの大切さやその際気をつけなければならない客観性コンセプトの重要性などを、参加いただいた皆さんといっしょに共有することができたと思います。

懇親会

懇親会では、「IAシンキング」を持参いただいた大学生もいたり、得丸さんとオムニチャネルについてのお話をしたり、東京でもお会いしたことのある方々ともお話ができたので、とても有意義な時間を過ごすことができました。

また、IAセッションの登壇者どうしでは反省点をふまえて、グレードアップしたものを、和田さんが主催をされている Websig 24/7 とかで再演できればと話をしましたので、以降でまた計画したいと思います。

ボランティア活動

翌日は、南相馬でボランティア活動に参加しました。

ボランティアの概要は、花王本間さんのブログをご覧いただくとわかりますが、はじめてのボランティア参加ということで、だいぶ身構えてしまっていました。

というのも、東北セミボラの募集ページのほうにも書かれていますが、事前に十分な装備が必要な点。まずはボランティア保険への加入。厚手の軍手に、踏抜き防止のワークブーツ。粉塵防止のマスクにゴーグルなどなど。前日に東急ハンズに買出しに行きました。多分こういうことでもないと買わないだろうな、と思う防災グッズの数々。ただ一度揃えてしまえば、東京で震災が起きても安心です。

ボランティアセンター略して「ボラセン」という言葉を聞くのもはじめてでしたが、南相馬ボランティアセンターで事前にオリエン。現地へはバスで向かったのですが、途中に津波被害に遭った箇所をくぐり抜けて到着。細い路地をなんなくすり抜けるバスの運転手に拍手喝采。

一軒家を丸ごと撤収する具合で、付近の雑草や木の伐採からはじまり家屋の荷出し。昼の休憩時には、いったんボラセンに戻りカップヌードルをいただくなどのおもてなしには感動しました。休憩後、最後の荷出しを精一杯やりきって完了。皆で記念写真も撮り、一軒家のオーナーにもご挨拶し帰路。文章にすると数行ではありますが、非常に中身の濃い一日になりました。

今回はじめてボランティア活動に参加したわけですが、なかなかこういう機会でもないと団体活動には参加しない方なので貴重な経験ができました。一度参加しただけではありますが、今後こうしたボランティア活動に対して見る目が変わったと思います。参加してよかったです。そういえば、当日の服装は経験者たちは皆ツナギを着ていたのが印象的だったので、今度参加するときにはツナギを着て参加したいと思いました。

牛タンと仙台

仙台に行くのははじめてだったのですが、到着してからすぐに利久牛タンを食べ(その頃、村越上平ペアは「真助」で牛タン)、ボランティア終了後に喜助牛タンを食べたので、まさに「牛タンではじまり、牛タンで終わる」という経験をすることができました。お土産も「伊達の牛たん」にしたし。

ただ、伊達政宗像に会えず終いだったのが心残りですので、またぜひ行きたいと思います――杜の都仙台へ。ボクの中ではずっと青葉城恋唄が流れていたというのは内緒です ;)


CSS Nite LP33 UI/UX – Bridge Builder

2014年3月29日 (土) に開催したセミナーイベント CSS Nite LP33 「UI /UX」で登壇しました。当日はとてもいい天気で、桜が満開に近かったです。

CSS Nite LP33 UI/UX撮影: 飯田昌之

登壇者は7名で、クックパッド池田さんソシオメディア上野さんチャットワーク新免さんツクロア秋葉さんグッドパッチ土屋さんギルド深津さんといった、とても豪華な講師陣でした。テーマは「UI/UX」と最近よく耳にするテーマだったこともあり、参加者も多く240名の会場が満席。再演版も予定しています。

登壇が決まってから、ほかの登壇者が決まっていったこともあり、どういう内容にすべきかかなり頭を悩ましました。当初「IA…」としていたのですが、ほかの登壇者のシナリオやイベント全体の構成を見直して考えたときに、とある会 (なぞ) で話していた結果「Bridge Builder」としました。途中で変更したため、取り消し線が引かれています (汗)。

実は、とある会にいたヤスヒサさんも「デザインにある繋げること、導くこと」という記事で、同じようなことに触れているのが興味深い。

プレゼンテーション

Bridge Builder とはWeb情報アーキテクチャの著者の一人 Pete Morville のブログ「Information Architect」から拝借したものです。

ボクは今回のイベントテーマにもある「UI」と「UX」には「」があると考えます。UXからインプットを得てUIを作る場合、UIを利用することでUXを作る場合とがあります。立場によって、そのワードに対する心象は異なるため、そうした視点の違いとして紹介できればと思いました。

イベントの構成としても、UXの専門家がいる一方UIの専門家がいます。それを考えると、それらをつなぐことがボクの役割であり、それ自体が「IA」と呼べないだろうか、そういうふうに考えて構成を練りました。

アジェンダは、以下の4つです。トップバッターということもあり、イベント全体のオーバービュー的な位置づけにもなればと思いました。

  • ブリッジビルダーとは
  • ジャーニーマップの要求整理
  • タッチポイントのデザイン
  • デザインパターンの活用

ブリッジビルダーとは

物事にはいつも2つの視点があります。上司と部下、クライアントとパートナー、そしてデザイナーとエンジニアなどまで。そうした視点の違いはどこでもあることだと思いますが、それを片側だけを聞いて「違う」と判断するのは早合点だと思います。さまざまな視点を前提としたコミュニケーションが求められます。

ジャーニーマップの要求整理

ジャーニーマップはなぜ作成するのか? その答えは「要求事項」にこれまで出てこなかったことを明らかにすることです。これまでの方法で明らかにできるのであれば、ジャーニーマップは作成する必要はありません。これまで出てこなかったこととは「クロスチャンネル・タッチポイント・マルチスクリーン」の3つになります。

タッチポイントのデザイン

マーケティング全般において、Webサイトやアプリは1つのプロダクトに過ぎません。ただし、サービスエクスペリエンスを考えると、そのプロダクトの持つタッチポイントは重要なキーファクターになります。したがって、プロダクト全体をリニューアルする考え方から、サービス全体を見直しその接点をリデザインするという考え方に変える必要があります。

デザインパターンの活用

抽象的な物事を具現化するのは高度なことです。それを助けてくれるのがデザイナーやエンジニアとの共通言語になります。またそれを視覚的にも支援する手段として、デザインパターンの活用が考えられます。IAパターンUIパターンとで説明しました。

講演ログ

今回は、講演ログを Storify でまとめてみましたので、こちらも合わせてご覧ください。CSS Nite 公式アカウントによるツイートや、関連情報などをまとめています。その他の登壇者のお話も面白すぎたので、別途書こうと思います。

今回、一番驚いたのが運営側のプロ意識の高さです。鷹野さんはじめ運営スタッフの皆さんはとても意識が高いのを感じました。まず、豪華な講師陣と説明しましたが、みなさん忙しい中スライドを準備していますが、鷹野さんチェックにより、細部にまで校正が入ります。文字が小さくて読みづらい、文章がおかしい、色のコントラストが弱いなど。ボクもフォントがおかしい点を指摘され、全て直しました。

CSS Nite は、5年前に一度「IAスペシャル」で登壇して以来でしたので、はじめどうなるかと思ったのですが、後半に畳み掛ける「プロトタイピング」のお話はおおいに盛り上がり、決してほかでは聞けない貴重な機会になりました。アンケートも見させていただきましたが、参加された方々の理解力に助けられたところがあるなと正直思いました。本当にありがとうございました。

個人的には、Prott 絶賛ベータ版公開中の土屋さんとお話ができたのでとても楽しかったです。

再演版

再演版を 4/26 (土) に予定しています。こちらはまだ空席があるそうなので、参加できなかった方はぜひお申し込みください。


small IA manifesto

small IA manifesto

Small IA 宣言――個人的には、こういうアプローチを明示することが一番わかりやすいと思います。

4月頭に、Web広告研究会でIAセッションを実施するのですが、そのすり合わせの会で、ツルカメの森田さん・GREEの村越さん・インテリジェントネットの和田さん・専修大の上平さん・日本アドバタイザーズ協会の林さんとでそうした議論があったのでボクの意見を加えてブログに書いてみます。

最近「サービスデザイン」や「UX」で語られる内容を聞いていても個人的には「?」なことが多いので、そうした考えをオープンにしてみようと思います。

ボクの手元では、いわゆるワイヤーフレームを設計している中で衝突する問題と対峙していることが多いです。そのため、その問題解決方法としてのワイヤーフレームの設計は「」が付くくらい重要です。

そんな中で、サービスデザインやUXの話を聞くと正直むず痒くて仕方ありません。多分「サービスデザイン」という一般的な言葉が余計にそうさしているのかも知れませんが、そのサービスを実現するためのUIはどうなるのか、さまざま事象を通じて顧客との接点を形作る1つのアプローチになることは間違いないわけなので、それが描けてこそデザインになるのだと思います。抽象的な概念を経たうえで、「結局、この画面はどうなるんですか?」が具体的に描けないと絵に描いた餅になってしまいます。

言葉としても「サービスエクスペリエンス(SX)」という言葉のほうが妥当性があるようにも思えます。ボクの仕事は、いわゆるサイトやウェブのプロダクトを制作していることもあるので、さしづめ「プロダクトエクスペリエンス(PX)」になるのだと思います。

視点の話でもよく話していますが、結局は「あなたの仕事はなんですか?」「あなたが一番したいことはなんですか?」に尽きるのだと思います。いろいろな視点があり、いろいろな考え方があることは自明なので、それ自体は一向に構わないのですが、結局「あなたは何ができますか?」「あなたは具体的に解決策を作ることができますか?」に尽きるのだと思います。

たとえば、今バナーを作っている方が、サービスデザインやUXを学ぶことはいいと思うんです。いいと思いますが、どちらかというと「お前の手元の仕事を完璧にしろよ」と思ってしまいます。それが本質であり、それが仕事だと思うんです。知識はあるといいですが、結局は手元でどう活用するかだと思います。その距離が遠ければ遠いほど、話す価値は薄まり手元の問題には対峙できなくなります。

ワイヤーフレームを描ける人が一番偉い

結局のところボクはそう思っています。実際、ボクの仕事はさまざまな事象を瞬間的にとらえてワイヤーフレームに起こす仕事がほとんどです。その瞬発力は、やはり泥臭い地道な経験でしかないと思います。これまでの経験から、どんな課題でも具体的な解決方法としてワイヤーフレームに落とせると自負しています。それは非常に高度なスキルであり、すぐに出来るものではないと思います。

また、よく Big IA や Small IA で分けられてしまい、Small IA はあまり価値がないように聞こえてしまうことがありますが、それには断固反対したいと思います。

ということで、近々「Small IA summit in Tokyo」を企画したいと思います。

マニフェストになっていませんが、ボクの宣言という意味で ;)


Editor's Note #ugf0308

今回の福井のイベントは、「伝説の二日間」になりました。ということで、記憶が鮮明のうちに書いておこうと思います。帰りの電車で書いています。

前フリだった宇多田ヒカル

まず、前日の晩に関係者で懇親会をしたのですが、そのとき集まった「越前千舟屋」では司会の福嶋さん (大先輩) が親戚の人レベル (なぞ) で対応していたことと、同じく司会の中尾さんのUst番組「しゃべくりクマトーク」で盛り上がったことが記憶にあります。

そして、なんといっても店でかかっていた宇多田ヒカルの曲がヘビーローテーションでおそろしく低音が効いていたことが、その場にいた全員の耳に記憶が残っています。講演スライドで、宇多田ヒカルさんのサイトを題材に使ったのは実はこの前フリ (なぞ) が前日にあったためです。

宇多田ヒカルのサイトを題材にしたスライド

登壇者の方々とは今回はじめてお会いしたのですが、その後すぐに駅前の「秋吉」に行くことができていろいろ共有することができました。

その後、中川さんたちは「岩ちゃんラーメン」に行ったそうですが、フェニックス組のボクと田口さんはホテルに戻りスライドの最終調整をすることになりました。あとで聞いたら、ボクのiPhoneのWi-Fiテザリングを田口さんの部屋からも確認できたそうです。

当日朝9時半に福井駅に集合だったのですが、同じホテルの田口さんが遅刻するという珍事もありました。会場に向かう途中、車の中から雪景色をうまく撮れてほくそ笑んだのを覚えています。

イベント会場に到着後には、段取り上手な中川さんがテックリハを声高に仕切っているのが面白かったです。

冗舌! しゃべくりクマトーク

乾杯の挨拶を中川さんが務めた「ふくい産業支援センター」での懇親会では、マッシュアップアワードでグランプリ「melocy」のヤマモりんさんと込み入ったお話ができたり、富山県から参加の方々とは勉強会の計画などをお話することができました。

二次会に向かう車中では、偶然松尾さんとしっぽりお話をすることができました。印象に残っているのは、松尾教授についてご存知の方であればわかると思うのですが、ボクから「松尾教授のTwitterアカウントとかあるといいですね?」と聞いてみたところ、松尾さんは「そうですね」と軽く返事をするかと思いきや「彼に聞いてみます」とさらっと言ってのけたのです! これにはもう脱帽 ;)

二次会では、おもいのほか食べるのに苦労したカニを横目にベトベトになった手で muuk を撮ってまわりにいた人たちに広めてました (なぞ)。終盤には、中尾さんらが田口さんと「しゃべくりクマトーク」の生収録をしている最中で、ボクも呼んでいただけました。多分見ないほうがいいんじゃないかな、と思うくらいだいぶ突っ込んで話をしてますが、ボクの声がかなり聞き取りにくいです。もし興味がある方はご覧ください…(24:32ごろに登場します)。

伝説のジャムセッション

三次会は「秋吉」ということで、行く人(10人以上)徒歩で移動していたのですが途中で諦めることになり少し戻ってバー「Jake」に。ミュージシャンのオーナー(芹沢信治さん)ということで、ステージが半分ある店内で飲みつつしゃべっていたら中川さんが爆睡しだし…そして満を持してオーナーが演奏をしてもらうことになりました。ただのウエイトレスだった女性もマイクを持ち、なんとも愉快なオンステージで楽しませていただきました。

そんな中、ウェブライダーの松尾さんがピアノが弾けるということで、急遽ステージへ。ウォーミングアップだと思う演奏も「ガチやん」と思わずにはいられない上手さで「何ライダーやねん」というツッコミもそこそこに、「楽器とかできる人」の話になったあげく、ボクも「タンバリンならできるけど…」と言ってしまったため、急遽ボクもステージに上がることになりました。

しかし、タンバリンがなかったため、鈴とトライアングルを渡され…。こうして、その日だけの伝説のジャムセッションが実現することになりました。もちろん、わかりにくいけど田口さんらも参加してます。

ピアノ: 松尾さん
トライアングル: 坂本
パーカッション: 田口さん
鈴: 上坂さん
カメラ: 中川さん
ボーカル: ノノカさん
ベース: シンジさん
ギター: ウッチャンさん

秋吉のパワー

ジャムセッションも無事終了し、歌手の方とも記念写真を撮り、そこからまた「秋吉」に14名くらいで繰り出したわけです。このときにはもう23時は過ぎてたと思うのですが、こんな時間でも満席になる秋吉のパワーを実感。

中川さんのプレゼンにもあった「おしいっ」「そうくるかー」と言う、マイナスをプラスに受け取れる日本語講座もあり、通ならわかる「ハンバーグ」と「ミックスキャベツ」を実食し、下ネタも入り高校生か大学生かと思うような野郎だけの飲み会というヘンなテンションになっていきました。

秋吉

一杯の岩ちゃんラーメン

そして、〈締め〉はやはり「岩ちゃんラーメン」ということになり、すでに3時くらいだったと思うのですが急遽全員で向かったのですが、もう終わってしまっていました。ただ、奇跡的に1杯だけ残しておいてもらえたので、はじめてというのもあり、みんなで回し飲みならぬ回しラーメンで一口ずついただきました。

想像よりパンチのあるラーメンで、ホカホカになって解散となりました。あの味は忘れない気がします。そのあとも飲みに行くかと一瞬なったのですが、店に入れず、ある意味みんなホっとしてホテルに帰りましたとさ。

翌朝

翌朝、気づいたらチェックアウト時刻が間近に迫った10時半で急いでチェックアウトをしたそのとき、一枚の伝言メッセージを受取りました。

伝言メッセージ

田口さん、最後まで律儀な方でした ;)

もういろいろなことがありすぎて、書いていても全部書けてるかビミョーですが、とりあえずこんな感じでしたとさ。

ここまで読んでくださった方ありがとうございました。また福井に行きたいなあ (ぼそ)。


Thinking Backwards #ugf0308

アップグレードふくい+ 集合写真

3/8 (土) に福井県のふくい産業支援センターが主催するイベント「アップグレードふくい+ for the WEB」というイベントに参加してきました。福井県に来るのは二度目で、WCAF vol.9「Think of UX」というイベント(2012年11月)に参加して以来です。今回もそのときにお世話になった佐々木さん(オールコネクト)からのお声がけで実現しました。

登壇者は豪華で、田口さん(デスクトップワークス)、坂下さん(ゴンウェブコンサルティング)、松尾さん(ウェブライダー)、松尾教授(matuo大学)、森内さん(ロフトワーク)、そしてトリを務めた中川さん(アンティー・ファクトリー)の6名でした。

プレゼンテーション

ボクの講演タイトルは「モバイルデザインと情報アーキテクチャの課題」で、執筆をしている新刊で考えてきたエッセンスをお話するとともに、Schooでお話ししたような視点の違いによるお話をしました。

構成はだいたい以下3つで、表紙にも書いたタイトルは「逆から考える (Thinking Backwards)」です。ボクが話すのでIA寄りの話にはなりますが、最終的にはUIの話をしています。

  1. ナビゲーションセカンドとRWD
  2. 2つの視点の違い
  3. モバイルにおけるIAパターン
  4. モバイルデザインとIA的課題
  5. 質疑応答

ナビゲーションセカンドとRWD

最近フラットデザインにリニューアルしたソニーのサイトを題材に、レスポンシブウェブデザインをふまえた「コンテンツ・ファースト/ナビゲーション・セカンド」の話をしました。Windows Store App のガイドラインを参照し、Web サイトからアプリへの転換方法としてナビゲーションとコンテンツの切り分けを紹介。

RWDのマルチデバイスのレイアウトパターンを紹介したうえで、進め方として「Responsive Design Workflow」 にもある「ライナーデザイン/リニアデザイン」を説明しています。ソニーのサイトがシングルカラムだったこともあり、3カラム構成の宇多田ヒカルさんのサイトを題材に検証。ナビゲーションセカンドの説明には、前週実施したDevLOVEの参加者(Kutekenさん)のブログからスケッチを拝借 ;)

2つの視点の違い

Schooでも話した2つの視点。たとえば、タレントのサイトを見てこれで十分だと思う方は、プロダクト観点の持ち主です。一方で、これでは不十分だけどWikipediaで調べるし…と思う方はエコシステム観点の持ち主と言えます。

同じように、Webサイト自体(品質や細部)の話をしがちなのは「プロダクトデザイン視点」、マーケティングや背景から見た場合のWebサイトをとらえる方は「サービスデザイン視点」としています。ポイントはどちらか一方だけではない点です。ご自身のバックグラウンドや経験したスキルによって解釈が異なりますが、こうしたタイプ(視点)があることを理解しておくと、相手とのコミュニケーションはがぜん豊かになります。

モバイルにおけるIAパターン

これは「ユーザー体験の構造化」「サイト構造の設計」「コンテンツ構造の設計」などに分けて、情報アーキテクチャがとらえるフィールド(範疇)としてツールやメソッド(デザインパターン)を紹介しています。とくにジャーニーマップに潜む課題や、最終的に必要になるのは結局「要求の整理」にあること、IAパターンとしての種類(表示・遷移・関係性)、増え続けるUIパターンについてご紹介をしています。

モバイルデザインとIA的課題

IAシンキングの定義を自分なりにまとめると―

人間中心デザインに基づいた、情報アーキテクチャの分野におけるソリューションを提供するための手法。

としていますが、JJGの5階層プロセスを前提に「現状を調査し情報を可視化したうえで目的や課題を明らかにし、新たな情報の提供方法を構築すること」を実践し、得られたイシューを最後にいくつかご紹介しています。内容は、画面レイアウトの優先順位・階層ナビゲーションの移行・シナリオの最適化・設計の思想になります。

今回の講演では、表紙タイトルにもあるように「逆から考える」をポイントにしていますが、新刊に取り組む中で見えてきた(ふだん気づかない)視点の違いや実現手段・実現方法としての表現の幅についてお話ししました。今回の「逆から考える」とは、ビジネスにおける問題解決手段を指しています。

問題そのものではなく、理想や目的を考えることから始める問題解決法を指す。

質疑応答

モバイルアプリで参考にある情報について質問をいただきましたが、処理系統別のUIパターンで個人的にもリスペクトしている「UX Archive」というサイトをご紹介。デザイン全般については「dribbble」を見ることで、クリエイターのスキルが判断できるとお話ししました。

全部で9時間にもおよぶ長丁場に加えて参加者も約100名と比較的大きめなこのイベントも、無事終了することができました。終了後の懇親会ではさまざまな方とお話もでき、次につながるイベントになったと思います。

また、今回のイベントについてはイベント前後や裏話も豊富にあるので、次のエントリー「Editor's Note #ugf0308」で公開してみようと思います。


IA thinking for mobile redesign #DevLOVE

先週末に実施した #DevLOVE のワークショップは、30名程度の参加者といっしょに題材のデスクトップサイトをモバイルサイトの再設計をするというものでした。やっと時間の隙間が作れたので思い出して書いてみます。

まず、前提として「IAシンキング」を定義しました。

IAシンキングとは、人間中心デザインに基づいた、情報アーキテクチャの分野におけるソリューションを提供するための手法。
現状を調査し情報を可視化したうえで目的や課題を明らかにし、新たな情報の提供方法を構築すること。

デザイン思考でもそうですが、「アイデア発想法」だけだとなんだかよくわからないのでちょっと細かくなったかも知れませんが、書いてみました。

ワークショップ

本編のワークショップの流れは以下のような流れで行いました。すでにあるデスクトップサイトの画面構成を分析して、ジャーニーマップ的なストーリーにすることで、新たなモバイルサイトの要求を整理します。最後にその要求に応えるモバイルサイトのUIを検討します。

  1. 現行サイトの情報を把握する
  2. ユーザー行動を設計する
  3. 新たな要求から設計する

題材は、ティップネスのパーソナルトレーニングの画面です。最近ティップネスに通っていることもり、検索して探してみたらモバイル対応できていなかったのでちょうどいい題材になりました。

現行サイトの情報を把握する

まず、画面構成を分析してコンテンツを整理します。そのなかで Stephen Hey 著「Responsive Design Workflow」にある「ライナーデザイン (Linear Design)」を紹介しました。レスポンシブウェブデザイン対応に関連して、モバイルファースト = コンテンツファーストの話もするわけですが、コンテンツをどう整理するかを作業としてイメージしてもらうのには非常にわかりやすい例だと思います。

具体的には、レイアウトされた画面要素を一列に並べ直して優先順位を検討するというものです。構造化という言葉を使う場合もありますが、単に並べて考えてみるというだけでいいでしょう。スクリーンサイズの小さいモバイルを考える際にはもっとも基本的なデザインになると思います。

ユーザー行動を設計する

ユーザー像を決めたうえで、シナリオを考えます。そのシナリオは、ジャーニーマップのフォーマットに埋めてもらうようにして、ワークショップ内での共通言語をつくりました。そのフォーマットは、ステージ・行動/心情/思考・ニーズ/課題・タッチポイントをマッピングし、最終的にはステージごとに要求を整理するというものです。こうしたツールを使う目的は、要求事項をひとつの軸で整理することに尽きます。

新たな要求から設計する

ジャーニーマップにまとめたうえで、要求事項に合う画面設計を進めます。その際に1で分析した既存のアセットを把握したうえで、新たな創造をしてみます。このあたりは、非デザイナーの場合とデザイナーとでとらえるレイヤーが異なりますが、非デザイナー向けには講義でもご説明したデザインパターンの適用が有効です。

まとめ

今回のワークショップでは、こうした論理的なプロセスを経験している方と経験していない方とでどうしてもクオリティに差が出てしまいます。たとえば、画面設計をした際に書かれた要素は、どういう要求に答えているのかが対になっていない場合があります。プロセスは上から順に追っているものの、進めていく中でつい思いつきで要素が増えたり「こういう情報も必要だ」という観点で要素が増え続けていく傾向もあります。

こうしたジャーニーマップを使う場合には、ほかの方法でも見つけられそうな情報を組み入れることやヌケモレを防ぐように働きかけることは原則求めないことを作成前にポリシーとして定めておくほうがいいでしょう。

#DevLOVE ワークショップ

以前、「Lean UX への違和感」を書いたボクのブログを DevLOVE の主催者である市谷さんが読んでくださったらしく、そこから今回のワークショップ実施につながっている背景があります。ギリギリまで資料を共有することもできず、バタバタでしたが、無事こうした感想ブログを書けて今はホッとしています。また呼んでいただけるよう精進して参ります。ありがとうございました。


Information Architecture for better apps and site on live broadcasts

昨日 (2/7 (金)) は、1年ぶりに schoo(スクー)WEB-campus でのオンライン配信授業を行いました。タイトルは「よりよいサイトやアプリを作るための、情報設計」です。使用したスライドは slideshare のほうにも公開しています。

よりよいサイトやアプリを作るための、情報設計

実は昨年の12月に実施予定だったのですが、ドタバタしていた時期だったのでリスケさせていただいた経緯があります。お話をいただいた中西さんにはたいへんお世話になっております。ありがとうございます。

ライブIA

当初「ライブIA」をテキストツイートだけでやってみるとどうなるか? というのを検討していました。

ライブIA」とは2009年ごとに Websig24/7IA分科会で取り組んだことで、その場で思考過程を発話して設計を進めていくというものです。当時流行っていた (?) ライブコーディングのIA版 (なぞ) をしてみたつもりです。当時の映像が残っています。このときは自治体サイトを設計していく工程のようですね。

それもあったので、できるだけインタラクティブにできないかと思ったことが骨子を考えるキッカケになりました。こうして前半はできるだけやりとりをする質問形式にして、後半を設計の進め方や考え方についてお話しした構成になりました。

視点の違いを知る

日々の業務でも専門的な議論をしていても、必ず「そう見ることもできるが、こう見ることもできる」が頭にあります。それは流派でも派閥でもなく、ただの視点の置き方の違いでしかないと思います。それをいくつかの質問と合わせて整理してみたので次の4つです。

・エコシステム視点とプロダクト視点
・サービスデザイン視点とプロダクトデザイン視点
・シナリオ視点と画面視点
・デリバラブル視点とダイアグラム視点

ボクは、もともとプロダクト(この場合は、サイトやアプリ)を制作する立場で物事を考えてきたこともあるので、マーケティングの話や今だとサービスデザインの話は正直興味がありません。仕事ではそうした立場で話すこともありますが、一番大事にしたいことは最終的にどういうプロダクトになるのかだと思っています。以下の図は、Adaptive Path社の4事業の図を自分なりの解釈を入れて図にしたものです。

プロダクトデザインとサービスデザイン

シナリオと画面の関係については、日々進化をしている「Gunosy」アプリを題材にして問題提起をお話ししました。「朝刊・夕刊」と「日付」の関係性により使い勝手を弊害しているのでは? というもので、こちらもさまざまな方からご意見をいただきました。

シナリオを画面の関係性

逆工程から考え、目的を変えてつくる

これもいつも使っている JJG JJG:The Elements of Use Experience の5階層のプロセス図をもとに、既存サイトのページを題材にして情報設計からの視点で、そもそもこのサイトの目的は何だったのか? まで分解します。一度そこまで遡れば、次は通常の工程で考えていくと「なぜそうしているのか?」が明確に理解できます。

ユーザーニーズを整理する

そのうえで、違う目的にした場合にプロセスごとにどういうことを検討していくことが必要なのかを再生します。コンテンツの設計をするうえで、直線に並べて整理することで優先順位が明確になるため、モバイルサイトとして画面設計まで進めました。

ワイヤーフレーム

視点を変えて見る

後半はプロセスを遡り、また順に組み立てていく工程を見ることで最初の目的がいかに重要か、それによって後工程がずいぶんと異なるものになることを実感していただきました。前半に多く入れた質問に対しても、参加者が積極的に回答していただけたことで参加者同士の視点の違いも体感していただけたように思います。

後日、録画版も公開される予定らしいので、先日ご参加いただけなかった方もぜひご覧ください。


Playback 2013

statigram best moments photo of 2013

2012年は「IAからUXに向けたベクトル」と書いていたのですが、2013年はまさにその「UX」というワードが一人歩きした年だったと思います。「サービスデザイン」という言葉が議論され「グロースハッカー」という言葉が流行りました。

ブログは8本しか書いていない…。どうも Facebook のほうにつまみ食いならぬつまみ投げをしているせいでブログを書くことがぜんぜんできなくなってしまったようです (TдT)。

ということで、簡単ですが今年も振り返ってみたいと思います。

プライベート

7月に埼玉の山寺に坐禅に行ったのを覚えています。晩は豪雨で蚊も飛んでいましたが「」になることができました。

その8月には休暇も兼ねて長崎で龍馬風の写真を撮り、佐賀県の竹林亭に行き武雄図書館にも行きました。大分の親戚まわりもできました。後半はほぼ常駐案件と執筆も重なりあまり外には出れなかった日が続いた感じですね。

講演

講演は社内外合わせると、13回以上したことになるようです。今年も2月に開催した「World IA Day 2013」にスタッフとして参加できたことや、TEDxTokyo2013で講演したボスのスライドを作成したことが記憶にあります。後半は、学会向けに論文投稿をして発表できました。

・schooで「Webサイトのユーザー体験を高める」Ust授業に出演。
・福岡産業大学「Future Sync vol.3」で講演。
・イマジカデジタルスケープの企業研修に協力 (4日間)。

執筆

新刊の執筆を開始することができました。まだ終わっていません (汗) が、来年2月以降に発売予定です。あとは学会向け論文発表と、HCDライブラリに自治体サイト(OpenUMプロジェクト)について寄稿ができました。

・HCDライブラリ国内事例で自治体サイトについて執筆・寄稿。
ヒューマンインターフェースシンポジウム2013に論文発表。
・新刊の執筆開始(継続中)

仕事

前半は大規模サイトの設計と「UXデザインプリンシプル」づくりを並行し、後半は「オムニチャネル」一色だったのではないでしょうか。足しげく四ツ谷に通ったのを思い出します。

ガジェット

買ったものと言えば、iPhone 5sくらいですかね。とくにガジェット系は買ってない気がしています。あ、昨日「Kindle Paperwhite」を購入してしまいました。

ニュース

6月の WWDC で発表されたアップルの iOS7MacPro が激震だったのではないでしょうか。

そのほかには、イチローの4000本安打、楽天の優勝。楽天さんは取引先なので感謝デーに東京ドーム観戦を招待していただきました。はじめての野球観戦だったのと、乃木坂46が応援で参加していたので興奮したのを覚えています。AKB48の32thシングル総選挙はさっしーが一位となり、「恋するフォーチュンクッキー」のダンスビデオは流行りましたね。2020年東京オリンピックの決定と流行語大賞はついこないだのことですね。

映画

映画は「スティーブ・ジョブズ」や松本人志の「R100」を観ることができました。ってあまり観てないですね。12月は「清洲会議」で笑い、はじめての IMAX 3D シアターで「ゼロ・グラヴィティ」を観ることができました。

アプリ

LINE News」に関心したのを覚えています。あとは、Evernote 含むすべてのアプリが iOS7 対応ということでデザインが一新したのが記憶に新しいです。

2014年に向けて

2014年の前半は、新刊の発売と合わせた活動をメインに進めることになると思います。また業務として考えた場合には、第三者(コンサル的立場)としての立ち位置を変えマイジョブと自信を持てる活動に力を入れていこうと思います。

それが、マインドだけの問題かポジションとしての問題か環境の問題か、考えたいと思います。まだハッキリどのような形になるかは想像できていませんが、今年もこれまで積み重ねたものと新しい姿勢とどちらも大切にし邁進したいと思います。


UI Patterns for Smartphone

"UI Patterns for Smartphone" HCD-Net SD #6

先日 (11/16 (土))、HCD-Net 教育セミナー「サービスデザインの方法論」に参加してきました。その中で講義「スマホにおけるUIパターン」について、少しだけお話してきました。

モバイルにおけるパターンと言うと、そのほとんどがレイアウトとナビゲーション(エレメント単位)のパターンを指すことが多いと思うのですが、ちょっと引いて見て、そのモバイルの成り立ちとしてデバイスのエコシステムから整理してみました。

とくに、モバイルではその利用状況に応じたデザインが求められると思うので、そういう意味でもただの見た目だけのパターンにはしたくなかったのが理由です。ということで、パターンを以下の3つに分解して説明しました。

  • デバイスエコシステムの6パターン
  • コンテンツ構造や遷移の6パターン
  • ユーザーインターフェースの10パターン

モバイルデザインのヒント

まず、なぜそのパターンにするのか、という疑問には書籍「モバイルフロンティア」にある、このモバイルデザインのヒントですべては語られると思います。

  • 必要十分な表現に留める
  • ちら見しやすいようにデザインする
  • 階層を深くしない
  • 自然な形で接点を見せる
  • 途中で操作を止めても同じ事ができる
  • 時間軸を使って情報を整理する

これがスマートフォン/モバイルにおけるデザイン原則となって、以降のパターンの理解に進みます。

スライドはいつものように、SlideShare のほうに公開しています。

デバイスエコシステムの6パターン

こちらも「モバイルフロンティア」を参照しています。それぞれの事例までつければよかったのですが、口頭でのみの説明になりました。このパターンは、UX Magazine での Avi Itzkovitch さんの記事「The Multiscreen Ecosystem」でももう少し深い考察が得られます。

一貫性の保持
どのデバイスでも同一の体験ができること
状態の同期
どのデバイスでも同じ状態になるよう、コンテンツを同期すること
画面共有
どのデバイスでも同一のコンテンツを共有すること
デバイス間の移動
ある利用体験を、別のデバイスに移動すること
相互補完
各デバイスが特定の役割を担い、それぞれの役割を補うこと
同時発生
デバイス別に同時発生する状況を、つながった体験にすること

コンテンツ構造や遷移のパターン

個人的にこのパターンを「IAパターン」と呼んでいます。サイト構造のパターンを指すことが多い「IAパターン」という言葉は、Donna Spencer 著「A practical Guide to Information Architecture」から借りてきています。

そして内容については UX Booth での Elaine McVicar さんの記事「Designing for Mobile, Part 1: Information Architecture」を参照しています。こちらも「モバイルフロンティア」でも少しだけ触れられているので、ご存知の方もいるかと思います。

階層型/ピラミッド型
インデックスページとサブページといった親子関係を持つピラミッド構造
ハブ&スポーク型
中央があり、そこから離れタスクを実行し、また中央に戻る構造
マトリョーシカ型
直線的にタスクをリードする方法、入れ子関係の構造
タブビュー型
同一レベルのコンテンツを並列に表示する方法
弁当箱型/ダッシュボード型
関連コンテンツを一目で表示する方法
フィルタービュー型
同一データを多面的な検索結果で表示する方法

ここで注目すべきは、構造と表示の方法とがごっちゃになっている点です。あえて言葉を書きなおして整理しているのですが、はじめの3つは構造のパターンであとの3つは表示方法のパターンといえます。多分このあたりはどの側面から見ても一意には言えないと思うので追求はここまでにしておきますが。

階層構造とマトリョーシカの違いもあえて入れています。階層構造/ピラミッド構造とは、同階層への遷移を視野に入れるかどうかになりますが、モバイルのUIにおいて同階層へのジャンプは考えにくいからか、デザインパターンからは(階層構造)がほぼ語られていませんね。

ユーザーインターフェースのパターン

そして、ほとんどの方が言うUIパターンには、主にレイアウトとナビゲーションのパターンが含まれています。また、ナビゲーションやエレメント(要素)だけを語っているケースもあるようなので、それはパターンというより種類と呼ぶほうが適切かなと思ったりします。

ここでは Theresa Neil 著「モバイルデザインパターン」を参照しています。ただ、著書と同様に公開されているサイト「Mobile Design Pattern Gallery – UI Patterns for iOS, Android and More」のほうが新しく、随時事例も更新されているようなので、Web 版のほうを参照して整理しました。細分化するとさらにいくつもあるのですが、さすがにそれはパターンではなく要素の種類になるので今回は潔く省きました。

ナビゲーション
メイン画面やそのメニュー表示パターン
フォーム
サインインや登録、チェックアウトなどの表示パターン
テーブル・リスト
表やリスト、画像付きリストの表示パターン
検索・ソート・フィルタ
テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン
ツール
ツールバーやアクションボタンの表示パターン
グラフ
棒グラフや円グラフ、データをもとにしたグラフ表示パターン
誘導
モーダルウィンドウやバルーン、チップス表示パターン
フィードバック・アフォーダンス
レスポンスの表示でエラーや確認の表示パターン
ヘルプ
ガイドやコーチ、ツアーなどの表示パターン
アンチパターン
パターンに当てはまらない表示パターン

変化するナビゲーション

ここまで、いくつかパターンを見てきましたが、文字通り見ただけではわからない部分もあるのがモバイルのデザインです。そこで、Smashing MagazineUX Design コーナーにあった Adrian Zumbrunnen さんの記事「Smart Transitions In User Experience Design」という記事をご紹介しました。これは、見てもらえばわかるのですが、変化するナビゲーションと題して、いくつか最新のインタラクションを紹介した記事です。

※実はこの GIF アニメをスライド内で見せたかったのですが、Keynote がバージョンアップしたため、GIF アニメが挿入できなかったというオチ (TдT)。

ナビゲーションのパターンは、上記にも書いたユーザーインターフェースのパターンに含まれる関係にありますが、インタラクションをともなうパターンとしての定義はまだあまり見ない気がします。

そして、最後に故スティーブ・ジョブズの名言――

Design is not just what it looks like and feels like.
Design is how it works.

を引用しました。これは「デザインとは、単なる視覚や感覚のことではない。デザインとは、どうやって動くかだ。」という力強い言葉です。今回のテーマでもある「UIパターン」も、見た目やだけのことと考えてしまうのはとてもチープな解釈につながると思ったので、デザイン原則の話からデバイスエコシステムの話を経て、最後にこの言葉を付け加えさせてもらいました。

最近書籍を執筆していることもあり、このあたりも深く研究しているところだったので、いい意味でうまく整理し説明することができました。今回の講義に呼んでくださった浅野先生に感謝です。自分にとってもいい機会になりました。ありがとうございました。

HCD-Net の教育セミナー「サービスデザイン方法論」本編のほうのワークショップなどの模様や成果は、浅野先生のブログからご覧になることができます。