UXマッピングツールの研究開発

2014年の前半にあの書籍が回収されたニュースは、自分自身の行き場を見失う絶好の機会でした。そこから内に引きこもり、いろいろなものが思うように行かない時間を過ごしました。

そこから自分自身を棚卸し見えてきたものが「自分の道具を作る」でした。今年のテーマは「ゴールドラッシュでは、つるはしを売れ」です。その第一弾が、この「UXマッピングツール」の研究開発です。

課題

たとえば、エスノグラフィ調査(オブザベーション)では、写真とメモとが別々に管理されている課題があります。また、ワークショップではポストイットを多く使用します。

2014年に3M Companyから発売された「Post-It Plus」アプリでは、ポストイットをデジタルで管理できます。ただし、ディスカッション結果を残すことはできますが、清書する必要があります。

オンラインツール「InVision」などのチャット機能では、対象プロダクトの忠実度や利用者の知識量の差が出て、うまく活用することは難しいと思います。

observation and workshop

Service Design Tools?

2014年に開催したService Design Global Conference 2014で、「Experience fellow (myService fellow)」のトライアウト版を開発者は配布しました。また、ペルソナ作成やステークホルダーマップまで作成できる「smaply」は、マッピングツールの代表格だと思います。しかし、ユーザーは何をしたらいいのかわからない、という課題を持っています。

この課題は「Touchpoint Dashboard」と同じ過ちを繰り返しています。空欄を埋めなければ完成しないツールは、クールではありません。

Experience fellow

smaply

Touchpoint Dashboard

DMP Tools?

Salesforce Marketing Cloud」は、米国では豊富に使える機能がありますが、日本では機能は多くありません。これは、メールマーケティングツール (CRMツール) のようなものです。このツールには「Journey Builder」という機能がありますが、機能過多で使いにくいです。「Responsys」もそうでしたが、システムフロー作成ツールに似ています。

Salesforce Marketing Cloud

研究開発

これらの課題に対応するツールとして、簡単にジャーニーマップを作成する「UX Recipe (仮称)」を企画しました。コンセプトは、ユーザー行動 (アクティビティ) を第一に考えて、カードを組み合わせて、簡単にジャニーマップを作成できるツールです。

作成したジャーニーマップは共有できます。また、カード (アクティビティ) の追加作成ができます。増え続けるタッチポイントにすばやく対応し、新しいジャーニーマップを作成することができます。屋外では、モバイルアプリを利用することで、ウェブアプリと連携することができます。

UX Recipe UI Sample

このプロジェクトは、昨年からネットイヤーグループの協力のもと、研究開発としてプロジェクトを開始しています。今年の春ごろには限定版をリリースできる予定です。

最新ニュースや詳細は、アナウンスしていきます。

※Medium に英文で投稿した記事「R&D of UX mapping tools」の日本語版です。


Playback 2014

2014年の風景

2014年は、「我慢の年」だったと思います。公私共にたいへん難しい時期でした。

前半に執筆を終えた書籍が回収となり、予定していたいろいろな方とお会いする機会をすべて失うことになりました。また、それと連動するように仕事面で変化を期待していたことが難しくなりました。前半は書籍まわりで後半は仕事面で思うように進めることができなかった一年だったと思います。

ブログ

去年10本未満だったブログの投稿は、今年は計19本書くことができました。記憶に残っているエントリーは以下があります。一応は書こうとしていた姿勢が伺えます。

講演

講演は、社外で20本程度、社内でも勉強会やワークショップを開催したのが5本程度くらいでしょうか。後半はオープンなものはなくクローズドなものがいくつかありましたが意外と数はあったようですね。学会向けや企業研修などにも取り組む機会をいただきました。

執筆

書籍以外では、とくに執筆関連の取り組みはありませんでした。強いて言えば、日本デザイン学会への論文投稿くらいですね。あとは年末のタイミングでお話をいただいた、広報会議3月号の執筆が控えています。

  • 日本デザイン学会 第61回 春季研究発表大会への論文投稿
  • 広報会議3月号の執筆

