エンドユーザーが「使いやすい！」を実現する（かもしれない）8つの技術とテクニック集！

名村は、Webサイトを見ていて、「こうなった使いやすいかな？」と思ったりする技術を集めておくのは、まぁ、趣味みたいなものです(笑)

ただ、自分がエンジニアではないので、システム側ではなくて、表層技術側の方で出来る実装内容を集めているのですが、備忘録代りにエントリーしておきたいと思います。

CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript

CSSにより画像置換の良し悪しは別途議論するとして[謎]、システム側にさっさかHTMLを渡さないと行けなくて、かつ未だに細かいところに調整が入っているので、その場合には、システム側に渡したHTMLをいじらないでいい、という点においては画像置換のおかげで作業効率はかなり良くなっています。

それをjavascriptを利用して、簡単に出来る、というものらしいです。

CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript

楽にフォーム入力チェックを実装するJavaScript（JSValidate）

入力フォームのエントリーのしやすさはそのまま売上に直結する部分でもあるので、かなり注意を払うところで、場合によってはこの入力フォームから設計をする事も、名村はあります。

その時に、システム側でエラーチェックを行うのはもちろんなのですが、フロントエンド側でもそれが分かりやすい形でリアルタイムにユーザーに伝えられれば、かなり負荷の軽減につながるのかな？と思ったりしています。

その必須チェック（バリデート）を簡単に実相してくれるjavascriptの様です。
（ただ、これはスクラッチで書いてしまった後に見つけましたが（苦笑））

楽にフォーム入力チェックを実装するJavaScript（JSValidate）

jQueryでスムーススクロール

ページの下の方から上部に戻る時などに、いわゆるページ内アンカーで「↑ページトップに戻る」とかのリンクを付けたりします。

けれども、一瞬で移動してしまうので、ユーザーがWebサイトの閲覧の初心者だったりする場合には「どこに飛んできたの？？？」となったりする場合が往々にしてユーザービリティテストをしていると目の当たりにします。

その時に、「スクロールしてるよー」という事を伝えるためにこのスムーススクロールを実装しようと思っていました。

ただ、a要素のname属性はXHTMLでは廃止されましたので、name属性を使うjavascriptでは、XHTML環境では使えませんでした。

でjQueryを使うことで、XHTML環境でも使えるスムーススクロールを探していたのですが、ありました。

jQueryでスムーススクロール

オンマウスでテーブルの行と列の色を変える

価格表とかを作ることが、結構多いのですが[謎]、そこに更に「詳細はこちら」といったリンクまでつくことがさらに多かったりします。

その時に、マウスを当然ユーザーはそのテーブルエリアに持って来てくれるとは思っているのですが、どこを選択しているのかを視覚的にちょっと教えてあげるための、テーブルには、よくこれを実装しています。

スクラッチで書いたのは紹介が出来ないのですが、作っている人のサイトがありましたので、こちらに！

オンマウスでテーブルの行と列の色を変える

テーブルにtrごとに色をつけるストライプテーブル

そもそもテーブルが一色ってのはやっぱり視認性が悪いかなぁ・・・・と思うわけですが、その時には一行毎とかに色をうっすらでもつけるとやっぱり見やすくなります。

ただ、一回ごとに背景色を引く・・・てのもあんまり美しくないですし、そこがシステム組み込みだったら、偶数行か奇数行かのどちらかの値を取得してもらうようにしないと行けなかったりします。

それをjavascriptだけで表現してくれているのが、かの中村亨介君が自分のサイトで紹介している「ストライプテーブル」

かなり以前に紹介をされましたが、いまだに便利で使わせていただいています！（多謝）

DBを使わないで郵便番号を入力したら住所入力をしてくれるフォーム

個人情報を入れるフォームで何が面倒臭いって、やっぱり住所欄なわけです。

郵便番号が上桁、下桁に分かれていて、さらに県名と、市区郡と町村名と物件名とかに分かれていたら、その時点で入れる気をなくす人は実際にいます(笑)

そういう人の為に、最近の大手では郵便番号から住所を引っ張ってこられる入力支援機能があったりしますが、Ajaxって技術があるのですから、リアルタイムに反映されるとやっぱりうれしいですよね。

ただ、郵便番号と住所を紐付けた情報をデータベースにしないと行けません。
規模が大きかったり予算が潤沢にあれば、そういった仕組みを作ることも可能でしょうが、まずはさくっと・・・と思った時にはやっぱり敷居が高いです。

ただ、それをAjaxと JSON フォーマットを利用するJavaScriptライブラリで公開してくれているサイトがありました。

AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）

これなら比較的簡単に導入出来そうな感じじゃないでしょうか？
とは言え、市町村の統廃合って、実は全国規模で考えると、一年間で数百ぐらいあったりするので、結構元のデータを気をつけないといけないのは、データベース化しようが、そうでなかろうが同じなので、ご注意くださいね。

テキストリンクばっかりが並んだ時のちょっとしたワンポイントに「リンクテキストのロールオーバー」

エリア名とか沿線の名前とかで一覧を作る時、どうしてもテキストがだーーーーと並んでいるだけになってしまって、いまいち動きを与えることができません。

そんな時に便利そうなのがこの「リンクテキストのロールオーバー」

見てもらわないと、言ってる意味が全然わからないと思いますので、

デモサイト

を見てみてください。
テキストリンクが「ころん」と転がってくれます。

まぁ、この手の装飾技術はやりすぎるとくどいだけになるので、使うところに注意が必要ですが、目新しいのが好きな人にはいいのかもしれません。

ちょっとした「お！」ってのを演出する事もできそうですしね。


リンクテキストをロールオーバする

もし機会があれば、使ってみたいなぁと思っています。

JavaScriptエフェクトで画像スライド式メニューを実装 （ImageMenu）

同じタイプの一覧を繰り返して表示しないといけない場合が不動産のサイトとかにはよくあったりします。

例えば、

○○○○○市の検索
・エリアから探す
・沿線から探す
・地図から探す

××××市の検索
・エリアから探す
・沿線から探す
・地図から探す

といった形で、当該エリアの市区の名前が延々表示されていて、そこにそのエリアの検索方法とかを列挙している場合ですね。

もちろん、デザインで見やすくする、というのはユーザーとのコミュニケーションを考えたら当然なのですが、それでもこれをなんとかしないといけない場合があります。

そういった時にFlashとかではよくやっている横並びでマウスを載せたらそのエリアが大きくなる、というのを実現するjavascriptです。

上の例でこれを実装できるのか、出来たとしてどう見せるのか？ってのはまた別問題ですが、使い勝手はありそう・・・て事で、エントリーしています。

JavaScriptエフェクトで画像スライド式メニューを実装 （ImageMenu）

ということで、これらをうまく組み合わせれば、ユーザーの「ちょっと使いにくい」感を緩和する仕組みにすることができるのでは？と思ったりしています。

どこかで使ったり、使おうと思っている技術ですが、皆さんの参考になれば幸いです！