マウスオーバーを利用してひねりの利いたスタッフ紹介を

企業や店舗のWebサイトでは、「スタッフ紹介」ページを用意していることが多い。どんな人が運営しているのか、仕事に関わっているのかがわかることで、親近感や信頼感を得ることができる。まだ作っていない方はぜひページの作成を検討してみよう。
とはいえ、単に写真と自己紹介文を並べただけでは、イマイチ面白いページには仕上がらない。紹介文の内容や写真の撮り方を吟味するのはもちろんだが、ページ内の見せ方も工夫したい。


■スタッフ紹介例（マウスオーバー、またはタップで自己紹介文が表示されます）

Illustration : freevector/Vecteezy.com.

例えばこんな工夫はどうだろうか。パソコンでこのページにアクセスした方は、上の画像にマウスポインタを合わせていただきたい。フキダシに入った自己紹介文が表示されるはずだ。この例では1人だけだが、複数人数を並ばせれば、訪問者はきっと次々とマウスポインタを合わせていってくれるだろう。

この演出は、「ロールオーバー」という技術で実現している。

BiNDクラウドで画像を配置すると、画像のロールオーバーを簡単に設定できる。マウスを載せたときに少し明るくしたい、あるいは暗くしたいといった程度の設定なら、設定パネルの選択肢から選ぶだけでいい。

さらに、この例のように別の画像を表示させたい場合は、あらかじめサイズの同じ画像を用意しておき、ロールオーバー設定パネルでその画像を指定すればいい。背景を透過させたPNG画像であれば、地に色やテクスチャを敷いてあるWebサイトでも利用できる。


なお、最近は、スマホやタブレットでWebブラウズする人も増えている。これらのデバイスではマウスオーバーという操作ができないため、その場合の対応策も考えておきたい。マウスオーバーだけでなく、クリック（タップ）でも画像が表示されるようにしておくといいだろう。

しかしBiNDクラウドでは、クリックして画像を表示させるには少々コツがいる。リンク先として表示させる画像をダイアログで選べればいいのだが、その機能がないのだ。そこで、いったんロールオーバーの設定をして「公開」をしてしまい、ロールオーバーの画像のURLを調べてから再度リンク設定を行う必要がある。

詳しい手順は、右〜下の図版エリアを参照してほしい。