読者さんから記事がどう見えているか、そこへの気配りは気持ち良く記事を読んでもらう為には欠かせません。

メンバーさんには特に添削を通して、意識的にレベルアップしていただいているポイントなのですが、特に初めて記事を拝見する場合などは、この見せ方に問題がある場合が多いです。

タイトルに「文字をデザインする～」と書きましたが、これはフォントを変えましょうとか、そういった話ではありません。

同じ文字でも、見せ方によって精読率は大きく変わってくる。そこをポイントとした情報をお届けしていきたいと思います。

読みやすい記事の考え方の基本

私は添削でよく「文字だらけ感を減らしましょう」という話をします。

シンプルに読みやすさで言えば、文字ばかりが続く文庫本と、挿絵ですとか、余白なども含めた表現のある雑誌、このどちらが読み進めやすいかを考えてみると、基本的には雑誌に軍配は上がりますよね。

（私は活字中毒で、文庫本とか単行本をせっせと読みます。決して文庫本をバカにしている訳ではありませんので、悪しからず）

ワードプレスで作る記事においても、そうした雑誌的見せ方を意識することが大切だと言って良いでしょう。

その上で、挿絵を入れるというのが恐らくは一番思いつきやすいところかと思いますが、そこは誰もがやっていることですので、今回は文字という点にこだわっています（と言いますか、挿絵を除いてはほぼ文字の見せ方のみです）。

基本中の基本も含めて挙げていくと…

• 章を作る（見出しタグを使う）
• 段落を意識する
• 箇条書きを使う
• 囲み枠を使う
• 表を使う
• 文字装飾を使う

この6つが土台となる意識ポイントだと考えています。

1つ1つを細かく解説していくとしましょう。

章を作る（見出しを使う）

ほとんどの方は最初からこれは出来ているのですが、時折芸能人の日記ブログの様に、章分けされていない記事を作られる方がいらっしゃいます。

この記事で言えば、「読みやすい記事の考え方の基本」が大きな章の見出し、そしてその中に「章を作る（見出しを使う）」「段落を意識する」「箇条書きを使う」などの小さな章の見出しが入っていますよね。

これらを利用することで章分けを表現しています。

情報が大きく区分けされることで、どこで何を読んでいるか。ここがハッキリと分かりやすくなり、読者さんとしては不安なく読み進められる様になってきます。

こうした、文字をどう分けるかというのも文字デザインの1つですね。

ただし、章を表現するといっても、単純に文字を大きくして太字にすれば良いという訳ではなく、h2やh3、h4といった見出しタグを使うことが大切です。これによって検索エンジンのクローラーは、どこが見出しかを把握して、記事の構成を正しく認識してくれる様になりますからね。

見出しタグが分からないという方は「ワードプレス 見出し」等で検索して、基本知識を得ておきましょう。

段落を意識する

章分けとは別で、更に細かく情報を区切る単位が段落です。

例えば…

段落分けをせずに一気に書いてみましたが、上記の様な形だと頭を休める暇なく読み続ける必要があり、読み進めるのは大変だと言えます。

これを段落分けすると…

こんな感じになります。読みやすさの観点で言えば段違いですよね。

この様にに、どこまでが段落になるかを意識して、途中途中で余白を取っていくことが大切です。

なお、最近はスマホを利用する読者さんの方が多いくらいなので、スマホへの意識が欠かせません。スマホだと、5、6行くらいが読みやすさの残る段落の文字量の最大値だと思っています。

そこを意識して、添削では（文字サイズにもよりますが）PCで大体3行まで。長くとも4行までを1つのルールとしてお教えさせていただいています。

なお、1文1文で改行を入れられる方もいらっしゃいます。これもアリではあるのですが、その場合、時折改行幅を大きく取ることで段落を表現するのがお勧めですね。私自身は2文3文と時には繋げて、文章を表現するのが好みではあります。

また、時折改行幅を大きく取るというのは、どんな場合でも大切なことではありますね。話が変わるタイミングなどでは余白を大きめに取り、情報の移り変わりを表現する。ここも読みやすさを出すポイントです。

箇条書きを使う

箇条書きと言えば、複数の情報を並べる時などに使うイメージをお持ちかと思います。それはその通りなのですが、ことウェブデザインにおいては「情報を浮き上がらせて目立たせる」という役割も付加されます。

勢いだけの文章で恐縮ですが、また例を出すとしましょう。

段落分けはされているものの、これだと2段落目が少々情報過多で読みにくい感じが出てしまっています。こちらに箇条書きを入れて…

こう表現してみると、随分と見た目が変わるのがお分かりいただけるかと思います。

