Website Usability Info

456 Berea Streetという、主にWeb標準やアクセシビリティ、ユーザビリティに関する話題を簡潔にまとめて発信しているスウェーデン発のサイトがあります。その中に、「Don't fear the fold -- people do scroll」という興味深い記事がありました。Webユーザーはちゃんとスクロールしてくれるもだから、「fold」を恐れるな、というものです。

面白い記事タイトルだなと思ってご一読いただければ幸いですが、Webページの音声読み上げをチェックする場合は、スクリーンリーダーや音声ブラウザで実際に読み上げてみましょう（ちゃんと「聴いて」みましょう）というお話です。

Webページには、共通ラベル（同じ文言）を持ったリンクが複数存在し、かつ、これらのリンクの飛び先が異なることがあると思います。主に、同じ粒度の情報が一覧表示されていて、「続きを読む」「詳しく見る」といった類のリンクがあるケースです。

Webページに実装されているリンクの中には、画像とテキスト（このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます）のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。

ファビコン（Favicon）とは、Webサイト（ホームページ）をブラウザで開いたときにアドレスバーに表示される、アイコンのことです。当サイトでも、オリジナルのファビコンを実装してみました。

何やら刺激的なタイトルでビックリですが、「Web担当者フォーラム」というサイトで連載している「HCD-Net通信」の記事で採り上げられていた記事ですので、かいつまんでご紹介したいと思います。

一般的に、ユーザビリティを意識してユーザーインターフェース（UI）を設計する際には、前例（慣習）に従うのが良いとされることが多いです。これには理由があって、ユーザーの頭の中で構築されたメンタルモデルに適合しやすいからです。

ユーザーインターフェース（UI）設計のコンサルティング会社、ソシオメディアさんのサイトを見て気づいたのですが、サイト内検索窓があるものの、なんとそこに[検索]ボタンがありません。サイト内検索の機能を持つサイトは珍しくないですが、このように[検索]ボタンが無いものは、とても珍しいのではないでしょうか。

Webユーザビリティの第一人者と言われているJacob Nielsen（ヤコブ・ニールセン）氏が、自身のコラム「Alertbox」の中で、「パスワードを隠すのをやめよう」という興味深い問題提起をしています。通常、Webサイト（ホームページ）などでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基本的なユーザビリティ原則に反している、というのです。

主観的な印象ではありますが、近頃、無駄に動作が重い（ページの読み込みに時間がかかる）Webサイトが多いような気がします。一見なんてことなさそうな（リッチなアプリケーションが実装されていたり、高解像度画像や動画が貼り付けられていたり、といった様子がない）ページであっても、ブラウザに読み込まれるのに時間がかかってしまい、コンテンツ内容を閲覧したり機能を操作したりできる状態にならないケースがたびたび見受けられるのです。

皆さんのWebサイト（ホームページ）において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか？高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。

Ajax（エイジャックス）とは、簡単に言うと、画面遷移（ページの切り替え）を伴わずに、ページの情報内容を変更させることができる技術です（詳しくは、Wikipediaの解説などをご参照ください）。

ユーザーの操作（クリックなど）のたびにサーバー側からのレスポンスを待つ（新しくページを切り替えて表示する）必要がないことから、使い勝手の向上が期待できます。また最近では、気軽にAjaxを実装できる「ライブラリー」と呼ばれるプログラムモジュールが多数出回っており、これを使うことでクールな（かっこいい）ユーザーインターフェースをWebサイト（ホームページ）に容易に実装できることも、Ajaxの特長と言えるでしょう。

先のコラム記事「個人情報は本当に必要な情報だけを取得する」で、クレジットカード情報はセンシティブな（情報の持ち主にとって神経質な、慎重に扱うべき）個人情報であると述べました。

もちろん、センシティブなものか否かにかかわらずユーザー（消費者）の個人情報は細心の注意を払って扱わなければなりませんが、「個人情報にはどんな種類があって」「そのうち（特に取り扱いに注意を要する）センシティブな情報は何か」について、体系的なまとめがありますので、この機会に、参考までにご紹介したいと思います。

インターネット（Web）における個人情報の取り扱いについての意識は、個人情報保護法の施行をきっかけに高まっています。Webサイト（ホームページ）を運営する側はもちろんのこと、ユーザー（消費者）側でもその意識は年々高まっていることを、私自身、日々実感しています。

顧客の個人情報取得にあたっての大原則は、「利用目的を明示し、ユーザー側の許諾（パーミッション）を得て初めて取得すること」と、「本当に必要な個人情報のみを取得すること」です。この考え方はサイト運営に携わる人にとって、今や「当たり前」になっていると信じたいところですが、特に後者について、そうでない例を見つけてしまったので、敢えて（今さらな感じはしますが）「おさらい」しておこうと思った次第です。

「功罪」と刺激的なタイトルを付けてみましたが、決してアイトラッキング調査を否定するものではありません。ただ、アイトラッキングに慣れすぎてしまうと、ユーザビリティテストの本質を見失う危険性があるのでは？と、最近アイトラッキング調査を実施する機会が多かった私自身が感じてしまったので、自戒を込めて、書き残しておきたいと思います。

