：2012年06月08日　 ：ディレクターの仕事　 ：コンバージョン　 ：この記事は19分程で読めます。

先日の記事[競合サイト調査・分析に必要なチェック項目と役立つツール達！]でユーザビリティの調査・分析方法を軽く紹介しましたが、今回はWebユーザビリティを改善するための5つのポイントと方法を紹介したいと思います。
まずユーザビリティとは何なのかについて軽く触れておきます。先日の記事でも紹介しましたが、それは【使い勝手】のことです。WEBユーザビリティの改善とはすなわち、WEBサイトの使い勝手を良くするということになります。ではその使い勝手とは何なのか。それは単純に【使いやすさの程度をあらわした言葉】のことです。使い勝手が良いということは、使った人から見てその【何か】は使いやすかったということになります。そして今回のこの記事は【どうしたらユーザーに使いやすいと感じてもらえるのか】について紹介しています。

この【WEBユーザビリティを改善するための5つのポイントと方法】は下記の項目で紹介するヤコブ・ニールセン博士の5つの定義をベースにしています。この5つの定義は、WEB業界では広く周知されていることなので、プロの方達には退屈な記事になっているかもしれませんがお許しください。
この記事は、WEBユーザビリティという言葉は聞いたことがあるが、どうしたらユーザビリティを向上させることができるのかがわからない人向けにまとめています。私の周りでも最近、WEBユーザビリティについて教えてほしいと相談してくださるクライアントも増えてきているので、今さら感も否めませんが、ここで考えや知識をまとめておこうと思いました。

ユーザビリティには規格がある

世界的な工業基準を定めている国際機関にISO(国際標準化機構)というスイスに本部を置く組織があるんですが、そこがユーザビリティについて以下のように定めています。

ユーザビリティ (usability): 特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。
有効さ (effectiveness): ユーザが指定された目標を達成する上での正確さ、完全性。
効率 (efficiency): ユーザが目標を達成する際に、正確さと完全性に費やした資源。
満足度 (satisfaction): 製品を使用する際の、不快感のなさ、および肯定的な態度。
利用状況 (context of use): ユーザ、仕事、装置（ハードウェア、ソフトウェア及び資材）、並びに製品が使用される物理的及び社会的環境。

また国際規格ではないですが、WEBユーザビリティ研究の第一人者であるヤコブ・ニールセン博士は以下のようにWEBユーザビリティについて定義しています。

1学習しやすさ：すぐに、そして簡単に使用することが可能
2効率性：学習後は高い生産性を創出可能
3記憶しやすさ：簡単に使い方を記憶することが可能
4間違えにくさ ：間違いを起こしにくく、また起こしても簡単に回復可能
5主観的満足度 ：ユーザーが満足できるよう楽しく利用することが可能

この規格や定義はWEBユーザビリティを考える上で、大変重要な要素になるのでチェックしておきましょう。

01.基本的なルールを利用する(学習しやすさ)

Yahoo!JAPANのTOPページを見てもらえるとわかると思いますが、リンクカラーは基本的にすべて青色になっています。このリンクカラーはブラウザの初期設定の色で、昔から多くのサイトでリンク色として使われてきました。そのため多くのユーザーは【青＝クリックできるリンク】であると学習しています。なのでリンクカラーを他の色に変更してしまうと、ユーザーはそのサイトのために再度学習し直さなければなりません。これはユーザーにとって面倒なことです。
リンク色だけを学習し直すならそんなに面倒ではないかもしれませんが、ボタンっぽいの形をしているのにクリックが出来なければどうでしょうか？『使いにくいサイトだな』と思いませんか？多くのユーザーは【ボタンのような形の物＝クリックできるリンク】であると思っています。なのでクリックできないボタンは使いにくいと感じるんです。

私は今スマートフォンを使っていますが、以前はずっとNECの携帯電話を使っていました。一度だけパナソニックに変えたことがありますが、その後はずっとNECを使っていました。なぜかわかりますか？それは他社の携帯電話に買い換えると、操作方法を学習し直さなければならないからです。ショートカットキーの使い方や、画面の明るさの変更方法、デコメの使い方なんかもそうですね(ほとんど使ったことないですが)。私は学習し直すのが面倒だったのでずっとNECを使っていたんです。

