Bespoke.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

単に情報を並べて表示しているだけではユーザは見向きもしてくれません。そこに一工夫することでユーザの目を引く面白いコンテンツになります。今回はスライドを格好よく表示するBespoke.jsを紹介します。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.08.47_thumb.1380540926.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.08.47.1380540926.png)
デモの1例。Cover Flow風にスライドが右に表示されています。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.08.51_thumb.1380540932.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.08.51.1380540932.png)
左右の矢印キーでスライドがアニメーションしながら切り替わります。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.08.54_thumb.1380540936.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.08.54.1380540936.png)
こちらはシンプルに左右のスライドに差し代わるデモ。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.09.02_thumb.1380540940.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.09.02.1380540940.png)
四角版。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.09.05_thumb.1380540947.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 14.09.05.1380540947.png)
多角形。アニメーションはスムーズで気持ちいいです。

Webサイトの説明をスライドで表示していったり、勉強会などでも使えるかも知れません。左右に見えるスライドが次のページを期待させるのでユーザの見逃しを防いでくれそうです。

Bespoke.jsの利点として表示領域があまり大きくないので自ずとテキストも限られた文字数になるというのがあります。これで十分に分かる説明をしようと思うとコンパクトに文字をまとめて記述しようとするでしょう。

長い説明をユーザが読んでくれると期待しないことです。大抵のユーザは文章など読んでくれません。それだけにスライド形式で表題だけを並べていくのはユーザの理解度向上にも役立つでしょう。

Bespoke.js

markdalgleish/bespoke.js