vexはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

21世紀のダイアログを標榜するソフトウェアがvexです。従来のダイアログとは大きく違うUIで目を引くこと間違いなしです。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.02.59_thumb.1379935123.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.02.59.1379935123.png)
デモです。Time Machine風にダイアログが重なっています。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.05_thumb.1379935128.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.05.1379935128.png)
テーマを変えてこのような見た目に変更もできます。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.11_thumb.1379935132.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.11.1379935132.png)
ダイアログからさらにアラート。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.19_thumb.1379935136.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.19.1379935136.png)
確認ダイアログ。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.27_thumb.1379935142.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 12.03.27.1379935142.png)
さらに別なスタイル。アニメーションの変更もサポートされています。


こちらはデモのアニメーション。

vexはjQueryプラグインであり、IE8、Firefox4以上で動作します(もちろんWebKitは問題ありません)。ログインや初回表示時のツアー、モーダルウィンドウなどにも使えそうです。

MOONGIFTはこう見る

ユーザの目が慣れるというのは操作の効率性を生みますが、逆に自然と目に入ることすらフィルタリングしてしまって正しく情報を理解していないケースがあります。アラートなど内容を確認しないでOKボタンを押してしまう人も多いのではないでしょうか。

そこでいつもと違う表示方法を採用することで、ユーザの目を引くというやり方があります。vexもあまり多用するとインパクトが失われてしまいますが、特に大事な場所に使うと効果的です。大事な場所だけに限って使えば、vex風ダイアログの場合は注意すると言った促しにもつながりそうです。

vex

HubSpot/vex