ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はフラットUIの流行もあって説明をなるべく少なめに、アイコンでどういった機能かを表すことが増えてきています。しかしアイコンが分かりづらかったり抽象化され過ぎていると一見して機能が分かりづらくなります。そこでマウスオーバーによる説明表示がおすすめです。

スマートフォンやタブレットでは使えませんが、デスクトップであればマウスオーバーを上手に使えばユーザビリティが高まるでしょう。そのためのライブラリとしてiHoverを紹介します。

iHoverの使い方

iHoverはとにかくパターンが多いのが特徴です。まずは動画をご覧ください。

マウスを載せると上下左右から説明文が飛んできたり、元々の画像が回転したりします。

元々。マウスを載せると…
元々。マウスを載せると…

説明が表示されました。
説明が表示されました。

こんな感じにサムネイルになったり。
こんな感じにサムネイルになったり。

上下左右に変更できます。
上下左右に変更できます。

iHoverはピュアなCSSで作られていますのでJavaScriptが使えない環境でも動作します。作りとしてはSassを用いています(計算部分が多いのでしょう)。デスクトップのブラウザ向けにはなりますが、ぴたっとくる使いどころがありそうです。

iHoverはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

gudh.github.io/ihover/dist/index.html

gudh/ihover

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2