2011年4月30日土曜日

ブラウザの違い

 ウェブサイトは、ブラウザによって若干表示が変わることがある。これは、各ブラウザが採用しているHTMLのレンダリングエンジンが違うことに関係する。

InternetExplorer ---
Firefox ---
Google Chrome ---
Opera ---
Safari ---

 主に有名なブラウザは以上の5つである。なお、利用者数は、IEが5割以上、次いでFirefox、次にGoogleChromeとなっている。最近では、それほどの差異はなくなりつつあるので、インストールして観てみるとよい。
 なお、ブラウザによってわずかながらデザインにずれが生じたりすることにこだわり始めると、かなり苦労することになる。場合によっては古いバージョンは切り捨てたり、記事が読めれば多少崩れるのは目をつぶるくらいの考えでいたほうがよい。シェアの大きい上位3つくらいできちんと表示されていればよいのである。

 また、Linxというテキストブラウザがある。これは、HTMLの構造を理解し、テキストだけで表示するブラウザである。画像やCSSによるレイアウトなどはすべて無視され、上から登場した順番にただテキストを表示する。このブラウザを使うと、検索エンジンがそのサイトを見るときと同じ状況を人の目で見ることができると言われている。つまり、検索エンジンがどのようにサイトを理解するのかがわかるのである。
 こういったテキストブラウザで一度自分のサイトを確認することも、ユーザビリティを理解するには大切なことである。画像に説明文がついていない、ということが一目でわかるのである。

OSの違いを意識する

 殆どの人がWindowsでサイトを作っているであろう。または、Machintoshもありうる。しかし、それ以外にもLinuxや携帯端末やスマートフォンという状況も考えられる。
 これらすべてに対応するのはかなり厄介なことであろう。対応するというには、これらのOSでの環境を実際に見てみるのが第一である。そのためには、それらのマシンがなければならない。しかし、個人でそれらを集めるのは難しい。集まったとしても、そこまでやらなければならないサイトなのだろうか。そういったことも考えたい。
 ただし、携帯でも観られるサイトを作りたいと考えるのはごく普通である。こういった場合には、エミュレータを使うという方法がある。

エミュレータ
 エミュレータとは、ある環境で、別の環境をつくりだして、動作を確認することができるようにするものである。例えば、Windows上でMachintoshの環境を擬似的につくったり、携帯の環境をつくったりすることである。
 一時期、ゲーム機のエミュレータが流行ったが、違法に使う人が多いので、お薦めできない。しかし、コンピュータのエミュレータ(特に携帯)は、各社からエミュレータが公開されているので、これを利用することで、自分の環境で確認できるようになる。

・NTT DoCoMo
・au
・Softbank

また、Machintoshのエミュレータも一応発表されている。

・Pear PC

デザイン

 ユーザビリティにおいて、デザインは重要である。スタイリッシュにこだわろうとすると、実はとても使い辛いものになる。最近のブログの傾向などがそれである。
 文字を小さく、色も背景と近くするといったことは、なんとなくデザイン的に綺麗に見えるものである。カッコいいサイトを意識するあまり、文字を9ptや8ptに設定しているサイトも多く見受けられる。しかし、そのサイトの文字はユーザにとっては読み辛い。リンクの下線を無闇に消したり、リンクテキストの色を変えることは、ユーザにとって、それがリンクであると理解させることができるのか、を考えてからするべきである。

 また、それとは全く反対で、デザインに拘らないサイトも読み辛い。ページの端から端まで文字がしきつめられていて、文字と文字の間隔も狭く、行間も100%のままだとしたら、目が疲れてしまう。紙媒体のものと違い、ディスプレイはそれ自体が発光しており、余計に目が疲れるものである。だからこそ、可読性は紙媒体よりも確保しなければならないのである。

独りよがりを避ける
 上記以外に、容量の大きい画像をたくさん貼り付けるという行為も、ページの読み込みに時間がかかって、ユーザをイライラさせる原因になる。画像をたくさん張りたいならば、サムネイルで見せて、クリックしたら大きい画像にするなど、必ず方法はある。
 ウェブサイトは、誰かがアドバイスしてくれることは少ない。既に競合があるのであれば、わざわざ改善を要求するのではなく、もっと読みやすい競合サイトに流れていくだけである。サイトは基本的には自分だけでつくるものである。独りよがりになってしまいがちなところを、客観的に見ることができるように常に気を配らなくてはならない。

 独りよがりを避ける簡単な方法は、誰かに見てもらうことである。気のおけない仲間に観てもらって感想を言ってもらうのでもよい。勇気があるならば、掲示板にURLを貼ってもいいかもしれない。ただし、掲示板で告知すると、真似る人が現れる可能性もあることに注意した方がいい。

ユーティリティはシンプルに

 ユーティリティとは、機能のことである。サイトに持たせる機能はシンプルなほうがよい。多機能は複雑で、何をすればいいのか、どこにいけばいいのか、混乱をきたす。だから、メニューの数は多すぎてはならない。せいぜい、5~6がいいところであろう。
 また、JavaScriptを使ったり、Flashを使って多機能なものを装備したとしても、それらが本当にユーザの手助けになっているのかを考える必要がある。ここで動画は必要だろうか、わざわざ回転しながら画像を拡大させる必要があるのか、など。余計なものはそぎ落とそう。

サイト構築

 サイト構築とは、
(1) 企画・設計
(2) 作成・公開
(3) テスト・修正
の3つの作業の繰り返しである。

 一度作ったらおしまいではなく、つくったページのできばえを確認し、誤字脱字のチェックはもちろん、リンクのチェック、文章の読みやすさ、操作性といった面から確認を何度も行う。場合によっては、複数の方法論をテストして、どれが一番よいか結論を導き出すことも必要である。こうして使い勝手のよいサイトになっていく。