世の中に沢山存在するWEBサイトには【よく使われている基本的なルール】があります。リンクは青。ボタンはクリックできる。フッターにはCopyright。ヘッダーにはナビゲーション。ロゴをクリックすればTOPページへ戻る。こういった多くのユーザーが当たり前だと記憶している【基本的なルール】をできるだけ守れば、それだけで十分使いやすいサイトになります。学習し直す必要が無いんですから。
ですが絶対にこの【基本的なルール】に沿ってサイトを作らなければならないわけではありません。そのサイトで独自にキチンとルールを作ってあげれば、この【基本的なルール】に従わなくても良いんです。
例えば『サイトのメインカラーが赤だからリンクカラーも赤にしたほうがデザインに統一感が生まれる』と考えれば『このサイトのリンク色はすべて赤にする』というルールを作ればいいんです。ただ気をつけてほしいのは、ユーザーの多くは学習し直すことを面倒だと感じます。そのため、その新しくルールを作るときは、誰もが手間無く簡単に覚えられるルールを作る必要があります。いちいち使い方をPDFで見なきゃ使えないサイトなんで嫌でしょ？
一般的に優秀だと言われるWEBサイトの多くは、この【基本的なルール】をできるだけ守った上で、オリジナリティーを感じられるサイトとなっていることが多いです。

最後に一番やってはいけないことを説明しておきます。それはルールを作らないことです。ページによってリンクカラーが青とか紫というように、ルール無く存在するようなサイトでは、ユーザーは戸惑ってしまいます。お風呂で水道の赤い蛇口をひねったのに冷たい水が出てきたら困りますよね？しかも次の日それを学習して、お湯を出そうと青い蛇口をひねったら、また冷たい水が出てきたら最悪でしょ？だからルールは必要なんです。

対策方法

• ロゴは全ページに配置しトップページへリンクさせる。
• 企業名やロゴは画面左上に設置する。
• できる限りナビゲーションはヘッダーに横並びに配置する。
• ナビゲーションは全ページで統一性を持たせる。
• 基本的にリンクは青色にし下線を引く。
• サイト内検索窓はヘッダーの右上もしくは左上に設置する。
• サイト内検索の検索結果はページタイトルと2,3行の説明文にする。
• 項目数が多いときは文章ではなく箇条書きにする。
• 箇条書きをするとき、各項目の言い回しは一貫性を持たせる。
• 専門用語はユーザーに分かりやすい言葉に置き換える。
• 見出しは太字にしたりフォントサイズを大きくしたりして目立たせる。
• 見出しを使ってその先の内容を明確にする。
• どのページにいるか明確に分かるデザインにする。(パンくずなど)
• 明確な理由をもって色や形などをデザインする。

※全ての要素は学習しやすさ・効率性・記憶しやすさ・間違えにくさ・主観的満足度に関連しています。

02.かゆいところに手を(効率性)

昔とあるサイトの乗換案内ツールを使って『効率悪いサイトだな』と思うことがありました。出発駅と到着駅・出発時間などの必要事項を入力し【検索】ボタンを押す。すると検索結果が表示されます。ここまでは何も問題ないんですが、到着駅を変更して再検索したいと思い前画面に戻ったら、出発駅と到着駅・出発時刻の入力欄が空になってしまい、すべて最初から入力し直さなければならないという現象が起きました。これだと大変効率が悪いですよね。非常にユーザビリティが悪いです。

