マウス・UIナビゲーション

UIスマートスナップ(エイムアシスト)&ウィンドウ整列手順書 (UI Snap)

本ページでは、マウス操作時の細かな照準合わせを補助する 「UI スマートスナップ(エイムアシスト)」 と、キーボードからウィンドウを素早く配置する 「ウィンドウ整列スナップ」 の2つの機能について解説...

小さなボタンへのマウス照準を支援する「エイムアシスト」と、ホームポジションからのウィンドウ整列ガイド

本ページでは、マウス操作時の細かな照準合わせを補助する 「UI スマートスナップ(エイムアシスト)」 と、キーボードからウィンドウを素早く配置する 「ウィンドウ整列スナップ」 の2つの機能について解説します。


目次


第1部:UI スマートスナップ(エイムアシスト)

ウィンドウ右上の「閉じる」ボタンやチャットの絵文字など、小さなUI要素をマウスで狙う際は手元の微調整が必要です。 UI スマートスナップは、マウスポインタをボタンの近くで止めるだけで、要素の中心へカーソルを自動吸着させます。 小さなターゲットを細かく狙い定める負担が和らぎ、大まかなマウス移動だけで確実にクリックできます。

1. 小さなボタンのクリックミスを減らす2段階アシスト

移動中に突然カーソルが奪われる違和感を防ぐため、「予告」から「吸着」へと進む2段階の仕組みを採用しています。

  1. 第1段階:予告ハイライト表示(Preview)
    • マウス移動を止めて 60ms が経過すると、周囲の検知範囲(既定値 50px)にある最も近いUI要素を検出します。
    • すぐにはカーソルを動かさず、まず対象要素を 予告色(既定値:ブルー #0078D7) の枠線で囲んで通知します。
  2. 第2段階:中心への自動スナップ吸着(Snapped)
    • 予告枠が出たまま スナップ猶予時間(既定値:0.50秒) マウスを動かさずに待つと、要素の中心へ吸着します。
    • 吸着と同時に枠線が スナップ後色(既定値:レッド #FF0000) に変わり、そのままクリックして操作できます。
    • 横幅の広いテキスト入力欄(幅 120px 超)では、現在のマウスX座標を保ったまま入力欄の内側へ自然に吸着します。
    • 最初から目標位置の 4px 以内にポインタが止まった場合は、カーソルを動かさず即座に確定枠を表示します。

UI スマートスナップ(エイムアシスト)実機デモ

図: UI スマートスナップ(実機デモ) - ボタンの近く(半径 50px 圏内)でマウスを止めると青い予告枠が点灯し、0.50秒 静止で要素の中心へ自動吸着して赤い枠へ変化。3px 以上の手動移動で即座に解除


2. 手動操作を妨げない安全設計とハイブリッド検知

ユーザーの意図しない場面でカーソルが動くのを防ぐため、複数の安全ガードを備えています。

  • 手動移動による即時キャンセル: 予告中や吸着後にマウスを 3px 以上動かすと、ハイライトと吸着は即座に解除されます。 なお、2px 未満のわずかな手ブレは自動で吸収し、待機タイマーが途切れないよう制御します。
  • タイピング中・ドラッグ中の自動バイパス: 文字入力中やマウスドラッグ中、ウィンドウ移動中、および Space キー押下中はスナップ処理を自動で休止します。
  • Web・Electronアプリやタイトルバーへの対応: UI Automation の局所ツリー走査と16点プローブ探索を組み合わせたハイブリッド方式で要素を検出します。 標準アプリだけでなく、ブラウザやチャットアプリ(Slack / Discord 等)の小さなアイコンや右上ボタンにも対応します。

3. エイムアシストを有効化・調整する手順

設定画面の「マウス」タブから、検知範囲や吸着までの待ち時間を好みに合わせて調整できます。

設定画面 - マウスタブ(UIスマートスナップ設定)
図: 設定画面「マウス」タブ - 下部の「UI スマートスナップ (エイムアシスト)」から感度や配色を調整

  1. タスクトレイの fjFlow アイコン を右クリックし、設定 (Settings) ➔ 「マウス」 タブを開きます。
  2. UI スマートスナップ (エイムアシスト) セクションで以下の項目を設定します:
    • 近傍のボタン・UIへ自動スナップする: トグルをオンにして機能を有効化します(プリセット「視覚支援」「プレゼンテーション」「システムモニター」では標準でオンになります)。
    • 検知範囲 (半径): ボタンを探す半径を 20px 〜 150px の範囲で調整します(既定値: 50px)。
    • スナップ猶予時間: 予告枠が出てからカーソルが吸着するまでの時間を 0.05秒 〜 1.00秒 で調整します(既定値: 0.50秒)。
    • 予告色 / スナップ後色: 吸着前と吸着後のハイライト枠のカラーを選択します。
  3. 左サイドバー下部の 設定保存 をクリックして反映します。

第2部:ウィンドウ整列スナップ(キーボード操作)

マウスでウィンドウの端をドラッグして並べる作業は、手元の移動が大きく時間もかかります。 ウィンドウ整列スナップを使えば、ホームポジションからショートカット一発で画面の中央や四隅へウィンドウを配置できます。

1. ウィンドウを画面中央へ配置する手順

散らかったウィンドウを現在のディスプレイの中央に配置する手順です。

  1. 配置したいウィンドウをアクティブにします。
  2. キーボードで Space + s; を押します。
  3. ウィンドウが現在のモニターの 画面中央 へ素早く移動配置されます。

UIスナップ ウィンドウ整列 実機デモ

図: ウィンドウ整列スナップ(実機デモ) - Space + s; で画面中央へセンタリング配置。さらに Space + sh(左端)や Space + sl(右端)でウィンドウを整列


2. 画面を左右・上下に2分割スナップする手順

2つのアプリを並べて比較・作業する際、画面の左右または上下半分にスナップする手順です。

  1. スナップしたいウィンドウをアクティブにします。
  2. Space を押しながら、以下のいずれかのコマンドを打鍵します:
    • Space + sh: 画面の 左半分(50%) にスナップ配置します。
    • Space + sl: 画面の 右半分(50%) にスナップ配置します。
    • Space + sk: 画面の 上半分(50%) にスナップ配置します。
    • Space + sj: 画面の 下半分(50%) にスナップ配置します。
  3. ウィンドウが指定された半面領域に配置されます。

[!TIP] Vim 準拠の方向キー(h:左, j:下, k:上, l:右)と一致しているため、直感的に指が動きます。


3. 画面を4分割(クォーター)スナップする手順

4Kディスプレイやウルトラワイドモニターで、4つのアプリを同時に並べて作業する手順です。

  1. 対象ウィンドウをアクティブにします。
  2. Space を押しながら、以下のクォータースナップコマンドを打鍵します:
    • Space + su: 画面の 左上(25%) にスナップ配置します。
    • Space + so: 画面の 右上(25%) にスナップ配置します。
    • Space + sn: 画面の 左下(25%) にスナップ配置します。
    • Space + s.: 画面の 右下(25%) にスナップ配置します。
  3. ウィンドウが指定された4分割コーナーへ整列配置されます。

4. マルチモニター間でウィンドウを移動する手順

複数のディスプレイをまたいでウィンドウを移動させる手順です。

  1. 移動させたいウィンドウをアクティブにします。
  2. Space を押しながら、以下のコマンドを打鍵します:
    • Space + wh: ウィンドウを 左側のモニター へ移動します。
    • Space + wl: ウィンドウを 右側のモニター へ移動します。
  3. ウィンドウが隣のディスプレイへ移動し、元のサイズ比率を維持して配置されます。

5. ウィンドウの最大化・最小化・終了を実行する手順

ウィンドウの基本制御を手元からキーボードで実行する手順です。

  1. 対象ウィンドウをアクティブにします。
  2. Space を押しながら、以下のコマンドを打鍵します:
    • Space + sm: ウィンドウの 最大化 / 元のサイズに戻す をトグル切り替えします。
    • Space + s\: ウィンドウを安全に 閉じる (Alt + F4 相当) を実行します。