【ポイント１】前回の利用状況が復元できる

●事例1：　前回の利用状況から使える（HOME’S）
「HOME’S」では、アプリを一度閉じてホーム画面に戻った後でも、アプリを再起動すると前回開いていた画面が復元できます。断続的な利用には欠かせない配慮と言えるでしょう。アップル標準アプリも基本的に利用状況が復元されるようになっています（メール、Safari等）

【ポイント2】ショーカットしやすい

●事例2: 検索履歴から再検索できる（HOME’S）
先ほどもあげた「HOME’S」では、検索履歴が「地域･家賃・間取り」など詳細に保存され、タップすると同条件の結果を表示できます。住宅情報は同じ条件でも物件が頻繁に入れ替わるため、大変便利な機能です。

●事例3: ブックマークできる（SUUMO）
「SUUMO」では、物件ブックマーク機能が提供され、同じ物件に再アクセスしやすくなっています。複数の情報を見比べる商材の場合には欠かせない機能と言えるでしょう。

【ポイント3】オフラインでも利用しやすい

●事例4: オフライン用に情報が保存される（Mobile RSS）
住宅情報アプリ以外の例ですが、RSSリーダーアプリの「Mobile RSS」では、読み込み時にデータが保存され、オフライン状態でもある程度の情報が閲覧できるようになっています。
考慮すべき点として、例えば物件情報の場合、物件が公開終了したことことに気づかれないリスクが考えられますが、よほど更新頻度が早い商材以外では、リスクよりも利用体験が増すことのメリットが大きいのではないでしょうか。

●事例5: 「後で読む」リストに保存できる（Read It Later）
オフライン用ウェブ閲覧アプリの「Read It Later」では、リンクをタップすると「後で読む」という選択肢が提示されます。これを押すと読み込みリストに登録され、オンラインになった段階で情報が読み込まれます。住宅情報でも、オフラインの時に物件を選んだらブックマークに保存できる、等の工夫ができるのではないでしょうか。

今回ご紹介した内容は、結婚・就職・保険など、一定の検討期間を要する商材であれば応用が効く内容だと思います。ポータブルデバイスならではの特性を踏まえて、自社で提供しているアプリを見直すと、新しいアイデアが見えてくるのではないでしょうか。

スマートフォン対応サイトでも、PCサイトへの誘導を残しておこう

スマートフォン対応をしているサイトの中には、PCサイトへのリンクが用意されている場合があります。せっかくスマートフォンから利用しやすいユーザインタフェースを用意しているのに、どうしてPCサイトへと誘導する必要があるのでしょうか？

今回は、PCサイトへのリンクが必要な2つの理由についてご説明します。

スマートフォンはPCと比べると画面サイズも小さいため、最適化したサイトを作るために機能を絞ったり、情報量を減らしてサイトを構成するケースがよくあります。このような場合には、忘れずにPCサイトへのリンクを用意しておくことが必要です。

amazon.co.jpのiPhoneサイトを例に見てみると、トップページでは「キーワード検索」と「トップ100リスト」で商品を探せることがわかります。しかしPCサイトにあるような「カテゴリ」から商品を探す機能や、「セール・バーゲン情報」、「おすすめ商品」などは提供されていません。筆者の仮説ですが、スマートフォンでamazon.co.jpを利用する状況を考えると、PCサイトと比べて欲しい商品が明確になっている場合が多いことから、能動的な検索機能を優先したスマートフォン対応サイトにしているのではないでしょうか。

しかしスマートフォンから利用する場合でも、商品名を忘れてカテゴリから探したい場合や、外出中の空き時間にセール品をチェックしたい場合などもあるでしょう。このように、スマートフォン対応サイトで提供できていない情報や機能がある場合には、PCサイトへのリンクを用意しておきましょう（amazon.co.jpではトップページ上部以外に、フッタリンクにもPCサイトへのリンクがあります）。

（2）使い慣れたPCサイトと同じレイアウトを利用できるようにする

スマートフォン対応サイトでPCサイトと同じ機能や情報を提供していても、PCサイトを使い慣れていると、スマートフォンからもPCサイトを利用したいというユーザが存在することが、弊社の過去の調査でわかっています。

