開発中の製品をユーザーテストにかけるには、参加者が実際の動作をイメージできる程度には具体的なモックアップ（プロトタイプ）が必要になります。
一番ローファイなものではペーパープロトタイピングといって、簡単なスケッチを使って文字通り紙芝居を作って、参加者がクリックするといったボタンに応じて他のページを差し出します。簡単に用意できる反面、参加者は想像力を働かせて色々と補完してタスクを進める必要があります。
ここ10年くらいでそれをPCやスマホ画面上でよりリアルに実行するツールが台頭してきました。ある領域をクリックすると指定した画面に遷移する仕掛けのスライドショーを作成します。画面はワイヤーフレームでもいいし、実際のデザインモックアップがあるならそれを使えば見た目は本物そっくりになります。ただし基本は「クリックして画面遷移」の組み合わせで、文字入力とか条件分岐とか複雑なことは難しかったりするのが現実です。入力フォームなどがある画面でも、実際の文字入力はせず、「フィールドをクリックすると”文字入力後の画面”に遷移する」ので、あくまで「入力はした体（てい）」で進めてもらうことになり、ここもやはり参加者の想像力で補う部分が大きかったり、文字入力ミスなどが検証できなかったりしがちです。これらのツールも日々進歩しているので、いずれ入力内容やデータベースを反映した表示などもリアルにできるようになっていくのかも知れませんが、結局そうなると本番システムに近いプログラムを書くこととかわらなくなっていくので、痛し痒しな気がします。もしかすると現在でも可能かも知れませんが、少なくとも私の請けた案件でクライアントが作ってきたモックアップは、「クリックで文字がテロっと入る」動作まででした。
プロトタイピングツールでモックアップを作る欠点はもう1つあります。現行サイトの1部分だけを改善したプロトタイピングをした時です。ある1画面の表示を変更して達成率が上がるか検証しよう、といった時に、タスクで通過するフロー全部をモックアップで再実装しなければなりません。元々プロトタイピングツール上でも一通り実装してあれば問題ないですが、ユーザーテストのために新規でフローを再現するのはあまり効率の良い話ではないでしょう。しかも実際には参加者は正解フローだけを一直線に突き進んでくれるとは限らず、関係なさそうなところもどこまで遷移できるようにしておくかは悩みどころです。
実際に完璧に動いている現行サイトがあるのに、たった1箇所のためにプロトタイピングツール上にフローを再現する、しかもインタラクションが限られたローファイなものになる、というところがジレンマなように思います。
■ブラウザのユーザースクリプトで現行サイトをプチプロトタイピングするという発想
先日請け負った業務でも同じようなことがありました。かなりページ遷移の多い申込みフローの中で、数カ所のペインポイントで改善案を検証したいということで、プロトタイプ作成から請け負いました。見積時点では、「本番サイトで申込みフローをやってもらいつつ、該当箇所に来たらモックアップに画面を切り替えて試してもらう」という了承を得ていましたが、やはりタスクの流れとして不自然でなんとかできないかなと思案し、「ブラウザのユーザースクリプトを使う」という方法を思いつきました。ユーザースクリプトとはブラウザの機能で「指定のURLで所定のJavaScriptを実行する」仕組みです。通常はURLとスクリプトのマッチングの管理などでなんらかの拡張機能を使います（Tampermonkeyなど）。弱視などの方が自分が見やすいようい文字サイズや色を書き換えるユーザースタイルシートはご存じの方もいるかと思いますが、それのスクリプト版になります。DOM操作を通じてほぼなんでもページを改編することができてしまいます。最近ようやくスマホ向けブラウザでも実行環境が整ってきて、モバイル向けサイトの検証でも使えるようになりました。改編はスクリプトを仕込んだ端末のクライアントサイドでのみ実行されるので、本番さサイトに対して実行しても通常利用者にはまったく影響を与えないので、別途テストサーバーを用意するといった手間も必要ありません。
結果としてその業務ではかなり自然に「98%本番通りに動き、ほんの2%だけプロトタイプ仕様」という体験を作り出すことができ、参加者にはプロタイプであることを意識させずにタスクに臨んでもらうことができたと思います。
■ちょっとこれは真面目に布教したいぞと本を書きました
世の中の開発現場でこの仕組みを使ってモックアップを製作している現場がどのくらいあるか未知数ですが、少なくともFacebookのフレンドに問いかけた限りでは「そんなん普通にやっとるわい」って人は皆無だったので、情報発信してみようと思った次第です。
業務でJavaScriptを書ける人にとっても有益な情報として、実際にユーザースクリプトとして動かす手順や、効率的にスクリプトの編集を端末に反映させる方法などを。そしてJavaScript初心者の人にはDOM操作の基本くらいはカバーしてみようと思ったら、ちょっとブログ記事にすると長いなと。以前OBS Studioの基本操作をPDF資料にまとめてGitHubに公開しまいたが、今回もそんな感じでする予定でした。
が、今回は文字も多いしePubでリフロー可能な電子書籍にしてみようかな？ついでに前から興味あったKDP（Kindle Digital Publishing）でいわゆるKindle出版をしてみようかなと思い立ちました。
年末年始の余暇を使って書き上げ、KDPの登録と出版手続きは割とサクっとすることができ、実際にリリースされたのがこちら。
無料でも良かったんですが、Kindle Unlimitedにも興味あったので一応ちょっとだけ値段つけさせてもらいました。めちゃめちゃニッチでほとんど注目されないと思うので、どっちがどうという比較もできないとは思いますがw。
とりあえずAmazonで私の名前を検索した時に出てくる書籍が3冊になりました。よろしくお願いいたします。直接のお知り合いの方には添削や感想をフィードバックしていただけるのであれば献本(?)いたしますのでご連絡ください。