ブログの読者、コメント、シェアを増やすための 5 つの簡単なフォント変更

公開: 2023-09-14

このゲスト投稿は、Information Highwayman の Bnonn によるものです。

気づいていないかもしれませんが、ブログのフォント設定は、コンテンツを読む人の数に大きな影響を与える可能性があります。

そして、何人の人があなたのコンテンツを読むかは、投稿が拡散するかどうかに大きな影響を与えます。

どのくらい巨大ですか？私が読んだいくつかの報告によると、色に関するよくある間違いが 1 つあるだけで、読者数が 5 分の 1 に減少する可能性があります。そして、もしあなたがその間違いを犯していないとしても、おそらく他の 4 つの間違いのうちの少なくとも 1 つを犯しているでしょう。そこでこの記事では、読者をコンテンツに釘付けにし、古い「戻る」ボタンから遠ざけるためのテキストの表示に関する 5 つの最も重要なベストプラクティスを紹介します。

フォントサイズ - 最小 16 ピクセル

読みやすさの問題の山の一番上にあるのはフォントサイズです。 2005 年に、ヤコブニールセンは、Web デザインの問題に関する調査で、悪いフォントが次の候補のほぼ 2 倍の票を獲得し、有権者の 3 分の 2 がフォントサイズが小さいことに不満を抱いたと報告しました。

悲しいことに、それ以来何も変わっていません。 SiteInspire (最高のデザインの中から最も優れたものを紹介する Web デザインギャラリー) での新しいブログデザインのランダムサンプリングによると、本文の平均フォントサイズは12 ピクセルです。 10 ピクセル程度のものもある。 14 ピクセルを超えるものはありません。同様に、人気のある Elegant Themes または ThemeForest からの製品をランダムにサンプリングすると、すべてのテーマセットが 12 または 13 ピクセルでコンテンツを投稿していることがわかります。

そしてもちろん、他のテーマ作成者も大御所の先導に従う傾向があります。

しかし、ユーザビリティとタイポグラフィの専門家である Information Architects の Oliver Reichenstein 氏が指摘するように、 16 ピクセルはブラウザがデフォルトで表示することを意図したフォントサイズであり、それは大きくありません。平均的な画面上の 16 ピクセルのテキストは、印刷された 12 ポイントのテキストとほぼ同じサイズに見えます。これは、ほとんどの雑誌やすべてのワードプロセッサのデフォルトサイズです。これは、人々が最も読みやすいと感じるサイズであるためです。多くの人、特に 40 歳以上の人は、小さな文字を読むのが非常に難しいと感じています。ライヒェンシュタインは次のように述べています。

これほど多くの情報を画面に押し込む必要はありません。これは、画面が本当にとても小さかった時代に遡る愚かな集団的な間違いです…最初は、デフォルトのテキストの大きさに驚かれるでしょう。しかし、1 日経つと、メインテキストのフォントサイズが 100% より小さいものは表示されなくなります。最初は大きく見えますが、一度使用すると、すべてのブラウザメーカーがこれをデフォルトのテキストサイズとして選択した理由がすぐにわかります。

明るいテキストの上に暗いテキストを使用します。反転は良くありません

幸いなことに、コンテンツ作成者が青いテキストにフクシアがクールだと考えていた時代はほぼ過ぎました。しかし、反転タイプとして知られる黒地に白の文字は依然としてかなり一般的です。他の暗い色に白のようなバリエーションも同様です。

逆タイプでは、わざわざコンテンツを読もうとする人の数が減るだけでなく、コンテンツの理解力も減ります。目に負担がかかるからです。反転したテキストを長時間見つめると、文字が明るすぎて見えなくなる、一種の「ぎらつき」効果が生じる傾向があります。どのような調査を参考にするかにもよりますが、暗いテキストに光が当たると読者数が 50% ～ 400% 減少することが研究で示されています。

なぜこれほど多くの読者を失う危険を冒す必要があるのでしょうか？白地に黒または非常に濃いグレーはきれいに見え、それらの色を使用した素晴らしいテーマがたくさんあります。

行幅 - 45 ～ 75 文字

