【ユーザビリティ】07_FlashやAjaxなどのトレンドを取り入れる法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

84_ここぞの場面でこそ Flash を使う

全体の構造はHTMLをベースにし、そのなかの一部に Flash を使うハイブリッド型を基本にする。ページに動的な要素があるとユーザーの視点が止まる確立が高くなるため、新製品の紹介などに Flash を使うのは有効。

85_ウィンドウは最大サイズで開かない

ウィンドウの最大化ボタンを無効にして、必ずフルスクリーンで開くことを強要するのは、ユーザーが好みにあわせて閲覧する自由を奪う行為なので、避けるべき。

86_skip ありきで Flash コンテンツを考えない

イントロダクションで意味のないイメージムービーを見せるWebサイトは、イメージダウンになることはあっても、いい印象をもたれることはない。

87_Flash の待ち時間をユーザーに伝える

ローディング画面をコンテンツの一部にしてしまう。ユーザーのイライラをワクワクに変える。

88_ユーザーインターフェイスはリアルさよりも使い勝手を優先する

人物のアニメーションがコンテンツをナビゲートしたり、3Dを利用したりといったリアルに近いインターフェースは、ユーザビリティを損ねる場合がある。一番優先させるべきなのは、ユーザーの学習時間を短縮し、目的の情報にスムーズに誘導できること。

89_Flash のメニューはユーザーが直感的に使えるようにする

Flash を使ったナビゲーションのポイントは、コンテンツとナビゲーション部分を分けること。コンテンツ部分はダイナミックに動き、ナビゲーションは下部に配置するなど。

90_Flash では標準のパーツを活用する

ユーザーは標準のものによく慣れており、これらをカスタマイズしてしまうと操作効率が落ちてしまう。

91_Flash や Ajax を利用して無駄なページ移動を減らす

ユーザーのリクエストに応じて画面の一部分を動的に書き換えて、画面推移を減らすなど。

92_シームレスな画面の変化をユーザーに意識させる

Flash や Ajax を利用して画面の一部分を書き換えた場合、情報の書き換えがシームレスであるぶん、それに気付かないユーザーが出てきてしまう。この問題を防ぐために、アニメーションで印象づけたり、Ajax でモーダルボックスを表示させる。例）lightbox

93_スライドしながら展開するコンテンツは見た目でわかるようにする

「プルダウンメニュー」などのスプリング式のアクションは、ナビゲーションなどの、ユーザーがここはクリックするだろうとイメージできるところでしか使用しないほうがいい。

94_テキストはできるだけ画像にしない

Google は、Flash が生成する swf のテキスト要素をインデックス化している。ユーザビリティの観点からも、SEO対策の観点からも、Flash 内のテキストを画像化しないほうがいい。

95_音声や動画はコントロールできるようにする

ナレーションや BGM 付きの Flash、動画コンテンツなどには、音声のオン/オフ、ボリュームのコントロールが必須。

96_新技術を取り入れる目的と対象を明確にする

RSS配信やQRコードによるサイト閲覧などは、「わかるユーザーにはわかる」といったサービスだが、これらのサービスを利用するユーザーの満足度は高まるし、利用しないユーザーの不利益になることもない。

97_RSS配信には説明文を付ける

Internet Explorer 7 に RSSリーダー機能が付いて、RSSフィードを購読するユーザーは増加傾向にある。しかし Internet Explorer 7 では「フィード」という言葉が多く使われ、FireFox では「ライブブックマーク」と呼ばれる。RSSアイコンだけではなく、説明ページへのリンクを付けておくのが親切。

98_ブログを知らなくてもトップページとほかの記事に移動できるようにする

ブログも通常のWebサイトだと思って閲覧/操作するユーザーは多い。カレンダーも月別記事も意味がわからない。ユーザーができることは「リンクをクリックすること」。カテゴリをメニューらしく分類/表示したり、各ページからトップページやほかの記事にリンクさせる。

99_ブログもユーザビリティに配慮する

title要素やパンくずリストに配慮する。

100_「ポッドキャスト」を知らないユーザーでも使えるようにする

最初はともかく視聴してもらったうえで、iTunes やポッドキャスティングの説明を入れれば、iTunes や RSS が情報収集に便利なものだと理解してもらえる。

【ユーザビリティ】06_ユーザーの視点・行動から分析する法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

77_ユーザーテストは企画段階で実施する

