デザイン理論: テキストの読みやすさと可読性

<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストールしました。ちょうどその頃、グラフィックデザインの仕事をしている友人がデザインについて相談に来ました。私がノートパソコンの前でURLを入力しようとしたとき、友人が私のパソコンに近づいてきて、「おい！君も私の昔の同級生の「ガオ・リャン」を知っているだろう！」と叫びました。
あまりの怖さに冷や汗が出ました。

ほぼすべての製品でテキストが使用されています。小さなエラー、警告、プロンプトメッセージから、大きな紹介、特別な計画、広告コピーまで。テキストに問題がある場合は、修正にかかる費用は非常に安価です。しかし、テキストのユーザビリティが良くないと、製品に直接影響を及ぼします。
私はテキストのユーザビリティを、読みやすさと可読性の2 つの側面として理解しています。
認識とは、インターフェイスにテキストが表示されたときにユーザーがそれを正常に読めるかどうかを指します。デザインで遭遇する最も一般的な問題は、フォント、フォントサイズ、行間隔、テキストの間隔に関するものです。中国のWEBデザインでは、12サイズと14サイズの宋字フォントが最もよく使われています。いくつかの国内主要ポータルサイトを見ると、これは中国のネットユーザーの読書習慣になりつつあります。
リストや長い段落のテキストに遭遇した場合は、行間隔にも注意する必要があります。たとえば、Songti フォントサイズ 12 を使用する場合、通常は 18 ～ 20 ピクセルの行間隔を使用します。 Songti フォントサイズ 14 では通常、行間隔は 22 ～ 24 ピクセルになります。

WEB をデザインする場合、グラフィックデザインでは単語間のスペースを考慮する必要はなく、デフォルトの状態をそのまま使用します。
しかし例外もあります。ニュースページのタイトルなどでは、18 ポイントの太字フォントや Song スタイルのフォントが使用されることがあります。
UCDCHINA.COM の記事の上部右側に「-」と「」の記号があることを特に言及することが重要です。

これは、視力の弱い読者や高齢者の読者が大きなフォントを必要とする場合に配慮されたデザインです。
「」機能を使用すると、テキストの読みやすさを向上させることができます。
同時に、デザイナーはテキストの色、太字、配置、コントラスト、リンクスタイルなどの問題も考慮する必要があります。特定の情報を強調するために、通常はテキストを太字にしたり、フォントの色を変更したりしますが、注意して使用する必要があります。次のように強調しすぎると、強調しないのと同じになります。

保守的なデザイナーの中には、リンクされたテキストに下線を付けることを強く要求する人もいますが、大きな領域に下線付きのリンクが表示されることに非常に嫌悪感を抱くデザイナーもいます。
重要なのは下線の問題ではなく、リンクのあるテキストは他のテキストと明確に区別する必要があるということだと思います。のように：

読みやすさの面では、多くの問題が発生する可能性があり、デザイナーは問題に遭遇したときにそれを排除する方法を学ばなければなりません。よく発生する問題は用語です。製品を設計するときには、無意識のうちに用語を使用することが多いためです。多くの用語は私たちにとっては簡単ですが、対象ユーザーグループにとっては簡単ではありません。
たとえば、「ISP」という用語の使用を避け、代わりに「インターネットサービスプロバイダー」と言います。ユーザーに「PV」ではなく「トラフィック」などを伝えます。
用語を当然のこととして受け止めるのではなく、ユーザーの言語を使用するように努めるべきです。用語を使用する必要がある場合は、毎回一貫性を持たせてください。「検索」、「発見」、「クエリ」を異なるタイミングで使用しないでください。一貫性がないと、ユーザーの学習コストが増加します。
もう一つのよくある問題は、曖昧さと意味の不明瞭さです。
例えば、前述の「ハイライト」は、実は、クラスメイトをガオ・リャンと関連付けるかどうかが重要なポイントではなく、「ハイライト」が表す機能が混乱を招きます。誰が誰をハイライトするのか、なぜハイライトするのか、
ハイライトしなくても大丈夫ですか？高くなったり明るくなったりしますか?これは誤解の問題ではなく混乱の問題です。それが何のためにあるのかわからなければ、当然、あえて使用することはありません。

<<: React 手書きタブ切り替え問題

>>: CSS でテキストシャドウと要素シャドウ効果を使用する