• ユーザの「気になっていること」を活用しよう


• 紙媒体との連携は大丈夫？

今回は、特にサイト内での表現について、サイト外メディアとの連携に課題が見つかったケースと改善例をご紹介します。

このような場合、ユーザを申し込みやキャンペーンのページへスムーズに誘導することが非常に重要ですが、DMとサイト内の表現がずれているために、失敗してしまうケースがあるようです。

メディアが異なるとクリエイティブを制作・管理する方が異なる場合も多いため、特に連携が不十分になりやすい可能性があります。弊社のユーザ行動観察調査では、実際に以下のような失敗例が見つかりました。

1. DMとサイトで名称や文言が違うために、同じものを指していることがユーザに伝わらない

すると、ユーザはサイト内で自分がDMで見て気になったキャンペーンがどこにあるか探せず、「DMのキャンペーン名と違ったので、自分が見たキャンペーンだとは思いませんでした」と発言しました。

当たり前のような結果ですが、サイト外メディアとの連携が不十分な場合や、サイト内での誘導を強めるために別のコピーを作成した場合など、異なる名称や文言を用いてしまうケースは十分起こりえます。

改善策としては、DMなどサイトへ誘導するメディアの内容を必ず確認し、誤解や見落としがないように一貫性のある表現を用いるべきでしょう。

2. DMとサイトで表現の強さが違うために、同じものを指していることがユーザに伝わらない

その結果、ユーザは手続きをどこから行って良いか分からず、「サイト内ではDMと違ってすぐに手続きが必要という感じがしなかったので、自分が見たものとは違う手続きだと思いました」と発言しました。

「至急」や「無料」、「限定」といったユーザを惹き付けるワードは、ユーザの印象に強く残る分、しばしば情報を探す手がかりとなります。サイト外でユーザを惹き付けるために使ったワードは同じようにサイト内でも使い、「DMで見たものと同じだ」とユーザに分かりやすいようにすると良いでしょう。

3. DMとサイト内でデザインが違うために、同じものを指していることがユーザに伝わらない

その結果、ユーザは手続きを行う箇所を探す際に迷って時間がかかり、「DMとサイト内で色も雰囲気も違うので、全く目につきませんでした」と発言しました。

＜ウェブサイト：改善後＞では、DMと同じ色やフォント、画像を用いて見出しやバナーを作成しました。その結果、スムーズな誘導ができ、アイトラッキングツールを用いた分析でも、ユーザが迷わず視線を向ける傾向が見られました。

名称や文言はもちろん、色やフォントといった視覚的特徴が顕著に異なっていると、一見して違うものを指していると解釈してしまい、迷ってしまう可能性が高くなります。

ウェブサイトは能動的なメディアのため、ユーザに自ら情報を見つけ出してもらう必要があります。ユーザがサイト訪問前に接触するメディアでの表現をチェックし、同じ表現で誘導することで、よりスムーズに目的が達成できる、「使えるサイト」になることでしょう。

１．【 プッシュ型 】 目的達成の過程で情報を提示する

■メリット

目に付きやすいので情報伝達の確実性が高く、一部分に手を加えるだけなので手間も少なくすみます。

■デメリット

ユーザにとっては目的遂行途中に予期せぬ情報を挿入されることになるので、内容によっては不快感を与えることでサイトに対してマイナスイメージを抱かれてしまう、または当初のユーザの目的達成の妨げになる危険があります。そのため、目的遂行中のユーザ心理に合った訴求であるかどうかを丁寧に配慮する必要があります。

■アドバイス

・オーバーレイなど動きのある表現であれば、より効果的な訴求が可能です。
・目的途中での訴求が難しい場合は、目的達成後に他を見る余裕ができたところを狙うのも効果的です。詳しくは過去の実践メモ「完了ページやログアウト画面の効果的な使い方」をご覧下さい。

２．【 プル型 】 サイトデザインを全体的に変化させる

