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

UIヒントナビゲーション操作手順書 (UI Hints)

UIヒントナビゲーションは、画面上の操作可能なUI要素（ボタン、リンク、入力欄等）の上にアルファベットの「ヒントバッジ」をオーバーレイ展開し、1〜2打鍵のタイピングだけでマウスポインタを瞬時にジャンプ...

マウスを持たずに、画面上のあらゆるボタン・リンク・入力欄をキーボードだけで直接クリックする手順ガイド

UIヒントナビゲーションは、画面上の操作可能なUI要素（ボタン、リンク、入力欄等）の上にアルファベットの「ヒントバッジ」をオーバーレイ展開し、1〜2打鍵のタイピングだけでマウスポインタを瞬時にジャンプ＆クリックさせる高速操作機能です。

目次

1. 画面上の全要素を即座にクリックする手順 (HintClickAll)

最も素早く目的のボタンやリンクをクリックする基本手順です。

  1. キーボードで Space + m を押します。
  2. 画面上のすべてのUI要素（ボタン、リンク、フォーム等）の上に、2文字のアルファベットヒントバッジ（aa〜zz）がオーバーレイ展開されます。
  3. 目的の要素の上に表示されている 2文字のアルファベット（例: ab）をキーボードでタイピングします。
  4. マウスポインタが目的の要素へ瞬時に自動移動し、左クリックが即座に実行されます。クリック位置に青い波紋（リップルアニメーション）が表示され、ヒントバッジは自動消去されます。

UIヒントナビゲーション 実機デモ
図: UIヒントナビゲーション - Space + m で全要素に2文字ヒントが展開され、2打鍵で即座にクリック

ヒントバッジの背景色とUI要素の種別（カラーコーディング）

展開されるヒントバッジは単一色ではなく、目的の操作対象を一目で直感的に見分けられるよう、UI要素の機能や種別ごとに最適な背景色（Neo-Capsule カラーパレット） で色分けされています。

UIヒント Neo-Capsule カラーパレット一覧
図: UIヒント Neo-Capsule カラーパレット - 要素の役割ごとに最適な背景色と文字色を自動適用

