Webページの途中に、リンクの目的地があるような場合がありますね。いわゆる、「ページ内アンカー」と呼ばれているものです。図示すると、下記のようなイメージです。 ページの中に複数のコンテンツが含まれている場合、当該コンテンツに直接アクセスできるという意味で「ページ内アンカー」は便利なものですが、気をつけて使わないと、ユーザーが現在位置を見失ってしまう恐れがあります。クリックした結果、ブラウザウィンドウ内に表示されるコンテンツの中にヘッダー表示（グローバルナビゲーションやサイトロゴなど）が一切ない状態だと、ページのアバウトネス（何について書いてあるかを端的に表すもの）を示す情報をユーザーが得にくくなるので、「自分は正しい場所に来たのだろうか」と不安になったりするのです。これは恐らく、ユーザーの多くが無意識のうちに、「クリックするとすなわち、別のページに移動する」というメンタルモデルを持ってい

先に公開したコラム記事「Ajaxによる画像の拡大」で、画像拡大のAjaxポップアップの例として、Highslide JSというライブラリーを使用しました。今回は、このHighslide JSを用いて、動画のポップアップ表示について触れたいと思います。 Highslide JSは個人的にオススメのライブラリーですが、数あるポップアップ用ライブラリー（いわゆる「Lightbox系」と呼ばれているもの）の中では、以下の点で秀逸だからです。 開いたポップアップをドラッグで自由に移動できる。 複数のポップアップを同時に開くことができる。 ポップアップを開いた状態で、背景にあるコンテンツ本文側を操作できる。 キーボード操作によって基本操作（ポップアップを開く/閉じる、など）ができる。 そこで今回はAjaxポップアップの応用例として、このHighslide JSを使って、YouTube上にある動画を扱っ

お問い合わせフォームをAjaxのポップアップで表示できる面白いサービスがありますので、ご紹介したいと思います。「VisitorContact」というサービスです。 VisitorContactの実装は簡単です。VisitorContactのサイトにサインアップして必要な情報を入力すると、埋め込み用のJavaScriptコードが生成されるので、それをご自身のWebページにコピー&ペーストするだけです。これらの手続きは基本的に無料です。 このVisitorContact、ユーザビリティの観点で細かく見るといくつか問題があるため、もろ手を挙げておすすめ！というわけではありませんが、ユーザー行動の動線を少しでも短くし、ユーザーが目的を達成しやすくする試みとして、Ajaxの利点をうまく活用していると思います。 VisitorContactのフォームは、「contact」と書かれたリンクバッジをクリッ

コラム記事「Webページにおける文字の拡大/縮小機能」で述べたように、当サイトでは、グローバルナビゲーションエリアに[文字拡大]、[縮小]、[標準]というリンクを設けて、文字（テキスト）のサイズを任意に設定できるようにしていました。 ブラウザの文字拡大機能が一般ユーザーに意外と知られていなかった（ブラウザのメニューの中に隠れていて認知度が低かった）ことへの対策として、それなりに意義があったと思いますし、「文字拡大/縮小機能を使うときは代替手段も明示する」で述べたような、JavaScriptが使えない環境のユーザーへの配慮もしていたので、アクセシビリティ対策としては、悪くないソリューションだったと考えています。 しかしながら当サイトでは、熟考を重ねた結果、このたび、この文字拡大/縮小機能の実装を外すことにしました。理由は、以下の通りです。 「Webページにおける文字の拡大/縮小機能」で述べ

スキップナビゲーションとは、Webページの冒頭（ナビゲーションメニューの手前）に設置されたページ内リンクのことで、そのリンク箇所で[Enter]キーを押す（あるいはクリックする）と、ナビゲーションメニューを通り越して、本文が始まる位置にジャンプすることができる機能です。「JIS X 8341-3：2009」の改正原案では、「ブロック・スキップ」と呼ばれています（項目番号7.2.4.1）。 特に音声ブラウザやスクリーンリーダーなどの支援技術を使ってWebページ上の情報を「上からひとつずつ順番に」見ている（聞いている）ユーザーにとっては、同一サイト内のページや何度か訪れているページを開くたびに生じる問題、つまり「いちいちナビゲーションメニューをすべて見て（聞いて）からでないとページのメインコンテンツに辿り着けない」といった煩わしさを解消することができる、便利な機能と言えるでしょう。 海外、少な

