web-dev-qa-db-ja.com

本文の読みやすさを向上させるにはどうすればよいですか？

私は自分のサイトの読みやすさを判断するのは常に難しいと感じており、そこには矛盾する情報がたくさんあります。だから私はここでいくつかのオプションを尋ねると思いました。私のサイトをざっと見て、読みやすさが良いかどうか教えてください。

http://www.forex4noobs.com/forex-education/

私がまだそれらで遊ぶ必要がある緑と黒の見出しを無視してください。本文についてアドバイスが必要です。

現在の設定は次のとおりです。

font-family:"myriad-pro-1","myriad-pro-2",HelveticaNeue,Helvetica,Arial,serif;
font-size:14px; 
line-height:1.43em; (roughly 20px)

読みやすさを向上させる方法についてのアドバイスは大歓迎です。

website-designusabilityfontlegibilityfont-sizes
7
Nick

最大の問題は、明るい色（この場合は緑）によって失われる視覚的強調です。 「他の色を無視する」と言えますが、読みやすさの最大の問題です！したがって、その色に手を加えずに読みやすさを向上させることは困難です。

  • 左側のメニューは非常にコントラストが高いため、メインテキスト領域から読者の注意をそらす原因になります。メニュー項目の緑の背景色を削除または減らすことで、メニューの視覚的な重みを大幅に減らします。
  • ヘッダーに使用されている緑色は明るすぎたり、コントラストが低すぎて読みにくくなっています。また、大きくて太い黒いヘッダーの真上に配置されることが多いため、視覚的な強調が少なくなります。しかし、その黒いヘッダーは実際には緑のヘッダーのサブヘッダーです。色を切り替えて、重要なヘッダーを大きくして、正しい階層をより明確に示すことを検討してください。グリーンもかなり暗くします。私はそれを読むのに問題があり、私は太陽の下にいません（または視力が悪いのです）。
  • ページのタイトルは緑色ですので、やはり見えません。黒または飛び出す他の色にして、それをはるかに大きくします。ヘッダーと本文の間にマージンを追加します-空白は強調するのに役立ちます。
  • テキストの段落とサブヘッダーの間に空白を追加して、新しいセクションに入っていることを強調します。
  • コンテンツの後にページ下部に空白をたくさん追加して、ページを読むためだけにモニターの下部に目を向ける必要がないようにします。ここの空白は、すべてを詰め込むのではなく、目を休ませます。
  • 本体のフォントの選択とサイズは、行の高さと同様、かなり大丈夫です。段落間の行の高さを少し増やすことを検討してください。
  • なぜVerdanaとArialを無計画に使用するのですか？ 1つのフォントに固執することで読みやすさを向上させます。経験則としては、フォントをファミリごとに1つに簡略化することです（例：serif/sans-serif）。これはあなたが読んだテキストにのみ適用されます。明らかにデザイナーは他の目的のためにフォントを自由に選択できるべきです。

Webkitのインスペクター機能を使用していくつかの点を変更し、私が話していることを理解できるようにしました。

enter image description here

注：メニューの画像が表示されなくなった途中で、それは意図的ではありませんでした。持っておく！彼らは素晴らしい章の指標です。

13
Rahul

私の第一印象は、テキストの終わりと新しいヘッダーの間のスペースを増やすべきだということです。サイトは「重い」印象を与え、多くのテキストはかなり狭いスペースにあります。多くの場合、空白、画像、またはテキスト以外の何かがサイトを明るくするために使用されます。

4
Henrik Ekblom

まず、忍者の例えが大好きです。つまり、忍者を間違えることはありません。

ただし、1ページで達成しすぎているようです。メッセージを複数のページに分割し、情報を簡潔な段落に要約します。次に、より詳細な情報へのリンクを提供します。

読者にもっと読んでもらうように促す陳述をする。あなたの最初の質問はこの良い例です。読者の注意を引くために、フォントを増やすことをお勧めします。

私たちの外国為替忍者アカデミーに参加してみませんか？

最初のメッセージでリーダーをフックすると、自動的にクリックしてさらに読み上げます。

よくやった！

2
Dubs