KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/12th/usability の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2004/12th/usability へ行く。

*ユーザビリティ [#z0c0f9a5]

**ユーザビリティとは [#p7f4788f]
''ユーザビリティ'' (Useability)とは、
「使い勝手」のことです。
Webサイト（ページ）の「使いやすさ」・「わかりやすさ」のための、
ひとつの考え方です。

例えば、ショッピングサイトで、
商品を購入するために次のような操作をしなくてはならないのなら、
商品を買う気になりますか？
-どのような商品があるか、メニューがない（わかりにくい）
-ボタンを4回以上クリックしないと注文できない
-何度情報を入力しても、エラーになって、理由が表示されない

Webのユーザビリティは、
ショッピングサイトに限らず、
サイトやページの訪問者が快適に自分の目的を果たすことができるようにした上で、
「''発信者の情報を的確にわかりやすく伝達する''」
ための、
情報のデザイン上、
重要な考え方になります。

**ユーザビリティの例 [#a9724c25]
ユーザビリティを高めるためのポイントには、
さまざまなものが数多くあります。
ここでは、その一部ですが、
実際のサイトを例にして紹介します。

なお、次にあげるものは、
ここまでの授業の中ですでに登場しているユーザビリティのポイントです。
-title要素で、ページの内容を表すタイトルを設定する
-ページの最後に、著作権表示、更新日、連絡先を明記する

***(1) リキッドレイアウト [#l2da88ec]
「リキッドレイアウト」とは、
ページの横幅を固定しないで、
ウィンドウの横幅に合わせて自動的に伸縮するレイアウトのことです。

Webページには、さまざまなパソコン環境の人が訪れます。
最近のパソコンの画面解像度は、1024×768ピクセル以上のものがほどんどですが、
以前のパソコンでは800×600ピクセル以下の解像度のものもあります。

そこで、「''800×600ピクセルの解像度''」を基準にして、
リキッドレイアウトを使って、
レイアウトをします。
具体的には、次のようにしましょう。
-水平線やテーブルの幅は、パーセンテージ（%）で指定
-CSSで、ブロックの幅は、パーセンテージ（%）で指定

***(2) 統一したレイアウト [#ab6e66f2]
メニューなどのクリックする場所、
見出しや文章のレイアウトなどが、
同じサイト内のページごとに違っていると、
操作しづらくて見づらくはありませんか？

同じサイト内のページでは、
レイアウトやメニューはもちろん、デザインも統一しましょう。
そうすれば、
訪問した人が操作に迷ったりすることなく、
直感的にあなたのサイトの中を探検することができます。

例えば、ショッピングサイト[[Amazon:http://www.amazon.co.jp]]は、
商品のジャンルが変わっても、レイアウトが統一されています。
-[[Amazon.co.jp（和書）:http://www.amazon.co.jp/exec/obidos/tg/browse/-/465392/ref=cs_tab_gw_1_3/249-3632007-6302768]]
-[[Amazon.co.jp（DVD/ビデオ）:http://www.amazon.co.jp/exec/obidos/tg/browse/-/561958/ref=cs_tab_b_1_8/249-3632007-6302768]]

***(3) パンくずリスト [#kd7d3e7f]
検索サイトが発達した現在では、
サイトのトップページからではなく、
検索サイトを使っていきなりサイトの中の特定のページに訪問することができます。

複雑な構成のサイトでは、
訪問した人が「自分がサイトのどこにいるのか？」が
わかるための手段が必要になります。&br;
次のような、
トップページからの位置がわかるようなリンクを、
ページの上部に表示させておくと、
トップページからの現在位置がわかって便利です。
このよなリストを「''パンくずリスト''」といいます。
-[[Yahoo! JAPANの「兵庫大学」のカテゴリ:http://dir.yahoo.co.jp/Regional/Japanese_Regions/Kinki/Hyogo/Education/Universities/Hyogo_University/]]
#ref(id00.png,nolink,パンくずリストの例)

「>」で区切られた文字は、すべてリンクです。
「>」以外に「/」や「|」が使われる場合もあります。

ちなみに、
グリム童話「ヘンゼルとグレーテル」で
ヘンゼルが森の中で迷子にならないように、
パンくずを落として目印にしておいた、
という話が名前の由来です。

***(4) 機種依存文字を使わない [#f48fa1ce]
携帯電話からパソコンにメールを送るときに、
絵文字を使ったメールの、絵文字の部分がパソコンで表示されなかった、
という経験はありませんか？

''機種依存文字''とは、メーカーが独自に設定した文字のことです。
このような文字は、同じ種類のパソコンやOS上では正しく表示されますが、
機種やOSが異なると表示されないか、違う文字が表示されてしまいます。

どのような文字が機種依存文字なのかは、
次のサイトを参考にしてください。
-機種依存文字劇場: http://apex.wind.co.jp/tetsuro/izonmoji/


&br;
&navi2(Lecture/InfoDesignB2004/12th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/12th,toc,next)