Webサイト（ホームページ）がWeb標準に準拠して適切に制作されていれば、表示されるWebページの「見た目のデザイン」は、スタイルシートというファイルで制御することができます。これを応用して、今日の一般的なブラウザでは、ユーザースタイルシートを用いてWebページの表示を「自分好みに」カスタマイズできるようになっています。つまり、ユーザー（サイトの閲覧者）が、自分用にオリジナルのスタイルシートを作ることによって、Webページを「自分が見やすいように」変更することができるのです。これは、アクセシビリティの観点で、特にロービジョン（弱視）のユーザーにとっては非常に有益な機能と言えます。 しかし、ユーザースタイルシートを作るには、CSS（Cascading Style Sheets）の記述法に関する知識が多少なりとも必要になります。Web制作に関わる人でもない限り、CSSに馴染みがないのが普通だと

以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）に変更しました。 上記の理由に加えて、そもそもWeb（インターネット）はユーザー主導型のメディアなので、Webコンテンツの表示サイズについても「基本的にはユーザーが任意にコントロールできるようにすべき」という想いがあります。たとえば弱視のユーザーが文字サイズを極力大きくしたい場合なども含めて考えると、その人なりの心地よい一覧性を実現する意味で、表示されるWebページの幅や高さを自由にコントロールしたいというニーズは高いのでは、と思うのです。 ただ誤解していただきたくないのですが、私は「固定幅レイアウトよりもリキッドレイアウトのほうが絶対的に優れている」と主張しているわけではありません。リキ

主観的な印象ではありますが、近頃、無駄に動作が重い（ページの読み込みに時間がかかる）Webサイトが多いような気がします。一見なんてことなさそうな（リッチなアプリケーションが実装されていたり、高解像度画像や動画が貼り付けられていたり、といった様子がない）ページであっても、ブラウザに読み込まれるのに時間がかかってしまい、コンテンツ内容を閲覧したり機能を操作したりできる状態にならないケースがたびたび見受けられるのです。 Webの世界では、以前より8秒ルールという言葉があります。ナローバンドの時代から言われているものですが、「8秒以内にフィードバックがないと（ページがブラウザに表示されて閲覧や操作が可能な状態にならないと）、来訪者はフラストレーションを感じ、サイトから離脱してしまう」というものです。昨今では、ブロードバンド時代（...という表現も古いかもしれませんが）を反映してか、6秒ルール、3秒

斬新なUI（ユーザーインターフェース）で話題となったアップルのiPhone。日本における普及度は、多いとは言えないかもしれませんが、一度手にした知人（複数人）は異口同音に「もう手放せない」「iPhoneでWebブラウズするのが当たり前になり、PCをあまり使わなくなった」と言います。普及台数ベースではなく、インターネット利用時間ベースで考えると、もしかしたら自分たちが予想している以上に、皆さんのWebサイト（ホームページ）はiPhoneからアクセスされている（あるいは今後益々アクセスされるようになる）と言えるかもしれません。 というわけで、自分が運営しているWebサイト（ホームページ）がiPhoneでも問題なく使えるかを、そろそろきちんと意識しても良いのでは、という気がしています。 とは言え、Web制作者やウェブマスターの方が皆、iPhone（あるいはiPod Touch）を持っているとは限

高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Closr.it」です。 Closr.itは、ズームイン/ズームアウト機能付きの高解像度画像をWebページに埋め込むことができるアプリケーションです。正確に言うとClosr.itは画像共有サイトで、自分の持っている画像をClosr.itにアップロードすると、自動的にFlashベースのズームイン/ズームアウト機能が付加されたUI（ユーザーインターフェース）が生成され、そのUIを自分のサイトに埋め込むことができる、というものです（しかも無料で）。下記にサンプルを用意してみました。 UIの機能は、最

高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「TJPzoom」です。 TJPzoomは、JavaScriptを使用したビューワーです。Webページに貼り付けられた元画像の上にマウスポインターを当てると、その部分が虫眼鏡のように拡大表示されます。操作子などの細かなUI（ユーザーインターフェース）が一切無く、ただマウスポインターを重ねるだけなので、シンプルでわかりやすく、非常に直感的と言えます。下記にサンプルを用意してみました。 なおTJPzoomでは、高解像度画像を閲覧中に、マウスボタンを押した状態で上下左右にマウスを滑らせる（ドラッグの要