実際のWebページの代わりに、紙に書いたラフの設計図を使用して行う「ペーパープロトタイピング」と呼ばれる方法を使う。被験者に「デジタルカメラのなかで、一番画素数の高いものを購入してください。ただし、一眼レフカメラを除きます」のようなタスク（目的）に従って、紙の上でクリックする箇所を指し示してもらう。

78_ユーザビリティチェックシートを活用する

チェックシートの項目をひとつひとつ確認することで、Webサイトの問題点を洗い出し、サイト全体のトーン＆マナーを統一することができる。

79_ユーザーテストの結果を反映させる

1. ユーザーテストの結果をレポートする
   ユーザーの行動と発言から発見できた問題点をリストアップする。
2. テスト結果を反映させる方針を決める
   問題点のうち、どれを反映させてどれを反映させないかの方針を決める。
3. Webサイトのプロトタイプを作る
   方針をもとに、Webサイトのプロトタイプを数ページ作成する。
4. チェックシートで再確認する
   ユーザビリティチェックシートを随時確認しながら、実際のページを作り込んでいく。

80_閲覧時間が長いページの離脱率を調べる

アクセスログを見ていると「たくさんの人がこのページを長い時間閲覧しているので、人気のあるページだな」と考えがちだが、実際には目的の情報が見つからずに長時間滞在してしまっているだけかもしれない。

81_出口ページをつきとめてユーザーの離脱を防ぐ

ユーザーがWebサイトを離脱するのは、比較的長文のページが多い。長文の情報を読んで満足してしまったり、ページの下部まで来て戻るのが面倒になったりするため。ページの下部に次のページへのリンクやパンくずリスト、グローバルナビゲーションなどを配置して次の行動を喚起させる。

82_ユーザーの直帰率を改善する

直帰率は「直帰数÷トップページ訪問者数」。直帰率の平均は約38％。直帰率が高い理由は次のようなものが考えられる。

• 目的の情報が見つからない
• より詳しい情報へのリンクが見つからない
• 申込みや問い合わせなどの方法が見つからない
• 社名や問い合わせ先が明記されておらず、信用できない

83_リピーター向けに項目別ナビゲーションを作る

リピーターを大切にして彼らを確保することは、Webサイトで重視すべき事項のひとつ。新規ユーザーとリピーターの行動の違いを考える。「目的別」「項目別」のナビゲーションでユーザーをつなぎ止める。

【ユーザビリティ】05_登録したくなるフォームの法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

66_フォームの項目は本当に必要なものだけにしぼる

フォームの項目を増やせば増やすだけ、ユーザーを逃すことになる。あるいはフォームにするのをやめて「カタログをご希望の場合は、TEL：00-0000-0000 までご連絡ください」と電話請求にしたほうが、むしろ見込み客から声がけされるチャンスが増える。

67_制限入力と自由入力を使い分ける

• 制限入力
  入力するものに合わせて区切りを入れておいたり、選択肢を用意しておいたりするものを指す。入力した内容を確認しやすいというメリットがある。都道府県など、選択肢が多い場合に探すのが面倒というデメリットもある。
• 自由入力
  ユーザーに自由に入力してもらうものを指す。意図したことと異なる言葉で入力したり、間違いに気付きにくいといったデメリットがある。

68_入力制限をできるだけ減らす

「全角」を英語の「大文字」のことと思い込んでいるユーザーもいる。注意書きは混乱のもととなるので避けるべき。出来る限りサーバ側で対応する。

69_自動入力で入力ミスを減らす

郵便番号から住所を自動入力するなど。姓名のふりがなは、カタカナよりもひらがなのほうが入力しやすい。

70_入力内容に合わせたフォームの要素を使う

ドロップダウンメニューを利用してユーザーに選択してもらうほうが入力の手間が省け、入力ミスの防止にもなるが、生年月日などは数字で入力するほうが早い。

71_単純な2択でも、フォーム要素を使い分ける

AとBの2つの選択肢がある場合にはラジオボタンを使う。単純な2択にはチェックボックスを使う。選択肢が増える可能性があるならプルダウンメニューを使う。

72_初期値を上手に使ってユーザーの手間を省く

たとえば、飛行機チケットの予約フォームでは、当日の利用がもっとも多いことが予測されるため、初期値を現在の日付・時刻にしておく。

73_複数ページにわたるフォームは現在位置と終了までの経過を明示する

