開発中の製品をユーザーテストにかけるには、参加者が実際の動作をイメージできる程度には具体的なモックアップ（プロトタイプ）が必要になります。

一番ローファイなものではペーパープロトタイピングといって、簡単なスケッチを使って文字通り紙芝居を作って、参加者がクリックするといったボタンに応じて他のページを差し出します。簡単に用意できる反面、参加者は想像力を働かせて色々と補完してタスクを進める必要があります。

ここ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の登録と出版手続きは割とサクっとすることができ、実際にリリースされたのがこちら。

USIP ユーザビリティ評価のためのWebサイト部分プロトタイピング法

古田 一義

580円(01/20 19:12時点)

発売日: 2025/01/11

Amazon楽天市場

Amazonの情報を掲載しています

無料でも良かったんですが、Kindle Unlimitedにも興味あったので一応ちょっとだけ値段つけさせてもらいました。めちゃめちゃニッチでほとんど注目されないと思うので、どっちがどうという比較もできないとは思いますがw。

とりあえずAmazonで私の名前を検索した時に出てくる書籍が3冊になりました。よろしくお願いいたします。直接のお知り合いの方には添削や感想をフィードバックしていただけるのであれば献本(?)いたしますのでご連絡ください。

年明けに書いているので、もう去年ですが、2024年に業務に導入して良かった機材やソフトウェアサービス、技術などを振り返ってみたいと思います。

■ユーザースクリプトを活用した既存Webサイト改修プロトタイピング技法

既存Webサイトの改修案をプロト作って検証したいという案件がありまして、当初はフローの中の該当ページだけ別URLのプロトタイプに移動してもらって体験してもらうという前提で制作依頼をいただいたのですが、ふと「ブラウザのユーザースクリプト実行機能を使って、本番サイトをリアルタイムで書き換えてやれば、現行ページをプロト側で再実装する手間も減るし、なにより途中でプロトURLに切り替えてもらう参加者にとって不自然なステップを挿入しなくて済むんじゃね？」と閃いて、実際にかなり上手くいきました。既存ページのほんの5%を改修して検証したいといった場合、95%をプロト上で再実装するのは無駄ですし、そのためにFigmaなどを使って本来の文字入力フローなどを「欄をクリックしたら文字入力された体でデロっとテキストが出る」みたいな省略動作になってしまいます。JavaScriptによる改編なら改編部分以外は現行サイト通りに動作しますし、本来の操作フローの中で違和感なくプロトを仕込めます。

ユーザースクリプト自体はJavaScriptによるDOM操作に精通した人なら普通に作成できるでしょう。一方その実行環境としてワンソースでPC/iPhone/Androidで効率的にユーザースクリプトを共有する実務ノウハウが蓄積できたので、近日中になんらかの形でドキュメントをまとめて公開したいと思っています。

■ワイヤレスマイク RODE Wireless Pro

RODE Microphones ロードマイクロフォンズ Wireless PRO ワイヤレス プロ デュアルチャンネルワイヤレスマ…

56,364円(01/20 19:12時点)

Amazon楽天市場

Amazonの情報を掲載しています

コロナ禍でマスク、パーティション、換気という悪条件の下で明瞭な音声収録をせねばとなった時から、RODE Wireless Goからはじまった小型録音機能付きUSBワイヤレスマイクを活用しつづけています。GO、GOII、DJI Mic、Hollyland Lark Maxなど色々試して結局RODEに戻って最上位モデルのWireless Proしか勝たん、となっています。しかも2セット揃えてしまった…

32bit floatとかタイムコードとか尖ったカタログスペックはさておき、もっと可視化されづらい違いとして、「遅延の少なさ」が際立っていました。詳細はこちら。

今年グループインタビュー案件で2セットのワイヤレスマイクを使う機会があって発覚したんですが、両者の間に遅延の差があって、単純ミックスするとエコーのような音質になって非常に聞き取りづらくなってしまいました。少なくとも異機種、異メーカー混在は避けた方が良さそう。また1セットとしても映像との同期を考えると遅延は少ないに越したことはないなと思っています。遅延はカタログスペックが記載ないので、実際に試してみるしかないですが、自分は当面はRODE信者で行きたいと思います（RODEの他機種は計測できてないですが、、）

またハードにしろソフトにしろミキサーを選定する時は遅延補正機能も重要だなと思う一件でした。何年か前に買ったZOOM F6がチャンネル別に遅延補正量を設定できて持ってて良かったと思いました。

■リモコン制御可能なPTZカメラ OBSBot Tail Air

購入は2023年末ですが、実際に業務に投入したのが今年なので。

PTZとはパン／チルト／ズームの頭文字で、これらを電動制御できるのがPTZカメラになるのですが、本製品はHDMI出力またはUSB（UVC）カメラとして使えつつ、リモコンでPTZコントロールが使えるのがミソ。ネットワーク制御もできますがそういう面倒なセッテイング抜きでリモコンで動かせるので設営が楽ですし、見学者の方に渡して好きに画角調整してもらうこともできます。モデレーターに「ちょっと参加者さんの顔が見切れてるのでカメラ向き直して～」等とリクエストが来るのを避けられます。

惜しむらくは広角寄りの画角で、参加者の顔カメラとしては良いですが、手元や画面をアップにするにはちょっと望遠側が足りません。2025年早々に望遠モデルが出るようですが、結構お高いので悩ましいところです。案件が潤沢にあれば検討しますが、当面は画面寄りはFX30、顔をTail Airという組み合わせかなーと。

■音声テキスト化（書き起こし）AI周り

UTの発話記録を書き起こせると分析が捗りますが、今までは小規模案件ではなかなかプロのタイピストの方に依頼するのも難しかったです。私は、AI書き起こしを活用し、拙作ツール「動画眼」を使って、ある単語が出たシーンを頭出しできる環境を作ることで、精度が完璧でなくともビデオの見返しを劇的に楽にできるということを提唱していまして、そのための書き起こしツールを日々模索しています。実務案件だとクラウド系の書き起こしは機密上使えない（クライアントNG）ことがほとんどなので、ローカルPC上でエッジ処理できるものに限っています。これまではPremiere Pro内蔵の書き起こしエンジンを使っていましたが、去年くらいからChatGPTで有名なOpenAIがリリースしているWhisperとその派生エンジンを使い始めています。

これまでオリジナルのWhisper、VAD処理を一括で行い精度をあげられるstable-ts、Mac用GUIクライアントで手軽に使えるMacWhisperなどを紹介してきました。

日々進歩の激しいカテゴリなので、一概にこれがいいとは言えませんが、Windowsでそれなりに良いGPUを搭載してPCがあるならstable-ts、AppleシリコンMacならMacWhisperが良いスターティングポイントになると思います。

■ビデオスイッチャー RODECast Video

長らくATEM MINIシリーズ一強だったビデオスイッチャー界隈に期待の新星が現れました。RODEのRODECaster Videoです。これを書いてる時点でまだ手元に届いていないのですが、年末駆け込みで発注済み。どこも初回入荷分は品切れの中、奇跡的にラス1をゲットできたので、ショップの年明け営業が始まり次第出荷されるはずです。別途紹介記事を準備中。

【国内正規品】RODE Microphones ロードマイクロフォンズ ロードキャスター ビデオ ブラック RCV

190,300円(01/20 19:12時点)

Amazon楽天市場

Amazonの情報を掲載しています

後発だけに色々便利だったり配線をスッキリさせられる要素が詰まっています。特に前述のRODE Wirelessシリーズマイクを直接ペアリングできるのはヨサゲ。3画面以上の合成レイアウトを作るUIも直観的になっています。ATEM MINIがもともと放送機器メーカーのBlackmagic design製なだけあって、物理UIもソフトもかなりプロ仕様だったのに対し、本機はかなりアマチュア配信者フレンドリーなユーザビリティを実現してきている印象。

ATEM MINI EXTREME ISOよりも実売価格で上を行くのが悩ましいですが、3画面以上の合成が必要なら有力な候補になる気がします。逆にそれ以下ならATEM MINIの下位モデル（数万円）か、割と非力なPCでもOBS Studioでいける気がします。

■スマホ画面収録用ミラーリングツール ApowerMirror

定番だったReflector4を久々に使おうとしたら何故かAndroidの画面キャストを受けることができず、代替ソフトを模索しました。ApowerMirrorという製品に辿り着きましたが、Reflector4と比べるとかなりお高いので、月額サブスクを必要な月だけ契約する形にしつつ、Reflectorのアップデートを待っています。

■3Dプリンター

2024年は2台目の3Dプリンターとしてそこそこ良いもの（BambuLab X1-Carbon Combo）を導入し、個人ホビーとしても活用しまくりでしたが、業務で使うものもそこそこ作りました。

記事にはしてませんが、iPadの背面にスライド送りリモコン（Logicool SPOT）を取り付ける治具も作り、参加者に見せるパワポスライドの制御と、iPad + Apple Pencilでの記録を持ち替え無しでできる環境を作ったり。

金融系の調査でダミーのマイナンバーカードを用意する必要があって、厚紙やプラ板を手でカットするのよりもかなり精緻なものが作れました。

こうした実査中の小さなストレスを解消したり、よりリアルな場作りをしたりするのに3Dプリンターは有用だなと思っています。汎用的なものはどんどん公開していきたいと思いますし、何か困り毎があればご相談いただければと思います。

■まとめ

2024年は正直仕事の量はガクっと減ってしまい、商売としては割とピンチでしたが、その分、ひとつひとつの案件には腰を据えてじっくり取り組め、こうした準備も手の込んだことが色々できたかなという気がしています。

これらのノウハウを活かせるお仕事が2025年はたくさんくるといいなぁ。お待ちしております。

ユーザーテストでタスク完了後などにふり返りでインタビューをしますが、その時により記憶を鮮明にしながら振り返ってもらうために各画面をもう一度見せたいことがあります。しかし、ECサイトの申し込みフォーム等だとブラウザのバックでは単純に戻れなかったりしますし、最初から辿ると再入力などでもたつきがちです。

そこであらかじめスクリーンショットを用意してスライドショーで見せたりするわけですが、それにもいくつかハードルがあります。例えば縦に長いスクショ画像を一般的な画像ビューワーで表示すると、大抵は画像全体がウインドウに収まるように表示されてものすごく細長～い状態になったりします。それを適切なサイズにズームさせなければなりません。また参加者の目の前にあるタスクに使ったPCをモデレーターが別席から操作するのにマウスだけですべてのオペレーションをしたいのに、例えばWindows標準の「フォト」アプリなどは画像の切り替えがキーボードの左右カーソルキーでしかできません。また理想の画像ビューワーがあっても、クライアントのPCに許可無くインストールできなかったりすることもしばしば。

というわけで、理想の回顧法向け画面遷移スライドショーができるスクリプトをHTML + JavaScriptで作ることにしました。HTML + JSならインストール不要でブラウザで開くだけです。作るというか、ほぼほぼGitHub Copilotに希望を伝えて作ってもらったというのが正しい。生成AIスゴい！何度か追加プロンプトを入れて書き直してもらいましたが、直接書いた行は1割もない気がします。

■設定した要求仕様

• マウス左クリックで次、右クリックで前の画像を表示する
• 幅を固定で表示し、縦にはみ出る分はホイールでスクロール
• 初期位置は画像の一番上（ファーストビュー）を表示

基本的にこれだけ（以外とこれができる画像ビューワーがない！）。

本当はフォルダ内の画像ファイルリストを自動的に取得して先頭から順に表示するようにしたかったんですが、ブラウザのセキュリティ仕様的にJavaScriptでローカルフォルダをスキャンすることは不可能だったので諦めました。Node.jsのようなフレームワークを使い始めると受け渡しが煩雑になってしまい本末転倒になってしまうので。

■完成したコード例

index.html （HTMLファイル）

const images = {}; の中に画像ファイルを列挙します。”で囲って、最後に,をつけてください。必要な数だけ増減OKです。このhtmlファイルがあるディレクトリに画像ファイルを置く場合の例です。例えば「画像」というサブフォルダに入れるなら、

styles.css （スタイルシートファイル）

ポイントとしては、6行目のbackground-colorを変更すると、ウインドウの余白部分の色がかわります。実際にそのサイトでウインドウを幅広くした時の背景色にあわせるとより本物っぽく見えるでしょう。

もうひとつ重要なのが18行目のmax-widthの値です。単純に100%とかだとウインドウ幅一杯に広がってしまうので、なんらか実際の表示にスケールを固定したいです。画像キャプチャに使うツールにもよりますが、今時のディスプレイは画像のピクセル数と表示サイズが1:1ではありません。例えば画像ファイルの横ピクセル数が1763pxでした。これをそのままmax-widthにいれると実際より大きく表示される場合があります。これは例えばWindowsならディスプレイ設定画面の「拡大/縮小」設定値に応じて調整する必要があります。写真のように150%だった場合、1.5倍に拡大されているので、max-widthには1763を1.5で割った数値を指定します。

script.js （JavaScriptファイル）

このファイルは基本的にいじらなくて大丈夫です。当初最後のファイルで左クリックすると最初の画像にループする仕様でしたが、連打しがちなのであえてループしないよう修正してもらいました。

画像キャプチャのコツ

後は画像を用意するだけですが、注意するのは毎回同じ幅でキャプチャすることです。縦の長さはバラバラでもスクロールするので構いませんが、横が違うと表示サイズが大きくなったり小さくなったりして見栄えが悪いです。

なので、毎回矩形範囲指定するようなキャプチャーツール／機能（macOSのShift + Command + 4とか）だととてつもなく面倒です。ウインドウ範囲や繰り返し同じ範囲をキャプチャしてくれ、なおかつ連番でファイル名をふって保存してくれると良いです。Windowsだと古くはWinShot辺りでしょうか。Windows11で動くかわかりませんが…

Webサイトの場合、オススメなのはFireShotという拡張機能です。

• 長いページを自動でスクロールさせて連続キャプチャし、1枚の長い画像につなげてくれる
• 今みえている範囲だけのキャプチャも可能
• ファイル名の初期値を日付や連番など柔軟に設定できる
• 開発者モードでスマホ表示にしていても使える
• 有料版もあるが無料版で基本的に充分事足りる

といった特長があります。今回のようなスライドショーを作る以外でも普通に便利です。

■まとめ

マウス完結で簡単に画面遷移スライドショーができるツールをHTML/JavaScript/CSSだけで作成しました。アプリインストール不要でローカルファイルで実行できますし、ブラウザ内で表示されるので、Webサイトのキャプチャなどはそれなりにリアルに提示できます。参加者とモデレーターがそれぞれマウスを持っていれば互いに「ここが～」などとポイントしつつページを行き来できるのも便利だと思います。

そのままWebサイトにアップしてURLを共有すれば誰かに見せるということもそのままできます。リモートUTなどでは遠隔の参加者にアクセスしてもらい、Zoomのリモートコントロールで双方が操作することは可能そうですね。

是非お役立てください。