弊社で行ったユーザ行動観察調査では、いつもはユーザの目的や行動が固定化しがちなサイトでも、デザインリニューアル後にサイトを訪れたユーザは、サイト全体を細かく閲覧することが度々確認されました。
色調やイラストなど、全体的なサイトデザインの変化は、ユーザを「目的遂行のみを意識するモード」から「全体閲覧モード」に変えられる可能性が高いようです。

■メリット

無理やり情報を見せるわけではないので、情報内容によりユーザが不快感を抱くリスクが大幅に減少します。ユーザは自分の好きなタイミングでサイト閲覧を行えるので、ユーザの目的を阻害することもありません。滞在時間の増加にも繋がるでしょう。

■デメリット

ユーザに自ら情報を発見してもらう形になるため、サイト側が見せたい情報が伝わるかは不確実です。また、全体的なデザイン変更には一定の工数が必要になります。

プッシュ型・プル型、それぞれ長短あわせ持っていますので、状況に応じて使い分けてみましょう。

上の画面例はBtoB向け製品を主に扱っているメーカーサイトのトップページです。各製品カテゴリへのテキストリンクがトップページに配置されており、弊社のユーザ行動観察調査では、はじめてこのサイトを訪れるユーザが「何かごちゃごちゃしている」と言いながら、どこをクリックすべきか迷う傾向が見られました。

そこで、 トップページでは大まかに振り分け、次の階層で各製品カテゴリを選ばせるという図2のような画面に変更したところ、ユーザは目的の製品ページへスムーズに到達できるようになりました。

改善後の画面

目的のページに達するまでのクリック数は少ないほうがよいと言われますが、クリックを減らすことが目的になってユーザを迷わせてしまっては本末転倒です。

改善前の画面では、初めてのユーザに対し、専門的な製品カテゴリ名を文字だけで見せてしまったために、判断がつきにくいという問題がありました。

一方、改善後は、まずトップページでの選択肢を絞り、わかりやすい言葉でいったん振り分け、その次の画面ではカテゴリ名に製品画像を付け加えることで、ユーザが直感的に自分の探しているカテゴリを選べるようにしました。

この結果、改善画面案では個別製品ページまでのクリック数は増えましたが、心理的な負担が小さくなったため、ユーザがクリックの数についてネガティブな印象を持つことはありませんでした。

このように、サイトに来訪するユーザが置かれている文脈によってトップページの情報の整理方法は変わってきます（逆に、常連客だけが訪れるようなサイトであれば、ニーズの高い機能やコンテンツへのショートカットを置くことが望ましいと考えられます）。

あなたのサイトがユーザにとって最適な情報整理ができているか、見直してみてはいかがでしょうか。

表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。

同種の情報をユーザは区別できない

1. 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい
2. 列数が多いために、セル内に折り返しが発生し、読みにくい

ユーザが見たい情報を強調した表組みにする

改善案のポイントは次の2点です。

1. ユーザが一番見たい情報を強調する
• ユーザがこのページで一番見たい情報は「開催日」であるため、「開催日」とそれ以外の情報を区別
• 「開催日」を一番左の列に置き、フォントサイズも大きくする


2. ユーザにとっての補足情報は「備考」にまとめ、表の列数を削減
• 補足情報を1列にまとめた上で、ユーザが各日付の意味を分かるように、セル内で【申込期間】などのキャプションを付ける

表組みは、情報を整理して見せる際に一覧性が担保できるというメリットがあります。しかし、項目数・同種の情報が多い場合には、安易に表組みを使うとユーザの混乱を引き起こす可能性があります。そういった場合には、ユーザが見たい（もしくは見せたい）情報と、その他の情報とを区別し、強弱を付けた表組みをする必要があります。

情報を整理する際は、ユーザがどの情報を求めているのかを考慮し、きちんと強弱を付けることが重要です。