頻繁に利用されるサイトの場合、ユーザは欲しい情報をレイアウト上の位置で記憶するようになります。スマートフォンでPCサイトを表示するとサイズを縮小して表示されますが、レイアウトのどこに欲しい情報があるのか覚えている場合は、すぐにその情報を拡大することができて使いやすいのです。

例えばYahoo!Japanを毎日利用しているユーザにとっては、縮小表示されて文字が読めなくても、どこにどんな情報があるのか悩むことはありません。

ポータルサイトやニュースサイト、株式取引サイトなど、頻繁に利用されることが想定されるサイトの場合には、スマートフォン対応サイトを用意していたとしても、PCサイトへの誘導を忘れずに行っておきましょう。

ただし、使い慣れていないユーザにとっては、スマートフォンの小さい画面でPCサイトを閲覧することはストレスのかかる作業です。まずは使いやすいスマートフォン対応サイトを用意することが前提で、その上でPCサイトへの誘導も忘れずに検討するようにしてください。

従来の携帯では下ボタンで画面をスクロールさせる際リンクに順番にフォーカスがあたるため、テキストリンクでもユーザの視線が止まりやすい傾向があります。一方iPhoneでは指で画面をスクロールさせるため、リンクにフォーカスはあたりません。テキストリンクがアイキャッチとなりにくく、携帯と比較して文字情報がまとめて読み飛ばされるケースがみられます。ユーザの目線を止めるには、アイキャッチ用の画像を配置するなどの工夫が必要です。

【ポイント2】細かな操作はさせない

iPhoneはタッチパネルを指で操作するため、画面上の1点をクリックする、という操作は得意ではありません。例えば、ページ移動のフッタリンクでよくある「1　2　3　4　次へ」などはリンクが近接しているため、誤操作してしまうケースが多くみられます。

対策としては、アクションエリアを広くとる（リンクは近接させない）ことが原則となります。また、リンクをクリックさせる以外の方法も検討できます。例としては、ページ下までスクロールさせると次のページが自動読み込みされるようにする、という方法があります。

【ポイント3】標準的なiPhoneの操作をベースにする

画面のスクロールや拡大、縮小など、ユーザがiPhoneで学習済の操作は利用できるよう配慮が必要です。例えば複数の画像を見せる場合は、1枚1枚リンクをクリックさせて見せるよりも、指でスライドさせて連続して見せる形式の方がより自然に使用できます。

また、iPhoneを利用するユーザは気になった画像を拡大する、という操作が身についているケースがみられます。ダブルタップ（ダブルクリックのように画面を指で2回軽く叩くアクション）で画面いっぱいに拡大表示されることを前提とした解像度の画像を用意することで、更に満足度の高い写真閲覧を促せる場合があります。

ここにあげたものは一例ですが、今後もiPhoneサイトに関する知見をご紹介していきたいと思います。

また、ユーザニーズやユーザの操作の特徴を把握するには、ご自身でiPhoneサイトやアプリケーションを利用してみる、周囲で利用している人にヒアリングする、というのも有効な手段ですので試してみてはいかがでしょうか。

例えば、記事系のコンテンツで、記事を閲覧したユーザに対して関連記事や関連する製品ページへと誘導する場合、記事の下部に「関連リンク」のエリアを設け、その中に意図した誘導先のリンクを配置しているケースがよく見受けられます。

上記のような方法で、果たして意図通りにユーザを誘導することができるでしょうか？今回は「ユーザがこのページ以上の情報を積極的には求めていない」ケースについて考えてみました。

弊社の実施したユーザ行動観察調査においては、多くのユーザが価格まで閲覧した後にページの上部に戻り、そのまま見るのをやめてしまうという行動が見られました。

ここで、このような行動に至った原因を考えてみましょう。

アイトラッキングによる分析やユーザへのヒアリングから、下記2点が主要な原因と考えられました。

1.「関連リンク」の枠が目線の流れをさえぎり、本文と別物という印象を与えている
記事本文と関連リンクの見せ方が大きく異なるため、視覚的に別のエリアと認識されてしまっていたと考えられます。そのため、結果として価格までを見たユーザは満足してしまい、無意識のうちにその下を見ることをやめてしまったと考えられます。

