FancyZones レイアウトエディタ

コラム

数値で決めたい位置を、マウスでしか合わせられない画面はなぜ疲れるのか

FancyZones のキャンバスのレイアウトは、領域の位置と大きさをピクセルで保持しています。それなのに、付属のエディタで値を決める手段は、マウスで枠を引っ張ることと、矢印キーで少しずつ動かすことだけです。

答え: ユーザーがやりたいことに適した手段が用意されていないからです。「境目をちょうど 1920 にしたい」なら数値を入力する、「下に隠れた領域を直したい」なら一覧から選ぶ、というのが素直な手順です。付属のエディタには、それをマウスと矢印キーで少しずつ合わせる手段しか提供されていません。

1px を手で合わせる

3840px の画面を左右に分けるなら、境目は 1920 です。付属のエディタは画面全体を使い、領域を実際の大きさ（等倍）で描くので、マウスを 1px 動かせば辺も 1px 動きます。ところが、マウスの分解能が高くても、1px だけ動かすことは極めて難しく、だいたいいつも 2px 以上動きます。こういう時は、いったん遠くに離してから、目標の座標に偶然一致することを祈ってアプローチすることを繰り返すのです。

こうして作ったレイアウトには、狙っていない端数が残ります。このツールを作るきっかけになったレイアウトのファイルを開くと、左半分の領域の幅が 1922、右半分の領域の左端が 1918 で、真ん中で 4px 重なっていました。右下の領域は右端が 3842 で、画面（幅 3840）から 2px はみ出していました。どれも、マウスで合わせたつもりの値です。

FancyZones付属のエディタでは、矢印キーで 10px、Ctrl＋矢印キーで 1px 動かせます。その説明は画面中央のダイアログで説明されています。しかし、たまにしか使わないのに、そういったキー割り当てを覚えたり、画面中央に表示されている、その説明を読み直すのは億劫です。

重なった下の領域を選択するには

キャンバスのレイアウトは領域を重ねられます。付属のエディタでは、領域を押すとその領域が前面に来るので、少しでも見えている所があれば選び直せます。困るのは、ほかの領域にすっかり覆われて、見えている所が残っていない領域です。押せる所がないので、マウスでは選べません。

以前は、覆っている領域をいったん少しずらし、下の領域の端をのぞかせないと操作できませんでした。今は Tab キーで順に選べますが、選んでも前面には出ないので、矢印キーで動かすことになります。

重ねられる仕組みを用意しておきながら、重ねたものを扱う手段が足りないと、ユーザーはストレスを感じるわけです。

ほかのソフトはどうしているか

図形を重ねて扱うソフトの多くは、マウスとは別の方法を用意しています。PowerPoint は図形の書式設定で位置と大きさを cm 単位の数値で入れられ、「選択ウィンドウ」に重なった図形が一覧で並ぶので、後ろに隠れた図形も名前から選べます。スライドの上で Tab キーを押すと、重なりに関係なく図形を順に選んでいきます。

どれも、マウスで大まかに置き、決めたい値は数で入れ、見えない物にも見えている物と同じように手が届く、という考え方です。マウスで直接つかんで動かす操作は分かりやすい反面、それしか方法がないと、正確さと到達できるかどうかに影響します。

重なりは FancyZones 自身が想定している

FancyZones の設定には「When multiple zones overlap」という項目があり、重なった所にウィンドウを持っていったとき、どの領域に入れるかを選べます。PowerToys のソースコード（FancyZonesLib/Layout.cpp）では、面積の小さいほう（Smallest）、大きいほう（Largest）、マウスの位置で分ける（Positional）、中心が近いほう（ClosestCenter）の 4 つです。エディタで上に描かれているかどうかは使いません。

大きな領域の中に小さな領域を置いて「面積の小さいほう」と組み合わせる、という使い方は、仕組みの上では想定されています。この機能は後で追加されたのですが、レイアウトエディタは、まだそれに追いついていません。

開発者への教訓

このコラムでは FancyZones をやり玉に挙げましたが、たいていの場合、開発者はユーザーのストレスに事前に気が付けないものです。これは私たちのようなソフトウェアベンダーに限らず、ユーザー企業のシステム部門、UI/UXを看板に掲げるデザイナーであっても同じです。

ユーザーインターフェースの設計は、お客様の要求（Requirement）の理解の段階からすでに始まっており、画面を機能からではなく、ユーザーの目的から導き出すことが最善だと私たちは考えています。そのため、ユーザーがシステムを使って目的を達成するまでの具体的な利用シナリオを何度も検討してから、どのようなユーザーインターフェースにするかを選択しています。

このツールも同じ考え方で、Web ブラウザで動き、いろいろな端末の画面に収まることを前提に、FancyZones 付属のレイアウトエディタの使いにくさを解決しています。領域のプレビューは画面に合わせて縮小して描画するので、ドラッグで位置や大きさを正確に指定できることはあきらめ、数値入力できるようにしました。全部の領域の位置と大きさを一覧で表示することも、スクロールが必要になるのであきらめました。入力欄を表示するのは選択中の 1 つだけにして、下に隠れた領域も「次の領域」ボタンや領域の中央付近（番号）のクリックや複数回のクリックで選択できるようにしています。何をあきらめるかを決められるのは、目的がはっきりしているからです。

この記事は、2026 年 11 月 6 日に公開された PowerToys v0.102.3101 を元にしています。バージョンにより、FancyZones の仕様は変わることがあります。