この効率の悪さを改善することがユーザビリティの改善につながります。前画面に戻っても入力してあった内容が保持されていればそれだけで効率性が高いといえます。また、いちいち前画面に戻らなくても検索結果画面で入力項目を変更できれば尚良いと言えるでしょう。
ただこの時注意しなければならないこともあります。それは入力フォームを隠していたり(ボタンなどをクリックしないと表示されない)、スクロールをしないと見えない位置に設置してしまうと効果が半減してしまうということです。
ユーザーの多くは基本的にスクロールすることを嫌います。またページに表示された情報を隅々まで読むことも無く、必要な情報にだけ目を留めます。このときユーザーがほしい情報は検索結果なので、そこに注目はしますが、そのほかの要素にはあまり関心を持ちません。そのため入力フォームを隠してしまったり、検索結果の下に入力フォームを設置してしまうと、せっかく前画面に戻らず再検索できる機能を備えているのに、気づいてもらうことが出来ず、結果ユーザーに余計な一手間を与えてしまいます。
その点にも注意してサイトを作っていけば、よりユーザビリティの高いサイトになってきます。

対策方法

• TOPページにはそのサイトの最重要コンテンツに直接リンクさせる。
• ナビゲーションは隠さない。(クリックしないと表示されない構造にしない)
• そのページで一番伝えたい内容はスクロールしないでも見られるようにする。
• 検索ボックスは最低半角30文字は入力できる幅にする。
• ページ数が多いサイトではサイト内検索を設置する。
• フォームを利用するときユーザーが簡単に入力できるような作りにする。(郵便番号を入力すると住所が記入されるなど)
• フォームの記入項目は必要最低限に抑える。
• 目標への少ないステップでたどり着けるようにする。(3クリックルールに従わなければならないわけではありません)
• 文字サイズを必要に応じて変更できるようにする。
• サイトマップページを用意する。
• どのページからも簡単にTOPページに戻れるようにする。

※全ての要素は学習しやすさ・効率性・記憶しやすさ・間違えにくさ・主観的満足度に関連しています。

03.使わなくても忘れない(記憶しやすさ)

01の【当たり前のルールを守る(学習しやすさ)】で、ルールを新しく作っても構わないということを話しましたが、この項目で説明することは、そのサイトのルールが記憶しやすいかどうかということです。簡単に覚えられるルール。忘れにくいくルール。また忘れてしまったとしても簡単に思い出せるルール。それが記憶しやすいサイトに繋がります。

ツイッターやフェイスブックのようにほぼ毎日利用するサイトでは、基本的な操作方法などを忘れることはほとんど無いでしょう。ですが旅行会社のWEBサイトではどうでしょうか？私はデザインの勉強のためにと自分に言い訳しながら2ヶ月に1度の頻度で小さな旅行に行っているんですが、日本人の年間平均旅行回数は年2回程度だと言われています。ということは、じゃらんやJTB・HISなどの旅行代理店のWEBサイトは、日常的に利用されるサイトではなく、不定期に利用されるサイトということになります。
人によっては『3年ぶりにJTBのサイトを使った！』なんてこともあるでしょう。こういった不定期に利用されるサイトでは、特に記憶しやすい工夫を施さないといけません。そのためWEBサイトで【基本とされているルール(リンクは青など)】を守ることは大変有効になります。

このJTBのサイトを見ていただけると分かるかと思いますが、このサイトのリンクカラーも青です。ナビゲーションはヘッダーにありますし、コピーライトはフッターです。検索結果画面も02の内容で触れたように、検索結果画面でも項目を変更できるように工夫されています。ボタンはボタンらしくデザインされていますし、アイコンも一目で内容が把握できるものになっています。こういった工夫がユーザビリティの高いサイトに繋がってきます。また記憶しやすさは学習しやすさと密に連携しているといわれています。そのため学習しやすさが高ければ、記憶しやすさも自然と高くなります。

対策方法

• サイト全体にデザインの一貫性を持たせる。
• 商品・サービスの内容が連想できるデザインにする。
• 関連しない要素はきちんと分る。
• 関連する要素はグループ化する。
• TOPページにはそのサイトを一言で表すような説明文を表示する。
• 段落は短めにし分かりやすくする
• ドメインは短いほうがよい。
• 意味の分かる見出しにする。
• アイコンは直感的にわかるものにする。
• 検索システムは複雑な作りは避け、明確で単純な作りにする。(複雑な仕組みはオプションにする)