【STEP1】ショッピングカート、【STEP2】お届け先情報入力、【STEP3】お支払い情報入力、【STEP4】ご注文内容確認、【STEP5】ご注文完了 など。

74_ユーザーを混乱させるボタンは付けない

「クリア」ボタンは必要ない。クリック後の予測が付きやすいボタン名にする。「次へ」や「送信」では不安になるので、「注文内容の確認画面へ」や「上記内容で注文する」などとする。

75_エラーで画面を切り替えない

入力して「送信」ボタンをクリックすると「入力エラーです」とだけ表示するのは、何を間違えたのかがわからない。

76_エラーは画面上部と問題箇所に具体的に表示する

該当箇所にエラーを表示させたうえで、ページの上部にエラーの一覧を表示させる。また、エラーの内容を具体的に示す。

【ユーザビリティ】04_引き込んだユーザーを迷わせないための法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

36_テキストリンクには具体的な内容を記載する

「ここをクリック」や「詳細はこちら」ではなく、「○○サービスの詳細仕様」などのようにリンク先の内容を具体的に示すことが重要。

37_テキストリンクはWebブラウザの標準仕様をベースにデザインする

「青くて下線のある文字はクリックできる。一度見たページは紫色になる」ということは、インターネットを利用しているユーザーのほとんどが知っている。Webサイトの配色にあわせてテキストリンクの色をアレンジするのであれば、未訪問リンクと訪問済みリンクで色分けをし、下線を引くかマウスオーバー時にのみ下線が表示されるようにする。

38_target=”_blank”による新規ウィンドウ表示は避ける

「そのままのウィンドウで他サイトに移動させてしまうとユーザーを逃がす」という発想は、ユーザーの操作の妨げとなるだけで、有効なユーザーの囲い込み策にはならない。

39_HTMLページ以外のリンクは事前に知らせる

「売上報告書：PDF形式（300KB）」のように、ファイルの内容、形式、サイズを明記しておく。

40_ページ内リンクは他ページへのリンクと区別してわかりやすくする

ページ内リンクの先頭に「▼」の記号を付けたり、リンクの色を変えたりして区別する。ページ内リンクは、自分がどこにいるか見失いやすいし、「戻る」ボタンをクリックすると元の場所ではなく、ひとつ前のページに移動してしまう。

41_画像リンクはまわりとのメリハリで目立たせる

画像サイズをむやみに大きくするよりも、ボタン部分だけをポイントで色を使って目立たせて、「注文する」「お申し込みへ」といった簡潔な文字を入れて太字で囲む、あるいは影付きにするなど。

42_サムネイル画像リンクからアクションを起こしやすくする

大きな画像を最初からページに掲載すると表示に時間がかかるうえ、同時に他の情報を見せられなくなる。このため、ファイルサイズを縮小したサムネイル画像を表示しておき、クリックすると画像が拡大するようにするのがスマート。

43_ページの「戻る」リンクは JavaScript ではなく URL 指定にする

「Javascript:history.back()」は、途中ページから閲覧したユーザーをWebサイトから離脱させる。

44_文字の行間を調整して読みやすくする

文字の行間は読みやすさに大きく影響する。

45_読まずにパッと見てわかる文章にする

ブログのような読みものをのぞき、ユーザーは文字を「読む」のではなく「見る」。ビジュアルが目にとまったあとで初めて文章が読まれるくらいの位置づけでデザインのバランスを考えたほうがいい。

46_表記と用事用語を統一してユーザーの混乱を防ぐ

商品名はスペースの半角・全角まで気を配る。前ページに戻るボタンが「戻る」だったり「Back」だったりするのもわかりにくい。「尚」と「なお」、「下さい」と「ください」、「出来ます」「できます」なども統一する。

47_ユーザーが誤解しやすい表現は避ける

「ご注文日から2営業日以内に発送します」といった文章はあいまいな表現の代表例。「遅くとも何日以内」などと表示したうえで、受注メールや発送連絡メールでフォローする。

48_機種依存文字は使わない

文章が文字化けしていると、ユーザーはその部分を読めなくなり、Webサイトの信頼も落ちる。

49_外国語はカタカナ表記でわかりやすく検索しやすくする

たとえば「Bambino」というイタリアンレストランであれば、「イタリアンレストラン・バンビーノ」と併記する。

50_制作者ではなくユーザーにわかる言葉を使う

