前回からいよいよ、ライティング講師が話していそうな内容に突入してきたこのコラム。
やっと第4回で“書き方”の話が始まったのに、一転して見栄えのお話ですか?と言われてしまうのは想定の範囲内です。

■なぜ文章記事にビジュアルが必要なのか?
Webライティングにおいて、視覚的ユーザビリティ=利便性は非常に重要です。
どうかすると、本文の読みやすさより大切なんじゃないかと思っています(主観)。

パッと開いたページが文章で真っ黒だったら…見た人は直感で「読み込まなきゃ」と判断します。それが、自分で検索してお望み通りの「これこれ!知りたかったこと!」であれば、頑張って文字を目で追うでしょう。

しかし、真っ黒な文は、正直言って読む気が失せる。ファーストビューで記事の良し悪しがわからなければ、そこでまた直感的に「もっとわかりやすいサイトないんかえ?」と次を探しに行く。これがいわゆる”ページの離脱”です。

ただでさえ、スマホの字は小さい。さらに、読み込むという作業はストレスでしかありません。「若けぇ世代のやつにはついていけんわ」と、パソコンやスマホ作業を若手に任せたくなるアナログ世代の方の気持ちもわかります…が、それは、欲しい情報を、思い通りに獲得するまでの経験とスキルに至っていないだけです。だから「使いづらい、使いこなせない」とユーザーが感じてしまうのです。

Web担の皆さん!
今こそ、全人的・バリアフリーなWeb記事作成を心がける時ですよ!

■見やすいWeb記事ポイント
それではここから、記事をパッと見やすくするポイントを紹介します。
細かな対策方法もたくさんありますが、ここでは「すぐに実践できる」ものを抜粋してお話します。

その1:見出しをつける
見出しは、書籍にある”目次”と同じだと思ってもらえると良いでしょう。
タイトルでおおよその内容を知ってもらい、どんな話が展開されるのかを見出しにして章立てます。(ちなみに今回のコラムは、敢えて見出しを挿入してお役立ち情報的な文イメージにしています)

たとえば、「台所の排水が詰まった! とりあえず自分で何とかしたい」人が、その方法をネット検索したとします。
そこで、「排水不良の原因は…」から始まった、見出し無しの長ーーい文章に行きついた時、きっと「詰まった原因はいいんや! どうしたら水流れるかえ!?」と思うでしょう。こうなるとおそらく、いや絶対に最後まで文章を読みませんよね。

見出しがあれば、パッと見がスッキリし、書かれている内容を把握しやすくなります。また、読み飛ばしやすいというメリットもあります。狙った見出し(内容)のところまで、スクロールすればいいわけです。

最近では、タイトルの下に“目次”があり、見出し部分をクリックすれば、すぐにその内容文へジャンプする、という記事も増えましたね。
ライターという立場上、必死に書いた文章が読みとばされるのは何とも言いがたいですが、「欲しい情報を的確にゲットしてもらうための読み飛ばしは大歓迎」だと思いましょう。

その2:画像を効果的に使う
Web記事の内容をイメージさせるような画像を配置しましょう。ちなみに、記事冒頭に置く画像のことを、アイキャッチ画像といいます。文字通り、目でひきつける画像ですね。

第4回コラムで「文章の内容とシチュエーション・イメージ」といった話をしましたが、画像についても考え方は同じです。

たとえば、自社サイトに掲載する『社内行事の報告的ブログ』を書こうとした日の朝、スマホで偶然にキレイなお花が撮れた、愛犬のかわいらしい写真が撮れたとします。
「和やかな写真のほうが好感持たれるかな?」といった雰囲気やニュアンスで、花やペットの写真を放り込むのは控えたほうがいいです。思わずやってしまいたくなるのですがね。
『社員のオフタイム紹介』を書くのなら、プライベート感があって逆に効果的です。この違い、わかっていただけますか?
要は、内容に直結したイメージ画像を選びましょう!ということです。
写真がなければ、イラストでも良いですね。無料かつ商用利用可の画像ダウンロードサイトなどもありますので、上手に活用してみましょう。

文中にイメージ画像を適時挿入すると、黒文字の間の指し色になりますし、記事に余白ができて、文字のごちゃついた感が解消されます全体文のイメージや見出しに合ったものを差し込んでみましょう。

その3:色や大きさで文字を強調する
「この投稿で絶対に見てほしいポイントはこれや!」という、とっておきの言葉やフレーズってありますよね。
その推し言葉も、平坦に黒文字で並んでいると“読み飛ばし”に遭い、ユーザーが文の核心を見逃してしまうかもしれません。

そこで、推しの言葉に装飾をし、パッと見て目が行く仕掛けをしておくわけです。
よく使うのは“太字と色”ですね。こちらのコラムでも、ここぞという言葉に太字や色付けを設定していますので、過去記事をぜひご覧ください(笑)。
フォントの大きさを変える方法もあります。ただ、見出し設定によって文字の大きさが変わりますので、混同しないように気をつけましょう。

ここで注意を1つ。
強調=赤を用いる方が結構いらっしゃいますが、一般的に色分けは信号の色を基準にします。安全は青、注意は黄、危険は赤 です。
また、モノやシーンを連想させる色味もありますね。職業と関係するカラーもありますので、興味のある方は、業種業態とカラーイメージなど調べてみてもおもしろいでしょうね。
ただ、色数は増やしすぎないように注意しましょう。カラフルな文字が多いと目移りしてしまい、読み手はどれが本当に大事なのかわからなくなります。

まとめと予告
では、ここでまとめを。

【今回の脳内開放の法則】
知りたい情報がある場所を、見出しと色でわかりやすく!
文章は、画像や余白で見やすくすべし!

見出しの話をしたところで…これをふまえて次回、第6回「『読みやすい』文章を書くための手順123」をお届けします。乞うご期待。

profile

竹林みか
たけばやし・みか:大分県宇佐市生まれ。
ネコがいて甘いものがあれば、ある程度の苦境を乗り越えられる“主に主婦。ライターとして仕事を請けつつ、家の中では家事最優先。スキマ時間でデスクに向かい、モニターを睨みながら鬼の形相でキーボードを叩く。原稿の構成に多くの時間を費やし、納期ギリギリまで文章をこねくり回して自分を追い詰めるタイプ。
常に最高と最低の状態を想像して、メンタルの疲弊をブロックする習性がある。想像力&妄想癖強め。女性起業家プロジェクトIGCメンバーに加入し、ライター業ほかさまざまな活動を通じて事業経営のカタチを日々勉強中。
関東圏Web制作会社の依頼で執筆を重ね、現在は県内お取引が中心。「人の縁・かかわり」を育みながら、出前講座やフリーランスの働き方を語る講話の依頼をこなす。
平成29年よりスタートした「大分県在宅ワーカー(現:テレワーカー)養成講座」内ライティングコース講師を5期に渡り担当している。
■ブログ
https://tiku-kaku.amebaownd.com

■女性起業家プロジェクト「iGC」プロフィール
https://suits.media/igc44/profile/539

■Facebook
https://www.facebook.com/mika.takebayashi.79