ノウハウ
カテゴリー「ノウハウ」のコラム記事一覧です。
Webユーザビリティ/アクセシビリティ向上のノウハウをご紹介します。
(記事数:43)
ユーザーはちゃんとスクロールする?
456 Berea Streetという、主にWeb標準やアクセシビリティ、ユーザビリティに関する話題を簡潔にまとめて発信しているスウェーデン発のサイトがあります。その中に、「Don't fear the fold -- people do scroll」という興味深い記事がありました。Webユーザーはちゃんとスクロールしてくれるもだから、「fold」を恐れるな、というものです。
百見は一聴に如かず
面白い記事タイトルだなと思ってご一読いただければ幸いですが、Webページの音声読み上げをチェックする場合は、スクリーンリーダーや音声ブラウザで実際に読み上げてみましょう(ちゃんと「聴いて」みましょう)というお話です。
同一ページに共通ラベルのリンクが複数存在する場合
Webページには、共通ラベル(同じ文言)を持ったリンクが複数存在し、かつ、これらのリンクの飛び先が異なることがあると思います。主に、同じ粒度の情報が一覧表示されていて、「続きを読む」「詳しく見る」といった類のリンクがあるケースです。
画像とテキスト(文字情報)が一対になっているリンク
Webページに実装されているリンクの中には、画像とテキスト(このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます)のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。
ユーザー側から見たファビコン(Favicon)の意義
ファビコン(Favicon)とは、Webサイト(ホームページ)をブラウザで開いたときにアドレスバーに表示される、アイコンのことです。当サイトでも、オリジナルのファビコンを実装してみました。
ヒューリスティック評価の99パーセントは間違い?
何やら刺激的なタイトルでビックリですが、「Web担当者フォーラム」というサイトで連載している「HCD-Net通信」の記事で採り上げられていた記事ですので、かいつまんでご紹介したいと思います。
ユーザビリティは前例主義であるべきか?
[検索]ボタンが無い検索窓
パスワードは隠すべきか?
Webユーザビリティの第一人者と言われているJacob Nielsen(ヤコブ・ニールセン)氏が、自身のコラム「Alertbox」の中で、「パスワードを隠すのをやめよう」という興味深い問題提起をしています。通常、Webサイト(ホームページ)などでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基本的なユーザビリティ原則に反している、というのです。
無駄に重いサイト
主観的な印象ではありますが、近頃、無駄に動作が重い(ページの読み込みに時間がかかる)Webサイトが多いような気がします。一見なんてことなさそうな(リッチなアプリケーションが実装されていたり、高解像度画像や動画が貼り付けられていたり、といった様子がない)ページであっても、ブラウザに読み込まれるのに時間がかかってしまい、コンテンツ内容を閲覧したり機能を操作したりできる状態にならないケースがたびたび見受けられるのです。
高解像度画像を閲覧できるようにする
皆さんのWebサイト(ホームページ)において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか?高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。
Ajaxは取り扱い注意
Ajax(エイジャックス)とは、簡単に言うと、画面遷移(ページの切り替え)を伴わずに、ページの情報内容を変更させることができる技術です(詳しくは、Wikipediaの解説などをご参照ください)。
ユーザーの操作(クリックなど)のたびにサーバー側からのレスポンスを待つ(新しくページを切り替えて表示する)必要がないことから、使い勝手の向上が期待できます。また最近では、気軽にAjaxを実装できる「ライブラリー」と呼ばれるプログラムモジュールが多数出回っており、これを使うことでクールな(かっこいい)ユーザーインターフェースをWebサイト(ホームページ)に容易に実装できることも、Ajaxの特長と言えるでしょう。
その個人情報は「センシティブ」ですか?
先のコラム記事「個人情報は本当に必要な情報だけを取得する」で、クレジットカード情報はセンシティブな(情報の持ち主にとって神経質な、慎重に扱うべき)個人情報であると述べました。
もちろん、センシティブなものか否かにかかわらずユーザー(消費者)の個人情報は細心の注意を払って扱わなければなりませんが、「個人情報にはどんな種類があって」「そのうち(特に取り扱いに注意を要する)センシティブな情報は何か」について、体系的なまとめがありますので、この機会に、参考までにご紹介したいと思います。
個人情報は本当に必要なものだけを取得する
インターネット(Web)における個人情報の取り扱いについての意識は、個人情報保護法の施行をきっかけに高まっています。Webサイト(ホームページ)を運営する側はもちろんのこと、ユーザー(消費者)側でもその意識は年々高まっていることを、私自身、日々実感しています。
顧客の個人情報取得にあたっての大原則は、「利用目的を明示し、ユーザー側の許諾(パーミッション)を得て初めて取得すること」と、「本当に必要な個人情報のみを取得すること」です。この考え方はサイト運営に携わる人にとって、今や「当たり前」になっていると信じたいところですが、特に後者について、そうでない例を見つけてしまったので、敢えて(今さらな感じはしますが)「おさらい」しておこうと思った次第です。
アイトラッキング調査の功罪
「功罪」と刺激的なタイトルを付けてみましたが、決してアイトラッキング調査を否定するものではありません。ただ、アイトラッキングに慣れすぎてしまうと、ユーザビリティテストの本質を見失う危険性があるのでは?と、最近アイトラッキング調査を実施する機会が多かった私自身が感じてしまったので、自戒を込めて、書き残しておきたいと思います。
サイト内検索エンジン考
あるサイト(ホームページ)のユーザビリティ検証プロジェクトで、「改善前」と「改善後」のページを使ったユーザビリティテスト(比較実験)を実施しました。
「改善前」では、サイト内検索が多く使われ(そのサイトでは残念なことに、結果、ユーザーの満足いく検索結果が得られなかったり、検索結果が「0件」となってユーザーにフラストレーションを与えてしまいました)、「改善後」では、サイト内検索がほとんど使われないという結果が見られました。
「マシンリーダブル」を意識する
「マシンリーダブル(machine-readable)」という言葉を聞いたことがありますか?
(ある情報を)機械が「読む/解釈することができる」状態のことを指し示す言葉ですが、Webサイト(ホームページ)で情報を発信する際に、実はとても重要な要素だったりします。「Webサイトは、人間が閲覧するものなのに、なぜ?」とお思いの方も多いかもしれませんね。以下、解説したいと思います。
PDFによるフォームの是非
Webコンテンツの中には、PDF形式のものがあります。「クリックしたらPDFファイルだったので、Adobe Readerが起動するまで待たされる」ことに嫌悪感を持つユーザーも少なくありませんが、情報レイアウトやフォントなどを忠実に表現した文書を配布したい場合や、印刷を前提としている場合など、PDFを使うことが適しているケースもあります。
ところでこのPDF、最近では、ユーザーが情報を入力して送信できる「フォーム」も扱えること、ご存知でしょうか?
Ruby要素は固有名詞の読み上げに寄与するか
固有名詞や専門用語、ブランド名の音声読み上げで問題提起しましたが、現状では、変わった読み方をする固有名詞や専門用語、ブランド名などを、音声ブラウザや読み上げソフトで意図通りに読ませることが難しいです。
実はHTMLには、<ruby>という要素があるのですが(rubyとは「ルビ」つまり振り仮名のことです)、これを使うという手もあるのでは?と思い、ちょっと調べてみました。
CAPTCHAによるスパム対応
皆さんは、CAPTCHA(キャプチャ)って、ご存知ですか?ブログでコメントを記入したり、何らかのサービスで認証を受ける際に見られる、文字が歪んだような不思議な画像ですね。フォームに情報を入力する際、「画像の中に見える文字を入力してくだい」といった具合に入力を求められたりします。
固有名詞や専門用語、ブランド名の音声読み上げ
読み上げソフトや音声ブラウザを使ってWebサイト(ホームページ)を閲覧していると、特殊な読み方をする言葉(固有名詞や専門用語、ブランド名など)が、Web制作者/運営者の意図通りではない読み方をされることがあります。たとえば(お使いのソフトによって異なりますが):
ユーザビリティテストの基本はあくまでも仮説検証ベースの行動観察
このサイトの記事「ユーザビリティの評価手法(その2):ユーザビリティテスト」の中で、テスター(テストに協力いただくユーザー)は「5人いれば十分」と述べました。Webユーザビリティの第一人者、Jacob Nielsen(ヤコブ・ニールセン)氏のコラム「Alertbox」にある「5ユーザでテストすれば十分な理由」でも有名な理論なので、ご存知の方もいらっしゃるかと思います。ただし「5人」で可能なのは、あくまでも、仮説検証ベースによる「そのユーザーインターフェースがユーザービリティ上問題ないか?」の行動観察であることに留意する必要があります。
RSSを「購読」?
フリガナのカナ表記
Webの入力フォーム(「お問い合わせ」や「申し込み」など)で、氏名を入力させるケースは多いですが、いつも気になるのが、読み仮名(フリガナ)の入力です。カタカナで入力させる例がとても多いのですが、これは、ユーザー(お客様)にわざわざ、無駄に面倒なことを強要していると言えます。
ユーザビリティ/アクセシビリティとJavaScript
別ウィンドウを開くことの是非
Webサイトを制作していると、<a href="xxx" target="_blank">などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。
Webページの横幅について
スクロールに気づかない
Webページを閲覧する際、スクロールが使えることは「当たり前」ですよね。恐らく「スクロールをしたことが無い」というWebユーザーはいないでしょう。しかし、その「当たり前」に意外な落とし穴があること、ご存知でしょうか?
<img>要素のalt属性の入れ方
Webページに画像(写真や挿絵など)を配置する際、「<img>要素にはalt属性を入れること」という話は、サイト運営や制作に携わる方なら一度は聞いたことがあると思います。ところが、「具体的にどうalt属性を記述したらよいのか、わからない」という方も多いのではないでしょうか。実際、私自身が某社のサイト構築ガイドライン策定に参加したときのことですが、ウェブマスターさんや制作会社の方から「もう少し具体的に、どうaltを書くべきなのか規定してくれないと困る」と言われたことがあります。
アイトラッキング調査で見えるユーザー行動
とあるプロジェクトで、アイトラッキング(eye tracking)を使ったユーザビリティテストに立ち会う機会に恵まれました。アイトラッキングとは、(ユーザーの)目線の動きを追跡する調査手法で、こんなちょっと変わった形のモニターディスプレイ(リンク先は、Tobii社のEye Tracker一覧)を使います。一台数百万円もする代物ですが、一昔前のそれと違って、ユーザーは特殊な装置を身につける必要がないので、自然な使用感で、ユーザビリティテストに活用することができます。
ウェブユーザーの検索行動
Flashの正しい使いかた
Webサイト設計におけるコンセプトワークのコツ(5W1Hを意識する)
Webサイト設計の「5つの段階」で、Jesse James Garrett(ジェシー・ジェームス・ギャレット)氏の"The Elements of User Experience"を引き合いに出して、Webサイト設計には事前の準備(コンセプトワークを含むプランニング)が大切であると述べました。ここでいう「コンセプトワーク」とは、Webサイトのコンセプトを詰める作業を意味しますが、その際、どんな点に留意すればよいのでしょうか?
Webサイト設計の「5つの段階」
以前、このサイトの記事「Webデザインとは、情報をデザインすること」で、以下のようなことを述べました。
- 「美しさ」「かっこよさ」あるいは逆に「(意図的な)かっこ悪さ」といった見える部分は、デザインにおける氷山のてっぺんに過ぎず、「なぜ美しく見せるの?」「どうかっこよく演出するの?」「この変な形を見て誰にウケてもらいたいの?」といったバックグラウンド(企画意図や設計思想)も含めて、「デザイン」である。
- Webサイト(ホームページ)の多くは「目的」ではなく「手段」であり、単に「きれいに」「かっこよく」「かわいく」見た目をデザインするだけでは機能を果たさない(せっかくコストをかけて作っても、ビジネスに貢献してくれない)。
つまり、Webサイト(ページ)を作るにあたっては、いきなりビジュアルデザイン(視覚的なデザイン)から始めるのではなく、事前の準備(コンセプトワークを含むプランニング)が必要なわけです。その概念をわかりやすく示した図があるので、ご紹介したいと思います。
フレーム使用の是非について
一部のWebサイト(ページ)では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを(多くの場合、2つから3つに)分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です(各々、個別のHTMLファイルを読み込んで表示します)。
Webライティングのツボ(その7):Webならではの留意点
これまでに「Webライティングのツボ」と題して、ドキュメント全体の論理構成にはじまり、段落や文(センテンス)のまとめかた、平易で正しい言葉遣い、パラレリズム、表記法について触れて参りました。こういったノウハウは、テクニカルライティング(技術文書や取扱説明書の書き方のノウハウ)に基づくもので、Web以外でも、たとえば新聞/雑誌など紙媒体への広告出稿、カタログ、チラシ、プレゼン資料、社内文書、さらには普段やりとりするe-mailにも応用できます。
今回は、これらのノウハウをふまえた上で、Webサイト(ホームページ)ならではの、テキストライティング上の留意点ついてまとめたいと思います。
Webライティングのツボ(その6):表記の一貫性
Webライティングのツボ(その5):パラレリズム
これまで、「Webライティングのツボ」と題して、Webサイト(ホームページ)のテキストライティングに関するノウハウをご紹介しましたが、今回を入れてあと3回ほど、お付き合いください。今回ご紹介するのは、パラレリズムというテクニックです。
Webライティングのツボ(その3):平易な言葉づかい
Webライティングのツボ(その2):段落と文
Webライティングのツボ(その1):論理構成
前回の記事で、Webにおけるテキストライティングの重要性を説明しましたが、「では、具体的にどう書いたらいいの?」という疑問もあるかと思います。
そこで今回からは「Webライティングのツボ」と題して、何回かに分けて、そのエッセンスをご紹介したいと思います。「その1」は論理構成についてです。

ノウハウ