横幅の拡大によって、情報を掲載できるスペースは拡大し、実現できる表現の幅も広がります。
もちろんそれらは喜ばしいことですが、自由度が増すからこそ、効果的なスペースの使い方をきちんと考えることがますます重要になります。今回はカラムを複数に切ったレイアウトについて、スペースをどのように活かすべきかを考えてみたいと思います。

複数カラムの使用は、メッセージを分散させる

ユーザは基本的にメインカラムを見る

1. メインの情報エリア
2. ナビゲーションエリア（左/右ナビゲーションと呼ばれるエリア）
3. 関連情報・広告エリア

ユーザも無意識のうちに、このような使い分けを認識しているように感じられます。

ユーザは基本的に、何らかの目的を持ってウェブページを訪問しており、必要な情報を探そうとしています。そして、必要な情報は（１）メインの情報エリアにあるはずだと考え、視線や意識はメインの情報エリアに集中するという現象が、弊社のユーザ行動観察調査で見られています。
そのため、

• 確実に伝えたい情報はメインの情報エリアに配置すること
• 各カラムの横幅比の調整などによって、メインの情報エリアがどこであるのかを明確にすること

ここでは上図のような3カラムレイアウトを例に説明しましたが、ページの目的と上記3種類のエリアの使い分けを意識することで、以下のようなレイアウトも検討可能です。

• 本実践メモのように1カラムレイアウト（メインの情報エリアのみ）とし、読み物ページとして役割を特化
• Yahoo! ニュースのようにメインの情報エリアを広く取り、右カラムに他のニュースへのリンク（ナビゲーション）や広告を配置

ユーザのモードを考慮して、カラムの使用を検討しよう

前者では、そのページのメインの情報を伝えるエリアとは別に、関連情報や広告を掲載するエリアを設けておくと、ユーザが関連情報にも関心を持ってくれる可能性が高くなります。（Yahoo! Japan のトップページは、この効果をうまく利用して広告を訴求していると言えます）
一方、後者にあたるページでは下手にカラムを切らずに、メインの情報エリアを広く取り、広いスペースを活用した情報提供を行った方がよいでしょう。

ウェブページのレイアウト、情報の配置に悩んだ際に参考にしていただければ幸いです。

1. プルダウンメニューで項目を選択し、次のページへ遷移するのを待っているが何も起きない
2. プルダウンメニューで項目を選択すると、勝手に次のページへ遷移してしまい、違和感を感じた

特に日常的に使用されるサイトでは、ユーザの期待を裏切らない挙動が求められます。以下の例を参考に、ユーザ心理への配慮について考えてみたいと思います。

ページ遷移を伴うプルダウンメニューは、「Go」ボタンなどを設置し、ユーザに手動でページ遷移を行ってもらうのが一般的です。これは、ユーザが誤った項目を選択してしまった場合に、意図しないページに遷移してしまうことを防ぐためです。
また、個人情報が表示されるAmazonの管理画面（下図）などでは、意図せずに表示が切り替わってしまうとユーザに不安を与えてしまう可能性があるため、「Go」ボタンで確実に目的の結果を表示させるという対応が好ましいと考えられます。
ウェブサイトでは、ユーザが意図した通りの動作が起こることが重要です。

一方で、自動的に遷移した方が好まれるケースもあると考えられます。以下のような場合が当てはまります。

• 利用頻度が高い場合（毎日、同じ選択を行うケースなど）
• 誤って選択する可能性が低い場合（選択肢が少ないケースなど）

日々の生活の中で頻繁に使う機能の場合、そのたびに「Go」ボタンをクリックすることはユーザにとって面倒です。GMailのメール管理機能はその一例と言えます。

また、プルダウンメニューの選択肢数が2~3項目のように少ない場合、誤った選択肢を選んでしまう可能性が低いため、自動的にページを遷移させても大きな問題はないと考えられます。
このようにユーザのサイト利用の文脈、状況を考えると、自動的にページを遷移させても問題ないケースもあることが分かります。