※全ての要素は学習しやすさ・効率性・記憶しやすさ・間違えにくさ・主観的満足度に関連しています。

04.しっかりサポート(間違えにくさ)

人間は皆なんらかの間違いを犯します。機械ですら誤作動を起こすんですから、不完全な私達人間は間違いなく間違えます(間違いなく間違えるって…矛盾か)。ユーザビリティを向上させるには、私たち作り手がユーザーが間違いを起さない様にサポートする必要があります。

私は小学生のとき、漢字の書き取りテストを何度も立て続けに間違えたことがありました。1回なら良かったかもしれません。ただ3回4回5回と立て続けに間違えたので、小さい私は漢字そのものを嫌いになってしまいました。今でも変わらず漢字は嫌いです。誤字脱字が多いのはそのせいかもしれません。いつもすみません。

ユーザーが間違いを起さない様にサポートする必要があるのはこのためです。何度も立て続けに間違えてしまうようなサイトでは誰もがそのサイトを嫌になってしまいます。ただどれだけ上手にサポートしてあげても、ユーザーは必ず間違えます。このときに大切なのは、どこをどのように間違えたのかを分かりやすく伝えることです。先ほども話しましたが、何度も間違えてしまうから嫌になるんです。なので間違いを1回で正してあげるように工夫してあげることが大切になります。

例えば、氏名の入力欄の横に【例：山田 太郎】と入力例を表示してあげれば、間違いが起きにくくなります。
例えば、メールアドレスの入力を間違えてしまった時に【メールアドレスに漢字が含まれています】や【メールアドレスに＠が含まれていません】とエラーメッセージを表示してあげれば、1回の間違いで正してあげられる可能性が高くなります。

最近は利用していないので分からないのですが、3.4年前、けっこう有名なディレクトリ型検索エンジンに登録しようとした時の事です。入力項目のすべてを記入し、登録ボタンを押したら【入力項目に不適切な文章が含まれています】というエラーメッセージが表示されました。でもこれだけのエラーメッセージでは、どこに不適切な文章が含まれているのか分かりませんでした。サイト名？カテゴリ？サイト紹介文章？管理人名？で、結局5分くらいかけて入力したのに、どこに不適切な文章が含まれているのかが分からず、その検索エンジンに登録することはできませんでした(こういう経験をしている人は結構多いと思います)。
エラーメッセージを出すときは、どこがどのように間違っているのかを正確に表示してあげるように工夫しましょう。

先ほどの項目でも触れましたが、ボタン風のデザインなのにクリックできないというのも、ユーザーに間違いを起させてしまっている要素です。他にも気をつけなければならない点は多くあります。リンクではない普通の文章なのに、強調させようと青色を使用すれば、ユーザーはクリックできるものだと思って間違えてクリックしてしまうかもしれません。

対策方法

• サイトの重要なコンテンツへのリンクを広告バナーのようにデザインしない。
• ナビゲーションには分かりやすく簡潔な名称を付ける。
• デフォルトのフォントサイズを小さく設定しすぎない。
• テキストと背景色のコントラストを大きくする。
• リンクテキスト以外に下線を引かない、リンク色と同じ色を使わない。
• 訪問済みと未訪問のリンクには異なる色を使用する。
• ページ内リンクと外部リンクをアイコンなどで区別する。
• ボタンデザインは浮き彫り風のデザインなどにし、ボタンだと分かりやすくする。
• サイト内検索で入力ミスをしたとき、Googleのように「もしかして○○？」と表示する。
• 何らかの間違いが起きたときは的確で分かりやすいエラーメッセージを表示する。
• 何らかの間違いが起きても簡単に復帰できる構造にする。
• 致命的なエラーの起こらないサイトを作る。(公開前にテストを重ねる事)

※全ての要素は学習しやすさ・効率性・記憶しやすさ・間違えにくさ・主観的満足度に関連しています。

05.ユーザーのニーズに答える(主観的満足度)

主観的満足度と言うと少し分かりにくいかもしれませんが、要するに【そのサイトを利用したユーザーが楽しめたか。満足できたか】ということです。この要素はインターネットゲームなどのエンターテイメント系サイトで特に重要な要素になります。

