WebDesigner's Memorandumウェブデザイナーの備忘録

カーソルハイライトや入力したキーの表示など、デモに便利な機能が使える「Mouseposé」

カーソルハイライトや入力したキーの表示など、デモに便利な機能が使える「Mouseposé」

今回はデモをするときによく見かけるMouseposéに関してまとめておきます。

Mousepóseでできること

Mousepóseを使うと、下記のようなデモ中にあると便利な機能が使えるようになります。

  • カーソルのハイライト機能(カーソルの周辺以外を暗くするスポットライトのような機能)
  • マウスクリック時に、クリックしたことが分かるエフェクトを表示
  • キー入力した内容を画面下に表示

デモを行う人や、オンラインMTGなどで画面共有をして説明する人は入れておくと便利です。

Mouseposéのインストール

Mouseposéは公式サイトからダウンロードできますが、有料のアプリで年間1,246円のサブスクリプション形式になっています。

月に100円ちょっとだと考えるとサブスクリプションの中ではかなり安い部類ですが、どれくらいの頻度で使うかどうかで契約するかどうかが分かれてくると思います。

ちなみに無料で使うこともできますが、その場合はMouseposé使用中の画面左上に透かしが表示されてしまいます。
(しかも画面の大きさに比例して大きくなる)

無料版で表示されるロゴ

この表示はかなりダサいですし、他人に見せることが前提のアプリなので、無料でなんとかしようとするのは諦めましょう。

機能のオン・オフ

Mouseposéはアプリを起動させるだけではなく、各機能をオン(Activate)にしておかないと使えません。

オン・オフの仕方は下記の3つがあります。

  • メニューバーから使いたい機能をクリックして切り替え
  • ショートカットキーを設定して切り替え
  • 環境設定画面から切り替え

ただ、他人に画面を見せながら使うこと前提なので、わざわざメニューバーをいじったりしているとモタついて見えてしまいます。
ショートカットキーが最もスマートなので、後述する「設定」でショートカットキーを設定して覚えておくようにしましょう。

設定

Mouseposé

スポットライトのように、マウス付近以外が暗くなる機能のことをアプリ名そのまま「Mouseposé」と呼ぶみたいです。
(紛らわしいので当記事では「スポットライト機能」と呼びます)

スポットライト機能の表示

[Mousepóse]タブではこのスポットライト機能の設定ができます。

[Mousepóse]

項目内容備考
Toggle Hotkey

スポットライト機能のオン・オフ切り替えのショートカットキーを設定

 
Deactivate after

チェックを入れて秒数を指定すると、オンになってから指定秒数後に自動でオフになる

自分でオン・オフ切り替えた方がやりやすいので、オフ推奨
Circle Radiusスポットライトのサークルの大きさを指定 
Circle Blurスポットライトのサークル境界線のぼやけ具合を指定 
Opacity/Colorスポットライト外の色と透明度を指定
(バーの左右移動で透明度の設定)
 
Animate Zoomチェックを入れると画面外からマウスカーソルに向かってアニメーションしながら、
スポットライト機能がオンになる
分かりやすいので、オン推奨

Mouse Clicks

マウスをクリックしたときに、クリックしたことが分かるようにカーソル周辺に色つきのサークルエフェクトが表示されます。
左クリック・右クリック・それ以外のクリックで色も別々に指定できるので、何のクリックをしたのかが見ている人から分かりやすくなります。

マウスクリック機能の表示

[Mouse Clicks]タブでは、このマウスクリック機能の設定ができます。

[Mouse Clicks]

項目内容備考
Toggle

下記の2つからオン・オフ切り替え方法を設定

  • With Mouseposé Effect(スポットライト機能と一緒にオン・オフ)
  • Standalone(独立してオン・オフを切り替える)
「With Mouseposé Effect」の場合はHotkeyが設定できなくなる
Hotkey

オン・オフ切り替えのショートカットキーを設定

 
Raidusクリックエフェクトの大きさを指定 
Click Colorsクリックエフェクトの色を指定
「Left(左クリック)」「Right(右クリック)」「Other(それ以外)」で別々に指定できる
 
