文の構成・書き方以外にも、Web記事を読みやすくする工夫はあります。ユーザーが読むのをためらってしまわないよう、記事全体を視覚的にわかりやすくしていきましょう。
記事の見やすさとは
前回の実習、記事（テキスト部分）の執筆は出来ましたか？
文章だけで3,000文字以上になると、文字がぎっしり詰まっている印象があると思います。 記事そのものも長いですよね。
Webユーザーは、長文を敬遠する傾向があります。 論文のように文字がぎっしり詰まっているページも嫌われます。 テキストしかない記事を公開しても、最後まで読んでくれる可能性は低いでしょう。ページを開いた瞬間に、読む気を無くしてブラウザバックしてしまう方のほうが多いかもしれません。
記事を読んでもらうためには、下記の工夫が必要です。
- 文字がぎっしり詰まっているように見えない
- 重要なポイントがひと目でわかる
- 視覚的にも記事の内容・ニュアンスがわかる
この３つを中心に、テキスト部分で行う工夫・文章以外の部分での工夫をそれぞれ見ていきましょう。
※案件によりライターが担当する内容は違います
文字装飾や図版作成・挿入は、クライアントから指示されることもあります。 なんらかの指定がある場合は、クライアントの意向に従いましょう。
【例】 * 図はこちらで用意します。文章のみ納品して下さい。 * 太字強調はライターさんがご自身で行って下さい。
テキスト部分を読みやすくする工夫
見出しで区切る、文は短く、などなど記事を読みやすくするためのポイントは多く登場しました。前回の記事執筆に加えて、今回は下記の４項目を見てみましょう。
- 改段落を確認
- 重要な部分を強調する
- 文字装飾を使いすぎない
- 箇条書きを取り入れる
1.改段落を確認
ここまでのレッスンでも度々、下記ポイントが登場しました。
- 見出しの設定
- 一つの文を短めにする
- 改行・改段落を入れる
記事本文の執筆時にも改行や、改段落は設定しています。 ですが、もう一度「文字の詰まり具合」を考えつつ段落分けを確認してみましょう。
一段落の目安は「PCで閲覧した場合で3〜5行」がオーソドックス。 スマートフォンユーザーが中心であったり、ターゲットユーザーが若年層の場合は「PCで閲覧した場合で2〜4行以内」としているサイトもあります。
2.重要な部分を強調する
文・段落を短めに区切っても、記事は流し読みされることが予想されます。 ですので、重要なポイントは太字で強調するなどの工夫をしましょう。強弱が付くことで「ここが重要なんだ」とユーザーに訴えることが出来ます。
3.文字装飾を使いすぎない
重要なポイントは太字などにしてわかりやすくすることが重要です。 しかし文字装飾を使いすぎると、どこが重要なのかわからなくなってしまいます。
左の文章では重要な箇所、もしくは色付けされているところの重要度がわかりませんよね。
使用する文字装飾（太字、文字色、マーカー等）は多くても３種類くらいまでが良いでしょう。それぞれ、どういった場合に使うのかを、サイト内で統一する必要があります。 各サイトの規定に従った文字の強調表現以外は、行わないようにしましょう。
4.箇条書きを取り入れる
箇条書き、list形式を使うと文章がスッキリします。 並列の情報や、順序立てて要点を伝えたい時には箇条書きを利用してみましょう。
また、技術的な部分にはなりますが、箇条書きは箇条書きの形式（htmlならばul,ol）で作成しましょう。文の頭にテキストで「・」や数字を付けただけだと、1項目が自動改行された時にインデントがずれ、見にくくなってしまいます。
視覚的に雰囲気や内容を伝える工夫
Web記事では図版（写真、イラスト、グラフ、地図など）を挿入することで、より説明をわかりやすくしたり、文章で伝えたい内容の雰囲気を伝えたりします。テキストの密集感を緩和させる、流し読みしているユーザーが目をとめやすいというメリットもあります。
文中に挿入される、代表的な図版は下記の４つ。
- 文章のイメージを伝える写真やイラスト
- 該当箇所をわかりやすく示すスクリーンショット
- 「動き」を明確に伝えるGIFアニメーション・動画
- わかりやすく“見せる”説明図版
スクリーンショット、GIFアニメーション、説明図版の作り方とポイントは、別レッスンで紹介します。まずは、それぞれの概要をチェックしてみて下さい。
1.文章のイメージを伝える画像
画像は文字よりも素早く情報を伝える事が出来ます。 文字のみだと読みつかれてしまうので、画像を所々に差し込みましょう。前後の文脈と違和感がない、イメージや雰囲気を伝えられる画像を選びます。
また、以下のように文章だけでイメージしづらい場合、画像やイラストでイメージを伝える必要があります。
2.該当箇所をわかりやすく示すスクリーンショット
htmlの書き方、ソフトやWebサービスの使い方など、なにかパソコン上での操作を説明する場合はスクリーンショットを挿入するとわやすいです。
例えば、題材にしているhmtl入門知識。
完全初心者の方にいきなり「Webページに表示したい内容は、<body>内に書きます」と説明しても、わからないかもしれません。
スクリーンショットをいれて、ここですよ、と示した方がわかりやすいはずです。
スクリーンショットが入ることで、文字が詰まっている感じも和らぎますね。
3.「動き」を明確に伝えるGIFアニメーション・動画
スクリーンショットだけでは伝わらない、操作する動き・画面上のエフェクトなどはGIFアニメーションや動画を使って説明しましょう。
特にGIFアニメーションは動画よりも軽く、スクリーンショット感覚で撮ることが出来るので、ちょっとした説明に重宝します。
上記の文章だけでは、何を指しているのかわからなかったり、人によって想像するものが違ったりします。マウスオーバーって何？という方もいるかもしれません。
GIFアニメーションを入れておくと、一発で伝わるのではないでしょうか。
文章や文字での表現が大変な、Illustratorなどの操作方法も一発でわかるはずです。 1,2,3とステップごとの画像を作って説明するより、作成時間もかかりません。
4.わかりやすく“見せる”図版
文字だけで説明してもわかりにくい部分、ユーザーが読むのを嫌がりそうな部分は、図版（図解）で表現すると良いでしょう。
下図のようなアンケート結果や、数字の羅列になってしまう比較などは、図版の方がわかりやすいですね。関係性やフローを表したい場合も、図解を使ったほうがわかりやすく、ユーザーの目にもとまりやすいです。
実習
作成した記事を見直してみましょう。 イメージ写真・イラストが必要な箇所は、画像を挿入してみて下さい。
特に気にしていただきたいのは「パソコンでもスマホでも読みやすく、文字が詰まっていないか」という点です。
【チェックポイント】 * 段落が長すぎないか？ * 箇条書きにしたほうがわかりやすいところはないか？ * 適度なバランスで図版が入っているか？
Googleドキュメント（初期設定のA4サイズ-標準テキスト）の場合、2カラムレイアウトのブログ部分と1行に入る文字数は大体同じくらいです。厳密にPCやスマホ表示時を考えなくとも構いませんので、概ね５行以内に収まるようにしてみましょう。
スクリーンショット、GIFアニメーション、説明図版は、次回以降のレッスンで作成ポイントを紹介します。現段階で作っても、レッスン確認後に作成しても良いです。
まとめ
Web記事は、紙面の記事よりも余白や画像が必要です。 文字を読み疲れない、読まなくても視覚的にわかる部分、この２つを使って読解ハードルを下げるようなイメージです。小学校５年生でもわかる（最後まで読める）ことを想定してみましょう。