2.「関連リンク」という見出しが、閲覧意欲を妨げている
過去の体験から、「関連リンク＝あまり関係のないもの」といったイメージを持っているユーザが一定数見られました。よく使われる表現ではありますが、逆にユーザの興味を失ってしまってしまう恐れもあります。

これらを受けて以下のように改善を行ったところ、より多くのユーザがこちらの意図したとおり、「製品XXXXの詳細ページ」のリンクをクリックしてくれるようになりました。

改善のポイントは下記の2つです。

（1）別物として認識されないように工夫
記事本文の小見出し（「概要」「特長」など）と製品詳細ページへのリンクの見出しを同じ見せ方にしたことで、「記事の一部」であるとの認識がなされ、目線をさえぎることなくスムーズに見てもらえることが出来ました。また、「関連リンク」ではなく、「製品の詳細」という表現を用いることで、より詳しい情報が得られそうだとの期待感を高めました。

（2）意図的にストッパーを利用
お問い合わせを枠で囲み視線のストッパーとして下部に配置したことで、すぐ上の製品の詳細へのリンクに視線が集まりました。（※今回のケースでは、お問い合わせ誘導はそれほど重要なゴールではなく、必要と感じたユーザが見つけることができればよいという位置づけだったため、このような方法が効果的でした）

なお、ユーザがより詳細な情報を求めており、かつ「関連リンク」内に求める情報があることが認知されているケース（利用頻度が高いなど）では、必ずしも「関連リンク」を切り出す方法が問題とは限らないため、留意が必要です。

適切なリンク配置により意図した行動を促すための方法については、これまでにも何度かお伝えしてきました。

情報を確実に伝える「近接」テクニック
関連性の高い情報を近づけることで、見せたい情報やリンクに気付いてもらいやすくした

視線の流れをブロックしていませんか？
視線の流れを止めてしまっていたかたまりをなくすことで、ページを下部までスクロールされる確率を高めた

今回お伝えした方法は、お問い合わせ導線の強化や回遊性向上など様々なケースでも応用可能ですので、是非試してみてはいかがでしょうか。

弊社では、ユーザ行動観察調査を行う際、ユーザがどこを見ているのかを分析できるアイトラッキングシステムを利用しています。
あるユーザ行動観察調査で、以下のような2カラム構成の画面をユーザに使ってもらったところ、ユーザに右側の情報を見てもらえない（情報に気付いてもらえない）まま、ユーザの視線がページ下部まで流れてしまうという現象が見られました。

一般的に、ユーザの視線は画像に集中する傾向があります。図1のプロトタイプの場合、左側に配置した訴求ポイントが最もユーザに届けたい情報であったため、エリアを大きく取り、大きな画像を用いて説明を行っていました。
しかし、そのために、右側に配置した訴求ポイントをユーザに気付いてもらえないまま、素通りされてしまうという結果になってしまいました。

ユーザに、届けたい情報に気付いてもらう

そこで、画面を下図のように改善したところ、ちゃんと全ての情報を見てもらえるようになりました。

図2の改善によって、ユーザは冒頭の「●●の3つのメリット」を見て

「メリットは3つあるのか。よし、3つ見ればいいんだな。」

と（潜在的に）思い、順番に沿って、情報を見てくれるようになったと考えられます。

画像の選び方やコンテンツの配置自体などによっても、改善の可能性はあります。しかし、このようなちょっとしたユーザインターフェースの改善でも、ユーザに届けたい情報に気付いてもらう手助けとなります。

今回ご紹介した、「要素の数と順序を明示する」テクニックは有効ではありますが、万能というわけではありません。例えば、要素の数が7個や10個といったように多くなると、順番を明示しても情報を把握するのが難しくなります。そういった場合には、似た要素をグルーピングして、大きな固まりを作るなど、情報の整理からもう一度検討してみると、ユーザにとって理解しやすいサイトとなるでしょう。