仕事

大規模案件への関わりは減り、UX関連での新規営業およびプランニングが主になっていたかと思います。また、いくつかの重要な社内プロジェクトへの関与がありました。社内でもワークショップを開催したり、ハッカソンなどを実施してはまとめるを繰り返していた時期もありました。とくに後半は、某プロジェクトの計画実施に向けて一心不乱に取り組んだ時期でもありました。

あとは、WCC合同勉強会を計画して、メンバーズ・IMJとで同業三社による勉強会を計4回実施することができました。

プライベート

1月から2月はダイエットをしていました。そして、ここで書けることは実は少ないのですが、引っ越しをして改めて新宿区民となり、親戚 (甥) の結婚式に参加することができました。また、6月には夫婦で出雲大社に行き、夏には猿島にBBQに行ったりもしました。

一番印象に残っているのは、9月の札幌での講演に合わせて夫婦で北海道の札幌・千歳、函館に行けたことです。北海道は小学生の低学年に千歳に住んでいたので、約20年ぶりのことでした。また行きたいです。

ニュース

やはりアップルの発表が数多くあった気がします。iPhone 6 Plus の発表や iPad Air 2、ようやくお披露目された Apple Watch、Mac OS のデザインが刷新された Yosemite のリリースまで。Webサイトがスマホ対応したことも記憶に新しいですね。

あとは、世界中が応援し涙したソチ五輪での浅田真央選手の有終の美や、あんだけマスコミが煽ったあげく1勝もできなかったワールドカップサッカー、テニスの錦織選手の躍進はすごかったですね。結構スポーツ系が多かった気がします。STAP細胞はありますの小保方さんやAKB48大島優子の引退などなどいろいろありましたね。

IA/UX界隈では、米国金融大手キャピタル・ワンが、UX老舗のAdaptive Path社を買収したことがビックニュースだったんではないでしょうか。

映画

個人的には自分の状況と重ねて観ることができた「LIFE! The Secret Life of Walter Mitty」がよかったです。あと「るろうに剣心」の二作連続上映では、関連するドキュメント番組含めていろいろ見た記憶があります。大友啓史監督のいう「熱量」という言葉が印象的でした。

あと、トム・クルーズの「EDGE OF TOMORROW」も面白かったですね。最後の最後に「Interstellar」と「BAYMAX – Big Hero 6」が今年の記憶に残る映画だったと思います。

読書

内にこもっていたこともあり、読書はこれまでになくしていたと思います。とくに「シリアルイノベーター」から「クリエイティブ・マインドセット」を経て「ZERO to ONE」は、流れ的にもちょうどよかったです。

IA界隈でも、頻繁に書籍が発売されていて「Reframing」を感じる一年だったように思います。

アプリ

Prott に代表されるUIプロトタイピング系はひととおり試していた記憶があります。あとストーリーテリング系ですね。Medium はあまりいい印象がないのですが、StorehouseStellerReadymag あたりは個人的にはヒットでした。

あとは、Sketch が普及した (?) ことが大きかったのではないでしょうか。Mac OS の Yosemite がリリースしたことで、Evernote がUIを刷新したのも記憶に新しい感じがします。

2015年に向けて

ようやく動き始めた某プロジェクトを推進していくとともに、これまで負として (陰として?) 内にこもっていたパワーを外向けに発信していこうと思います。これまで自分ではなかなか自信を持てなかった自分自身のアイデアですが、ひとつのカタチとして育てていけることができる気がしています。別の投稿でそのあたりはご紹介していこうと思います。

来年も、誰にもできない自分しかできないことをモットーに取り組んでいきたいと思います。


2014年の振り返りと2015年の予想 #WCCstudy

付箋

ネットイヤーグループ・メンバーズ・IMJの合同勉強会「Web Creators Circle」の第四回を12月17日 (水) に開催しました。今回は、場所をメンバーズに移しテーマを「2014年のWeb業界のトレンドを振り返り、2015年を占うネット業界3社大忘年会」として、ワールドカフェ方式でのグループワークを実施しました。