ユーザの立場に立った小さな気遣いの積み重ねがユーザの満足度を向上させ、継続的に利用されるウェブサイトの実現につながるはずです。

あなたのサイトのプルダウンメニューがユーザにとって期待通りの挙動となっているか、見直してみてはいかがでしょうか？

実践メモの配信は、今年は本日で最後となります。来年もどうぞよろしくお願いいたします。

ユーザはウェブサイトを閲覧する際、目につくものを拾い読みする傾向が強く、特に注目されやすいのが「写真」と「見出しのキーワード」です。
そのため、アイキャッチ画像とキーワードをあわせて配置するレイアウトは、一般的に非常に効果的です。
しかし、画像の与えるイメージは非常に具体的であるため、ユーザは画像の印象に強く引きづられてしまいます。
実際に弊社の調査で、照明やインテリアを探していたユーザが下図右のレイアウトを見て、読み飛ばしてしまうケースがありました。

上のケースの場合、単純に画像を削除してリンクを目立たせることでも、十分にユーザの誤解を避けることが可能でした。また画像を配置する場合でも、照明やインテリア用品を含めた室内写真の画像を用いることで、ユーザに情報が適切に伝わりやすくなりました。

サイト運営時は、常に最適の写真・画像素材があるわけではないケースも多くあると思います。しかし画像がユーザに与える影響は非常に大きいです。
「ただのアイキャッチだから」と安易に選択せず、その画像がユーザに伝えたい内容として適切か改めて一度考えてみることで、よりユーザにとって使い勝手の良いサイトを作ることが可能になります。

※参考：ベルメゾンネット（http://www.bellemaison.jp/）
カテゴリを示す画像にいくつも商品を配置し、カテゴリ内に豊富に商品があることを印象付けている。

ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。

郵便番号は、特定の企業（１日の配達量が一定量を超えるような事業所）に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。

しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場合はエラーが表示されてしまいます。

ユーザとしては郵便番号を正しく入力したにも関わらずエラーが表示されてしまい、かつエラーの理由がわからない、という状態に陥ってしまいます。

ここで最も重要なことは、ユーザが「入力ミスしてしまった」という誤解のもと再入力してはエラー表示される、という繰り返しを避けることです。何度入力してもエラーが発生してしまうと、ユーザはサイトに対して非常に悪い印象を持ったまま離脱してしまうことにつながってしまいます。

こうした場合の対策としては、エラー表示に以下のような文言を追記することが考えられます。ユーザが会社住所を入力する可能性のあるサイトでのフォームを作成する際は参考にしてみてください。

１．画像に画像文字が同化している場合

特に「目的にあった文字・文章を探すモード」となっているユーザは、本文のみを追っているため、画像を見飛ばしてしまいがちです。上図のように見出し文字が白抜きになっているケースでは、さらにそのリスクは高まります。
多くの場合、本文の文字フォントは黒系統か青字（リンク）であるため、ユーザの頭の中に「黒や青い文字を追っていれば…」といった思い込みが生じ、白っぽい要素は文字として認識されづらくなってしまいます。
よって、ユーザが文字や文章を追って情報探索を行うであろうページでは、上記のようなリスクを避けるため、見出しにはデフォルト文字または本文のフォントに似た画像文字を使用することをお奨めします。

２．デザインに一貫性がない場合

このような現象は見出し以外でもよく見られます。例えば、今まで「青字のテキストリンク」で配置していた導線を、ある日「ボタンリンク」に変えたためにクリック率が下がってしまったということはありませんか？
この現象も、今まで通り「青字のテキストリンク」という前提で導線を探していたユーザが、新しいデザインの「ボタンリンク」を見飛ばしてしまったことで生じていると考えられます。