弊社のユーザ行動観察調査の結果、ユーザの視線は下の図のように左右に大きく動き、かなり時間をかけて表を見ていく様子が観察されました。

このページを見る際のユーザの関心事は、第一に「予算の範囲内で一番お得なツアーは何か」であり、さらにいえば「同じ価格ならできるだけ魅力的なところに行きたい」ということでした。

したがって、ユーザは各パッケージツアーの「価格」と「割引率」に注目しています。この表では二つの情報が離れた場所にあるため、視線があちこち動く上、その途中でツアーの魅力を伝える写真が目に入ってしまいます。

結局、ユーザは自分の選択軸に沿った情報がスムーズに把握できず「なんだか見にくいページだな」という印象を持っていました。

ユーザの関心を捉え、スムーズに情報を提供しよう

価格と割引率を冒頭に重ねて置くことで、ユーザはページ左端で縦に視線を動かすだけで、自分の予算と「お得感」に合った候補を見つけ出すことができます。

予算感に合った候補があれば、そのすぐ右にある写真で「どのくらい魅力的な場所なのか」がわかります。その結果「良さそうだな」と思ったものについては、さらに右に視線を動かして、詳細ページへのリンクをクリックすることができます。

ここで重要なポイントは、

1. ユーザが興味を持つ（または疑問を持つ）順番を意識する


2. 関連性の強い情報は近くに置く

サイトを訪れるユーザ心理の動きを意識することで、一覧ページの情報整理も大きく変わることがおわかりいただけたでしょうか？

なお、情報整理の優先度は上記の方法が唯一の答えではありません。もし「予算は度外視、場所重視」というユーザが集まるサイトであれば、また別の情報の整理の仕方がありえます。

ユーザビリティ向上の答えはワンパターンではなく、ユーザがどんな人かによって変わることにも注意してください。

ユーザに「もう1ページ先」を読んでもらうためのちょっとした工夫として、「次へ」というテキストリンクの活用があります。

ベッドなどの家具を販売している会社の事例をご紹介します。
（実際の事例では別の商材ですが、内容は同じです）
この会社では、自社商品の強みを自然に伝えるため、「マットレスの選び方」「掛け布団の選び方」というコンテンツを用意しています。

「寝心地のいいベッドがほしい」と思って探しているユーザがこのサイトに訪れた際に、「マットレスの選び方」というコンテンツに気づいて興味を持ってページを見てみたとします。

ページの最後まで読んだユーザは、「掛け布団は今回は買うつもりはないから見なくていい」と思い、次ページには進まず、戻ってしまいます。

そこで、「掛け布団の選び方」というリンク名の代わりに、「次へ」というリンクを置いてみました。
そうすると、ユーザは深く考えずに「次へ」をクリックして進み、そのまま「掛け布団の選び方」も読んでいく、という行動が見られました。

この背景としては、「次へ」というリンクを見たユーザは「続きがあるなら見てみよう」と、深く考えずに次へ進んでしまうという心理があると考えられます。
皆さんも、例えば雑誌を読んでいるようなとき、特に次のページに何があるかわからず、強い興味がない場合でも、何となくページをめくって読んでみる、といった経験はよくあるのではないでしょうか。
ウェブサイトでも同じように「次へ」というリンクがあると、ユーザは半ば条件反射的にクリックして次のページに進みやすくなるのです。
（この記事の冒頭にあった「次へ」の文字、ついクリックしてしまいませんでしたか？）

もちろん、「次へ」で進んだ先のページが、ユーザにとって興味深い情報でなければ、たとえ進んだとしても読まれずに終わってしまうでしょうが、ベッドを探しているユーザは、多少なりとも寝具全般に対して関心が高まっているため、進んだ先がマットレスの話でなくても「せっかくだから読んでおこう」という心理になりやすいといえます。

このように、「次へ」を活用することで、本来であれば見てもらえなかったコンテンツに、ユーザを自然に誘導することができます。

ケース2：「次へ」で気持ちよく情報を見てもらう

弊社で開発・販売している効果測定ツール「WebAntenna」の紹介ページでは、ツールの使いやすさを実感してもらうため、紙芝居のように見ていけるデモ画面を用意しています。