Expand Clicksエフェクトが消えるときの、少し拡大しながら消えるアニメーションにかかる秒数を指定 
Click Soundクリック時の音声のオン・オフと音量を指定邪魔になる可能性の方が高いのと、
画面上のエフェクトだけでクリックは伝わるので、オフ推奨

Keystrokes

デモ中に伝わりにくいのがショートカットキーの入力です。
マウスはまだ目で追えるのでなんとなくで理解してもらえますが、ショートカットキーは口頭で何を押したか補足しないと伝わりませんし、ショートカットキー自体が口頭で伝えにくいものだと自分は考えています。

ショートカットキーは基本的なものを除いて、メニューバーに表示されているものを「見て」入力したり、記事に書かれてあるものを「見て」使うことが大半です。
耳からショートカットキーを聞いて使うようになる機会は、一般的に少ないのではないでしょうか。

Mouseposéのキーストローク機能を使えば、画面下に入力したキーが表示されるようになるので、ショートカットキーが見て分かるようになります。
また、この修飾キーの並びや表示は、Macのメニューバーに表示されるショートカットキーの表記方法と全く同じです。

キーストローク機能の表示

[Keystrokes]タブでは、このキーストローク機能の設定ができます。

[Keystrokes]

項目内容備考
Toggle

下記の2つからオン・オフ切り替え方法を設定

  • With Mouseposé Effect(スポットライト機能と一緒にオン・オフ)
  • Standalone(独立してオン・オフを切り替える)
「With Mouseposé Effect」の場合はHotkeyが設定できなくなる
Hotkey

オン・オフ切り替えのショートカットキーを設定

 
Fade out after表示から何秒でフェードアウトするかを指定 
Font Size表示されるフォントサイズの指定 
Opacity/Color背景の色と透明度を指定 
On Toggleオン・オフ切り替え時に「ON」「OFF」の文字を表示して
切り替えたことが分かるようにするかどうか指定
 
Show

下記の3つから、反応するキーストロークを指定

  • All keystrokes(全てのキーに反応)
  • Only ones with modifier keys(修飾キーと、修飾キー + キーのみ反応)
  • Only modifier key combos(修飾キーとキーを一緒に押したときのみ反応)
ショートカットキーの説明をしたいなら
「Only modifier key combos」推奨
Show on Display

表示するディスプレイの指定(デュアルディスプレイ時に設定)

 

Miscellaneous

[Miscellaneous]タブでは、他のアプリの[General]や[Other]と同じような設定ができます。

ちなみに自分は色んなアプリの環境設定を見てきているのですが「Miscellaneous」というタブは初めて見ました。
意味は「その他・雑多」らしいので、「Other」とほぼ同じと考えていいでしょう。

[Miscellaneous]

項目内容備考
When logging inログイン時に自動でMousepóseを起動するかどうか 
Show App Icon in

アプリアイコンを表示させる場所を選択する

  • Dock
  • Menu Bar
  • Dock and Menu Bar
[Menu Bar]が推奨
Check for updatesアップデートのチェック期間を選択する 
Reset Mousepóse右上のボタンをクリックすると設定がすべてリセットされる 

Purchase

[Purchase]タブではライセンスの購入・設定ができます。

[Purchase]

「Purchase…」ボタンをクリックするとブラウザで購入ページが開き、すでに購入済みであれば、「Licenses…」をクリックしてライセンスを入力してアクティベートできます。

スクリーンショット時の注意点

これは僕の勝手な推測ですが、Mouseposéは起動すると、Mouseposé用の透明なレイヤーを画面全体に表示させるようです。

そして、その透明なレイヤー上にエフェクトを表示させたり、明るさを変えてスポットライトを実現していそうです。

そのため、ウインドウを選択するタイプのスクリーンショット(shift + command + 4のあと、spaceを押してウインドウをクリック)を撮ろうとすると、ウインドウが選択できずに画面全体が選択されてしまいます。

ウインドウのスクリーンショットを撮りたい場合は、Mouseposéを終了させてから撮影しましょう。

表記に関して

Mouseposéの「é」部分ですが、このように「e」の上に点がついている表記のことをアキュート・アクセントと呼ぶそうです。

英語圏の人が単語を発音を理解する助けになるそうで、Macでこの文字を入力したいときはoption + Eを押したあとにキーを離してすぐEを押します。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね