より読者を惹きつけるテキストを書くために - 注目したい2つの記事を抜粋

Yahoo!は7月6日(米国時間)、ライティングに特化したスタイルガイド「Yahoo! Style Guide」を公開した(プレスリリース)。同サイトは同名の書籍の一部をWeb上で閲覧できるようにしたもの。Webでの文章の書き方や記号の使い方に始まり、アイトラッキングやUIデザイン、SEOの観点からも考慮されたスタイルガイドになっている。Webサイト全体のおおまかな構成、書籍目次に対応したサイトマップについては前回の記事「Yahoo!スタッフによる"編集"ガイドライン - Yahoo! Style Guideの歩き方(1)」を参照されたい。

今回はWriting for the Webから、とくに注目したい記事2点をピックアップして紹介しよう。

The Yahoo! Style Guideのトップページ。まず赤枠部でかこった「Shape your text for online reading」を紹介しよう。後述するがこのレイアウト配置にもちゃんと意味がある

紙媒体とWebとでは読み方が違う - オンラインリーディング向けにテキストを成形せよ

Web上に載せるテキストは次の3点に気をつけたほうが良いと言えそうだ。

  • 1文1文を短く、文章はできるだけ簡潔に
  • 先頭(とくに左上部)に「全体をとおして言いたいこと/注目してほしい内容」を持ってくる
  • 見出し/強調の最適化。とくに訴えかけたい内容は画像を用意

オンラインリーディングとはWeb上でテキストを読むこと。読者の中には感じたことがある方々も多いと思うが、紙媒体とWebとではテキストの読み方が異なる。紙媒体と同じようにWebサイト用の文章を書いてしまうと、思うように読者がつかず、せっかく書いた記事も日の目を見ないことになってしまう。Shape your text for online readingによると、Web上で効果的なテキストを書くコツは「素早く核心をつき、読者が主要な情報を簡単にピックアップできるようにすること」だそうだ。

Web上の読者の大半は、まずテキストを流し読み(scan)する。コンピュータユーザビリティの権威でもあるJakob Nielsen博士も「How Users Read on the Web」において"Webページの一語一語を読んでいる人はめったにいない。かわりに彼らは個々の単語や文をつまんで、流し読みしている" (原文: People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences)と指摘している。

Webページのどこに注目しているかを調査するアイトラッキングの結果、3点の基本的な事実が明らかになった。

  • 読者はまず内容が自分と関連性のあるものかどうかを確認するために、流し読みをする
  • Webページの下部より、先頭部分を流し読みしている傾向がある
  • 見出しや強調された用語、画像に注目する

「流し読み」するのと「読む」のとでは別物。当然「読む」行為に比べて、「流し読み」のほうが頭のパワーを使わなくてすむ。どちらが優れているかどうかはさておき、Web上では「流し読み」をする人が大半。Web上では長くて難解な文章を書くより、読者を惹きつけるようだ。

最も注目される場所にアピールしたい情報を配置 - アイトラッキング: 読者は最初にどこを見るか

さきほどの「オンラインリーディング向けにテキストを成形せよ」と対にして読んでおきたい記事だ。

アイトラッキングとは、人がWebページをみるときに目線がどのように動いているのかを記録・分析したもの。目線の動きや読みとどまっている箇所 - "ゲイズマップ(gaze map)"を記録する。複数のこの範囲の中からもっとも注目されている箇所を"ヒートマップ(heat map)"として構成する。

Yahoo!がおこなったアイトラッキング調査の結果、Webページ読者の一般的なパターンが明らかになった。

  • 全体の内容を読むかどうかを決めるために、Webページ中のおもなセクションを流し読みする
  • わずか3秒程度で読むかどうかを決めている
  • 読むと決めた場合、画面の最上部に注意を向ける

読者が「このWebページを読む」と決めた場合、まず主要なコンテンツが書かれている箇所の左上隅、三角形部分に焦点を合わせ、左から右へ水平に読みはじめる。しかしこのパターンはページレイアウトによって異なるようだ。たとえば写真の多いスライドショーやテキストびっしりのブログ、2カラム/3カラムレイアウトのWebページなど。

例としてあげられているYahoo! Financeのガイド記事では、左上隅部分に"savings"や"budget"のような重要な単語を配置している。また、ページスクロールしないで「このWebページでは何について言及しているか」を見ることができるように、各トピックタイトルを番号付きリストで表現。目次としても機能する。

How to Put Savings (and yourself) First With a Budget - Banking & Budgeting Guide on Yahoo! Personal Financeより。画面左上に読者を惹く重要な用語、目次を効果的に配置

Business & Finance News - Yahoo! Financeより。注目度の高いニュースが画面左上に配置されるようになっている

このYahoo! Style Guideトップページでも、まず最初に読んでほしいという意味か、全体をとおしてベースとなる「Shape your text for online reading」はレイアウト左上に配置されている。

Writing for the Webから、とくに注目したい記事2点をピックアップして紹介した。このYahoo! Style Guide内では基礎中の基礎であると言える2点だが、これらの知識は基礎なだけにさまざまな分野で活かせる。これらテキストの書き方はWeb上に文章を載せるだけではなく、その特性上プレゼンや報告書といったビジネス文書にも応用が効きそうだ。まずはGet to the pointのExampleを参考にできるところから少しずつ実践を。慣れてきたらSEOやUIの観点からも考慮したテキストを書いてみよう。