WEBサイトを作るとき、まずターゲットユーザーを決めるかと思いますが、そのターゲットユーザーが何を求めているのかを考え、そのニーズに答えることが、主観的満足度を高めることに繋がります。
例えば、おいしいコーヒーの入れ方を知りたい人がいたとします。そのユーザーに対して、分かりやすく的確においしいコーヒーの入れ方をレクチャーしているサイトがあったとしたら、恐らくそのサイトは主観的満足度の高いサイトといえるでしょう。もちろん満足してもらうには読みやすさや、間違えにくさ、操作しやすさなどの、01から04の要素も必要になります。

基本的にユーザーは、コンテンツを使用するため・見るためにサイトに訪れます。そのコンテンツ内容が楽しければ満足できますし、つまらなければ満足できません。またためになれば満足できますが、ためにならなければ満足できません。要するに良いコンテンツを作ることがSEO対策においてもユーザビリティ対策においても重要になるということです。

どうしたら素晴らしいコンテンツが作れるかについて分かりやすくお話するのは難しいのですが、ターゲットユーザーの事をとことん知り尽くそうとする姿勢こそが、良いコンテンツ制作に繋がっているのは間違いありません。もちろんそれだけではなく、突拍子も無いアイデアが、すごく多くの人をひきつけ、楽しませることができるということもあるでしょう(この場合も多くはユーザーの事を考え続けた結果であることが多いと思いますが)。
自社ののターゲットとなるユーザーが何を求めているのか、日々考える続けることが主観的満足度の向上につながり、結果としてユーザビリティの高いサイトになります。

対策方法

• サイトデザインは不快無く、視覚的印象の良いものにする。
• ユーザーが何を求めているか調べ、コンテンツに反映させる。
• 文章やコンテンツは結論から先に述べ、次にその根拠となる事実情報を書く。
• 短くて分かりやすく明確な内容にする。
• エラーメッセージや操作指示などは機会じみた言葉を使わない。
• ユーザーがそのサイトを使いこなせるように工夫する。
• 細かいディレールにもこだわる。
• ユーザーに対して敬意払う。(細かい配慮が主観的満足度に繋がる)
• 携帯電話も含め、複数のブラウザで閲覧可能にする。
• 工事中のページを無くす。

※全ての要素は学習しやすさ・効率性・記憶しやすさ・間違えにくさ・主観的満足度に関連しています。

最後に

ここまで長々とユーザビリティについて書かせていただきましたが、ここで紹介したポイントと方法はあくまでもユーザビリティを高めるための一例に過ぎません。また人によってはもっと新しい発見をしているでしょうし、それこそユーザビリティに対する解釈がまったく違う人もいるかもしれません。ユーザビリティの設計は非常に奥が深く、凝りだすとキリがないんです。
人間工学を学んだり、アフォーダンスについて考えだせば、サイト制作に終わりが見えなくなります。でもまあ、WEBサイトは日々改変を加えていくものなので、厳密に言えば終わらないことが普通なんですけどね。
ちなみにアフォーダンスというのは、心理学者のジェームス・ギブソンという人がアフォード(与える・提供する)という言葉から作った造語らしいです。意味は【環境が動物に対して与える意味】のことです。例えばそこに椅子がおいてあれば『座れますよ』という張り紙が無くても人はそこは座ります。それは椅子が【座る】ことをアフォードしているからです。ようするに人は、このアフォーダンスによって座るという行為を自然に行ってしまうんです。
WEBサイトにおいてもこれは同じで、ボタンっぽいデザインなら『クリックできますよ』と書いてなくても人はクリックします。アフォーダンスを学べばユーザビリティをより高められ、デザインの幅も間違いなく広がるでしょう。
とにかく、ユーザビリティについて考え出すとキリが無いという話だったんですが、私がユーザビリティを向上させるために1番大切だと思うことは、Webサイトを利用してくれるお客様の思いを、叶えてあげようとする私達つくり手の思いが大切なんじゃないかと思っています。

では、この辺で！