最近のWebサイトでは画面遷移をなくし、Ajax化するのが好まれる。とは言え、既存のサービスに対して実装するのはそうそう単純ではない。それにAjaxを使った場合、PVの計測が難しく、メディア等では取り入れづらい。

ピクチャ 1 Thumbnail-51

だが、これを使えば簡単にそれっぽい実装ができそうだ。

今回紹介するオープンソース・ソフトウェアはGreyBox、Webページにも対応したCSSポップアップウィンドウだ。

GreyBoxは最近良く見かける、画像をクリックすると同じページ上でポップアップするライブラリになる。特徴的なのは、画像のみならずWebページでもポップアップしてくれる点だ。

ピクチャ 2 Thumbnail-43

既存のAタグに対して情報を埋め込めば、それだけでクリックすると背景をグレーアウトし、クールなポップアップを表示してくれる。これならばお問い合わせフォームや、詳細検索等のフォームでも使えそうだ。

大きさを指定したり、フルスクリーンでの表示もできる。また、複数の画像やサイトを指定すればスライドショー方式で表示してくれる。

ピクチャ 3 Thumbnail-39

GreyBoxを使ってメールフォームを作れば、簡単なデザインでも格好よく仕上がりそうだ。リンクに情報を付与する形なので、JavaScriptが無効でもリンクをたどれる点も、ユーザビリティが高くてお勧めだ。

GreyBox - About
 http://orangoo.com/labs/greybox/about.html
ピクチャ 4 Thumbnail-35