ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
【友人紹介キャンペーン】ユーザの気持ちを180度変化させるちょっとした工夫 (ユーザビリティ実践メモ)
友人紹介キャンペーンを用いることで自社サイトの会員数を増やそうと考えている人は多いと思います。 普段はウェブとユーザの二者間のコミュニケーションを考えていますが、友人紹介キャンペーンには「紹介される人」という第３の人を意識する必要があります。 そこで今回は、ユーザと紹介される人のコミュニケーションが少しの仕組みの違いで180度変わってしまうという例を見ていきます。 友人紹介としてたとえば次の二つの方法が考えられます（図1、図2参照）。 図1は企業のウェブサイト上で友人のメールアドレスを登録するもの、図2は企業のウェブサイト上にある紹介券を友人に送るものです。 一見これらはささいな違いしかないように見えますが、ユーザの視点から見ると大きな違いがあります。 それは、前者は「企業に友人の情報を与える」のに対して、後者は「友人に有益な情報を与える」という違いです。 これによってどういう行動の違いに
情報のつめこみすぎにご注意！ (ユーザビリティ実践メモ)
サイトを運営していると、新しい機能をつける、お知らせがある等の理由で掲載するものがどんどん増えていき、気がつくと肝心のことが分かりにくくなってしまっている……ということはありませんか？ しかし、1か所に情報を詰め込みすぎると分かりにくくなってしまい、肝心のそのページの商品の売り上げが下がってしまう…というようなことにもなりかねません。 「できるだけ情報をまとめて伝えたいけれど、わかりにくくなるのは避けたい」という場合、どこまで情報を詰め込んでいいのか判断がつかずに悩んでしまうこともよくあるのではないでしょうか。 そうした場合、いわゆる「マジックナンバー7±2」を参考に、「1エリア5要素まで」を一つの目安としてみることもおすすめです。 例えば、ECサイトにおいて、購入ボタン付近に以下のような情報を掲載していたとします。 商品名 価格 獲得ポイント 数量 購入ボタン と現在5つの情報要素が掲載
実践！ ランディングページの意外な使い方 (ユーザビリティ実践メモ)
今回の実践メモでは、少し変わったウェブの活用方法についてご紹介します。 特に、 「新しいウェブの活用方法を模索したい」 「自社製品を他国・他地域で拡販したいが、あまり工数が掛けられない」 といった方々は、参考にしてみてください。 しかし、最近このような活用方法ではなく、「ニーズ探索」のためのツールとして活用されているケースをいくつか耳にするようになりました。例えば、以下のようなケースです。 【事例】海外へ製品展開をするにあたりランディングページでニーズを探った例 ◆状況 自社製品を海外に展開していきたいのだが、どの国でどの程度の需要が見込めるのか、よくわからない。 かといって、各国に営業マンを派遣して、需要を確認するような予算はなく、工数も掛けられない。 ◆解決策 そこで、安価に制作できるランディングページを進出先候補の国々向けに制作した上で、リスティング広告を出稿。 各国における反応を見
ユーザを逃さないヘルプの見せ方、2つの注意点 (ユーザビリティ実践メモ)
前々回、前回に引き続き、ヘルプコンテンツの効果的な見せ方についてご紹介します。 ヘルプコンテンツは、すべての項目を羅列した「よくあるご質問」のようなページを持つだけでは不十分です。 以前の実践メモでは、疑問が発生したタイミングで「その場で」参照できるよう、主要な導線となるページ内に、ヘルプ内容を露出する方法を推奨していました。 今回は、ヘルプ内容を露出する際の、具体的な2つの注意点をご紹介します。 ヘルプの隠れた役割 置くだけでは不十分？ヘルプ活用3つのポイント そこで、実際に皆様のサイトで主要導線上にヘルプ内容を露出させる際の注意点を、以下の2つにまとめています。 注意点1. 同一ウィンドウでヘルプページに遷移させない ヘルプが掲載された別のページに「同一ウィンドウで遷移させる」（ページが完全に切り替わる）という方法はお勧めできません。 ページが完全に切り替わると、もとのページに戻るため
置くだけでは不十分？ヘルプ活用3つのポイント (ユーザビリティ実践メモ)
FAQやよくある質問などのヘルプコンテンツは、ユーザの疑問や不安を解消するために、どこのサイトでも必ずと言っていいほど設置されています。 今回から数回にわたって、「FAQ・ヘルプ」をテーマにした記事をお届けする予定ですが、まず今回は、ヘルプ活用の基本ともいうべき3つのポイントについてご紹介します。 一点目は、以前の実践メモ（「FAQの隠れた役割」）でも触れていますが、「よくある質問」や「FAQ」というリンクを置くだけでなく、本文の中で、ユーザの疑問が生じるところからヘルプに誘導する」ということです。 サイトを閲覧しているユーザは、「商品やサービスを選び、購入する」といった何かしらの目的を持って動いていることが多く、「ヘルプを閲覧しに行く」といった脇道へ逸れる行動には移りにくい状態です。 そこで、図2のように、ユーザが疑問や不安を感じるポイントで、ユーザの疑問・不安に合わせた表現を用いたリン
どうせ比較されるのならば、「比較の観点」を与えてしまおう (ユーザビリティ実践メモ)
自社サイト以外の場所で、自社の良さをアピールすることはなかなか難しいものです。 今回は、「比較する」というユーザ行動に着目することで、自社サイト以外でも自社の良さに気づかれやすくするための工夫についてお伝えします。 ところが、こうした比較行動をするユーザが、比較のために必要な観点をきちんと持っていることは少ないものです。その結果、「価格」などの分かりやすい要素だけで比較してしまうことがよくあります。 これでは最適な商品選びができたとは言えず、ユーザにとっても企業にとっても良いことではありません。 そんなときに効果的なのが、「○○を選ぶポイント」といった、製品やサービスを選ぶ観点を提供するコンテンツです。 例えば、引越サービスを例に考えてみましょう。 多くのユーザにとって、引越はそれほど頻繁にするものではないため、引越サービスを選ぶ際にも、何を重視すべきかを明確に把握しているわけではありませ
【海外事例に学ぶ】アコーディオン型入力フォームの実力 (ユーザビリティ実践メモ)
今回は少しテーマを変えて、フォーム関連の最新事例について書いてみます。 海外事例紹介としてお馴染みとなってきましたLuke Wroblewski氏の、“Testing Accordion Forms”(A List Apart)をご紹介します。 「入力フォームを複数ページに分割すべきかどうか？」について皆さんも悩まれたことがないでしょうか？分割すると各ページの項目は少なく済みますがステップが多くなってしまい、分割しないと1ページが縦に長くなってしまいます…。 その問いへの新たな解決案として出てきたのが“アコーディオン型”とも言うべき入力フォームです。 Apple.comのオンラインショップの購入フォームです。 では実際のフォームをみて見ましょう。 下記にある画面が、MacBook Airの購入フォーム画面です。なんと、この1ページ中で購入手続きが完結できるのですが、入力項目が多い印象も特に
サイト外でのユーザ心理を利用する3つのポイント【前半】 (ユーザビリティ実践メモ)
今回から数回にわたり、「サイト外のユーザ行動も踏まえたコミュニケーション設計」というテーマで実践的なノウハウをご紹介します。 ユーザ行動観察調査を実施していると、企業サイトで製品・サービスの概要を理解した後、他社サイトや口コミサイトを確認するという行動が非常によく見られます。 そこで、企業サイト以外での情報収集によってユーザが陥りがちな3つの心理と、それに対応する方法を考えてみます（今回は【前半】として、初めの2つをご紹介します）。 「企業のサイトは（自社に）いいことしか書いていないので、悪い評判や自分が気づいていないデメリットがないかを知りたいからです」 インターネットは比較メディアとも呼ばれ、このような行動は老若男女問わず、ほとんどのユーザで見られます。「悪い評判を見つけるまで、しつこく探します」と、検索結果を何ページも見ていくユーザもいます。 企業サイトはこのようなユーザの行動と、そ
iPadならではの特徴的なユーザ行動について (ユーザビリティ実践メモ)
iPadのようなタブレット型のタッチＵＩ端末では、PCでは見られなかった特徴的なユーザ行動が見受けられます。今回は、弊社の調査で見られたiPadにおける特徴的なユーザ行動と、デザイン上のポイントについてご紹介します。 【ポイント１】 ユーザはスクロールが苦ではない 弊社のユーザ調査にて、iPadで画面が切り替わる度にスクロールしてみようと画面をドラッグするユーザがよく見受けられました。ユーザは画面をスクロールしたがる傾向があるようです。 確かにiPad上で画面をスクロールすると、指に吸い付くようにスムーズに画面が動くため、直感的で心地よい感じがします。iPad上での快適なインタラクションは、ユーザにとってポジティブなフィードバックを与え、スクロールも苦になりにくいと考えられます。 情報は極力たくさん並べよう 調査で用いたショッピング用のアプリでは、iPadの縦１画面内におさまるだけの商品し
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)
前回に引き続き、スマートフォン対応サイトを制作する場合に気をつけるべきポイントとして、「PCサイトへの誘導の必要性」についてご紹介します。 スマートフォン対応サイトでも、PCサイトへの誘導を残しておこう スマートフォン対応をしているサイトの中には、PCサイトへのリンクが用意されている場合があります。せっかくスマートフォンから利用しやすいユーザインタフェースを用意しているのに、どうしてPCサイトへと誘導する必要があるのでしょうか？ 今回は、PCサイトへのリンクが必要な2つの理由についてご説明します。 スマートフォンはPCと比べると画面サイズも小さいため、最適化したサイトを作るために機能を絞ったり、情報量を減らしてサイトを構成するケースがよくあります。このような場合には、忘れずにPCサイトへのリンクを用意しておくことが必要です。 amazon.co.jpのiPhoneサイトを例に見てみると、ト
iPhoneサイトで気をつける3つのポイント (ユーザビリティ実践メモ)
スマートフォン利用者の増加に伴い、スマートフォン、特にiPhone対応サイトを用意する企業が増えてきましたが、必ずしもデバイスの特徴を考慮したサイトとなっていないケースが見られます。今回は弊社の調査で見られたユーザ行動を元に、iPhoneサイトで気をつけるべきポイントをご紹介します。 従来の携帯では下ボタンで画面をスクロールさせる際リンクに順番にフォーカスがあたるため、テキストリンクでもユーザの視線が止まりやすい傾向があります。一方iPhoneでは指で画面をスクロールさせるため、リンクにフォーカスはあたりません。テキストリンクがアイキャッチとなりにくく、携帯と比較して文字情報がまとめて読み飛ばされるケースがみられます。ユーザの目線を止めるには、アイキャッチ用の画像を配置するなどの工夫が必要です。 【ポイント2】細かな操作はさせない iPhoneはタッチパネルを指で操作するため、画面上の1点
ユーザに情報を届けるテクニック - 数と順序を明示する (ユーザビリティ実践メモ)
自分が作ったサイト内のページにおいて、ユーザがどのように情報を見ているかは、誰もが気になるところかと思います。今回は、ユーザに届けたい情報を、きちんと届けるためのテクニックを1つ、ご紹介します。 弊社では、ユーザ行動観察調査を行う際、ユーザがどこを見ているのかを分析できるアイトラッキングシステムを利用しています。 あるユーザ行動観察調査で、以下のような2カラム構成の画面をユーザに使ってもらったところ、ユーザに右側の情報を見てもらえない（情報に気付いてもらえない）まま、ユーザの視線がページ下部まで流れてしまうという現象が見られました。 一般的に、ユーザの視線は画像に集中する傾向があります。図1のプロトタイプの場合、左側に配置した訴求ポイントが最もユーザに届けたい情報であったため、エリアを大きく取り、大きな画像を用いて説明を行っていました。 しかし、そのために、右側に配置した訴求ポイントをユー
探しやすい一覧のコツ (ユーザビリティ実践メモ)
コンテンツ量の多いサイトでは、情報を一覧にすることで、ユーザが欲しい情報を見つけやすくするという手法がよく使われます。今回は表形式で情報を整理する際の考え方を、ユーザ行動観察調査の事例を元にご紹介しましょう。 図1は、ある旅行情報サイトでの情報一覧ページです。次の休暇にお得なパッケージツアーを検討しているユーザは、どのようにこのページを使うと思いますか？ 弊社のユーザ行動観察調査の結果、ユーザの視線は下の図のように左右に大きく動き、かなり時間をかけて表を見ていく様子が観察されました。 このページを見る際のユーザの関心事は、第一に「予算の範囲内で一番お得なツアーは何か」であり、さらにいえば「同じ価格ならできるだけ魅力的なところに行きたい」ということでした。 したがって、ユーザは各パッケージツアーの「価格」と「割引率」に注目しています。この表では二つの情報が離れた場所にあるため、視線があちこち
その画像、伝わっていますか？ (ユーザビリティ実践メモ)
WEBサイトでは、紙面に比べて文字を読む速度が遅くなるため、画像が好まれる傾向にあります。 しかし、画像はメッセージを伝える手段であるという認識を忘れ、ただ画像を掲載しただけでは、ユーザと適切なコミュニーションが取れない場合があります。 このサイトでは、「教材のサンプル画像が見たい」というユーザからの要望が強く、企業側としても教材の良さを知ってもらいたいため、サイト上に多くのサンプル画像を用意していました。 しかし、サイトを閲覧したユーザに教材の印象を聞くと、「特に印象がない」「普通」という返事が返ってきてしまいました。なぜでしょうか？ ユーザ行動観察調査で画像を見る様子を観察すると、原因は明らかでした。 ユーザは、確かにサンプル画像は見ますが、何となく全体を眺めるだけで、すぐに次のページへ移動していました。 サンプル画像によって伝えたかった教材のこだわりや工夫が全く伝わっていなかったので
「次へ」ボタンの誘惑 (ユーザビリティ実践メモ)
自社商品の強みを伝えるために、頑張ってコンテンツを作ったけれど、なかなか最後まで見てもらえない…という悩みを持つウェブマスターの方は多いのではないでしょうか。 ユーザに「もう1ページ先」を読んでもらうためのちょっとした工夫として、「次へ」というテキストリンクの活用があります。 ベッドなどの家具を販売している会社の事例をご紹介します。 （実際の事例では別の商材ですが、内容は同じです） この会社では、自社商品の強みを自然に伝えるため、「マットレスの選び方」「掛け布団の選び方」というコンテンツを用意しています。 「寝心地のいいベッドがほしい」と思って探しているユーザがこのサイトに訪れた際に、「マットレスの選び方」というコンテンツに気づいて興味を持ってページを見てみたとします。 ページの最後まで読んだユーザは、「掛け布団は今回は買うつもりはないから見なくていい」と思い、次ページには進まず、戻ってし
会社案内ページでユーザの印象を良くする方法 (ユーザビリティ実践メモ)
ユーザが商品・サービスの購入を検討する中で、ウェブサイトを使ってその商品を扱っている会社の信頼性をチェックする場合があります。 特に、一旦契約したら継続的な関係が維持される金融サービスや、単価が高い不動産などの場合、その傾向が強いことが弊社のユーザ調査でも良く観察されています。 今回は会社情報でユーザの印象を向上する方法についてご紹介します。 自分がよく知らない会社に対して、ユーザは「この会社は安心・信頼できるか」 「マイナスとなる点がないか」という観点から情報をチェックします。具体的には「会社概要」「沿革」「役員構成」などに加え、金融系では「IR・財務情報」、不動産系では「取得免許の更新回数」などがチェックされやすい項目です。 これらの項目の中で大きなネガティブ要素があった場合、ユーザはその会社を選定対象から外してしまいますが、大きな問題がないと思ったら会社情報のチェックを終了し、引き続
タブキー利用にも対応するフォームのちょっとした改善 (ユーザビリティ実践メモ)
最近のユーザ行動観察調査(ユーザビリティテスト)では、ウェブサイトの利用、マウスやキーボードの使い方に慣れたユーザも増えてきていると感じます。そこで今回は、ユーザのタブキー利用への対応について考えてみたいと思います。 フォーム制作において、タブキーを使った時にフォーカスが移動する箇所の順番を、気にされていますでしょうか？タブキーを使って入力ボックスを移動した時に、適切な順番で、全ての入力ボックスへ移動できることが期待されます。 タブキーを使って移動するユーザにとっては、適切な順番でフォーカスが移動しない、タブキーで全ての入力ボックスへ移動できないケースが発生した場合、離脱の原因になりえます。 フォーカス移動の順番は、HTMLのtabindex属性で指定することができます。 <タグ名 tabindex=n> またフォーカス移動を指定する場合には、最後の送信ボタンにまで移動できるよう配慮しまし
充実したFAQで、ユーザの問題解決＋態度変容を促す (ユーザビリティ実践メモ)
FAQに関する過去の実践メモ「FAQの隠れた役割」では、FAQの2つの目的を述べました。 1. ユーザの疑問に答えることで、問い合わせ数を削減する 2. ユーザをサイトのゴールへと導く攻めのコンテンツとして活用する 今回は、特に「攻めのコンテンツ」としての具体的な実践方法をご紹介します。 FAQの中でユーザが関心を持つ項目は、サービスや製品の選定ポイントとなっている可能性もあり、競合他社に勝るための訴求チャンスとしても捉えられます。ユーザにとって問題解決となる情報提供はもちろんですが、その中でうまくサービス・製品の訴求も行うことで、ユーザの態度変容を促すことができます。 とある教材サイトのユーザ行動観察調査では、「仕事と両立できるの？」という誰しもが抱く不安・疑問をFAQの中に出し、その回答として具体的な強みを訴求することで、ユーザの態度変容を強く促すことに成功していました。 方法2 体験
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
