Webページで特にユーザに見てもらいたいポイントがあったらどう表示するのが良いでしょう。一瞬ハイライトさせたり、文字に色をつける、サイズを変える、点滅させるなど様々な方法があります。それは見て欲しい部分を目立たせる方法です。 逆に見て欲しい部分以外を目立たなくする方法もあります。例えばモーダルウィンドウで使われます。そのためのライブラリがFocusableです。

Focusableの使い方

例えばデフォルトの表示がこちら。

ヘッダーのみフォーカス。

リストのみ。

リストの指定場所だけと言った設定もできます。

画像だけ。

アニメーションにするとこんな感じです。

Focusableはチュートリアルで使ったり、特にユーザにここだけ見て欲しいと思った時に使えます。ユーザの自由な操作を妨げる可能性があるので多用は禁物ですが、遣いどころによっては効果的なライブラリでしょう。

FocusableはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Focus element overlay sample app zzarcon/focusable