スクリーンショット_2019-07-15_21

データ連携可能なモックアップ主導のUI設計を実現するプロトタイピングツール

yamada kousuke

今まで、CRUD系のモックアップを作るプロトタイピングツールにはJustinmindを使っていました。Justinmindが優れているのはユーザーテストととても相性がいいところです。ユーザーテストにはテストシナリオの設計で2種類あり、シナリオを作ってあなたは架空のだれだれです、これを入力してくださいと進める方法、これは既にある課題の仮設検証をするに適しています。もう1つは実際に自分自身が使う想定をしてもらい進める方法です。後者はプロダクト初期の価値検証に適しています。やはり実際の生活や業務の中で本当に使ってもらったほうが発見が多いからです。後者の実際に入力できるモックアップをJustinmindなら実際に入力できるhigh-fidelityなHTMLを簡単に作れてました。

ただ、5年前からあるデスクトップアプリケーションなので（ローカルで作業できるメリットもあるけれど）FigmaやPrincipleなどを2018年頃から台頭してきたツールと比べて些か古臭く。例えば画面遷移先を矢印をひっぱたりして設定できなかったり、直近数年メジャーアップデートがありませんでした。そしてなりよりとても遅い（重い）。

業務ではまだ現役ですが2019年7月時点で次のhigh-fidelityなプロトタイピングツールを知っておこうと調べてみました。ちなみに自分がプロトタイピングツールで求める要件は１つ「ユーザーテストで被験者が入力できること」。このメリットは別に書くとして、ペーパープロトタイプ用途なSketchやXDあたりは良いツールだけど対象としていません。

Framer X

探した中で良さそうだったのが「Framer X」です。被験者が入力可能なUIコンポーネントが豊富ですし、そのコンポーネントはframer storeからインストールすることができます。コンポーネントの中にはGoogleのMaterial Designもあって、入力欄にフォーカスするとちゃんとラベルの位置が上に移動する挙動まで再現されてました。

Design + React + TypeScript

これだけでも実務シナリオベースのユーザーテストをするには必要十分だけれども、FramerXは配置したシェイプなどのデザインをReactとTypeScriptで操作することができます。これによってユーザーが入力したデータを次の画面に引き継ぐことができ、あたかも本当のサービスのよう試験することができます。

このデータ連携はJustimindにもData Masterという機能があったのですが、独自の画面で設定する必要があり（例によって重い）とても手間がかかるため実用していませんでした。単純な足し引きでも1つ1つルールを設定する必要があります。

FramerXのデータ連携を紹介している動画をあるので、まずはこれでイメージが掴めると思います。

動画内のサンプルコードで以下のようなものです（少し改変しています）

import { Data, Override } from "framer"

const data = Data({
   text: "test",
})

export const GetValue: Override = () => {
   console.log("GetValue")
   return {
       onValueChange: (value: string) => {
           data.text = value
           console.log(data.text)
       },
   }
}

export const UseValue: Override = () => {
   console.log("UseValue")
   return {
       text: data.text,
   }
}

dataを各アートボードで参照できるので、例えばサインアップのユーザーテストをする場合に実際のユーザーの名前を入力してもらうと（事前に許諾が必要ですが）次の画面に自分の名前が表示されます。モデレーターがいることを除けば普段の状況に限りなく近い環境を再現することができ、よりプロダクトのリリース後の状況を事前に検証することができます。これを低コストで実現できるのがFramerXの最大の特徴だと思います。


簡易に作れるhigh-fidelityなモックアップの必要性

最近ではDesignSprintで1週間の間にサービスの検証を行う方法もありますが、モックアップの作成は1日しかなく、実質ペーパープロトを用いて検証します。繰り返しになりますが、ペータープロトないし実際に入力できないモックアップではユーザーの実運用から起こる課題を見つけるのが困難になります。そこでFramerXを使えば開発をせずにデザイナー1人、もしくはPM1人だけでも入力可能なhigh-fidelityなモックアップをSprint内で作成することができます。

ReactとTypeScriptの知識は必要になりますが、上記のサンプルコードのように簡単な記述でデータの受け渡しができます。ぜひ実データを使ったユーザーテストに使ってみてはいかがでしょうか。

参考リンク集


この記事が気に入ったらサポートをしてみませんか？