このデモ画面は、「次へ」をクリックし続けるだけでよいので、ユーザは深く考えることなくポンポンとデモ画面を見ていくことができます。

「次へ」があると、ユーザは「次に何を見よう」と考える必要がなくなるため、ストレスを感じることなくページを進んでいくことができ、結果的にユーザに多くの情報を見てもらうことができます。

ここまで見て来たように、「次へ」を活用することは、「深く考えずにとにかく次の情報を見てもらいたい」というようなケースに有効です。

ただし、常に「次へ」で進ませるのが最適というわけではありません。
下の例（日経ビジネスオンラインの記事）のように、次のページにあるコンテンツを明示することが有効な場合もあります。

次のページにある情報に、ユーザが明らかに関心を持つだろうと想定される場合には、何が出てくるのかが曖昧な「次へ」よりも、「あなたの求める情報がこの先にありますよ」ということを伝える方が、ユーザは関心を持って次に進んでくれるでしょう。

サイト上のコンテンツを見るユーザの状況やニーズをしっかりと想定した上で、「次へ」と「チラ見せ」、どちらが適切かを見極める選ぶ必要があるといえます。

特に、一旦契約したら継続的な関係が維持される金融サービスや、単価が高い不動産などの場合、その傾向が強いことが弊社のユーザ調査でも良く観察されています。

今回は会社情報でユーザの印象を向上する方法についてご紹介します。

自分がよく知らない会社に対して、ユーザは「この会社は安心・信頼できるか」 「マイナスとなる点がないか」という観点から情報をチェックします。具体的には「会社概要」「沿革」「役員構成」などに加え、金融系では「IR・財務情報」、不動産系では「取得免許の更新回数」などがチェックされやすい項目です。

これらの項目の中で大きなネガティブ要素があった場合、ユーザはその会社を選定対象から外してしまいますが、大きな問題がないと思ったら会社情報のチェックを終了し、引き続き商品やサービスの検討を続けます。

ユーザに好印象を与える情報は前面に出す

歴史がある、上場している、財務状態が良い、などユーザの印象を向上させる要素がある場合は、会社案内ページでもその情報を前面に出すことで、ユーザの安心感を得ることができます。

ネガティブ要素の扱いには注意が必要

ユーザは、歴史が浅い、親族経営である、直近の財務状況が悪化しているなどのケースでネガティブな印象を持つ場合が見られます。ネガティブな印象の度合いはユーザによって異なりますが、金融系の企業などでは、資産状況や損益計算書で財務状況が悪いと判断されてしまうと、それだけで選定対象からはずされてしまう可能性があるので注意が必要です。

会社によっては、会社案内ページの情報量を減らすことで、マイナス要素となる情報を掲載しない、という対応を行っているケースも見られます。例えば、金融系の企業でも資産状況や損益計算書などの財務情報を掲載していない場合があるのですが、多くの場合逆効果です。

ユーザが「当然ある」と見なしている情報が掲載されていないのは、それだけで信頼を損ないます。また、インターネットに慣れたユーザは、すぐにYahoo!ファイナンスや自分が利用している証券会社のサイトなどでその会社の財務状況を調べてしまいます。

こういった場合は、情報を掲載した上で、以下のような対応を行うことが考えられます。

会社情報が重要となる商品・サービスを扱っている業界の方は参考とされてはいかがでしょうか。

1. ユーザの疑問に答えることで、問い合わせ数を削減する
2. ユーザをサイトのゴールへと導く攻めのコンテンツとして活用する

今回は、特に「攻めのコンテンツ」としての具体的な実践方法をご紹介します。

とある教材サイトのユーザ行動観察調査では、「仕事と両立できるの？」という誰しもが抱く不安・疑問をFAQの中に出し、その回答として具体的な強みを訴求することで、ユーザの態度変容を強く促すことに成功していました。

方法2　体験談を補足して、さらに説得力・回遊性を増す

下のようなプロトタイプをユーザ行動観察調査で試したところ、非常に関心を持って読み進められ、メインコンテンツ閲覧後にも、さらに態度変容を促すことができました。

ページが長くなる場合は、インタラクティブなUIで解決