はじめにメンバーズの高橋さん・塚本さんより振り返りのイントロダクションをご紹介いただきました。社会的には、STAP細胞や野々村市議会議員などがあり、iPhone 6 の発売や Smart News に代表されるキュレーションメディアアプリの躍進がありました。また、3社のリリースを印刷して用意していただいたのでスムーズに2014年を振り返りことができました。

2014年の振り返り

5グループに分かれてのディスカッションでしたので、自分のグループでの会話しか詳しくはわかりませんが、はじめのグループでは、2014年の振り返りをしていくと iPhone やスマホアプリ、ウェアラブルなどに見られる「デバイス」や Exact Target などの「マーケティング」や「マーケティングツール」に関しての話題が中心となりました。

また、Material Design などのデザインや UI プロトタイピングツールや UX に関する話題もありました。忘年会シーズンということもあり参加者が少しプロデューサーやディレクターに偏っていたこともり、デザインまわりについての意見は少なかった印象です。

デバイス
iPhone 6 や Pepper、スマホアプリ、ウェアラブルなど
マーケティング
Exact Target やマーケティング・オートメーションなど
デザイン
Material Design、UI/UX、CJM、UIプロトタイピングツールなど
メディア
Smart News や Gunocy など
マネジメント
スタートアップ、グロースハックなど
クラウド
クラウドソーシング、クラウドファウンディングなど

2014年の振り返り

2015年の予想

振り返りを踏まえて、次のグループでは、2015年のトレンドを予想しました。主に、ソーシャルゲームや動画コンテンツについて注目していたグループだったので、それらが今後どうなるか(いわゆる空想含め)ディスカッションしてみました。とくに興味深かったのが、次の2点でした。

  1. 動画コンテンツの拡張で、ゲームと仮想空間に関する情報の再燃につながり、仮想と現実の境目を再認識する事象が次々と起こる
  2. キュレーションと広告の概念が変わり、これからのタッチポイントにおいては信頼性が判断材料となる

1は、いわゆるセカンドライフの再来 (なぞ) で Oculus Rift のような端末が普及することで仮想空間の概念が進化することを指しています。また仮想空間でビルドされた物体を 3D プリンターなどで現実世界にアウトプットする流れができてくるのでは、という話をしました。

2は、触るもの皆「広告」であるという概念を指していて、実態とは異なるものがすべてのタッチポイントを形作るというもの。それゆえにそのモノ自体が本物かどうかがポイントとなり信頼性が基準になっていくのでは、という話でした。

どちらも、これまでとは逆の発想で考えることで次の予想としましたが、他のグループでも同じような立脚点だったにもかかわらず、さまざまな視点で「今後どうなる?」を会話できたので、日ごろ真剣には話さないテーマを真剣に楽しむことができました。

World Cafe

WCC 合同勉強会

WCC の企画をメンバーズの塚本さん・高橋さん、ネットイヤークラフトの松本さんと話してから約半年くらい経ちますが、年内に全四回が実施できました。はじめはただの単発の勉強会でしたが、IMJ も加わり同業三社による勉強会 & 懇親会として定着してきました。隔月でお互いの会社を訪問するカタチにしているので、日ごろ会うことはない人々と会うことができて、とても貴重な体験になっています。そこで仲良くなった同業者どうしで飲みに行ったりもあり、いい意味で親睦を深められているのでは、と思います。

今後もこの流れでまずは進めてみて、同業三社に限らずいろいろな方と会社どうしの交流の延長でしていければと思います。今年、参加いただいた皆さんありがとうございました。これからもよろしくお願いします。


スマデバ戦略とジャーニーマップ #WCCStudy

10月29日 (水) に、ネットイヤーグループメンバーズIMJの合同勉強会「Web Creators Circle」の第三回を開催しました。今回は、場所をIMJで開催したため同社の「すまのべ!」のご協力のもと、最新デバイスの体験もすることができ、とても活気あるイベントにすることができました。

