PR

【手順】MX Masterのボタン割り当てをFigma制作に合わせて整える【Options+】

Teen working on graphic design using laptop at home with creative tools. (Photo by Jonathan Borba on Pexels) デザイン・制作
【手順】MX Masterのボタン割り当てをFigma制作に合わせて整える【Options+】(アイキャッチ)
記事内に広告が含まれています。

Figmaでフレームを細かく整える日は、トラックパッドよりマウスの方がラクなことが多いです。私もコーディング寄りの案件ではキーボード中心ですが、UIの余白調整やコンポーネントの並べ替えは、MX Master系の親指ボタンにズームやレイヤー操作を載せた方が手が止まりません。

本記事は、MX Master Figma 設定に絞り、Logicool Options+(旧Options)で「制作で毎日使う3アクション」だけを先に決める手順です。キーボードショートカットの暗記を増やすのではなく、親指とサイドスクロールに寄せる考え方で書いています。機種は公式情報と私の利用環境(Mac・Figmaブラウザ/デスクトップアプリ)を前提にしています。Windowsの表記差は公式ヘルプを確認してください。

この記事でわかること

  • Options+でFigma用プロファイルを分ける理由
  • 親指ボタン・サイドスクロールの割り当て例(ズーム/フレーム移動)
  • Macのショートカットと干渉しない組み合わせの見直し方

先に結論

A young designer focused on creating user interfaces on a desktop computer in an office setting. (Photo by Zayed Hossain on Pexels)(先に結論)
  • まずOptions+で「Figma」アプリ用プロファイルを作り、親指ボタンはズームイン/ズームアウト、サイドスクロールは水平スクロール(キャンバス移動)に寄せるのが失敗が少ないです。
  • 親指の下ボタンは、私はShift+1(ズームフィット)かレイヤーパネル表示切替のどちらか一方に固定しています。両方入れると押し間違いが増えます。
  • マウス本体がまだなら、長時間制作向けの定番は MX Master 3S です。キーボードも揃えるなら MX Keys Mini とセットで考える人が多いです。
たけ
たけ

私はFigmaの前に、必ずOptions+で「今のプロファイルがFigma用か」を1秒だけ確認します。Chrome用の戻るボタンが残っていると、気づかずズームが効かない日が来ます。

この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。

なぜFigmaだけマウス設定を分けるのか

A dual screen setup showcasing programming code and image editing software. (Photo by Pixabay on Pexels)(なぜFigmaだけマウス設定を分けるのか)

ブラウザ全般に「戻る/進む」を割り当てていると、Figma上で親指ボタンが効かないように感じることがあります。Options+はアプリごとにプロファイルを切り替えられるので、制作ツールは制作用に分けた方が迷いが減ります。

分けておくとよい場面は次のとおりです。

  • クライアント確認用ブランチを触る日(Figmaブランチの運用とセットで考えると楽)
  • デスクトップアプリとブラウザ版を行き来する日
  • コーディングに戻る前に、ズーム倍率を100%に戻したい日
Top view of a Logitech branded box with design elements on a wooden surface, perfect for showcasing product packaging. (Photo by Helena Lopes on Pexels)(Logitech MX Master 3S thumb buttons and side scroll wheel closeup)

用意するもの

A laptop screen shows a coding application with a calculator design in a tech office setting. (Photo by Eduardo Rosas on Pexels)(用意するもの)
  1. Logicool Options+(公式サイトからMac用をインストール)
  2. Figma(デスクトップアプリ推奨。ブラウザ版でも可)
  3. 対応マウス(本記事の例は MX Master 3S 前提。MX Master 2S世代はアプリ表記が異なる場合があります)

マウスを新規購入する場合の参考です。


キーボードも制作セットで揃える人は、コンパクト系の定番もあわせて見てください(別記事で打鍵音比較しています)。


手順1:Options+でFigma用プロファイルを作る