「スパム」は「迷惑メール」に、「ヤフオク」は「Yahoo! オークション」のように正式名称にする。「ワンセグ」のように「1セグメント放送」よりも略語が一般的な場合は略語を使う。

51_ページ内にスクロール枠は付けない

新着情報などをスクロール枠の中に表示させている場合、表示されていない部分はほとんど読まれない傾向にある。こうした情報は、最新の何件かだけをトップページに表示し、以降の部分は一覧ページを別に用意するほうが読みやすい。

52_テキストをスクロール・点滅させない

点滅する文字は非常に読みづらいので、内容が読まれないままほとんど無視されてしまう。それに加えて、画面に細かな動きがあるとユーザーの気が散り、操作や閲覧の妨げになる。

53_Webサイトの目的に応じて画像の量や使い方を決める

画像には、「テキストでは表現しにくい内容を伝える」「テキストを補完する」といった情報伝達目的のものと、「見出しに添えるイラスト」のような修飾的なものがある。修飾として用いる画像はあくまでも脇役であることを意識し、主役となる情報伝達の画像よりも目立つ使い方は避ける。

54_アイコンには意味をそえる

アイコンでユーザーの視角に訴え、テキストで意味を補足する。誰もが知っていると思えるようなアイコンでも、意味の取り方は人それぞれ違う。

55_CSSで読みやすい表組みを作成する

以下のポイントを念頭にデザインする。「見出しとデータを明確にする」「罫線を立体ではなくフラットなものにする」「罫線と文字の間を十分にとる」

56_図や表の統一を図る

• 色彩設計
  Webサイトのベースカラーと図表の色を同一の色相やトーンにする
• 文字の種類と大きさ・位置
  文字の大きさ、行間、フォントを統一することで可読性を向上させる
• グラフ・図表の基本形式
  ラベルの記載箇所、縦軸と横軸の幅、キャプションの位置、枠の付け方や、矢印などの形や影の落とし方
• 図表のサイズ
  極端に大きいものや小さいものがないように、最大/最小の幅を決めておく
• 表組みの設計
  色彩のほか、見出しの方向や罫線の太さなどを統一する

57_印刷できて迷わない地図ページを作る

地図ページはWebサイトでもっとも利用されることが多いページのひとつ。

58_ユーザーが本当に安心できるSSLを導入する

Internet Explorer 7 で、より厳しくなったセキュリティ警告に適切に対応する。

59_情報バーで注意される技術は使わない

ポップアップウィンドウは使わない。

60_「よくある質問と答え」でユーザーの問題を解決する

企業のWebサイトは一方的な情報発信になりがちだが、「よくある質問と答え」を用意すれば、ユーザーの問題を解決して相互の信頼関係を築くことができ、その後のアクションに
つなげることもできる。また、1ページに質問と答えを複数掲載せずに、質問をまとめたインデックスページを作成し、質問と答えを1ページに1つずつ掲載するのが望ましい。アクセス解析でユーザーの悩み、問題点などをリサーチすることができる。

61_現在位置を常に明確にする

ユーザーが目的の情報を探しやすくするためには、
ナビゲーションメニュー、見出し、パンくずリストの3つが助けになる。複数ページにわたる文章の場合は、総ページ数や現在表示されているのが何ページ目なのかという情報を掲示する。

62_サイト内に検索ボックスを各ページに付ける

検索ボックスがあれば、とりあえず検索してみようという気になるユーザーは少なくない。

63_サイト内検索の結果表示の最適化に力を入れる

Google Co-op や Google Mini など。

64_サイトマップはユーザー用と検索エンジン用を分けて作る

Google ウェブマスター用と、ユーザー用を用意する。

65_要所にナビゲーションを置いてサイト共通のナビゲーションを補完する

「グローバルナビゲーション」は、カテゴリの上部階層にある項目を掲示するナビゲーションで、ページ上部に配置されることが多い。「ローカルナビゲーション」は、同じ階層内のコンテンツを掲示するナビゲーションで、ページの左右いずれかに配置されることが多い。このような「埋め込み型ナビゲーション」は、コンテンツを並列に並べるため優劣が付けにくいなどの問題がある。それを解決する手段として、「コンテンツナビゲーション」がある。本文中に適切なタイミングで自由にナビゲーションを挿入できる。そのため、ユーザーを効果的に誘導でき、Webサイトのユーザビリティを容易にアップさせることができる。

