2016/12/11
デザインスプリントで使えるプロトタイプ作成ツールinVisionとJIRAの連携：AUG Advent Calendar 2016 12/12
Author
大貫 浩Hiroshi Ohnuki
はじめに
この記事は、Atlassian User Group Tokyo Advent Calendar 2016 12日目の記事です。
最初、AtlassianのAddon開発で最初に困るEclipseの環境設定について書こうかなと思ったんですが（自分もEclipse Neonで困ったんで）、EclipseよりIntelli J IDEA良いかも…といういう情報が社内の技術者から入ってきたので、最近研究しているDesign Sprint(デザインスプリント)で使えるプロトタイプ作成ツールinVisionとJIRAの連携を書きます。
デザインスプリント
まずデザインスプリントですが、最近オライリーから本も出版されて日本でも広まりを感じています。海外ではこの本の原書が１年前に出版されていたこともあってデザインスプリントが急速に広がり始めているそうです。
(O’reilly社より)
デザインスプリントは開発プロセスの１つでプロダクト開発（追加機能の開発含む）の一番最初によく行います。下図はプロダクト開発のアクティビティをイメージしたもので、黄色の部分がデザインスプリントです。デザインスプリントを最初に行うことによりプロダクト開発をより生産的にすることができます。
(New Haircut社より)
デザインスプリントとinVision
ツールはその背景にある事を知っていると効果的に使えます。inVisionは簡単に言えばUI/UXプロトタイプツールなんですが、デザインスプリントの視点から言うと、最後のPrototypeとTestという最後の2工程を支援してくれます。
(inVision Webサイト)
下図はDesign Sprint部分を拡大したものです。Decideまでの工程は人とホワイトボードとポストイットが活躍しますが、一番実施が難しいTestをやり易くするために、Prototype以降はinVisionを使うと良いと思ってます。
(New Haircut社より)
inVisionでは以下のようにアプリのスクリーンショットを複数アップロードして、画面遷移を作成、確認することができます。
複数のスクリーンショットをアップロードします。
プレビューモード：各スクリーンショットを表示し、画面遷移をテストできます。
ビルドモード：クリックされる場所(Hotspot)を作成し、画面遷移を定義します。
コメントモード：好きな場所にコメントを書けます。
テスト
inVisionのプレビューモードを使うとテストを行うことができます。このテストでは被験者に下記「ユーザーテストのお願い」だけを渡し、ユーザーがどのように振る舞うか？を観察します。そしてミッション終了後にアンケートやインタビューも行います。これにより新たな発見やUI/UXの改善につながることが期待できます。
以下の例はWBSガントチャートAddonにMS Projectファイルのインポート機能を追加したときの例です。被験者がアプリのペルソナに合っていませんが新たな発見がありました。彼はMS Projectが何か分かっていませんが、MS Projectインポート機能の初期画面に1分弱でたどり着き、ここからファイルアップロードするんでしょ。と言ってきました。なぜ初期画面が分かったかを聞くことで新たな発見がありました。
ユーザーテストのお願い
お願い：新規アプリケーションのユーザーテストをお願いします。背景を読みミッションを遂行してください。
ミッション：MS ProjectのデータをJIRAへインポートせよ
背景：あなたは1週間前から新規プロジェクトに配属されました。そのプロジェクトではJIRAを使っていて、あなたはやっとJIRAの使い方に慣れてきたところです。ある日プロジェクトマネージャから以前MS Projectで管理していたWBSをJIRAにインポートしてと頼まれました。MS Projectファイルを直接インポートできるAddonはJIRA管理者にお願いしてインストールしてあるそうです。
inVisionでは自分で被験者を集められない利用者向けに、ユーザーテストを代理実行してくれるサービスがあります。実際はUserTestingというサービスと連携しているのですが…それはinVision画面右上の「USER TEST」ボタン押下から始まります。アプリが想定するペルソナにテストしてもらうのは難しいと思うので、特定業務アプリには合いませんが、万人向けのアプリやWebサイトのUI改善に使えると思います。私はペンシルバニア州の40歳の女性にテストしてもらいました。テスト結果は5分間の操作ビデオが彼女の声と一緒に貰えます。初めて見るUIをどのように考えながら操作するのか良く分かります。非常に参考になりました。ただ対応言語が英語だけというのが悲しいです。（日本でもビジネスとして流行るかな～）
(inVision画面)
inVisionとJIRAとの連携
このような魅力的な機能満載のinVisionですがAtlassianも使っているようです。またAtlassianではデザインスプリントも実施しているようです。先に紹介したオライリーのデザインスプリント本にもAtlassian社員からのアドバイスが掲載されています。そしてinVisionとJIRAとの連携するAddonもAtlassian Marketplaceで無料公開されています。ただし悲しいかな対応はJIRA Cloudのみです。この連携AddonがあればJIRA課題画面に画像をプレビューし、inVisionのプレビューやコメントに簡単に遷移できます。
(inVision AddonはAtlassian marketplaceより無料でダウンロードできる)
(JIRAの課題詳細画面にinVisionのプレビューと各種ボタンが並ぶ)
最後に
実は日本でもNew Haircut社のデザインスプリント・ワークショップを開きたいと思っています。本記事ではNew Haircut社の画像を利用していますが、同社COOはGV(旧Google Ventures)初の外部コンサルタントとしてデザインスプリントを代行しています。計画しているワークショップは有償になってしまいますが興味がある人はぜひ下記よりお問い合せください。
