Website Usability Info

Webブラウザ（ホームページ閲覧ソフト）の中で、大きなシェアを持つIE（Internet Explorer）。米国Net Applicationsが発表した、全世界におけるブラウザのシェア調査によると、Internet Explorerのシェアは約75パーセントだそうです（2008年2月の時点で）。8割以上のシェアを誇っていた一頃に比べれば若干陰りが見えるとは言われるものの、今現在、もっともメジャーなブラウザと言って間違いないでしょう。

「障碍者が不自由なく使える、アクセシビリティに配慮したWebサイトを作りたい」と思っても、障碍を持ったユーザーが実際どのようにWebサイトを利用しているのか、実感を持てないWeb制作者やウェブマスターは多いのではないでしょうか？そんな皆さんにとって、参考例となるWebページがありますので、ご紹介したいと思います。

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

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

Fire Vox（Firefoxで音声読み上げ）で取り上げたことのある、Firefoxの音声読み上げ機能拡張「Fire Vox」ですが、従来はMicrosoft Speech APIのバージョン5（SAPI 5）に対応した日本語音声合成エンジンが必要でした。ところがFire Voxの最新バージョンでは、SAPI4に対応できるようになっています（2008年5月に公開版から、すでにSAPI4対応になっているようです）。

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

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

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

無料で使える音声ブラウザの例として、Firefoxのプラグインである「Fire Vox」について触れたことがありますが（ご参考：Fire Vox（Firefoxで音声読み上げ））、日本語の音声合成エンジン（SAPI5）が別途必要で、それ自体は無料で入手できない（MS Officeを買うか、SAPI 5対応の日本語音声合成エンジンが入っているソフトウェアを買うしかなさそう）ため、視覚障碍者がWebサイト（ホームページ）を閲覧するには、エクストラなコストがかかってしまうではないか？という疑問を抱いていました（健常者にとっては、ブラウザ自体無料ですし、そう考えると、エクストラなコストがかかる時点で、アクセシブルでないような気がして...）。

そんな中、（恥ずかしながら最近になって）日本語の音声合成エンジンが入っていないパソコンでも使える、無料の読み上げツールがあることを知りましたので、ご紹介したいと思います。

「Webページにおける文字の拡大/縮小機能」でご紹介したように、当サイトでは、JavaScriptを使った文字拡大/縮小機能を実装しています。本来はブラウザ側で持つべき機能であって、Webページ（コンテンツ）側に実装するのはどうかと思いますが、多くのブラウザで文字拡大/縮小機能がメニューに隠れてしまっている現状（そのため多くのユーザーは文字サイズを任意に変更できることを知らない）、少しでもユーザーの助けになればという観点で考えると、現時点ではそれなりに意義があると思っています。

そんな中、同様のソリューションを提供しているWebサイト（ホームページ）も少なくありませんが、問題はその大半が、JavaScriptが無効なブラウザでも文字拡大/縮小機能が表示されっ放しで、クリックしてもリアクション（フィードバック）が無いことです。

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

ご自分のサイトのどこがクリックされて、ユーザーがどう動いているかは、ユーザーインターフェースを設計をする上でとても興味深い事項ですね。以前、「クリック箇所を解析する」でCrazy Eggという解析ツールをご紹介しましたが、今回はもうひとつ、RobotReplayというツールをご紹介します。

ご自分のサイトのどこがクリックされていて、どこがクリックされていないかは、ユーザーインターフェース設計をする上でとても興味深い事項のひとつですね。ユーザーテストでも検証が可能ですが、自動的に解析してくれるツールもあります。今回はそんなツールのひとつ、Crazy Eggをご紹介します。

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

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

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

昨今、ユニバーサルデザイン（UD）という言葉をよく耳に（目に）しますね。自動車、住宅、家電製品、文房具...と、ジャンルを問わず様々な製品に導入され、消費者側も、ユニバーサルデザインに配慮した製品に魅力を感じる人が増えています。（「消費者の約7割が、UDに配慮した商品や施設、サービスを利用したいと思っている」というデータもあります。詳しくは、ユニバーサルデザインフォーラムの調査実績（第4回「暮らしの中のデザインに関するアンケート」）をご参照ください。）

最近は、RSSを配信（フィード）するサイトが増えてきました。サイトの更新情報を自動的に顧客に届けることができるなど、RSSは、サイトへの集客（ひいてはWebマーケティング）のツールとして注目されています。

実際にRSSフィードを実施しているWebマスターさんも少なくないと思いますが、皆さんは、RSSフィードの効果測定はどのようにされていますでしょうか？Webサイト（ページ）のアクセスログの解析はやっていても、RSSフィードの効果測定はやっていない、という方が多いのではないでしょうか。

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

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

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

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

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

Internet Explorer 7（IE7）の日本語版が、2006年11月2日に正式公開されました。「IEの新しいバージョンが出たのね」「Webサイト（ページ）のレイアウト崩れをチェックしなきゃ」くらいに思っているウェブマスター/制作者のみなさんも多いかと思いますが、実はIE7の登場は、Webにおけるユーザー行動、ひいてはユーザーエクスペリエンスを大きく変える可能性があることに、お気づきでしょうか？

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

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

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

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

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

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

一部のWebサイト（ページ）では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを（多くの場合、2つから3つに）分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です（各々、個別のHTMLファイルを読み込んで表示します）。有名な企業/施設のサイトでも、よく見られますね（例1、例2、例3：いずれも2006年7月2日現在）。

ブラウザ（ホームページ閲覧ソフト）のひとつであるFirefoxに「Fire Vox」という機能拡張があるのをご存知でしょうか？Firefoxで表示したWebページを、音声で読み上げてくれるツールです（ちなみにVoxとはラテン語で「声」という意味です）。