ただ複数の情報を並べるのが目的ではなく、ニックネームというこの文章の重要ポイントをしっかりと浮き上がらせてくれる。そこも大きなポイントですよね。

そうした特徴を生かしつつ、私は以下の様に、1行だけの箇条書きを使うこともあります（厳密には箇条書きとは呼べませんが）。

• 目立たせたいものを目立たせる効果がある

文字サイズを大きくて、かつ太字にもしていますが、通常の装飾よりもより浮き上がり感が強く出ますので、重要な結論などでは積極的にこの形を採用しています。

囲み枠を使う

記事中で、段落を使う使わないの例、箇条書きを使う使わないの例などで登場しているのが囲み枠です。

こちらも、普段の横並びの文字とは違う見え方をしますので、情報の浮き上がりがあり、文字だらけ感を薄めてくれる存在だと考えています。

私の記事の場合、だいたいどんなコンテンツにも箇条書きと囲み枠は複数回登場するのですが、簡単に雰囲気を変えてくれるので、本当に重宝する存在として長年活用してきました。

囲み枠については、ここまでで使った形の他、「章が長くなりすぎた時に話が変わるタイミングで入れる」という使い方をするのも私のお勧めです。

この、「ここから話が変わる」から後は、そのまま枠を使わずに続けて書いても不自然ではありません。ただし、デザインが単調になり、決して読みやすいとは言えなくなります。

それ故に、敢えて囲み枠を利用することで、章内の情報にバラエティ感を持たせているのです。

表を使う

表については使う必要があればであって、全記事で必須という訳ではありません。

ですが、会社で使うレポートなどと同じ様に、複数の情報が一気に入るものであれば、やはり表にするのが見やすくて良いですね。

例えば、PRIDEコミュニティの幹部情報を表にするとこんな感じです。

これを文章で見やすく表現するというのは極めて困難かと思います。

栄養だったり、クレジットカードのスペックだったり、いろんな場面で表が欲しいところは登場します。そうした時は、他で表現しようとせず、表を使っていくのが一番ですね。

表については基本的にはテーブルタグを利用します（こちらも分からない場合は検索）。

ただ、私の場合は1つ1つのタグを組むのが面倒で、かつデザインも大変なこともあり、”TablePress”というプラグインを利用することがほとんどですね。直感的に表が作れるプラグインです。

「TablePress 使い方」等で検索すると、解説記事が数多く出てきますので、使ってみようという方はそうした記事を参考に表を入れてみましょう。

なお、列数が多すぎる表はスマホだと極めて読みづらくなります。多くても4列程度までで考えるという感覚が大切ですね。あまりにも列数が増えるものは、他の形に出来ないか、もしくはキャプチャを撮って画像にするなどの方法を考えてみてください。

文字装飾を使う

最後は文字装飾です。こちらについては意識的に使っている方も多いですし、取り上げるかどうか悩みましたが、入れておきます。

その理由は、添削をしていると装飾過多になってしまっている方を多く見かけるからです。

装飾は入れすぎるとデザインがうるさくなってしまい、どこに注目して良いかが分かりづらくなってしまいます。基本的に注目ポイントを目立たせるのが装飾なのにです。

入れすぎないことが装飾のコツですね。

合わせて、例えば赤太字ばかりを装飾に使ってしまうと、見え方が一本調子になってしまい、これまた注目ポイントが紛れてしまいます。

私自身のサイトでの利用方法で言えば…

• 黒太字
• 赤太字
• 色付き下線（主に黄色）

この3つをザックリ言えばローテーションで利用する様にしています。

もちろん、箇条書きの黒太字とか、通常の赤太字はより目立つデザインですので、多少はより目立たせたいところを意識した使い方をしますけどね。

使う装飾の種類は好みで構いませんが、頻度を多くし過ぎないこと、そして、連続で同じものを使い過ぎないこと、あとは種類を増やしすぎないこと。この辺りをポイントとして頭に置いておいていただければと思います。

文字は見せ方次第で読みやすくも読みにくくもなります。

もちろん、挿絵となる画像も大切ですが、それだけを拘っても、決して「ライバルと比べて」読みやすくはなりません。

企業さんのキュレーションサイトなどでは、見出しや段落は使っているけど、それ以外の要素に掛ける場合も多く、箇条書きや囲み枠を活用することで見せ方という観点では差別化することが出来ます。

そのあたりの工夫もまた、記事の評価を上げる為には大切ですので、ぜひ色々と考えながらデザインを進めてみてくださいね。

ちなみに、このサイトでは挿絵はほぼ使わないと決めています。今回の記事で出た文字デザインの要素は、過去記事も含め、全ての記事で活用していますので、振り返りの意味も含め、デザインに注目して色んな記事をチェックしてみましょう。