第三回のテーマは「スマートデバイスで描く理想のマーケティング戦略」として、ジャーニーマップを使ったグループワークを実施しました。ワークの概要は後述するとして、ワークショップを進めていく中で気づいたことを書いておこうと思います。

今回は、「UXD/HCD ワイワイCAFE」の太田さんらもファシリテーターとして参加いただいたので、そういった点でもかなり充実していました。

グループ発表

ジャーニーマップを使ったワークショップは個人でもいくつか経験したことがあるので、今後の糧になるよい機会になりました。一番気になったのは、感情曲線からはじめるジャーニーマップの作成と進め方について、次の課題があると思いました。

  • 感情曲線から出発すると、全体の構成が見つけられないまま描くことになる
  • モチベーションの度合いが相対評価になると、偏り(狂い)が生じる

全体構成を見つける

感情曲線を使った流れ全体を紙面に収めることを考えると、全体の構成をはじめに見つけてから描き始めないと紙面が余るか紙面に収まりきらない可能性が高いです。ちょうどいいくらいに収まっているものを見ると、頭の中で構成を考えているとしか思えません。とするならば、やはりはじめに構成を決めておくべきだと思いました。

ここで言う構成とは「起承転結」のことですが、今回のジャーニーマップを作成するうえではサービスにまつわる「利用前・利用中・利用後」といったステージのことを指します。「ああして、こうして…」とトピックポイントを単純につなげていくと、まず紙面には収まりません。もちろん紙面の都合を考慮せずにする方法もありますが。

また、トピックポイントをそのステージに合わせてプロットすることも課題を見つけるうえでは重要だと感じました。ステージとトピックポイントがズレてしまうと、正しくソリューションを提案できなくなります。

モチベーションの基準線を描く

次に、モチベーションが相対評価になると「この時よりはモチベーションが上がった」という見方をするので、それまでに描いた度合いを大きく超えるもしくは下回ることが考えられます。そうすると、どうしても後半に行けば行くほどその影響を大きく受け、実際には絶対評価(その時のモチベーション)であるはずの体験が相対評価として描くことになります。

たとえば、基準線(ゼロ地点)から上半分や下半分にだけ曲線が偏っているのはそのせいです。わたしたちの記憶で考えても、常に絶対評価であるはずで、相対評価になるのはもっとも記憶に残った事や類似する経験をしたときだけです。「あの時」と「今」を常に比較できることは難しいと思いますので、基準線がないものにはそうした狂いを生じてしまう可能性があります。

紙面に収まらない場合

全体構成を意識した場合

基準線を意識した場合

グループでのディスカッション

グループワークでは、グループごとに仮想クライアントをくじ引きでを決め、グループ内に一人ユーザーを設定して進めました。ユーザーからヒアリングしてジャーニーマップを作成し、見つけた課題からスマデバを使ったソリューションをグループで企画するという感じです。

参加したグループでは、仮想クライアントを「クリスピー・クリーム・ドーナツ(以下「ドーナツ屋」)」で、ユーザーを「すまのべ!」の加茂さんに担当していただきました。彼女の記憶を遡り、そのときの状況をジャーニーマップに書き写していきました。個性的な彼女の体験を聞くだけでも楽しく、とても有意義なディスカッションでした。

ポストイット

課題は、映画に行く目的でドーナツ屋(店舗)に寄るという目的が別にある点です。「ついで買い」などと呼ぶ購買行動にもよく似た「ついで食い (なぞ)」です。そうすると必然的に、映画チケットの購入時からドーナツ屋での体験はスタートしています。この点を突き詰めて考えていくと、シネコンなどでの複合施設ではそうした連携施策は着目すべきだと考えました。

また、今回のユーザーは「いっしょに映画を観る友達を待っている空き時間に、仕方なくドーナツ屋で待つ」という設定でしたので、空き時間を友達とシェアするという意味で、「待ち割」という割引サービスを考えました。この割引サービスを、映画予約アプリなどでドーナツ屋と連携して提供できれば、複合施設ならではのソリューションが提供できると考えました。