あるサイト（ホームページ）のユーザビリティ検証プロジェクトで、「改善前」と「改善後」のページを使ったユーザビリティテスト（比較実験）を実施しました。

「改善前」では、サイト内検索が多く使われ（そのサイトでは残念なことに、結果、ユーザーの満足いく検索結果が得られなかったり、検索結果が「0件」となってユーザーにフラストレーションを与えてしまいました）、「改善後」では、サイト内検索がほとんど使われないという結果が見られました。

「マシンリーダブル（machine-readable）」という言葉を聞いたことがありますか？

（ある情報を）機械が「読む/解釈することができる」状態のことを指し示す言葉ですが、Webサイト（ホームページ）で情報を発信する際に、実はとても重要な要素だったりします。「Webサイトは、人間が閲覧するものなのに、なぜ？」とお思いの方も多いかもしれませんね。以下、解説したいと思います。

Webコンテンツの中には、PDF形式のものがあります。「クリックしたらPDFファイルだったので、Adobe Readerが起動するまで待たされる」ことに嫌悪感を持つユーザーも少なくありませんが、情報レイアウトやフォントなどを忠実に表現した文書を配布したい場合や、印刷を前提としている場合など、PDFを使うことが適しているケースもあります。

ところでこのPDF、最近では、ユーザーが情報を入力して送信できる「フォーム」も扱えること、ご存知でしょうか？

固有名詞や専門用語、ブランド名の音声読み上げで問題提起しましたが、現状では、変わった読み方をする固有名詞や専門用語、ブランド名などを、音声ブラウザや読み上げソフトで意図通りに読ませることが難しいです。

実はHTMLには、<ruby>という要素があるのですが（rubyとは「ルビ」つまり振り仮名のことです）、これを使うという手もあるのでは？と思い、ちょっと調べてみました。

皆さんは、CAPTCHA（キャプチャ）って、ご存知ですか？ブログでコメントを記入したり、何らかのサービスで認証を受ける際に見られる、文字が歪んだような不思議な画像ですね。フォームに情報を入力する際、「画像の中に見える文字を入力してくだい」といった具合に入力を求められたりします。

読み上げソフトや音声ブラウザを使ってWebサイト（ホームページ）を閲覧していると、特殊な読み方をする言葉（固有名詞や専門用語、ブランド名など）が、Web制作者/運営者の意図通りではない読み方をされることがあります。たとえば（お使いのソフトによって異なりますが）：

このサイトの記事「ユーザビリティの評価手法（その2）：ユーザビリティテスト」の中で、テスター（テストに協力いただくユーザー）は「5人いれば十分」と述べました。Webユーザビリティの第一人者、Jacob Nielsen（ヤコブ・ニールセン）氏のコラム「Alertbox」にある「5ユーザでテストすれば十分な理由」でも有名な理論なので、ご存知の方もいらっしゃるかと思います。ただし「5人」で可能なのは、あくまでも、仮説検証ベースによる「そのユーザーインターフェースがユーザービリティ上問題ないか？」の行動観察であることに留意する必要があります。

RSSを配信（フィード）するサイトは昨今では珍しくなくなりましたが、どうも気になってしかたないのが、RSSを「購読する」という表現です。

Webの入力フォーム（「お問い合わせ」や「申し込み」など）で、氏名を入力させるケースは多いですが、いつも気になるのが、読み仮名（フリガナ）の入力です。カタカナで入力させる例がとても多いのですが、これは、ユーザー（お客様）にわざわざ、無駄に面倒なことを強要していると言えます。

ユーザビリティやアクセシビリティに配慮したWebサイト（ホームページ）を作ろうとした場合、JavaScript（ジャバスクリプト）は、考慮すべきポイントのひとつになります。

Webサイトを制作していると、<a href="xxx" target="_blank">などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。

Webページの「横幅」について、皆さんのサイトでは、どのようにされていますでしょうか？
固定幅にしているサイトもあれば、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）にしているサイトもあるでしょう。いずれにしても、ユーザビリティの観点から、横スクロールが発生しないことが望ましいとされています。というのも、横スクロールをしなければ見れないページですと、一行読むたびに右へ/左へとスクロールしなければならず、（仮に一文字分だけスクロールしなければならない程度だとしても）ユーザーに大きなフラストレーションを与えてしまうからです。

Webページを閲覧する際、スクロールが使えることは「当たり前」ですよね。恐らく「スクロールをしたことが無い」というWebユーザーはいないでしょう。しかし、その「当たり前」に意外な落とし穴があること、ご存知でしょうか？

Webページに画像（写真や挿絵など）を配置する際、「<img>要素にはalt属性を入れること」という話は、サイト運営や制作に携わる方なら一度は聞いたことがあると思います。ところが、「具体的にどうalt属性を記述したらよいのか、わからない」という方も多いのではないでしょうか。実際、私自身が某社のサイト構築ガイドライン策定に参加したときのことですが、ウェブマスターさんや制作会社の方から「もう少し具体的に、どうaltを書くべきなのか規定してくれないと困る」と言われたことがあります。