多くのブログが破っている、あまり知られていないルールがもう 1 つあります。目で次の行を簡単に追跡できるようにするには、各行の文字数は 75 文字以下にする必要があります。これをラインメジャーと呼びます。 75 文字を超えると、迷うことなく 1 つの行の終わりから次の行の始まりまでを追跡するのは困難です。

一方、文字数が 45 文字未満の場合は、1 行を読み始めたばかりのときに次の行にジャンプする必要があるため、目がすぐに疲れてしまいます。休む機会がまったくないように感じます。

このため、理想的な投稿コンテンツ領域には、約 60 文字の長さのテキスト行が含まれます。もちろん、見た目の美しさも考慮する必要があります。多くのブログでは、「理想的な」対策では右余白に大きな隙間ができてしまったり、テキストが小さな領域に押し込まれているように見えたりします。私が自分のウェブサイトで 70 文字程度の文字数を使用しているのは、まさにその理由からです。しかし、80 文字を超えてしまうと、読者の数が減ってしまうことは確実です。

行の高さ - 130% 以上

幸いなことに、これはあまり一般的な間違いではありません。プロフェッショナルなテーマを使用している場合は、おそらく心配する必要はありません。

例として、この段落をデフォルトの行の高さ (古い印刷機でテキストの行を区切るのに使用されていた鉛の細片にちなんでリーディングとも呼ばれます) に設定しました。窮屈で読みにくそうに感じず、一行から次の行が互いに溶け込んでいるので追うのが難しい。

一方、この段落は行の高さが 200% に設定されており、これはワードプロセッサのダブルスペースに相当します。ここでの行が互いにあまりにもバラバラに感じられることに同意していただけると思いますが、研究論文を提出する場合を除き、これは適切な方法ではありません。

最後に、この段落は行の高さが 150% に設定されます。つまり、フォントサイズのピクセルごとに、行間の距離は 1.5 ピクセルになります。これは、ブログで使用する可能性が高いほとんどのフォントにとって、かなり信頼できるスイートスポットであることがわかります。ただし、自分のコンテンツに最適なものを確認するには、約 130% から 160% の間で自由に試してみてください。

左マージン - 壊さないでください

この最後のヒントは、正確にはフォントの問題ではありません。しかし、それは同じ一般的なカテゴリに当てはまります。ブロガーは日常的に投稿に画像を含めます。それが本当に良いアイデアかどうかは別の機会にお話ししますが、今のところは、アドバイスを 1 つだけさせてください。

左端は神聖な部分です。これは、西洋社会でページ内のテキストを追跡する方法です。これは線が伸びていく「地面」であり（多くの場合、かなり異なる長さになります）、ページを読み進めるときの視線の基礎となります。

しかし、左マージンを破ると、すべてが地獄に落ちます。読み続けるためには、目は周りを見回して新しい余白を見つけようとする必要があります。

言い換えれば、画像を左揃えにするたびに、読者の経路にスピードバンプが発生することになります。そして、視覚的に支配的なイメージによって彼の注意をテキストから引き離すことで、問題をさらに悪化させています。言うまでもなく、注意力が散漫になり、左余白の位置を変更しなければならない読者は、投稿の最後まで読まないことが多く、投稿を共有したり、コメントしたりしないことがよくあります。

おまけのヒント: ドロップキャップで読者数が増加

「ドロップキャップ」とは頭文字の大文字を意味し、投稿の最初の単語の最初の文字が他の文字よりも大きく目立つようになります。 Ogilvy & Mather が実施した調査によると、これにより作品の読者数が平均 13% 増加します。

ドロップキャップはほとんどのブログテーマには組み込まれていないため、Web 上で行うのは難しい場合がありますが、少しコーディングができる場合は、ドロップキャップの作成方法についてのこのチュートリアルを確認してください。

5 つの間違い: あなたはどれを犯していますか?

今こそ、自分のブログに戻って、これら 5 つの重要なベストプラクティスのうちどれを実践していないのかを確認してください。じゃあ、フィクサム！ただし、加えた変更を以下のコメント欄で共有することを忘れないでください。

ブノンは自治区では情報ハイウェイマンとして知られており、コピーとデザインの両方を改善することで中小企業のオンライン販売を促進します。誰かのホームページを膝ほどまで読んでいないときは、子供たちにスチームパンク、ネイサン・フィリオン、そして噛まれずにゾンビと格闘する方法について教えています。