超明快 Webユーザビリティ[Web担特別公開版]

Webページを流し読みしてもらうためのデザインとは ~エリア区切り・ノイズ・テキストフォーマット

「ページをエリアで区切る」「クリックできるものを強調する」「“ノイズ”を適度に抑える」「流し読みしやすいテキストフォーマットにする」
スティーブ・クルーグ 著/福田篤人 訳 2016/7/28(木) 7:00 |
tweet26はてなブックマークに追加 印刷用
超明快 Webユーザビリティ 書影

この記事は、書籍『超明快 Webユーザビリティ』の一部をWeb担向けに特別に公開しているものです。

この記事では、書籍の第3章「看板デザイン入門 熟読ではなく、流し読みしてもらうためのデザインとは」の内容をお届けします(前後編の後編)。
第3章の前編をまず読んでおく

ページをくっきりと分けられたエリアで区切る

理想を言うなら、『$25,000 Pyramid1』という古いテレビ番組に使えるようなWebサイトこそ、うまくデザインされたWebサイトということになる。「このサイトでできること!」「今日のトップ記事へのリンク!」とか「この会社が売っている商品!」「すごく売りたがっている物!」「サイトの別の部分へ行くためのナビゲーション!」などと、指をさされた部分が何なのか一目で回答できるようになっていなければならない。

注1 参加者たちが「配管工が使うもの」といったテーマに関連する具体例をヒントに出し、パートナーにそのテーマが何かを当てさせるゲーム番組である(レンチ、パイプ切断機、ずり落ちそうなズボンなど)。

ページの各領域を明確に分けておくことは重要である。ページのどこに注目するべきか、どこは無視しても問題なさそうかを、ユーザーが素早く判断できるようにするためだ。Webページを流し読みする際の目の動きに関するいくつかの研究結果によれば、ユーザーは有用な情報がありそうな場所がどのあたりかを一目で素早く絞り込み、それ以外の部分はほとんど見ず、まるで最初から存在していないかのように扱うという(バナー広告がありそうだと思った場所を最初から完全に無視する「バナーブラインドネス」現象は、その極端な例である)。

クリックできるものを強調する

ユーザーはWebを見ている時間の大部分を、次にどこをクリックするか探すことに費やしている。だから、どこがクリックできるか判別しやすいようにしておくことも重要である。

ユーザーはページを流し読みしながら、形(ボタン、タブなど)や場所(メニューバーなど)、フォーマット(色や下線)といった見た目の手がかりを頼りにクリック(またはタッチスクリーンならタップ)できそうな場所を探す2

注2 リンクにポインタを合わせると矢印から指状に形が変わるということも手がかりとして使われているが、ポインタを動かさなければならないので比較的手間がかかるプロセスである。しかも、タッチスクリーンではポインタがないので通用しない。

視覚から道具の使い方の手がかりを探る、という過程はWebページに限られた話ではない。最近改訂されたドナルド・ノーマンのユーザビリティに関する古典『誰のためのデザイン?』(新曜社、2015年改訂)で指摘されているように、私たちは周囲の環境(ドアのノブなど)を常に分析し、使い方のヒント(押すか? 引くか?)を探している。彼の本を一度読めば、ドア一枚でさえも新鮮に見えてくることだろう。

クリックできるものをわかりやすくするという問題には、Webサイトが生まれて以来様々な流行り廃りがあった。

1995 古生代 サイトのほとんどは開発者の手で作られ、質素なHTMLテキスト、リンクとボタンで作られていた。クリック箇所はわかりやすいが、退屈。
2000 開拓時代 Web上の制約(フォントが少ない、下線は美しくない)に不満を抱いた印刷デザイナーたちが画像化されたテキストをリンクに使い始めた。クリック箇所がわかりづらいことが多い
2005 黄金期 CSSの出現がエレガントに問題を解決した。クリック可能なテキストは(下線なしで)一色だけに統一された。ユーザーも理解しやすく、快適な時代。
2010

10章で紹介するが、この問題はモバイルの分野で再び表面化してきている。

一般的には、テキストリンクに同じ色だけを使うようにしていれば問題は起こらない。形や場所を工夫してクリック可能な場所が確実に特定できるようにすることもできるだろう。とにかく、クリックできない見出しをリンクと同じ色にするというようなヘマさえしなければいいのだ。

「ノイズ」を気怠そうな唸り程度に抑える

わかりやすいページ作りの最大の敵のひとつは、視覚的なノイズである。

ページの複雑さやノイズにどれほど耐えられるかはユーザーにより異なる。ノイズがまったく気にならない人もいれば、すぐにイライラし始める人もいる。ページを読もうとしているユーザーがアニメーション部分を隠すため、モニターに付箋を貼り付けるといったケースさえある。

