日記

エンドユーザーが「使いやすい!」を実現する(かもしれない)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)

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

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


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

不動産業界に特化したWebサイト制作・システム開発をおこなうサービシンクでプロデュース、ディレクションからテクニカル・ディレクターまでを担当。
元プロの声優であり、Webディレクターとして22年のキャリアを持つ。
(詳細は下の「詳しいプロフィール」をクリックしてみてください。

Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

詳しいプロフィール

大学二年生の96年からWebの制作集団ネイムヴィレッジを主催。
大学卒業の99年までの間に100社ほどのサイト制作の企画、ディレクション、デザイン、Perlでの開発、マークアップに携わる。
大学卒業と同時に俳優になるために上京し俳優修業開始。
2000年からは俳優修業の傍ら不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
俳優としては、舞台演劇、プロの声優としても活動したが最終的30歳を目前に足を洗う。

2005年に株式会社LIFULLが自社媒体に注力するためSips業から撤退する事をきっかけとして、代表の井上とシェイクハンドをして退社。

2005年から株式会社ソナーに合流し取締役なども歴任し不動産業界のサイト制作のディレクションからフロント実装を担当。

2010年1月12日から株式会社サービシンクを立ち上げ、代表取締役に就任。
不動産業界に特化したサイト制作のアートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。
基軸としてはクライアントの商売に寄り添うために、徹底的に思考を巡らせるためのディレクションを行う。
Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

最新の記事