やはりユーザの本質的な不安やニーズを把握してこそ

• ログインフォームの入力項目や並び順はほとんどのサイトで共通している
• 入力するID・パスワードも、多くのユーザは同じものを使い回している

「他と違う」フォームは、ユーザのエラーにつながりうる

このログインフォームでは、セキュリティを気にするユーザへの配慮として、ユーザIDとパスワードの保存を別々に選択できるようになっています。

ところがこのフォームは、上述のようにタブキーを利用するユーザがログインしようとした際に、大きな落とし穴がありました。
そのユーザは、「ユーザID」を入力した後にタブキーを押し、パスワードを入力してエンターキーをクリックしました。
ところが実際には、「ユーザID」入力欄からタブキーを押すと、「ユーザIDを保存する」のチェックボックスにフォーカスがあたってしまい、実際にはパスワードが入力できておらず、エラーが発生してしまいました。

この時点で、ユーザはストレスを感じ、サイトに不満を持ってしまったのですが、その後さらに興味深い行動が見られました。
ユーザは再度ログインしようとしたのですが、エラーが発生した理由はきちんと理解できていたにも関わらず、「ID入力→タブキー→パスワード入力→エンターキー」と全く同じ行動を採ってしまい、再びエラーが起きてしまったのです。
これは、いかに「ログイン」の一連の動作がユーザにとって自動化されているか、ということを表す好例だと言えます。

改善案：ID入力欄とパスワード入力欄の間には別の要素を置かない

ただし、いずれの改善案も万能ではありません。
改善案1の場合には「ID入力欄」と「ID保存のチェックボックス」の関連性がやや下がってしまうという課題があり、改善案2では、そもそも「ユーザIDだけ保存したい」「パスワードだけ保存したい」というニーズには応えられなくなってしまいます。

「どんなユーザが使うのか」を想定することが重要

現状と2つの改善案、いずれも一長一短があるのですが、どれが最適かを判断するには、結局「どんなユーザが使うのか」をしっかりと想定することが重要です。
タブキーを使うのは、ある程度PCの操作に慣れたユーザだと考えられるので、そうした上級ユーザがよく使うサイトであれば迷わず改善案を採るべきですが、「PC初心者でセキュリティを気にするユーザ」が主に使うサイトであれば、タブキーの動作よりも、「ユーザIDだけを保存」「パスワードだけを保存」という機能を優先した現状のフォームが適切だといえます。

今回はログインフォームを例に挙げましたが、ユーザビリティの高いウェブサイトを作るには、サイトに訪れるユーザを明確にイメージし、それらのユーザの「慣れ」をきちんと想定することが重要です。

フォーム制作において、タブキーを使った時にフォーカスが移動する箇所の順番を、気にされていますでしょうか？タブキーを使って入力ボックスを移動した時に、適切な順番で、全ての入力ボックスへ移動できることが期待されます。

タブキーを使って移動するユーザにとっては、適切な順番でフォーカスが移動しない、タブキーで全ての入力ボックスへ移動できないケースが発生した場合、離脱の原因になりえます。
フォーカス移動の順番は、HTMLのtabindex属性で指定することができます。
<タグ名 tabindex=n>
またフォーカス移動を指定する場合には、最後の送信ボタンにまで移動できるよう配慮しましょう。

さらに「戻る」ボタンを配置している場合には、フォーカス移動の順番に注意する必要があります。最後の入力ボックスの次に「戻る」ボタンにフォーカスが移動してしまうと、ユーザが「送信」するつもりで誤って「戻る」を選択してしまう懸念がありますので、「送信」ボタンに先にフォーカスが移動するよう順番付けすることをお勧めします。

※「戻る」ボタンの配置は原則不要と考えます。
リセットボタンは必要か？
フォームにおける「進む」ボタンと「戻る」ボタン。どのように配置する？

今回は、特にフォームにおけるタブキー利用について考えましたが、タブキーの利用はアクセシビリティの観点からも必要となります。

WCAG2.0では、「ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味あるいは操作に影響を及ぼす場合、フォーカス可能な構成要素は意味および操作性を保持した順序でフォーカスを受け取る」ことが推奨されています。
(参照) WCAG 2.0（W3C勧告）日本語訳