このようにユーザの慣れにも配慮しながら、サイト内で統一されたルールに沿って、見出しや導線のデザイン要素を用意しておくことで、文字や導線の見落としが起こるリスクを少しでも回避することができます。
※ただし、デザイン要素の統一は悪い方向にも働く可能性があることも認識しておく必要があります。ユーザが一度「これは見る必要がない」と思った要素は、その後、内容を変えて表示しても、同じデザインであるという理由だけでまったく見られなくなってしまう可能性があります。

以上の点に気をつけながら、皆さんもこの機会に見出しのデザインを見直してみてはいかがでしょうか。

下記のような商品紹介ページでユーザ行動観察調査を行った際、この商品を使用したことのないユーザは、商品特徴や価格を確認した後で「分量」や「目安の日数」を探し回るという行動が見られました。

健康食品は継続して利用するものであり、かつ商品によって1回に使用する分量が異なるため、価格情報だけでは「お得」なのかどうか判断できなかったためです。ところが、商品の分量は商品名に含まれており、なおかつ一回の使用量は商品説明の中に埋もれてしまっており、いずれも価格から離れた位置にあったために気づかれませんでした。

ECサイトの商品ページで提供されている情報については、「価格」、「送料」、「配達に要する日数」など項目レベルで共通化してきていますが、商品によっては上記のようにユーザニーズとのずれが発生するケースがあります。

最適な情報提供を行うためには、定型情報を載せただけで安心せず、サイトごとに
(1) 商品ごとに必要情報を洗い出し、優先度を見極める
(2) 必要情報を適切な位置に掲載する
という2つの対策が必要です。

もちろん、ECサイトのようにシステム化されたサイトでは、すぐに「(2)適切な箇所に掲載する」という対応が取れないケースも多いでしょう。ですが、対応の必要性を計るうえでも、まずは取り扱い商品ごとに、「(1)必要情報を洗い出し、優先度を見極める」を行ってみてはいかがでしょうか。

メリット

また、ユーザと面しているため、仕分け結果の理由をすぐに尋ねることができるのもメリットです。具体的にどのようなものを期待したのか、なぜ見たくないのかなどを尋ねられるため、その場で疑問を解消し、さらに深掘りすることができます。

注意点

カードソーティングの利用シーンはコンテンツのニーズ調査に限りません。先述の「Alertbox」の記事では、商品をどのようにカテゴライズするとよいか、をカードソーティングで検証する事例などが紹介されています。
お手軽に実施できるカードソーティング、ぜひ1度試してみてはいかがでしょうか。

■人間の思考とシステムの反応速度

（参考：「Response Times: The Three Important Limits」 Useit.com（英語）、「10の累乗：　ユーザーエクスペリエンスにおける時間スケール」 Jakob NielsenのAlertbox（日本語））

• 0.1秒：ユーザは、自分がシステムを「直接」操作していると感じる。
• 1秒：ユーザの思考を止めない限界。反応に時間がかかっていることに気づき、システムの存在を意識する。
• 10秒：ユーザが操作に集中できる限界。待っている間に何らかの形で処理の途中であることを伝えないと、容易に他のことに興味が移る（離脱する）。

つまり、Webサイトの反応速度（ページの表示速度）は、理想は0.1秒、可能な限り1秒以内に収めるべきで、それ以上ユーザを待たせると離脱が増えるばかり、ということが言えるでしょう。

■モバイル環境の変化とWebページのリッチ化

1. モバイルアクセスの普及
2. Webページのリッチ化（Flash、ファイルサイズの大きな画像の多用、ページあたりの情報量の増大など）

1.モバイルアクセスの普及

携帯電話でのインターネット利用の浸透、iPhoneを始めとするスマートフォンの利用拡大、ネットブックのヒットなどにより、モバイル環境からのWebサイト利用が増えています。ちなみに法人向けのサービスが中心の弊社サイト（bebit.co.jp）でさえ、すでにiPhoneからの利用が2%を超えています。
これらモバイル環境からのアクセスは、端末の処理能力が比較的低く、また通信速度が安定せず、場合によっては非常に低速になる事を考えると、極力サイズの小さいページにすることが求められます。