無料で入手できる機能拡張なので、本格的な読み上げソフト（JAWSなど）や音声ブラウザ（ホームページ・リーダーなど）ほど高機能ではありませんが、自分のWebサイトが音声でどう読み上げられるのかを簡易チェックするのにも適したツールと言えるでしょう。以下に、セットアップ方法および使用方法について、簡単にご紹介したいと思います。

近頃、SEO（検索エンジン最適化）やSEM（検索エンジンマーケティング）の専門家が「LPO」というコトバを口にするのをしばしば耳にします。3文字略語が多い業界ですが、このLPOとはどういうものなのでしょうか。また新しく、ノウハウを勉強しなければならないシロモノなのでしょうか？

最近、Webマーケティングの世界でロングテール（long tail）という言葉をよく聞きます。「ニッチな商品の売り上げの合計が、主力商品の売り上げの合計を上回る」という現象のことです。グラフにすると「長い尻尾」に見えることから、このように呼ばれています。

「ユーザビリティ」という言葉は、Web制作/運営の現場において、もはや珍しい言葉ではなくなっています。その一方で、「ユーザビリティ」という言葉の意味を、正しく理解されていないケースもよく見受けられます。ユーザビリティを語る際、「万人にとって使いやすいものが、すなわちユーザビリティの優れたものである」と思っている方は、案外多いのではないでしょうか？

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

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

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

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

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

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

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

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

近頃は、ブロードバンド環境が一般的になり、高解像度画像や動画など、リッチなコンテンツのWebサイト（ホームページ）でも比較的ストレス無く楽しめるようになりました。実際、Flashや画像をふんだんに使ったサイトをよく見かけますよね。
そんな流れの中、多くのWebサイトでは、テキストのライティングがおざなりになっていないでしょうか。今回は、Webサイト（ホームページ）におけるテキストのライティングの重要性について、確認したいと思います。

以前の記事で、アクセスログとは何か？や、アクセスログ解析ツールのいろいろ、アクセスログの基本的な読みかたについて説明しましたが、今回は「実際にアクセスログを解析するときの留意点」について、触れたいと思います。

先回の記事では、アクセスログ解析の基本的な指標である「ビジター」「ページビュー」「ヒット」についてご説明しましたが、今回はもう一歩進んで、来訪者の動きがわかるような指標についてご紹介します。

一昨日のインターネットコムの記事で、IBMがWebブラウザ「Firefox」用にユーザー補助 (アクセシビリティ) コードを寄贈したというのがありました。

先回の記事では、アクセスログとは何か？や、アクセスログ解析ツールのいろいろについて触れました。今回は、これらの解析ツールを使ってどうアクセスログを読むかについて、実際にアクセスログ解析ツールでよく見かける用語を手がかりに、ご紹介します。

Webマーケティングやターゲットユーザーの想定に役立つアクセスログですが、実際に見るには、アクセスログ解析ツールが便利です。いくつか、簡単にご紹介しましょう。

「デザイン」=「美しく見せたり、かっこよく見せたりする技法」と思われる方は多いと思います。しかし、「デザイン」の本来の意味（つまり、元となる英語の"design"が意味するもの）はもっと幅広く、「設計すること」「企画すること」といった概念も含んでいます。
「美しさ」「かっこよさ」あるいは逆に「（意図的な）かっこ悪さ」といった見える部分は、デザインにおける氷山のてっぺんに過ぎず、「なぜ美しく見せるの？」「どうかっこよく演出するの？」「この変な形を見て誰にウケてもらいたいの？」といったバックグラウンド（企画意図や設計思想）も含めて、「デザイン」なんですよね。
Webサイト（ホームページ）をデザインするときにも、これは当てはまります。

こんな経験はありませんか？

実はこれ、災害時のことを考えて、敢えてこのような造りにしているそうです。
というのも、火災などでエスカレーター（おそらくは停止していて「階段状態」になっていると思いますが）を下りて非難する際、一階で屋外に出る必要がありますが、仮にエスカレーターがデパ地下までスムーズにつながっていると、パニック状態の人はつい、一階にとどまらずそのまま地下に流れてしまう（つまり、屋外に出られない）という危険性があるからです。この話を聞いたとき、私は「なるほど〜！」と思いましたね。

SEO（検索エンジン最適化）を実施するにあたっては、ユーザビリティと同様のアプローチ、すなわち、まずはターゲットユーザー像を明確にし、その上で、そのターゲットユーザーの視点に立ってキーワードを見極めることが大事であると、先の記事SEOとユーザビリティ（その1）/（その2）で述べました。
では、こうして見極めたキーワードは、実際サイト（ページ）の中にどう配置してゆけばよいのでしょうか？

SEO（Search Engine Optimization：検索エンジン最適化）を実施するには、ユーザビリティの向上を考えるときと同様に、まずはターゲットユーザー像を明確にすることが大事であると、SEOとユーザビリティ（その1）：小手先のテクニックに溺れないでは述べました。

具体的にSEOを進めるにあたっては、そのターゲットユーザーの使用語彙（どんな検索キーワードを使って検索エンジンで調べものをするのか）を見極める必要があります。ここで留意すべきことは、検索キーワードを検討し見極める際は常に、ターゲットユーザーのペルソナ、シナリオに立ち返ることです。

Webユーザビリティについてご提案すると、よく「ユーザビリティを改善したって、サイトへの訪問者（アクセス数）が増えるわけじゃないでしょう？」と言われます。ユーザビリティがサイトに貢献できるのは「お客様がサイトに来訪した後、いかに楽しく使って満足いただけるか」という部分なので、その意味では、ごもっともな感想ですね。
というわけで、ユーザビリティに配慮すると同時に、サイトへの集客についてもしっかり考えなければいけません。

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