Creative Master 06 ユーザビリティ Step parts 1 Chapter 01 ユーザビリティとは 06 01 ユーザビリティとは何か？ Usability ユーザビリティとは ユーザビリティの3つの側面 下図は、Webページ上の動画をコントロールするためのイ ンターフェースです。このインターフェースには数々の問題が ユーザビリティ（Usability）とは、もともとプロダクトデ ザインや製品開発で使われてきた言葉で、日本語に訳すと「使 あります。これを例に「使いやすさ」について検討してみまし ょう。 いやすさ」、「便利」といった意味になります。 Webデザインは「Webページ」というように、印刷物をモ デルに出発しました。そのために、当初はビジュアル面に関心 が注がれ、制作のプロセスや手法もグラフィックデザインのそ れを踏襲したものになっていました。 しかし、Webデザインには、グラフィックデザインの領域 にはない重要なポイントがあります。それは、ページを切り替 えたり、目的の情報を検索するためにはユーザーの操作を必要 ①そもそも、このインターフェースは何をするためのものなの とする、ということです。操作を伴う以上、「使いやすさ」に でしょうか？そして、どのように操作したらよいのでしょう ついて考える必要が出てきます。 か？ユーザーが、これが何であるのかを知るための手がかり インターネット環境が整い、Webサイトが多様化・複雑化 やヒントはほとんどありません。 している現在、ユーザーが戸惑うことなくWebを活用できる ②仮に、動画のコントロールを行うためのものだとわかったと ようにするための様々な工夫、すなわち、ユーザビリティが求 しても、動画の再生をスタートするにはどのような操作をす められています。 ればよいのでしょうか？ボリュームを調整するにはどうした らよいでしょうか？ほとんどのユーザーが戸惑うことでしょ しかし、この「使いやすさ」を実現するのは、大変難しいこ う。もしも、本当にこのインターフェースを使用して動画を とです。なぜなら、ユーザーの利用環境や、ユーザーの個人的 見たいのなら、マニュアルを見て覚えるしかありません。 な好みや癖などによって、「使いやすさ」は様々に変化するか ③ユーザーにとって、このインターフェースで操作することは らです。さらに、インターネットやコンピュータは日々進化し 楽しいことでしょうか？動画を再生する方法は他にも数多く 06 続けています。新しい機能が備われば「使いやすさ」も変わり 存在します。その中でもこのインターフェースを選んで使う 01 ます。したがって、使いやすくするための答えは1つではなく、 でしょうか？ ユーザーや環境、時間によって変わり得るものといえます。つ まり、ユーザビリティには、「文字はこのサイズにすればよい」 上記の3つの問題は、そのままユーザビリティを考える上で とか、「このツールを使えば安心」といった表面的なノウハウ のポイントとなります。人間が「使いやすい」と感じるのは次 はない、ということです。重要なのは、どうしたら「使いやす の3つの条件が揃ったときです。 い」と感じられるのかという本質を考える姿勢なのです。 認知性・・・それが何であるのか瞬時にわかる。 操作性・・・それを簡単に操作することができる。 快適性・・・それを使うことで楽しさや満足感が伴う。 ユーザーがインターフェースの存在に気がつかないほど自然 に操作ができれば、ユーザビリティに優れたインターフェース ということになります。 93 parts 1 Creative Master Chapter 06 ユーザビリティ Step 02 リンクの表現 06 Usability 02 リンクの表現 テキストリンクか？画像リンクか？ ①《link.html》を開いた状態 素材CD-ROMの《1-6-2》−《162̲01》− 《link.html》を開いてください。 リンクは、テキストにも画像にも設定することができます。 テキストに設定したリンクを「テキストリンク」、画像に設定 したリンクを「画像リンク」といいます。 《link.html》は、同じリンクをテキストと画像に設定した ものです。テキストリンクと画像リンクの違いを確認してみま ②いくつかのリンク先を閲覧した後の状態 しょう。 テキストリンクのメリット ●テキストの色が変わるので、リンク先が既読か未読かが わかる。 ●データが小さい。 ●ユーザーが見やすいサイズに変更できる。 画像リンクのメリット ●ボタンのような画像を使うことで、操作がわかりやすく いくつかのリンク先を閲覧した際、テキストリンクならばど のページを見たのかが判断できます。 ③ユーザーが表示フォントのサイズを［最大］に設定した状態 なる。 ●表現力が高い。 ●サイズを完全に固定できる。 06 ※画像の場合も、<IMG>タグの属性を「BORDER="1"」としてボーダ ーを表示すれば、輪郭線の色で訪問済みリンクを見分けることができ ます。 02 ビジュアル的な表現力が高く、レイアウトも崩れないという 理由で、画像リンクを使用することが多いですが、テキストリ ンクにも様々なメリットがあります。特に、数多くのリンクを 記載したり、頻繁に更新が必要な場合はテキストリンクの方が テキストリンクは、ユーザー側でフォントサイズを変更す ることができます。しかし、テーブルの作り方によっては レイアウトが崩れてしまう可能性があります。 適しています。目的に合わせて適切な方法をとりましょう。 テキストリンクのスタイル マウスポインタをテキストに重ねた際の形状によって、その また、リンクや訪問済みリンクの色を変更すると、ユーザー テキストにリンクが設定されているのか否かを見分けることが はテキストリンクを「強調を意味しているもの」と判断してリ できますが、一般的には「アンダーラインが付いた青い太文字」 ンクに気がつかない可能性があります。テキストリンクのスタ はテキストリンクであるという暗黙の了解に基づいて見分けて イルを変更する場合は、ほかのテキストの色を統一してテキス います。 トリンクと明確に区別したり、補足説明を加えるなどの工夫が したがって、リンクしていないのに「アンダーラインがつい た青い太文字」のスタイルを適用することは混乱を招きます。 94 必要です。 Creative Master 06 ユーザビリティ Step parts 1 Chapter 02 リンクの表現 画像リンクのデザイン 素材CD-ROMの《1-6-2》−《162̲02》− 《button.html》を開いてください。 Webページ上には数多くの画像が配置されます。その中の どの画像にリンクが設定されているのかがユーザーにわからな ければなりません。 《button.html》は、画像リンクの様々なバリエーションを まとめたものです。ユーザービリティに優れた画像リンクはど 画像を並べただけの画像リンク れでしょうか？ 1 画像を並べただけの画像リンク 画像を単純に配置してリンクを設定した場合、Webページ を見ただけでは、画像にリンクが設定されているかどうかを判 断することはできません。画像のサイズがある程度小さい場合 には「クリックすると大きく表示される」といった暗黙の了解 が働きますが、《button.html》の例では中途半端に大きいた 立体感を付けた画像リンク め、単に画像を見せているだけ、と判断されてしまうでしょう。 2 立体感を付けた画像リンク 画像に厚みを感じるような明暗を付けると、画像は「ボタン」 として認識されます。このことによって、ユーザーはこの画像 はクリックすると何かが起こると推測し、クリックしようとし ます。 逆に、ボタンのような形状になっているにも関わらず、クリ 影を付けた画像リンク ックしても何も起こらない場合は、混乱を招くことになります。 また、ユーザーが「押せる（クリックできる）」と判断する のは、画像が凸状に見える場合のみです。上部からの光線に慣 06 れている私たちは、画像の上辺と左辺が明るく、下辺と右辺が 02 陰になっているものは飛び出して見え、その逆の場合は窪んで 見えます。 立体感と文字を付けた画像リンク 4 立体感と文字を付けた画像リンク 左側は凹、右側は凸に見えます 画像リンクは、情報を視覚的にとらえ、ユーザーの次の行動 を誘発する有効な手段ですが、テキストに比べると情報に曖昧 3 影を付けた画像リンク さがあります。例えば、左側の写真は「風景」とも「自然」と 画像に影を付けると、画面から少し飛び出したように見えま も、場合によっては「夏」、「青」、「アウトドア」などととらえ す。ボタンほど明確ではありませんが、「押せる（クリックで ることもできます。視覚的に強い画像情報をテキストで補完す きる）」と認識されます。 ることで、効果的な画像リンクとして機能します。 95 parts 1 Creative Master Chapter 06 ユーザビリティ Step 02 リンクの表現 ピクトグラム/アイコン ピクトグラムとは、文字にかわって事物や概念を伝えるため に作成される図形（絵文字）の総称で、非常口の表示や道路標 識などがあります。そして、このピクトグラムをコンピュータ に取り入れたものがアイコンです。 私たちは、言語がわからない外国に行ったときでも、男女の シルエットのピクトグラムを見ればトイレの場所を知ることが できます。世界中の人が集まる空港などではノンバーバル（言 語を使わない）コミュニケーションの手段として、ピクトグラ ムが重要な役割を果たしています。 また、ピクトグラムやアイコンは言語よりも視認性が高く、 直感的でわかりやすいというメリットがあります。道路標識が 文字ではなくサインで示されるのもこのためです。 しかし、ピクトグラムが有効に機能するためには、それが繰 ピクトグラムの例 問題のあるピクトグラム 人々が持つ暗黙の理解から外れたピクトグラ ムは、その意味を理解することができない。 り返し利用され、暗黙のうちに多くの人に共通に理解される必 要があります。安易に作成されたピクトグラムでは、それが何 を意味しているのかを学習しなければなりません。学習が必要 ならば、ピクトグラムではなく文字で表示する方がより確かに なります。 Webサイトにおいても、一般的なピクトグラムと同様のこ とがいえます。アイコンを利用すれば、直感的な理解を促し、 アクセシビリティを向上します。しかし、不用意にアイコンを 多用すると、かえってわかりにくくなる場合があります。 Webページで利用されるアイコンの例 アイコンのみでは意味がわかりにく い場合は文字で補完する。 Webサイトでアイコンを使用する際のポイント ●誰が見てもわかること。 特徴のある個性的なアイコンは、かえって混乱を招きます。 06 02 ●繰り返し使用すること。 サイト内で同じアイコンを繰り返し使用することで、統一 感をとるとともに、ユーザーが無意識のうちにアイコンの 意味と機能を理解することができます。 アイコンを活用したWebサイト トップページの画像がメニューである と同時に、サイトの構造を示し、かつ 各コンテンツごとに設定されたアイコ ンによって、サイト内の位置をナビゲ ートしています。 編集工学研究所 http://www.eel.co.jp/ 96
© Copyright 2024 Paperzz