【ユーザビリティ】03_ユーザーをWebサイトに引き込むための法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

28_どのページから入ってきても次の行動がわかるように設計する

Yahoo! や Google などの検索エンジンからやってきて、そのページに目当てのものがあるかどうかを確認し、なければ帰って行く。情報が別のページにあるにもかかわらずナビゲーションが不十分なために1ページしか見ずに直帰されているとすれば、それは大きな機会の損失になる。パンくずリストなどを使って、2ページ目以降に誘導する。

29_ランディングページの最適化を図る

ユーザーが、クリックに対して課金するPPC広告（Pay Per Click）やバナーをクリックし、最初に訪れるページのこと。ランディングページを見て、商品の購入、プレゼントの応募、資料請求などのアクションを起こすかどうかを判断する。そのために、LPO（Landing Page Optimization：ランディングページ最適化）を行う。

30_会員登録とログインでユーザーを囲い込まない

通常のWebサイトでは、会員登録とログインをやめるだけで、売上やユーザー数は確実にアップする。ログインが必要なのは、オンラインバンキングのような「セキュリティが非常に重要な場合」や、ブログのような「第三者に侵入されることを防ぐ必要がある場合」、そして、食品の配達のような「定期的に必ず利用するサービスサイト」くらい。

31_すべてのページにお問い合わせ先を明記する

広告や新聞への折り込みチラシで、お問い合わせ先の電話番号が記載されていないものはほとんどない。それは、お問い合わせが購買や契約につながる重要なきっかけだから。連絡先の記載が、冷やかしや苦情の殺到につながるのではないかと考えるかもしれないが、現実社会の企業での常識は、ネット上でも常識。

32_記載したページを削除・移動・リネームしない

新URLに自動的に移動させたり、サイトマップを表示するなどエラーページをカスタマイズしたHTMLファイルを用意して、せっかく来てくれたユーザーを追い返さない。

33_どのページから来てもホームに戻れるようにする

サイトロゴの下に「ホーム」を表示したり、グローバルナビに「ホーム」を表示したり、パンくずリストに「ホーム」を表示するなど、迷ったらホーム、とりあえずホーム、という行動に応える。

34_Webサイトの目的やテーマはタグラインで瞬時に伝える

何を目的としたWebサイトなのかを知らせるために、サイトロゴの周辺などにタグラインを入れる。

35_トップページでユーザーを信頼させる

顔が見えるリアル店舗と違い、ユーザーにとってはWebサイトの情報がすべて。個人情報保護方針や会社住所、連絡先を明記する。プライバシーマークを取得するのも有効。TRUST-e、VeriSign、JADMAなど。

【ユーザビリティ】02_基本構造とレイアウトの法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

11_わかりやすいディレクトリ名とファイル名を使う

動的ページは静的ページの URL に変換するなど。URL を見ただけで Web サイトの構成や自分の現在位置を想像できるようになる。

12_ページの内容がひと目でわかる title 要素にする

Web ブラウザのタイトルバーやブックマークの登録にも使われ、検索エンジンの検索結果にも表示されるので、特に強調したい内容を15文字程度に収める。「ページの内容｜サイト名」の順番にしてページ内容をわかりやすくする。

13_alt 属性で画像の代替テキストを入れる

画像を表示できない環境のユーザーに画像の内容をテキストで説明するという本来の意味で使うべきであり、SEO 効果はあくまでも副次的なもの。

14_検索結果をわかりやすくする

現在では meta 要素のキーワードよりも description に重きが置かれるようになっている。

15_ユーザーがわかりやすいカテゴリに分ける

たとえば「生活雑貨」というカテゴリに「ティッシュ、タオル」など、カテゴリに説明文を付けて補う。
Webサイトの情報量が多い場合は、ひとつのカテゴリを見ただけでは目的の情報にたどり着きにくいので、機能別、ブランド別など複数のカテゴリ分類を併用する。

16_ナビゲーションに例外規則を作らない

「たとえ初めて訪れたユーザーでも、それ以降すぐにそのWebサイトの閲覧方法や操作を覚えることができる」あるいは「リピーターが最初に訪れたときとは異なる目的のページに行こうとする場合でも、以前の経験を手がかりにすばやく移動できる」。
サブサイトやグループサイトでも、ナビゲーションの規則を統一させることで、ユーザーがWebサイトで迷子になる可能性を下げられる。