発表後、「ドーナツ屋ならではのソリューションはないのですか?」と聞かれましたが、今回は目的が別にあったので(ついで食いだったので)考えていなかったと話しましたが、さらにドーナツ屋ならではのソリューションが考えられればよかったなと思いました。

ほかのグループの発表も面白いものもありました。マクドでの深夜退店をやさしく案内するソリューションや、スタバで傘を借りれるスマート傘など。皆さん真剣にディスカッションを進めていく中で、ポストイットを多く利用して活気のあるディスカッションになりました。

最新デバイスの体験

IMJの「すまのべ! (スマートイノベーションの略)」には、「Kinect」でのフルーツキャッチゲームをはじめ、「Google Glass」やエプソンの「MOVERIO」、VRヘッドセットで話題の「Oculus Rift (オキュラス・リフト)」が体験できます。ボクも興味本位で「Google Glass」と「Oculus Rift」を体験させていただきました。

「Oculus Rift」では、宇宙探索とジェットコースターのようなデモを体験させてもらったのですが、本当にその空間にいるような錯覚と重力を感じるような体験に驚きました。まさしく異次元空間でしたので、まだ体験されていない方はぜひIMJの「すまのべ!」で体験してみるといいと思います。

Oculus Rift 体験

今回も写真は、メンバーズの高橋さんによるものです。ありがとうございます。

ほかの参加者のコメントやブログもご覧ください。

第三回を終えて

今年の5月くらいに企画をはじめたこの合同勉強会も今回で第三回目を終了しました。

はじめはメンバーズとネットイヤーグループの個別の勉強会で検討していましたが、そこにIMJも加わり同業三社による合同勉強会にすることができました。場所も回ごとに変えたため、これで三社(メンバーズの晴海トリトン、ネットイヤーグループの東銀座、IMJの青葉台)を回ったことになります。

次は、メンバーズでと検討を進めているところです。忘年会や新年会も企画しています。興味ある方はぜひ次回にご参加ください。


UI/UX Study w/Standard Inc.

UI/UX Study 全体写真

10/21 (火)、ネットイヤーグループの UI/UX 勉強会に、STANDARD Inc鈴木健一さん鈴木智大さんをお招きして講師をお願いしました。STANDARD Inc は、FICC からスピンアウトした鈴木健一さんが設立した会社で、今話題の「SmartNews」アプリの UI 設計などにも関わった実績のある会社です。

彼らとは、ブログ記事「情報がないことを伝える UI デザイン」を読んだことがキッカケで、直接コンタクトをとったことに始まります。

そのブログを書かれた鈴木智大さんのほうからは「利用中の体験とUIの間を繋ぐブリッジビルダー」というタイトルで「UI Flows」というツールについてお話いただきました。UI Flows の記事を日本語訳した記事「UI のフローをデザインするための簡易記法」も発見。

画面遷移図というと、どうしても画面(ボックス)どうしを線でつなげた図を思い浮かべますが、ここで紹介された手法では「ユーザーが見るもの/ユーザーがすること」という具合に、画面に紐づくアクションをいっしょに書くスタイルです。これにより単に画面を線でつなぐときよりも、どうするとこの画面にたどり着くのかが明示しやすくなります。

UI Flows 表記例

ただし、つながる単位が画面ではなくアクションになるため、1 画面に対するアクションの数が増えれば増えるほど、ブランチが多くなる課題を持っています。モバイルアプリのように目的や機能が少ない場合には適用しやすい反面、さまざまな目的が介在する業務アプリや Web サイトの場合には適用しづらいかなという印象を持ちました。