情報の配置及びコーディングの論理構造に問題がなければ、概ね上記推奨事項はクリアできる内容と言えますが、ウェブコンテンツをよりアクセシブルにするという観点から、一度チェックをしてみるとよいでしょう。

1. 情報の優先度とタブの前後関係は合っているか
   タブのメタファは視覚的に「前面か背後か」という関係が強調され、暗に「背後にあるものは重要ではない」と認識されます。
   （情報が並列関係の場合は、リンクを水平に並べるなどして並列であることを表現しましょう。）
2. ラベルだけで切り替え後の内容が想像できるか
   背後に隠れたタブに関しては、少ない文字数で「それが何であるか」を伝える必要があります。
3. ラベルだけでユーザの興味を喚起できるか
   内容を想像させるだけではなく、それがユーザのニーズに合ったコンテンツであることを伝える必要があります。
4. 比較や一覧性が重要な情報を別のタブに分けていないか
   当然ですが、複数のタブで分かれた情報は一覧することができませんので、情報の分類を間違えるとユーザに操作上の負担を与えることになります。

例えば、このようなタブの使い方はどうでしょう。

1. 人口の多い（＝物件情報へのニーズが強い）本州が前面に出ていることに問題はありません。
   （実際にこんな大まかな区分けをしているサイトはないと思いますが）
2. 「北海道」というラベルだけで、「北海道のおすすめ物件」であることは容易に想像できます
3. 自分が北海道の物件を探していれば迷わず「北海道」をクリックできます。
4. 本州の物件を探している人が、同時に九州の物件を比較することはないはず。
   （海峡のどちら側に住むべきか悩んでいるような人は別ですが・・・）

次に、このような場合はどうでしょう。

1. 料理情報のニーズが高いサイトであれば、料理が前面に出ていることに問題はありません。
2. 「仕事」というラベルだけでは漠然としすぎて、 「求人情報」なのか、「仕事を効率的にこなすコツ」なのか、内容が想像できません。
3. したがって求職中の人も、仕事をたくさん抱えている人も、「仕事」タブには興味がわかずクリックできません。
4. 例えば「経済」タブの中におすすめレシピの材料費、「健康」タブの中にカロリー数が書いてあったとしたら、一覧することに意味のある情報を分けてしまっているため、いくら分類が正しくてもユーザをいらだたせることになります。

適切かつ明確な情報の分類が難しい場合は、無理に情報をタブに押し込まず、ページを縦長にして一覧表示するか、下の例のように、デフォルトで前面に表示される情報の中に、他のタブの情報を少し入れることで、ちら見せでの興味喚起を図るとよいでしょう。

前提としてオーバーレイ表示には、下記のような利点があると考えられます。
・　ページ遷移を挟まずに情報を提示できるため離脱されづらい
・　情報に触れてもらえる確度が高い

一方で、この表示方法が抱えるリスクも存在します。
特にモーダルダイアログ（オーバーレイで表示されたダイアログを閉じるまで、他の部分が操作できないタイプのもの）を用いる場合にはかなり致命的なリスクが存在することが弊社のユーザ行動観察調査で発見されました。

実は調査の中で、オーバーレイで表示されたコンテンツ（下図B-2）を見終えたユーザが、ブラウザの「戻る」ボタンを押してしまうシーンが何度も見られたのです。
ユーザの意図はオーバーレイ表示前のページ（下図B-1）に戻ることでしたが、ページ遷移が起きていないため、実際にはさらにその前のページ（下図A）に戻ってしまい、ユーザの混乱を招いてしまいました。

さらに調査を重ねたところ、「戻る」ボタンを押してしまうケースでは、具体的に以下のようなUI上の問題があることが分かりました。

1. オーバーレイで表示される領域が、画面の大部分を占める。

2. 背景の透明度が十分ではない。

3. 「閉じる」ボタンが明示的ではない。

サイト内でオーバーレイ表示、特にモーダルダイアログ形式での提示を行っている場合、上記の観点で一度見直してみてはいかがでしょうか。