高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Lightbox Plus」です。 Lightbox Plusは、Ajaxを使用したビューワーです。下記にサンプルを用意してみました（Lightbox Plusは残念ながら、「Ajaxによる画像の拡大」で指摘したモーダル表示になっているので、まずは下記サンプルの囲みの中にある説明をひととおり読んでから、操作してください）。 サンプル 画像をクリックすると、ブラウザのウィンドウサイズにフィットする大きさで拡大画像が開きます。 開いた拡大画像にマウスオーバーすると、左上にアイコンが表示されます（四

皆さんのWebサイト（ホームページ）において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか？高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。 サイトで採り上げている商品（モノ）の質感を見たいとき（素材、仕上げ、細部のデザインのこだわり、など）。 サイトで採り上げている商品（モノ）の具体的な機能や使い勝手、仕様などを見たいとき（操作パネルのレイアウトデザイン、操作子の形状、接続端子、など）。 高解像度画像を用意することができて、それがターゲットユーザーの興味/関心に合致する可能性があるのであれば、積極的にWebサイト（ホームページ）上に公開すべきでしょう。私自身の、ユーザーテストを実施したときの経験を振り返ってみても、

Webページ上にある小さな画像（サムネイルなど）をクリックすると、画像が拡大表示される — Ajaxを使った、そんなUI（ユーザーインターフェース）をご覧になったことがある人は多いと思います。たとえば、以下のような感じです（eコマースサイトの例）。 【ページ1】商品一覧の中から、興味のある商品を選びます。 【ページ2】上記で選んだ商品について、拡大してみたい画像を選びます。 【ページ2'】拡大画像が表示されます。 なお、このページを【ページ3】ではなく【ページ2'】と記しているのは、上記【ページ2】からページが切り替わっていないから（URLが同じだから）です。 潜んでいる問題点 Ajaxを使うと、上記のようにクールに（かっこよく）画像を拡大することができるので、自分のWebサイト（ホームページ）でも採り入れようと考えているウェブマスターの方も多いことでしょう。ただしこのAjaxによる

先のコラム記事「個人情報は本当に必要な情報だけを取得する」で、クレジットカード情報はセンシティブな（情報の持ち主にとって神経質な、慎重に扱うべき）個人情報であると述べました。 もちろん、センシティブなものか否かにかかわらずユーザー（消費者）の個人情報は細心の注意を払って扱わなければなりませんが、「個人情報にはどんな種類があって」「そのうち（特に取り扱いに注意を要する）センシティブな情報は何か」について、体系的なまとめがありますので、この機会に、参考までにご紹介したいと思います。 TRUSTe（トラスト イー）という、Webサイトにおける個人情報保護/適正利用を審査する米国の機関がまとめた「TRUSTe Security Guidelines」という指針があります。その末尾に「Data Categories」というページがあり、そこに一覧としてまとまっています。下記に、その内容を引用します。

Webコンテンツの中には、PDF形式のものがあります。「クリックしたらPDFファイルだったので、Adobe Readerが起動するまで待たされる」ことに嫌悪感を持つユーザーも少なくありませんが、情報レイアウトやフォントなどを忠実に表現した文書を配布したい場合や、印刷を前提としている場合など、PDFを使うことが適しているケースもあります。 ところでこのPDF、最近では、ユーザーが情報を入力して送信できる「フォーム」も扱えること、ご存知でしょうか？ 図は、PDF形式のフォームの例です。テキスト入力エリアやドロップダウンリストが見えますね。 Adobe社のPDF作成ソフト「Acrobat」などを使うことで、今や手軽にPDF形式のフォームを作成することができます。ユーザーは、最新のAdobe Reader（無料）を使ってそのPDFフォームを開き、情報を入力して、送信することができるわけです。 皆さ

以前、このサイトで「動画共有サービスでお手軽にユーザーエクスペリエンス向上」という記事を掲載しました。静止画像（やテキスト）で伝わりにくい魅力が「動画でなら伝わる」ことは色々ある（たとえばハウツーであったり、音や空気感を含んだ雰囲気であったり、（スタッフや職人の）仕事にかける姿勢や情熱であったり）と申し上げましたが、その好例として、今回はハウツーに特化した動画共有サイト、Howcastを参考までにご紹介したいと思います。 英語のサイトなので理解しにくい部分もあるかもしれませんが（逆に、英語の勉強としても使えるかもしれませんね）、たとえば、本当にごく一例として： お味噌汁の作り方 赤ちゃんの抱き方/あやし方 ヨガの基本的なルーチン ...などなど、様々なノウハウがアップロードされていて、まさに「百聞は一見に如かず」という感じですね。 ちなみに以下は、折り鶴の作り方の紹介です。（このように、個