読者の途中離脱を防ぐWebライティング8つのポイント
Webライティング、Webページに掲載する文章をしっかりと作り込んでいくと、どうしても文字数は多くなちがちです。書き終わった、と思って見直してみると、文字がぎっしり…ということも多いのでは無いでしょうか。
多くのWeb読者は、画面中が文字で埋め尽くされると「げんなり」してしまいます。内容を読んでもらうためには、ユーザーが苦痛を感じにくい工夫を行う必要があります。
ライティングだけではなく、Webデザインにも役立つ“ユーザへの気遣い”とも言える内容です。Web制作に関わる方は、ぜひチェックしてみて下さい。
記事の見やすさとは
Webユーザーは、長文を敬遠する傾向があります。
論文のように文字がぎっしり詰まっているページも嫌われます。
テキストしかない記事では、最後まで読んでくれる可能性は低いでしょう。
ページを開いた瞬間に、読む気を無くしてブラウザバックしてしまう方のほうが多いかもしれません。
ユーザーに苦痛を感じさせずに、記事を読んでもらうにはポイントがあります。
- 文字がぎっしり詰まっているように見えない
- 重要なポイントがひと目でわかる
- 視覚的にも記事の内容・ニュアンスがわかる
この３点を実現するためには、大きくテキストの読みやすさ向上・視覚的なコンテンツを追加する２つの方法があります。
それぞれのポイントを見ていきましょう。
※案件によりライターが担当する内容は違います
Webライティングの依頼を受けて執筆する場合は、文字装飾や図版作成・挿入は、クライアントから指示されることもあります。
指定がある場合は従いましょう。
【例】
- 図はこちらで用意します。文章のみ納品して下さい。
- 太字強調はライターさんがご自身で行って下さい。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
テキストを読みやすくする4つのポイント
見出しで区切る、文は短く、などなど「Webライティング注意するべき10のポイント」でもWebライティング時に読みやすい文章を作成するポイントを紹介しました。
Skillhubブログ
前回の文章制作部分に加えて、今回は下記の４項目を見てみましょう。
- 1.改段落を確認
- 2.重要な部分を強調する
- 3.文字装飾を使いすぎない
- 4.箇条書きを取り入れる
1.改段落を確認
一段落の目安は「PCで閲覧した場合で3〜5行」がオーソドックス。
スマートフォンユーザーが中心であったり、ターゲットユーザーが若年層の場合は「PCで閲覧した場合で2〜4行以内」としているサイトもあります。
2.重要な部分を強調する
文・段落を短めに区切っても、記事は流し読みされることが予想されます。
ですので、重要なポイントは太字で強調するなどの工夫をしましょう。強弱が付くことで「ここが重要なんだ」とユーザーに訴えることが出来ます。
3.文字装飾を使いすぎない
重要なポイントは太字などにしてわかりやすくすることが重要です。
しかし文字装飾を使いすぎると、どこが重要なのかわからなくなってしまいます。
左の文章では重要な箇所、もしくは色付けされているところの重要度がわかりませんよね。
使用する文字装飾（太字、文字色、マーカー等）は多くても３種類くらいまでが良いでしょう。それぞれ、どういった場合に使うのかを、サイト内で統一する必要があります。
各サイトの規定に従った文字の強調表現以外は、行わないようにしましょう。
4.箇条書きを取り入れる
箇条書き、list形式を使うと文章がスッキリします。
並列の情報や、順序立てて要点を伝えたい時には箇条書きを利用してみましょう。
また、技術的な部分にはなりますが、箇条書きは箇条書きの形式（htmlならばul,ol）で作成しましょう。文の頭にテキストで「・」や数字を付けただけだと、1項目が自動改行された時にインデントがずれ、見にくくなってしまいます。
視覚的に内容を伝える4つのポイント
Web記事では図版（写真、イラスト、グラフ、地図など）を挿入することで、より説明をわかりやすくしたり、文章で伝えたい内容の雰囲気を伝えたりします。テキストの密集感を緩和させる、流し読みしているユーザーが目をとめやすいというメリットもあります。
文中に挿入される、代表的な図版は下記の４つ。
- 5.文章のイメージを伝える画像
- 6.該当箇所を示すスクリーンショット
- 7.「動き」を明確に伝えるGIFアニメーション・動画
- 8.わかりやすく“見せる”説明図版
5.文章のイメージを伝える画像
画像は文字よりも素早く情報を伝える事が出来ます。
以下のように文章だけでイメージしづらい場合、画像やイラストでイメージを伝える必要があります。
また、ユーザーは文字のみだと読みつかれてしいます。
イメージできる文章であっても、画像を所々に差し込むと良いでしょう。
箸休め的な画像は、前後の文脈と違和感がない、イメージや雰囲気を伝えられる画像を選びます。
6.該当箇所を示すスクリーンショット
htmlの書き方、ソフトやWebサービスの使い方などのライティングもあります。このようなパソコン上での操作を説明する場合は、スクリーンショットを挿入するとわかやすいです。
例えば、hmtlの基礎を紹介する場合。
完全初心者の方にいきなり「Webページに表示したい内容は、<body>内に書きます」と説明しても、わからないかもしれません。
上記のように、コードのスクリーンショットを撮影。
そのなかで「ここですよ」と示した方がわかりやすいはずです。
スクリーンショットが入ることで、文字が詰まっている感じも和らぎますね。
7.「動き」を明確に伝えるGIFアニメーション・動画
スクリーンショットだけでは伝わらない、操作する動き・画面上のエフェクトなどはGIFアニメーションや動画を使って説明しましょう。
特にGIFアニメーションは動画よりも軽く、スクリーンショット感覚で撮ることが出来るので、ちょっとした説明に重宝します。
上記の文章だけでは、何を指しているのかわからなかったり、人によって想像するものが違ったりします。マウスオーバーって何？という方もいるかもしれません。
GIFアニメーションを入れておくと、一発で伝わるのではないでしょうか。
文章や文字での表現が大変な、Illustratorなどの操作方法も一発でわかるはずです。
1,2,3とステップごとの画像を作って説明するより、作成時間もかかりません。
8.わかりやすく“見せる”図版
文字だけで説明してもわかりにくい部分、ユーザーが読むのを嫌がりそうな部分は、図版（図解）で表現すると良いでしょう。
下図のようなアンケート結果や、数字の羅列になってしまう比較などは、図版の方がわかりやすいですね。関係性やフローを表したい場合も、図解を使ったほうがわかりやすく、ユーザーの目にもとまりやすいです。
まとめ
Web記事は、紙面の記事よりも余白や画像が必要です。
ユーザーが読むのをためらったり、知りたい情報を探すのを諦めてしまったりしないよう、記事全体を視覚的にわかりやすくしていくと良いでしょう。
- 画面上の文字密度が高くなりすぎない
- 文字を読まなくても、内容がなんとなく分かる
この２つを意識して、読むためのハードルを下げるようなイメージです。
ページを適当にスクロールして「見たい情報」のありそうな部分を探すユーザーも多いです。見出しを大きくしたり、イメージ画像を入れるなどの配慮があると、探していた情報に辿り着きやすいでしょう。
途中離脱の予防にも繋がります。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで