受注入力の画面に商品コードを打ち込む。合っているか不安になって、別タブの在庫一覧に切り替えて確認する。戻ってきて続きを入力する。この往復が1日に何十回もあり、転記ミスはたいていこの切り替えの瞬間に起きます。
現場は「画面を2つ並べたい」と言い、情シスは「ではウィンドウを2枚開いてください」と答える。ところが業務アプリは1つのタブで完結する設計になっているので、同じ画面を2枚開くとセッションが競合したり、片方の操作がもう片方に反映されなかったりします。
この「一部分だけを常に見えるところに置いておきたい」という要求に、ブラウザ標準の仕組みが使えるようになってきました。
動画のためだけの機能ではなくなった
ピクチャーインピクチャーという言葉は、動画を小窓で再生し続ける機能として知られています。この小窓に、動画ではなく任意の HTML を入れられるようにしたのが Document Picture-in-Picture API です。
できることは単純です。
- 常に最前面に表示される別ウィンドウを開く
- そこに自前の HTML・CSS・JavaScript を描画する
- 元のページ側からその中身を更新する
つまり、在庫一覧の表だけを切り出して、常に見える小窓に置いておけます。ブラウザを最小化しても、別のアプリに切り替えても、その小窓は残ります。画面を切り替えるのではなく、必要な情報のほうを手元に置くという発想の転換です。
Firefox 151 でも実装され、Chrome・Edge に続いて使えるブラウザが広がりました。ただし後述の通り、全ブラウザで揃ったわけではありません。
業務アプリで効くのは、参照と入力が分かれている場面
すべての画面に付けても意味はありません。効くのは、入力しながら見続ける必要がある情報がある場面に限られます。実際に相談を受ける中で当てはまりやすいのは次のような場面です。
受発注の入力。 商品マスタや在庫数を見ながらコードを打つ。入力欄はメイン画面、参照する表は小窓、という分担が素直に成立します。
問い合わせ対応。 顧客情報や過去の対応履歴を見ながら、別画面で回答を書く。CRM とメール画面を行き来している会社では、往復回数がそのまま対応時間になっています。
現場作業の記録。 作業手順を見ながらチェックリストを埋める。手順書が PDF で別ウィンドウに開かれ、埋めるのはブラウザ、という運用になっている会社は多いはずです。
逆に向かないのは、片方を見終わってからもう片方に移る類の作業です。承認画面のように「読んで、判断して、押す」で終わるものは、小窓にしても往復が減りません。
依頼する前に確認する3点
制作会社や開発会社に「あの小窓を付けてほしい」と言う前に、決めておくと話が早い点が3つあります。
1つ目は、小窓に出す情報を1種類に絞れるか。 在庫も顧客情報も手順書も全部出したい、となると小窓の中に画面遷移が必要になり、作るものが一気に増えます。最初は1種類にしてください。使ってみると、本当に常時見たいものは1つしかないと分かることが多いです。
2つ目は、小窓の中で操作させるか、見るだけか。 見るだけなら実装は軽く済みます。小窓の中でクリックして絞り込みたい、並べ替えたい、となると別画面を1枚作るのと変わらない工数になります。ここが見積もりの分かれ目です。
3つ目は、対応していないブラウザで何が起きるか。 これが最も見落とされます。
対応していない環境をどう扱うか
Document Picture-in-Picture は、まだすべてのブラウザで使えるわけではありません。社内標準ブラウザが決まっていない会社では、必ず「使えない人」が出ます。
対応方針は事前に決めておくべきで、選択肢は実質2つです。
- 小窓が使えない環境では、従来通り別タブで開く。 機能は落ちるが業務は止まらない。既存の動線をそのまま残すので、追加コストが小さい
- 小窓が使える環境を業務要件にする。 社内標準ブラウザを指定し、それ以外はサポート外とする。実現できる会社は限られます
現実的にはほぼ1番です。「使えるとより便利になる」機能として設計し、使えないと業務が回らない作りにしない。 これは新しい仕様を業務アプリに入れるときの一般則で、dialog 要素で作るモーダルを検討したときと同じ判断になります。
検収時には、対応していないブラウザで1回操作してみることをおすすめします。ここで「ボタンを押しても何も起きない」状態になっていれば、それは実装の穴です。
小窓を付ける前に、往復回数を数える
導入判断の前に、1つ測っておくと無駄が減ります。実際にその往復が1日に何回あるのかです。
方法は原始的で構いません。担当者に半日だけ、切り替えた回数を正の字で数えてもらう。20回に届かないなら、小窓を作る費用に見合いません。 100回を超えるなら、開発費より削減される時間のほうが大きくなります。
この数字は、入力フォームの離脱を減らす改善でも同じ使い方をします。体感で「面倒だ」と言われているものが、数えてみると1日5回だった、というのは実際によくあります。
次にやること
まず、社内で最も画面を往復している業務を1つ特定してください。 現場に「1日で一番切り替えている画面は何ですか」と聞けば、たいてい即答が返ってきます。
そのうえで、その往復のうち「見るだけ」の側がどちらかを決めてください。 見るだけの側が小窓に出す候補です。ここまで決まっていれば、開発側に渡す情報としては十分です。
業務Webアプリの画面設計、既存システムの操作性改善、ブラウザ標準機能を使った実装については、グリームハブの開発・AI・自動化のご相談で承っています。現在の画面構成と利用環境によって取れる手が変わるため、個別にご相談ください。お問い合わせからどうぞ。