17_フッタ部分から次のアクションへ結びつける

ページの下までスクロールするユーザーは、次のアクションを考えていたり、なんらかの情報を求めている場合が多い。グローバルナビゲーションや、関連商品の案内・関連カテゴリなどを入れる。

18_レイアウトで情報を明確に区分する

たとえばテレビは情報を順番に流すが、Webサイトはいくつもの情報がページの各所にちりばめられている。これを分かりやすく見せるために、情報の塊（チャンク）ごとに区分けし、レイアウトしていく。

19_ユーザーの視線をコントロールする

Webブラウジングの経験が少ないユーザーほど画面の上部から情報を探し始めるというデータがあるので、重要な要素は画面の上部に配置する。また、画面のチャンクを意識して視線を移動するユーザーは多いので、ボーダーや背景色などでチャンクを明確にする。

20_文字サイズはユーザー側で変更できるようにする

意図したデザインを崩したくないという理由から文字サイズを固定しているWebサイトは多いが、「% か em」で相対的に指定する。

21_Webサイトの横幅は1024ピクセル表示を前提にしない

実際にはユーザーはWebブラウザを画面いっぱいに広げない場合もあるし、サイドバーを表示している場合もあるので、3カラムレイアウトの3カラム目は表示されない可能性がある。

22_文字色と背景色の組み合わせを考え、コントラストを十分にとる

「見出しは文字色と背景色のコントラストを十分にとる」「本文は白背景に黒い文字か濃いグレーの文字にする」など。雑誌の場合も見出し要素はコントラストを十分にとっている。

23_Webサイトのテーマカラーを決める

色数の多いWebサイトは、場合によってはチープな印象を与えてしまいかねない。テーマカラーを決めて色味を統一し、目立たせたいところだけにアクセントカラーとして目にとまりやすい色を使用する。

24_コンバージョンを上げるサイト設計にする

コンバージョンレートは「具体的に行動を起こしたユーザーの数 ÷ 訪問者数」。
トップページの場合は、ユーザーにすすめたい商品やニーズの高い商品があるページへのリンクやバナーを置く。カテゴリページの場合、リピーターや欲しい商品が決まっているユーザーのために、詳細ページを確認することなく買い物ができるよう、カテゴリページのサムネールに「今すぐ購入」のボタンを配置する。詳細ページは、コンバージョンを促す情報やリンク、レビューや送料、個人情報の取り扱いなどを設け、ユーザーが安心してコンバージョンできるような環境を整える。

25_1ページの情報を多くして盛りだくさん感を演出する

ユーザーテストを行うと、はじめに表示されていない情報は、ユーザーの目にとまらない傾向にある。商品紹介などのコンテンツの場合は、情報をあえてまとめず、1ページの情報量を多くして認知度を上げることも有効。

26_CSSで印刷されることも考えたページをデザインする

Internet Explorer 6 の初期設定の状態では、ページの横幅が640ピクセルまでしか印刷されないので、印刷用の CSS では次のような設定を行う。

• ナビゲーションメニューや広告など不要と考えられる要素を display:none; で消す
• フォントサイズは font-size:12px のようにポイントで指定する
• リンクには下線を指定する
• 画像リンクがある場合を考えて、画像に枠線が付かないように border を0にする

27_ノイズのないデザインを目指す

信号は「本来伝えたいこと」を差し、ノイズは一連の行程の中で入る「雑音」。ノイズの部分を最小化し、信号がユーザーに伝わりやすくすることが、Webサイトをデザインするうえでの唯一の目標といってもいい。

• ボタン
  ボタンで一番伝えたい信号は「このラベルがクリック可能なこと」
• ナビゲーション
  重要なのはラベルと現在位置を示すこと。クリックできることを明確にするためにエンボスや影を付けることは悪くないが、そればかりが目立ってしまってはノイズとなる。
• 見出し
  見栄えをよくするために写真を重ねたくなるが、そうするとバナーと間違えられやすくなる。
• 製品写真
  製品写真では、製品の写真だけでなくユーザーにとっての利用シーンがわかるようにするといい。単に抽象的な背景を敷いたようなものはノイズといえる。

【ユーザビリティ】01_Webサイトを作る前にやるべき法則

「Webユーザビリティ・デザイン 」を元に、要約メモしておきたいと思います。

