Fokusは選択した文字の周囲だけをハイライト表示させるJavaScriptライブラリです。

ユーザビリティを高めるアイディアの一つとして、ユーザが行ったアクションに対してその場で応えるというのがあります。今回はそのためのライブラリFokusを紹介します。選択した文字周辺だけをハイライトするJavaScriptライブラリです。


最初の表示です。


適当に文字を選ぶとその部分だけがハイライトされます。


選択する文字を変えれば当然ハイライトも移動します。


複数の段落にまたがればハイライトも大きくなります。


目立つのでコピーしやすくなりそうです。

Fokusはニュースや論文、ブログ記事など長文が多いサイトにおいて用いると読みたい部分だけに集中できて便利かも知れません。フォーカスが変わった時のアニメーションもスムーズでストレスなく読み進められそうです。

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

MOONGIFTはこう見る

電子書籍をはじめとして、デジタルデバイスでテキストを読む機会は増えています。KindleやKoboといった電子書籍専用デバイスはeインクを使っているので可読性が良いですが、それ以外のデバイスではよりストレスなく読める仕組みを考えないといけないでしょう。

読むべき部分以外を暗くするのは一案として面白いかと思います。他にも文字サイズ、フォント、明暗の分け方など色々な施策が考えられるでしょう。メディアやフォーラムなどテキストを読ませるサイトでは特にそういった観点からデザインを考える工夫が必要です。

Fokus - Emphasized text-highlighting using JavaScript

hakimel/Fokus