日記

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

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

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


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

名村晋治

株式会社サービシンク

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

名村晋治

1996年よりWeb制作に携わり、キャリア25年目のWebディレクター

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からはWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。

詳しいプロフィール

もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、またNHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

俳優時代の経験を活かし、演劇の訓練メソッドを利用した「コミュニケーションスキル」向上を目指したセミナー・研修も実施しています。

最新の記事