(1) 企画・設計
 何事も始める前には企画が必要である。やみくもにhtmlをつくりはじめても、まとまりのないサイトになってしまう。まとまりがないと、どこにどんな情報があるのか、ユーザには理解できなくなる。分かり辛ければユーザは去っていく。

 まず、サイトの目的・目標を設定しよう。そのサイトはユーザに何を与えるサイトであるのかを定義する。そして、自分が与えようとしている情報は、ユーザのニーズがあるものであるのかどうかを考える。つまり、ターゲットを設定するのである。
 わかりやすく考えるには、5W1Hが役に立つ。

What --- 何のためのサイトか(サイトの目的・目標)
Who --- 誰のためのサイトか(ターゲット)
When --- いつ利用するサイトか(ニーズ)
Where --- どこで使うサイトか(ユーザの利用環境)
Which --- どっちを使うか(競合の把握)
How --- どうやって使うか(使い方の流れの設定)

What
 何のためにつくるか、何をもってして目的達成とするか、ということである。
 ここで、自分に嘘をついても仕方がない。正直に何をしたいのかを考えて企画書の一番最初に書き出そう。この段階では、余計なことを考えないでよい。とにかく自分がしたいこと、目標を書く。

Who
 ターゲットを決める。自分の目的を達成するには、どんな人に読んでもらえばいいのか。自分がつくろうと思っているサイトは、誰にとって読まれやすいものなのかを考える。ターゲットがはっきりすれば、サイトのつくり方もおのずと決まってくる。例えば、若ければ字を小さめに設定することもできるが、年配がターゲットならば、字は大きめの方がいい、となる。

When
 それでは、自分がつくろうとしているサイトは、設定したユーザが本当に読みたいと思うものなのだろうか。それがユーザニーズの把握である。ターゲットユーザは、どんなときにこのサイトを使うのだろうかを考え、それらを書き出しておく。これは、提供する情報の方向性に影響してくる。もし、自分のやりたいことがユーザニーズとかけ離れていると思えるようであれば、ターゲットの設定をやり直すか、サイトの目的を変更する必要がある。
 ニーズを把握すると、サイトの構造の組み立て方も考えられる。例えば、まとめて1ページですべての情報を読みたいと思うか、細切れにして1ページの情報量が少ないほうがいいのか、などである。

Where
 ユーザの利用環境とは、コンピュータの環境であったり、実際に見る場所のことであったりする。接続環境は、もはやADSLか光接続が主流なので、あまり気にする必要はないかもしれない。それ以外にも、OS、ブラウザ、モニタの解像度の違いや、会社で見るのか(人の目が気になるのか)、家で見るのか(人の目が気にならないのか)といったことまで考える。

Which
 自分の作ろうとしているサイトは、殆どが既にあるサイトである。今までなかったサイトを作るとしたら、それは相当にニッチであるか、つい最近できた製品・情報しかない。ニッチなものはニーズも少ない可能性もあるし、最近の製品・情報は、すぐに類似サイトがいくつもできる可能性が高い。競合をチェックできない分、サイト作成に慣れていない人には作り辛いジャンルとなる可能性もある。

 既にあるサイトである場合、他のサイトのいいとこどりをすることができる。検索エンジンでサイトのキーワードをチェックしてみればいい。検索にひっかかったサイトを簡単に評価してみよう。デザイン、情報、機能などざっと見て、書きだしておこう。
 大事なことは、競合よりも優れたものにすることである。だから、いいとこどりをするだけではダメで、競合にはない機能や情報を盛り込む必要がある。何があって、何がないのかを把握しよう。

How
 ユーザがサイトを利用するときの、流れを決める。シナリオづくりである。ユーザはまずどこを見て、どのように辿って、ユーザニーズを満たした上で、自分がサイトを作った目的・目標を満たすか、という流れを考える。
 ユーザがそのサイトに来るということは、検索エンジンやリンクをクリックして、そのサイトにある情報を得ようとしているのである。そのユーザごとの目的や動機、サイト内でどのように動いてほしいかを書き出そう。
 ここで考えたシナリオは、後でサイトの機能や記事を書くときに役立つ。

ユーザビリティに必要なもの

ユーザビリティに必要なものは以下の5つである。

(1) 操作性
(2) 視認性
(3) 情報量

 ユーザビリティとは、ユーザにとって使いやすいかどうかを図る度合いである。

 操作性とは、何も説明書がなくても、感覚的に使い方がわかる、ということである。どこにメニューがあるか、ボタンの意味がわかるか、といったことから、自分の現在位置を把握できるか、あるページから別のページへの移動がしやすいか、といったことも含む。

 視認性とは、そのページの内容の読みやすさである。文字が小さすぎないか、文字の色が背景と似た色になっていないか、スクロール量が多すぎないか、どこがコンテンツでどこが宣伝なのかなど、ユーザにとって何がどこにあるのか目で確認しやすいかどうかということである。

 情報量とは、ユーザが求める情報がそのサイトにあるかどうかである。

 上記の3つのうち、情報量は、他の2つよりも重要度が高く、この1点で優れているサイトは、ユーザを集めることができる。情報量において唯一無二であれば、ユーザはそのサイトを利用するが、類似サイトというのは数多く作られるもので、ニッチなジャンルであっても、そこを狙ってサイトを作る人がいつか必ず現れると思っていた方がいい。
 他を寄せ付けないサイトをつくるならば、1に情報量、そして2・3に操作性、視認性を確保することである。