とあるプロジェクトで、アイトラッキング（eye tracking）を使ったユーザビリティテストに立ち会う機会に恵まれました。アイトラッキングとは、（ユーザーの）目線の動きを追跡する調査手法で、こんなちょっと変わった形のモニターディスプレイ（リンク先は、Tobii社のEye Tracker一覧）を使います。一台数百万円もする代物ですが、一昔前のそれと違って、ユーザーは特殊な装置を身につける必要がないので、自然な使用感で、ユーザビリティテストに活用することができます。

最近、とあるプロジェクトでユーザビリティテストを実施しました。テストの結果、ウェブユーザーの検索行動に、ある傾向が見られたので、ご紹介したいと思います。

最近はブロードバンド環境が当たり前となり、Flashを採り入れたサイトも当たり前のように見かけるようになりました。しかし残念ながらその多くは、Flashを使ったクリエイティブが「目的化」していて、ユーザビリティを損ねているように思います。

いくつか例を挙げてみましょう。（2006年8月14日現在）

Webサイト設計の「5つの段階」で、Jesse James Garrett（ジェシー・ジェームス・ギャレット）氏の"The Elements of User Experience"を引き合いに出して、Webサイト設計には事前の準備（コンセプトワークを含むプランニング）が大切であると述べました。ここでいう「コンセプトワーク」とは、Webサイトのコンセプトを詰める作業を意味しますが、その際、どんな点に留意すればよいのでしょうか？

以前、このサイトの記事「Webデザインとは、情報をデザインすること」で、以下のようなことを述べました。

• 「美しさ」「かっこよさ」あるいは逆に「（意図的な）かっこ悪さ」といった見える部分は、デザインにおける氷山のてっぺんに過ぎず、「なぜ美しく見せるの？」「どうかっこよく演出するの？」「この変な形を見て誰にウケてもらいたいの？」といったバックグラウンド（企画意図や設計思想）も含めて、「デザイン」である。
• Webサイト（ホームページ）の多くは「目的」ではなく「手段」であり、単に「きれいに」「かっこよく」「かわいく」見た目をデザインするだけでは機能を果たさない（せっかくコストをかけて作っても、ビジネスに貢献してくれない）。

つまり、Webサイト（ページ）を作るにあたっては、いきなりビジュアルデザイン（視覚的なデザイン）から始めるのではなく、事前の準備（コンセプトワークを含むプランニング）が必要なわけです。その概念をわかりやすく示した図があるので、ご紹介したいと思います。

一部のWebサイト（ページ）では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを（多くの場合、2つから3つに）分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です（各々、個別のHTMLファイルを読み込んで表示します）。

これまでに「Webライティングのツボ」と題して、ドキュメント全体の論理構成にはじまり、段落や文（センテンス）のまとめかた、平易で正しい言葉遣い、パラレリズム、表記法について触れて参りました。こういったノウハウは、テクニカルライティング（技術文書や取扱説明書の書き方のノウハウ）に基づくもので、Web以外でも、たとえば新聞/雑誌など紙媒体への広告出稿、カタログ、チラシ、プレゼン資料、社内文書、さらには普段やりとりするe-mailにも応用できます。

今回は、これらのノウハウをふまえた上で、Webサイト（ホームページ）ならではの、テキストライティング上の留意点ついてまとめたいと思います。

前回の「Webライティングのツボ」から一ヶ月近く経ってしまいましたが、今回を入れて、残すところあと2回となりました。今回は「表記の一貫性」について触れたいと思います。

これまで、「Webライティングのツボ」と題して、Webサイト（ホームページ）のテキストライティングに関するノウハウをご紹介しましたが、今回を入れてあと3回ほど、お付き合いください。今回ご紹介するのは、パラレリズムというテクニックです。

先回の記事では、平易な言葉づかいについて解説しましたが、今回は、「正しい言葉づかい」について触れておきたいと思います。

これまでに、「Webライティングのツボ」と題して、論理構成や段落/文のまとめかたについて解説しましたが、今回からは、言葉づかいについて触れたいと思います。

前回の記事では、Webサイト（ページ）の論理構成について触れましたが、今回は、その論理構成をもとに、個々の段落や文をどうまとめるかについて、ご説明します。

前回の記事で、Webにおけるテキストライティングの重要性を説明しましたが、「では、具体的にどう書いたらいいの？」という疑問もあるかと思います。
そこで今回からは「Webライティングのツボ」と題して、何回かに分けて、そのエッセンスをご紹介したいと思います。「その1」は論理構成についてです。

Webサイト（ホームページ）のユーザビリティを向上させるには、様々なテクニック（追い追いご紹介したいと思います）がありますが、こうしたテクニックを闇雲に使っていても、結局は表面的な、自己満足な改善にしかなりません。
「どの」テクニックを「なぜ」「どこで」「どのように」使うのかを、明確な根拠に基づいて見極めなければ、本当の意味での（実際にサイトを利用するお客様のための）ユーザビリティ改善にはつながらないものです。