こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。
Web制作に携わる者として、ユーザビリティの本を読みました。
きっかけは、Webサイトをレスポンシブ対応にしたときのユーザビリティについて気になったからです。
私はスマホは使うもの、というよりも暇を潰すもの、連絡を取るものとしてしか普段使用しないため、いまいち使う人の気持ちがわかりませんでした。
どういう場面で使おうとして、どういう要求をして、どういうときに不便を感じるのか…。
一般的にサイトへ訪れたユーザーが、サイトをどう使うのか、どういう点に着目するべきか、という点を探ろうと思いました。
手にとったのは、社内においてあった技術系の本の中の一冊です。
この書籍では１つの項目を見開きページで紹介し、
全部で105個の着眼点が紹介されています。
1つの項目が見開きページしかないので、長くなく読みやすい。
（ページの半分は図解なので、わかりやすい上に活字が苦手な方にもおすすめです）
また、ひとつひとつが読みきりになっているので空いた時間にちょこちょこと読めます。
中でも気になったのはやはり、スマホ時のユーザビリティです。
すると特に気になったのがCSSスプライトの項目。
スマホサイトにとってサイトが重たいというのは致命的。
ページを表示するまでに時間がかかるとその間に閲覧者は戻るボタンを押してしまいますよね。私もおします。
そこで、少しでもユーザーを待たせないつくりにするには？ということで辿り着いたCSSスプライトでした。
知らない技術は使えない、ということで私は自分で制作するサイトにCSSスプライトを使ったことがなかったのでさらに興味深かったです。
マウスオンとマウスオフ、もしくはボタンを押した時に「押したよ！」とユーザーにわかりやすくするためにボタンの画像を切り替えるのは定石です。
その時の画像を2枚で切り替えるのではなく、1枚の画像の位置をずらして切り替えようというのがCSSスプライトだそうです。
ボタンの画像は背景画像として用意し、ボタンひとつ分の大きさだけを指定してそれ以外の場所は非表、hiddenにしてしまう。
そしてマウスホバー、もしくはクリックしたときは背景画像の位置をボタンひとつ分ずらして、変化後の画像を画面内におさめます。
こうすると読み込む画像は1枚でいいため、端末への負担も軽くなります。
ちなみにGoogleさんもこの方式を取り入れているみたいです。
ただ、座標をずらして背景画像を表示させるため、ボタンの比率や大きさを変えてしまうと他の画像も全て座標のとりなおし…というデメリットもあるみたいです。
他にも、機能面からみたユーザビリティ、レイアウト面から見たユーザビリティ、今回の待たせないための方法…など数多く紹介されていました。知っている人は知っているかと思いますが一通り目を通しておくといいだろうなという内容でした。
技術面で使える部分は使い、概念として念頭においておくべきことはレイアウト組みのときに気をつけながらWeb制作に活かそうと思います。
