KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/12th/usability のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/12th/usability へ行く。
  • 1 (2005-01-06 (木) 07:59:18)
  • 2 (2005-01-06 (木) 13:51:54)

ユーザビリティ

ユーザビリティとは

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

例えば、ショッピングサイトで、 商品を購入するために次のような操作をしなくてはならないのなら、 商品を買う気になりますか？

• どのような商品があるか、メニューがない（わかりにくい）
• ボタンを4回以上クリックしないと注文できない
• 何度情報を入力しても、エラーになって、理由が表示されない

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

ユーザビリティの例

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

なお、次にあげるものは、 ここまでの授業の中ですでに登場しているユーザビリティのポイントです。

• title要素で、ページの内容を表すタイトルを設定する
• ページの最後に、著作権表示、更新日、連絡先を明記する

リキッドレイアウト

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

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

そこで、「800×600ピクセルの解像度」を基準にして、 リキッドレイアウトを使って、 レイアウトをします。 具体的には、次のようにしましょう。

• 水平線やテーブルの幅は、パーセンテージ（%）で指定
• CSSで、ブロックの幅は、パーセンテージ（%）で指定

統一したレイアウト

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

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

例えば、ショッピングサイトAmazonは、 商品のジャンルが変わっても、レイアウトが統一されています。

• Amazon.co.jp（和書）
• Amazon.co.jp（DVD/ビデオ）

パンくずリスト

機種依存文字を使わない

携帯電話からパソコンにメールを送るときに、 絵文字を使ったメールの、絵文字の部分がパソコンで表示されなかった、 という経験はありませんか？

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

どのような文字が機種依存文字なのかは、 次のサイトを参考にしてください。

• 機種依存文字劇場: http://apex.wind.co.jp/tetsuro/izonmoji/

次へ進んでください。