そのプラットフォームがある程度の段階まで熟してくると、その中にまた新たな市場が生まれて「車輪の再発明」といったことがよく起こるように思います。正しく言うと意味は違いますけどね。
例えばパソコンだとネットブックという市場です。そろそろ 1024×768px というモニタサイズを最小と考えてWeb制作を行って良いかのような流れもありましたが、現行のネットブックのモニタサイズは、1024×600px あたりが主流です。

また今回、「テキストはできるだけ画像にしない」という必要性も改めて痛感させられました。テキストサイズを変更したいと思っているのは、何も年配の方だけではないのです。

ユーザビリティとは、次のように定義されています。

• 使用性（usability）
  ある製品が、指定された利用者によって指定された利用の状況下で指定された目標を達成するために用いられる際の、有効さ、効率及び満足度の度合い
• 有効さ（effectiveness）
  利用者が、指定された目標を達成する上での正確さ及び完全さ
• 効率（efficiency）
  利用者が、目標を達成する際に正確さと完全さに関連して費やした資源
• 満足度（satisfaction）
  不快さがないこと、及び製品使用に対しての肯定的な態度

要するに「その製品を使う対象となるユーザが、間違えずに最後までたどり着けるか、その目的達成までに無駄な時間や労力を使うことがないか、嫌な思いをさせずに目的を果たして満足し、好印象をもてるかどうか」ということです。

01_長期継続か短期のインパクトか目的をしぼる

長期運用のWebサイトは XHTML + CSS で構築してデザインの変更などをしやすくする。プロモーションなどを目的とした短期のWebサイトの場合は Flash などを使って話題性や新規性を打ち出したものにするなど。

02_Webサイトの目的を考える

Webサイトを立ち上げる前に、なぜWebサイトが必要なのかを検討する。
「これだけは人に負けない」という何かを探す。成功して他の大企業がマネできるものは、広告・宣伝や価格競争で最終的に負けてしまう。他にはなくて、しかも独自の情報やルートがある、大規模化しても採算が合わないなど、他社がマネしにくいことが条件。

03_ターゲットユーザーを考える

会社や実店舗がある場合は、その顧客層がインターネットにおいても、初期のターゲットユーザーの基本となる。また、取り扱う商品によってもおよそ検討がつく。
会社や実店舗と違う層の潜在顧客を発見できる場合もある。想定ターゲットユーザーの見直しを検討したら、次にそのユーザーがどのようなWebサイトを好んで利用しているかも調査してみる。「高機能よりも簡単」「テキスト主体よりもビジュアル主体」「堅実・重厚よりも親しみ・柔らかさ」など。

04_競合サイトを研究する

同規模の会社やショップだけがライバルとも限らない。他の会社やショップが競合している分野に新規参入し、なおかつ売上を伸ばすには、他のWebサイトとは比べものにならない何かが必要となってくる。

05_ユーザーからのフィードバックを受け入れる体制を整える

お問い合わせ内容を書き込める程度のシンプルなフォームや、お問い合わせ先のメールアドレス、電話番号などを用意して、ユーザーからの積極的な質問を促す。サポートページを活用すると、ユーザーの意見を引き出しやすい。

06_技術志向ではなくユーザー志向で考える

どんな技術が使われているかはユーザーには分からないし関係のないこと。ただそのWebサイトが自分にとって使いやすいか、好感を持てるかどうかでユーザーは判断する。

07_コンテンツを整理してランク付けをする

運営サイドとして入れたいコンテンツと、ユーザーが望むコンテンツがある。運営サイドがブランドのイメージアップやサポートの効率化など、ユーザーは商品を買いたいなど。いったんそれらをリストアップしてカテゴリに分け、ランク付けをしてみる。

08_ユーザーの目的を細分化してランク付けをする

例えば商品の購入が目的の場合、「商品を探す→商品を比較する→商品を注文する」というタスクが考えられる。

09_コンテンツとタスクから基本構成を考える

基本となる導線以外にトップページなどから優先度の高いコンテンツに直接リンクするといったショートカットを配置するなど。階層で考えるのではなく、主要コンテンツに簡単にたどり着けるかどうかで考える。
そして、本来の目的に関係のないメルマガや会員登録などの要素を、タスクの流れに入れないようにする。

10_Webサイトの企画とドメイン名をセットで考える

サイト名とドメイン名を直接結びつける代わりに、サイトのキャッチコピーなどと連動させる方法がある。