2.Webページのリッチ化

先ほどご紹介したように、ユーザが思考の流れを止めずにWebページを操作できる時間には限界があります。ファイルサイズの大きな画像やサーバ側での複雑な処理によるほんの数秒の遅れでも、回数が多くなればユーザのストレスは高まり、意欲を低下させることになります。
弊社のユーザ行動観察調査でも、例えば検索エンジンからトップページに流入したものの、ページの読み込みを待ちきれず数秒で検索結果ページに戻り、他のサイトを探し始めるというような行動が観察されます。
せっかくSEO（検索エンジン最適化）を行って上位表示を実現しても、処理や表示に時間がかかるために他社サイトに行かれては意味がありません。

■簡単に反応時間を測定する方法

Webサイトの反応速度を左右するものとしては、コンテンツの容量以外にも

• サーバ側の処理速度
• ネットワークの速度
• クライアント側（PCやブラウザなど）の処理速度
• サイトの混雑度合い

など多くの要素が関係してきます。現状を簡易的に調べられるサービスとしては、「WebWait」、「WebSlug」などがあります（いずれも英語）。ネットワーク環境が異なるため、日本国内からのアクセスと比較して反応速度が遅くなることが予想されますが、ひとつの目安にはなります。また、競合他社と比較することで、自社の水準を知ることもできます。

■さらにもう一歩の改善

• Flashでローテーションを行う場合、重要な要素は先に表示する
• 読み込みに時間のかかるFlashでは、必ず進行状況を表示する。また、その読み込み画面の見せ方を工夫することで（コンテンツのちら見せ・キャラクターの使用など）ユーザを飽きさせない。
• ユーザが直前に見ていたページや、リンクの文言と関連のある内容をファーストビュー（標準的な画面サイズでスクロールせずに見られる範囲）で見せる

などの工夫をすることで、実際には完全に読み込まれていない状態でも、ユーザは思考を止めず、興味を維持することが可能です。

Webサイトがユーザを「お待たせ」していないか、もう一度、見直してみてはいかがでしょうか？

今回はテキストメールを配信する際に注意すべき事項を3点紹介いたします。

1日に何通ものメールを受信するユーザは、1つ1つのメールにかける時間を短縮するため、メールの中で目立つ「タイトル」や「リンク部分」のみを閲覧し、それ以外の部分は飛ばし読みする傾向があります。

そのためユーザに伝えたいことは、必ず「タイトル」や「リンク部分」にも盛り込むことが重要になります。

2. 1行を全角35文字以内に収める

多くのメールソフトにおいて、横幅のデフォルト設定は36~38文字となっています。それ以上に横幅が長いメールを配信すると、表示が崩れてしまいますので、メール文面において1行は全角35文字以内に収めるようにしてください。

3.縦列を揃えることを前提とした整形を避ける

メールソフトがテキストを読み込む設定として「等幅フォント」と「プロポーショナルフォント」の2種類があります。

• 等幅フォント：すべての文字の横幅が同じフォント
• プロポーショナルフォント：文字ごとに横幅が異なるフォント（例：「i」は小さい幅になるが、「W」は大きい幅になる）

ユーザがメールソフトの設定として「プロポーショナルフォント」を採用している場合、文字の横幅がずれるため、縦列を綺麗に揃えることは難しくなります。

すべてのユーザに綺麗なレイアウトを表示するため、縦列を揃えることを前提とした整形は避けることが望ましいでしょう。

これらの3点がテキストメールを作成する際に必ず注意して欲しい点になります。

他にも実践メモでは「開封されるメールマガジン ~2つの工夫」、「メルマガの開封率を上げるには ? 送信者名に注意する」、「見出しは冒頭15文字が勝負」などメールを作成する際に注意すべき点を紹介しております。是非、こちらも合わせてご覧ください。

メールに関する記事の一覧