White floating steps on vibrant orange wall create a minimalist and conceptual design. (Photo by Kanhaiya Sharma on Pexels)(手順1:Options+でFigma用プロファイルを作る)
  1. Options+を起動し、左上のデバイス(MX Master)を選択します。
  2. アプリケーションを追加(または「+」)から Figma を選びます。一覧に無い場合は、Figma.appを手動で指定します。
  3. プロファイル名を「Figma制作」などに変更し、ChromeやFinder用の設定をコピーしないことを確認します。コピーすると戻るボタンが残りがちです。
  4. Figmaを一度前面に出し、Options+の画面で緑のチェックやアクティブ表示になっているか確認します。

ここで失敗しやすいのは、Figmaを開いているのにプロファイルが「すべてのアプリケーション」側のままになっているパターンです。ズームを割り当てたつもりがブラウザのタブ切り替えが動く、というのはだいたいこの状態です。

たけ
たけ

ブラウザ版Figmaだけ使う週は、プロファイルを「Google Chrome」ではなく「Figma」に寄せるか、Chrome内でもURLではなくアプリ単位で分けるかを先に決めます。

手順2:親指ボタンをズーム系に割り当てる

Image of a modern staircase against a vibrant red wall, highlighting geometric design and contrast. (Photo by Jan van der Wolf on Pexels)(手順2:親指ボタンをズーム系に割り当てる)

Figmaで頻度が高いのはズームイン/ズームアウトとキャンバス移動です。私は次の割り当てを基本にしています(Mac・日本語キーボード)。

ボタン 割り当て例 補足
親指上ボタン ズームイン(⌘ + =) 細部の余白調整
親指下ボタン ズームアウト(⌘ + -) 全体俯瞰
親指内側(クリック) Shift+1(ズームフィット) フレーム全体を一度見る

Options+では「キーストロークの割り当て」で上記ショートカットを入力します。Figma側のショートカット設定でズームキーが変更されている場合は、そちらに合わせてください。公式のショートカット一覧が正本です。

ズームだけで十分な人は、下ボタンをレイヤーパネル表示(⌘ + \)に替える選択もあります。コンポーネント整理の週はこちらの方が速い日があります。

Close-up of a modern audio mixer interface with illuminated controls, embodying future technology and sleek design. (Photo by Egor Komarov on Pexels)(Figma canvas zoom controls and frame selection on Mac screen)

手順3:サイドスクロールを水平移動にする

Hand holding smartphone over app design sketches on papers, top view. (Photo by Akshar Dave🌻 on Pexels)(手順3:サイドスクロールを水平移動にする)

MX Masterのサイドスクロールは、Figmaでは横長フレームの移動に向いています。Options+で「ホイールの方向」または「スクロール方向」を確認し、Shift+スクロール相当の水平移動が自然になるよう調整します。

設定のポイントは次の3つです。

  • スクロール速度は最初は中間。速すぎるとワイヤーフレームが飛びすぎます。
  • スムーズスクロールは好みでON/OFF。トラックパッド慣れの人はOFFの方が距離感がつかみやすいこともあります。
  • 縦スクロールは通常ホイールに任せ、サイドは横移動専用にすると混乱が減ります。

リビングのソファでタブレットと併用する日は、マウス設定とは別にコンパクトキーボード比較の「膝上での距離感」も参考になります。制作デスクに戻ったときだけMX Masterに切り替える運用でも、この手順は同じです。

手順4:Figma側のショートカットを1回だけ見直す

Colorful abstract composition featuring spheres and geometric shapes for creative designs. (Photo by Rodion Kutsaiev on Pexels)(手順4:Figma側のショートカットを1回だけ見直す)

マウス側を整えたあと、Figmaのキーボードショートカット設定で次だけ確認します。

  1. ズームイン/アウトがOptions+の割り当てと一致しているか
  2. 手のひらジェスチャー(トラックパッド)とマウスボタンが同じ動作をしていないか
  3. 日本語入力ONのとき、ショートカットが効かないアプリフォーカスになっていないか

ブランチで確認画面を分ける運用では、ズームフィットより前のフレーム/次のフレームに親指ボタンを寄せる人もいます。案件によって「ズーム優先」か「フレーム移動優先」かを決めてからボタンを埋めると、後からの付け替えが減ります。

デザインの共有・コメント運用は Figma公式 のプラン説明もあわせて確認してください。マウス設定はローカル端末側の話なので、チームメンバーにはそのまま共有されません。