また「なぜその画面が必要か」はこのツールでは見つけられません。あくまでも「シナリオ > 画面遷移 > ワイヤーフレーム」のうちの「画面遷移」を取り出しているため、その前提となるシナリオはここでは触れていないことにも注意が必要です。というのも、ボクの経験では、画面に紐づくアクションの前提となるユーザー行動から整理していったほうが理解しやすいと思いました。たとえば、ユーザー行動を「アクティビティ」として、UI Flows と合体して考えると、次のようなレイヤーで考えることができます。

Activity とUI Flows を合体した例

ここまで一気通貫で可視化ができれば、何のためにその画面が必要で、どういうアクションができるのかが一目瞭然な気がします。そしてこれはジャーニー化の原型として見ることもできるので、見え方でいえばこちらのほうが自然かなと思いました。

UI Flows は、画面を基準に考えるアプローチではありますが、実際にはアクティビティに大きく影響され、画面単位ではなくアクション単位に深堀りするツールだと言えます。そしてその実態は、画面内に配置する要素の目的とその先にどういう展開が待ち構えているのか指し示すことができるものと理解しました。

鈴木健一さんのほうからは「アプリの UI 設計をする上で、理解しておきたいコンポーネントの種類と用法」をお話いただきました。PCとモバイルの違いを例に、アプリ設計の指針となるガイドラインをもとにご紹介いただきました。個人的にもそれぞれのガイドラインの存在は知っているものの、すべてを把握したうえで人に説明することはできないので、とても参考になりました。

UI パターンやナビゲーションパターン、よく使われるコンポーネントについて、それぞれの概要と実例、使用するうえでのメリット・デメリットをご説明いただきました。リハではこの説明に 2 時間くらいかかったそうで、非常に大作です。これらの UI パターンやコンポーネントを理解しておくことで、目的に合わせた UI をイメージしやすくなります。また、UI Flows と組み合わせることにより、アクションとコンポーネントとを同時に検討でき、より忠実度の高いイメージを共有するのに役立ちます。

アプリ UI の主要な画面パターン

  • 導入画面(スプラッシュ/ウォークスルー/コーチマーク/エンプティステート)
  • トップ画面(ポータル型/タイムライン型/ストア型)
  • 一覧画面(検索結果/ギャラリー/お知らせ)
  • 詳細画面(ビューア/記事/マップ/プロダクト)
  • 入力・操作画面(サインアップ/投稿/カメラ撮影/設定)

操作の起点となるナビゲーションのメリット・デメリット

  • ドリルダウン型(絞り込み、構造がシンプルな場合に有効)
  • タブ型(すぐに平行移動する場合に有効)
  • スプリングボード型(全体像を訴求する場合に有効)
  • ドロワー型(コンテンツに集中してもらう場合に有効)

よく使われるコンポーネント

  • セグメンテッドコントロール(複数の項目を 1 グループにする)
  • リフレッシュコントロール(垂直の表示リストの更新をする)
  • カルーセルパネル(高さを固定して複数表示する)
  • モーダルメッセージ(強制的に表示する)

最後に、次のステップとしてのビジュアルデザインへの取り組みや、プロトタイピングなどのご紹介をしていただきました。プロトタイピングツールは、FlintoInVisionPrott などを例に、実機での検証や試作から改善のスピードアップを重要視する点をお話いただきました。

今回の勉強会は、アプリのUIというのが前提にはなりますが、人とシステムとの関わり方のデザインについて改めて考えさせられる機会になりました。個人的にもスマホのデザインパターンは興味がありましたが、それらをどういった目的に適用していくかという点では、今回の内容は非常にフィットしているなと感じました。

また、こうした勉強会を社内で実施したことで質疑応答にもみられたように、UXとUIとの理解と自分たちの業務との関係性を改めて理解していくことに役立ったと思います。またこうした専門的に掘り下げる勉強会も継続してできればと思います。

STANDARD Inc のブログ「REFRECTION」にも当日のレポートを掲載いただきましたので、詳細はそちらもご覧ください。

ちなみに、この記事の写真もすべて STANDARD Inc の吉竹遼さんによるものです(ありがとうございました)

UI/UX Study 終了後の一コマ


|