ノイズには3種類ある。

  • 大音量の絶叫系 ページ上のすべてがユーザーの注意を引こうと大声を上げているような場合、過剰な効果がもたらされる。製品の「購入!」をあちこちで迫ってくるとか、大量のびっくりマーク、ばらばらのフォント! ハデな色! 果てしないアニメーションにポップアップ、その他注意を引こうとする新種の広告!!

    が、現実にはすべてが重要なことなどありえない。たいていは、どこが本当に重要で、ユーザーをそこに到達させるにはどのような視覚的構造をとればいいかの判断ができなかった結果として発生するのが、このタイプのノイズである。

  • 散らかった部屋系 まるで荒らされた部屋のように、あちこちに物が散らばっているページだ。デザイナーがページ内要素を整列させることの重要性を理解していなかった兆候とみて間違いない。

  • 詰め込みすぎ系 とにかく物が多すぎるサイト。そういうトップページは誰でも見たことがあるはずだ。その結果、自分が本当に必要なものを見つけ、絞ることができなくなる。一度登録しただけなのに、まるで生涯の友人気取りになったWebサイトから大量に送られてくるニュースレターであふれたEメールの受信箱と同じようなものだ。エンジニアなら「SN比(信号量と雑音量の比)が低い」と言うだろう。つまり雑音だらけで、情報は少なく、雑音のせいで使えるものがわからなくなっている、ということだ。

    Webページを編集する際は、まず何もかもが視覚的ノイズであるという前提で始め、本当に役に立っている物以外のすべてを削除してしまってもいいだろう(「無罪が立証されるまでは有罪」式アプローチである)。ユーザーからもらえる時間と注意力が限られている以上、ソリューションと関係ない部分には消えてもらわなければならないのだ。

流し読みしやすいテキストフォーマットにする

ユーザーはWebページに使う時間のうち、Webページを流し読みして何かを探すことに、その大部分あるいはほぼすべてを割いている。

流し読みするならどちら?

流し読みのしやすさはテキストフォーマットの作り方次第で決まる。ユーザーの助けとなるために重要なことを以下に列挙しよう。

  • 見出しをふんだんに使う テキストの合間にある見出しの文章が練られており、気が利いていれば、実質的な概要や目次として機能する。そのセクションの内容を理解させたり、あるいは内容そのものを書いた見出しでない場合、好奇心をかきたてたりすることができる。いずれの場合も、どこを読み、どこを読み飛ばすのかを判断するのに役立つ。

    大半の場合は、あなたが思っている以上に見出しを増やし、その文章づくりに時間をかける必要がある。

また、フォーマットも正しくできているか確認しよう。見出しのスタイルづくりでは2つのことが見過されがちである。

まず、見出しの階層が2段以上あるのなら、間違いようがないほど明らかな見た目の差を作るべきだ。上の階層ほど大きくする、余白を大きくとるなどの手段を使えばいいだろう。

それ以上に重要なのは、見出しを中間に浮かせないことだ。見出しの上にある読み終わった文章よりも、見出しの下にあるこれから読むセクションの方に近づけておいた方がいい。この違いは大きい。

  • 各段落は短くする 一段落が長い文章を前にした読者は、UIデザインの権威キャロライン・ジャレットとジニー・レディッシュの言葉を借りるなら「文字の壁(wall of words)」と向かい合っているようなものである。一段落が長い文章よりも、短い段落が並んでいる文章の方が威圧感は少なく、読者が放り出しにくく、また流し読みもしやすい。

    各段落には、テーマ、詳細、結論の各文がなければならない、などと学校で教わった人もいるかもしれないが、オンラインでは関係ない。1段落に1文しかなくても構わないのだ。

    一段落が長い文章を見れば、ほとんどの場合2つに分けられる箇所がどこかに見つかるはずだ。探して切り分けることを習慣にしよう。

  • 箇条書きにする 箇条書きにできるものはすべて箇条書きにするべきだろう、と考えてもいい。カンマやセミコロンなどの区切りで並べられている物はたいてい候補に入る。

    さらに読みやすくするため、箇条書きの項目間には余白を作っておくべきだろう。

  • キーワードを強調する 流し読み作業の実態の大半は、キーワードやキーフレーズ探しである。重要なテキストが初めて出てきたときは太字にするなどと決めておけば読みやすくなる(無論、テキストリンクにしてあるならその必要もない)。ただし、効き目を失わないよう、強調する部分の数は絞るべきである。

ページの内容を流し読みしやすくする方法(または画面上の文章の読みやすさに関すること全般)を本気で学習したければ、ジャニス(ジニー)・レディッシュの『Letting Go of the Words』をインターネットから急いで注文するべきである[訳注:残念ながら未邦訳]。ついでに文章書きや編集、デジタルコンテンツの制作に関わっている知り合いにも買ってあげれば、永久的に感謝されることになるだろう。

超明快 Webユーザビリティ 書影
  • 著者:スティーブ・クルーグ
  • 訳者:福田篤人
  • 発行:株式会社ビー・エヌ・エヌ新社
  • ISBN:978-4802510318
  • 価格:2,400円+税

超明快 Webユーザビリティ
―― ユーザーに「考えさせない」デザインの法則

明白で使いやすいサイトを実現するには? → ユーザーに考えさせちゃダメ!

Apple、Bloomberg、Lexus などを顧客としてきた、ユーザビリティコンサルタントの第一人者にして激安ユーザーテストの伝道師 スティーブ・クルーグが説く、 ユーザーに「考えさせない」サイトの作り方。

20か国で翻訳、累計45万部超の世界的ベストセラー、ウェブ&モバイルユーザビリティの定番書『Don't Make Me Think』の日本語版『超明快 Webユーザビリティ』(ビー・エヌ・エヌ新社 刊)です。

この記事が役に立ったらシェア!
tweet26はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

robots.txt
ロボット型の検索エンジンが自分のページを登録しないようにするためにサイト管理者が ... →用語集へ

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]