手順5:コーディングに戻るときの切り替え

Vibrant abstract design featuring colorful gradients and staircase shapes, perfect for modern backgrounds. (Photo by Nic Wood on Pexels)(手順5:コーディングに戻るときの切り替え)

制作からVS CodeやCursorに戻る日は、Options+のプロファイルをエディタ用に切り替えるか、親指ボタンを「サイドパネル表示」系に戻します。WordPress修正の範囲を固定する運用はCursor Rulesの記事にまとめていますが、マウスはFigma用と実装用でプロファイルを分けると切り替えミスが減ります。

私の切り替え手順は次のとおりです。

  1. Figmaを閉じる(または全画面を終了)
  2. Options+で「Cursor」または「Visual Studio Code」プロファイルを選択
  3. 親指下ボタンをターミナル表示やコマンドパレットに戻す
たけ
たけ

エディタに戻った直後は、親指ボタンでズームしたくなる癖が残るので、最初の5分はトラックパッドだけ使うこともあります。

失敗しやすい点

Sleek futuristic digital interface showcasing technology and precision with vibrant design elements. (Photo by Egor Komarov on Pexels)(失敗しやすい点)
  • 同じショートカットを2ボタンに入れる — どちらを押したか分からなくなります。まずはズーム2ボタンまでに抑えるのが安全です。
  • ブラウザの戻るを残す — Figmaでは無反応に見えます。プロファイルを新規作成したら、一度すべてのボタンをリセットしてから入れ直すと早いです。
  • 充電切れ — MX Masterは有線でも使えますが、Options+のプロファイル切り替えはソフト側です。作業前にバッテリー残量を確認してください。

価格・ソフトの仕様は執筆時点(2026年9月21日・日本時間)の情報です。変更されることがあります。

よくある質問

A vibrant workspace featuring a digital tablet and neon lighting, ideal for designers or photographers. (Photo by Jakub Zerdzicki on Pexels)(よくある質問)

Q. MX Master 2Sでも同じ手順で設定できますか?

A. 大枠は同じですが、Options+の画面や対応機能は世代で異なる場合があります。公式の対応機種一覧で、お手持ちの型番を確認してください。ボタン数が少ない機種は、サイドスクロールと親指上だけ先に割り当てるのが現実的です。

Q. Figmaブラウザ版だけ使っています。プロファイルはどう選べばいいですか?

A. Chrome全体に割り当てるより、Figmaを個別アプリとして登録できる環境ならそちらを選びます。難しい場合は、制作週だけChrome用の戻るボタンを無効化するなど、親指ボタンの数を減らす方がトラブルが少ないです。

Q. トラックパッドと併用した方がいい作業はありますか?

A. 細かいベクター編集やペンツールはトラックパッドやタブレットの方が向く場面があります。マウスはフレーム移動とズームに寄せ、ピンポイント編集はトラックパッド——と役割を分けると疲れにくいです。トラックパッドとマウスの使い分けも参考にしてください。

Q. チームでFigmaを使う場合、マウス設定は共有されますか?

A. 共有されません。あくまで各PCのOptions+設定です。レビューコメントの運用は Figma 側の権限とブランチ運用で揃えるのが先です。

まとめ

A modern computer screen displaying web design work, showcasing creative visuals in a workspace. (Photo by Tranmautritam on Pexels)(まとめ)

MX Master Figma 設定は、Options+でアプリ別プロファイルを作り、親指ボタンをズーム、サイドスクロールを横移動に寄せるだけで体感がかなり変わります。最初はボタン3つまでに抑え、慣れたらフレーム移動を足してください。

今日やることは次の3つだけです。

  1. Options+でFigma用プロファイルを新規作成する
  2. 親指上・下をズームイン/アウトに割り当てる
  3. Figmaを再起動して、プロファイルが切り替わっているか確認する

マウス本体の購入を検討する場合は、下のカードから在庫と価格を確認してください。


Figmaのプランやチーム運用は Figma公式 から確認できます。ブランチ運用とセットで見るなら、クライアント確認用ブランチの手順もあわせて読んでください。



タイトルとURLをコピーしました