LinkedIn製のWebサイトツアーライブラリ「Hopscotch」
HopscotchはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。
Webサービスはどんどん複雑になってきており、使い始めるまでの敷居が高くなっています。それを解決する手段としてツアー表示が知られています。幾つかライブラリが知られていますが、今回はLinkedInが開発したHopscotchを紹介します。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.03.10.1377563622.png)
最初の表示です。フラットなUIにマッチしたデザインが特徴です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.03.15.1377563626.png)
ツアーの番号がついていたり、×ボタンで閉じれるなど細かな点にも気が配られています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.03.21.1377563629.png)
上下だけでなく、左右にも出し分けができます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.03.42.1377563632.png)
ツアーは戻ることもできます。
ツアーを辿っている時にはもちろんスクロールが自動で行われて、訪問者はそれを見ながら順番にクリックしていくだけで問題ありません。さらにHTML5のセッションストレージによって複数ページに渡ったツアーもサポートしています。多言語化にも対応しています。またLinkedInが開発しているだけあって、オプションも細かく設定が可能です。
MOONGIFTはこう見る
本来であればユーザが迷いなく使えるUIこそがベストなのですが、人気のあるWebサービスは単機能では成り立ちません。GoogleのWeb検索においても隠しコマンドや検索ツールなど多彩な機能が存在します。それらをうまく隠したり、逆にユーザにスムーズに紹介することで利用してもらえるようにする工夫は必要でしょう。
便利であればユーザは使ってくれると考えるのは間違いです。使ってもらうための施策が必要です。ツアーはその一つであり、ユーザが迷ったり、複雑さにストレスを感じたりすることのないように様々な手法をこらして使ってもらえるようにしましょう。