サンプル 背景色 要素の種別 / レイヤー 代表的なUI要素 文字色
ボタン ディープシアン (#0891B2) ボタン (Button) 押しボタン、OK / キャンセルボタン、ツールバーボタン 白文字
入力欄 アンバー・イエロー (#D97706) 入力欄 (Input) テキストボックス、検索バー、エディタ編集欄 濃紺ブラック文字
リンク ロイヤルブルー (#2563EB) リンク (Link) ハイパーリンク、Webリンク、パンくずリスト 白文字
タブ エメラルドグリーン (#059669) タブ (Tab) タブページ、ブラウザタブ 白文字
メニュー ローズレッド (#E11D48) メニュー (Menu) メニューバー、メニュー項目、コンテキストメニュー 白文字
選択 バイオレットパープル (#7C3AED) 選択・スライダー (Select) コンボボックス、ドロップダウンリスト、スライダー、ツリービュー 白文字
選択肢 クリーンオフホワイト (#F8FAFC) 選択肢・チェック (Choice) チェックボックス、ラジオボタン 濃紺ブラック文字
その他 漆黒スレート (#0F172A) その他 (Others) 静的テキスト、ラベル、表セル、画像、カレンダー項目 白文字
画像認識 リッチテラコッタ (#9A3412) 画像認識要素 (CV) AI Computer Vision で自動検出されたアイコンやカスタムUI部品 白文字
補助 クールスレートグレー (#475569) 補助グリッド (Aux) 画面全体の空白エリアを網羅する補助ナビゲーションバッジ 白文字
確定強調 ビビッドネオンオレンジ (#FF6B00) アクティブ強調 (Active) 1打鍵目入力時に前方一致した候補バッジ（確定ハイライト発光） 白文字（二重発光枠）

[!TIP] 高い視認性設計: すべてのバッジには高精細な白枠線（1.0px）とアンビエントシャドウ（陰影）が施されており、明色テーマ・暗色テーマどちらのウィンドウ背景の上でも文字が埋もれず、瞬時にくっきり判読できるように最適化されています。 誤った文字を入力した場合は、Backspace または Space + f で1文字消去できます。途中でキャンセルしたい場合は Esc または Space + x を押します。

2. 要素タイプを絞り込んでヒントを表示する手順 (フィルタヒント)

画面内に要素が多すぎる場合、特定の要素タイプだけを抽出してヒントを表示する手順です。

  1. Space を押しながら、以下のフィルタコマンドを打鍵します：
    • Space + hi (HintInput): テキストボックス・検索バー・入力欄のみを抽出。
    • Space + hb (HintButton): ボタン・チェックボックス・ラジオボタンのみを抽出。
    • Space + hl (HintLink): ハイパーリンクのみを抽出。
    • Space + hs (HintSelect): ドロップダウン・コンボボックス・リスト項目のみを抽出。
  2. 画面上の該当する要素だけにヒントバッジが表示されます。
  3. 目的の2文字を打鍵して即座にクリックします。

3. ポインタ移動後にクリック操作ガイドを使用する手順

即座にクリックせず、まずポインタを移動させてから右クリックやダブルクリックを選択する手順です。

  1. Space + <m>（長押し）または Space + ha を押します。
  2. 画面上の全要素にヒントバッジが表示されます。
  3. 目的の2文字を打鍵します。ポインタがターゲット位置へ移動し、カーソル周囲に操作ガイドリングが表示されます。
  4. ガイドリングが表示されている状態で、以下のいずれかのアクションキーを押します：
    • j または f: 通常の左クリックを実行します。
    • <j>（長押し）: ダブルクリックを実行します。
    • k: 右クリックを実行（コンテキストメニューを表示）します。
    • Space: 拡大鏡グリッド（次節参照）を起動します。
    • Esc: 何もクリックせずガイドを閉じます（ポインタ位置は維持）。

4. 微小なボタンやリンクを拡大鏡グリッドでピンポイント選択する手順 (Zoom Grid)

密集した小さなリンクや、数ピクセルのチェックボックスを確実に狙い撃つ手順です。

  1. 前節の手順で操作ガイドリングを表示します（Space + ha または Space + <m> ➔ 目的の2文字を入力）。マウスポインタがターゲットへジャンプします。
  2. キーボードの Space キーを押します。
  3. カーソル周辺領域を 4倍に拡大した「拡大鏡グリッド」ウィンドウ が画面の最適な位置にポップアップし、内部に 5×5 のアルファベットグリッド（a〜y） が展開されます。
  4. 目的の中心位置に対応する 1文字（例: n）を打鍵します。
  5. ポインタが微小要素の中心へピンポイントで移動し、j キーを押して即座にクリックが実行されます（青い波紋アニメーションが展開）。

UIヒント 拡大鏡グリッド 実機デモ

図: UIヒント拡大鏡グリッド 実機デモ - Space + ha でターゲットへジャンプ後、Space で4倍拡大鏡（5×5グリッド a〜y）を展開し、1文字打鍵で微小位置へピンポイント移動・クリック

5. 過去のクリック位置へワンタッチで再ジャンプする手順 (Mouse History)

直前に作業していた画面位置へ、マウスを動かさずに一瞬でカーソルを戻す手順です。

  1. Space + mh を押します。
  2. 過去にクリックした直近26箇所の座標に、ローズ赤の円形バッジ（A〜Z）が画面上にオーバーレイ展開されます。
  3. 戻りたい位置の 1文字（例: C）を打鍵します。マウスポインタが過去のクリック座標へ瞬時にテレポートジャンプします。
  4. 到着後は自動的に操作ガイドが表示され、j（左クリック）または k（右クリック）をキーボードから押すだけで即座にクリック操作が可能です（青い波紋リップルアニメーションで確定表示）。

マウスヒストリー 実機デモ

図: マウスヒストリー（実機デモ） - Space + mh で過去のクリック位置にローズ赤バッジ（A〜Z）が展開。キーボードで1文字打鍵するだけでポインタが瞬時テレポートし、J/Kキーで即座にクリック

6. ヒントの外観や検出感度をカスタマイズする手順

ヒントバッジの配色、タイムアウト時間、CV検出感度を調整する手順です。

  1. タスクトレイの fjFlow アイコンを右クリックし、設定 (Settings) を開きます。
  2. 「マウス」 タブをクリックします。
  3. 以下の項目を調整します：
    • ヒントタイムアウト時間: 表示後に無操作で自動キャンセルされるまでの秒数（デフォルト: 3.0秒）。
    • CV検出感度 (1〜20): Computer Vision エンジンの検出感度スライダー。
    • 波紋アニメーション: クリック時の波紋フィードバックの有効/無効。
  4. 設定保存 をクリックします。