画像の上に華麗なツールチップを「iPicture」
iPictureはIKEA風に画像にツールチップを表示するJavaScriptライブラリです。
IKEAのカタログアプリを見ると、写真の一部がクリックできるようになっており説明が表示されます。あれに似た効果を実現してくれるのがiPictureです。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.38.33.1357278643.png)
サンプルです。お弁当の一部にボタンがついています。クリックすると説明が表示されます。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.38.36.1357278651.png)
こんな感じに。クリックすると別タブでおにぎりの作り方が表示されました。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.38.44.1357278659.png)
動画も対応。インラインで再生されます。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.39.02.1357278665.png)
こちらは洋服。とてもマッチします。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.39.15.1357278674.png)
車。動画で機能を説明する…とても良いのではないでしょうか。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.39.23.1357278678.png)
こちらはIKEA風。まさにそのままといった感じです。
[](http://images.moongift.jp/2013/01/Screenshot 2012-12-27 10.39.27.1357278684.png)
文字だけの説明もできます。
iPictureは画像に対してJSONデータで表示するツールチップを指定します。画像に対する絶対位置で指定するのですが、ドラッグ&ドロップでコードを生成できるエディタもありますので作成は簡単です。
iPictureはJavaScript製のソフトウェアです。
MOONGIFTはこう見る
画像はテキスト以上に見た目に訴える要素が大きく、見た人に対する強烈な印象を残すことができます。しかしテキストの箇条書きのようにシンプルに絞り込むことはできないので色や要素が多様に紛れ込んで分かりづらくなってしまう印象があります。そのサポートにiPictureが使えそうです。
また、ソフトウェアやWebサービスのヘルプにおいて気になる場所をクリックすればヘルプを表示してくれると言った使い方にも向いています。元画像を編集しないので配置する場所が変わらない限りはそのまま利用し続けられるのがメリットです。