HTMLの行間 ：UXデザインの良し悪しを決める境界線

 HTMLの行間 （段落内の2つのテキスト行の間の垂直方向のスペース）は、UXデザインの世界ではさほどエキサイティングなものではありませんが、思っている以上に重要な要素です。このスタイリング要素には、UXデザインの4つのうちの2つ、エクスペリエンス戦略とインタラクションデザインが関わっており、素晴らしいユーザーエクスペリエンスを生み出すために使用されます。しかし、それ以上に重要なことがあります。

ここでは、 HTMLの行間 について簡単にご紹介します：

•  HTMLの行間 には、文章の読みやすさを左右する力があります。ユーザーはコンテンツを読むことができなければ、「戻る」ボタンを押すか、アプリを終了してしまうでしょう。
• ユーザーがコンテンツを読むことができなければ、ユーザーは「戻る」ボタンを押したり、アプリを終了したりするでしょう。アクセシビリティの観点からも非常に重要であり、法的な基準や要件が増え続けているため、正しい行間を使用しなければユーザーを遠ざけてしまうリスクがあります。
• 適切な行間は、ウェブサイトやアプリの成功を左右します。とてもシンプルなことです。

このガイドでは、HTMLの行間について深く掘り下げ、正しい行間の取り方をご紹介します。

 HTMLの行間 はどのようにしてデザインをより読みやすくするのか？

行間はフォントの問題ではありません。UXデザインの問題なのです。しかし、デザイナーがこの話をするのを最後に聞いたのはいつでしたか？行の高さが重要なのは、テキストが読みやすいか読みにくいかを決めるからです。

• 行間が広すぎると、余白が多すぎます。文字がぎこちなくなってしまいます。
• 行間が小さすぎると、文字がぎゅうぎゅう詰めになってしまいます。テキストは不恰好に見えます。

ほとんどのUXデザイナーは、130～150パーセントの行間が読みやすさ（1.3～1.5）のために最適であり、140パーセント（1.4）が黄金比であると学びますが、その公式がすべてのユーザーのためになるとは限りません。あなたのクライアントのスタイルガイドには、行間の要件が120パーセントから200パーセントの範囲で記載されているかもしれませんが、そのスタイルガイドは、ウェブアクセシビリティが考慮されるずっと前に、誰かが何十年も前に書いたものかもしれません。読みやすさが向上するのであれば、現状の変更を検討してください。(アクセシビリティについては、次のセクションで詳しく説明します。)

残念ながら、デザイナーが納得するようなマジックナンバーはありませんので、CSSで試行錯誤するしかありません。このサイトのように、最適な行間やフォントサイズを計算してくれる計算機もありますが、最終的な判断はデザイナーであるあなたがすることになります。UXPinのようなデザインツールを使えば、本番前に行間や文字の大きさを試すことができます。世界的に有名なUXデザイナーが使用しているのには理由があります。無料トライアルに参加してみませんか？

アクセシビリティのために HTMLの行間 が重要な理由

アクセシビリティは今、UXデザインにおいて大きな話題となっていますが、それは当然のことです。優れたデザイナーは、障がいのある人を含むすべてのユーザーに有意義な体験を提供する製品を設計します。米国では、6,000万人以上の成人が何らかの障害を持っています。これは人口の約4人に1人に相当します。しかし、プロトタイプや製品を作成する際に、障害者の要求を考慮するUXデザイナーはほとんどいません。この状況を変える必要があります。今すぐに。

ウェブのアクセシビリティ基準を策定している国際的なコミュニティであるWorld Wide Web Consortium（W3C）は、次のように述べています：

• 行間は、段落内では少なくとも1スペース半は必要です。つまり、フォントサイズの150％または1.5倍程度です。
• 段落の後の行間は、少なくともフォントサイズの2倍にしてください。
• 文字と文字の間のスペースは、少なくともフォントサイズの0.12倍としてください。
• 単語と単語の間のスペースは、フォントサイズの0.16倍以上にしてください。

これらは単なるガイドラインであり、法律ではありません。また、W3CはUXデザイナーに何かをさせることはできませんが、アクセシブルデザインの原則は、デザインチームに道徳的な義務をもたらします。障害のある人の中には、何年もウェブサイトやアプリに関わることができない人もいます。よりアクセシブルなデザインへのシフトは、すべてあなたのようなUXデザイナーから始まります。

 HTMLの行間 がUXデザインを左右する

 HTMLの行間 は、ユーザーには気づかれないかもしれませんが（よほどひどい場合を除いて）、この微妙なスタイル要素が、プロトタイプや完成したデザインの成功を左右します。UXデザインプロジェクトの開始時には、この問題についてチームと話し合い、クライアントの概要、スタイルガイドやデザインシステム、人口統計学的要素、その他実装を予定しているすべてのデザイン要素を考慮してください。決まったものはありません。行間の調整は後からでも可能です。

他のタイポグラフィ要素も常に考慮することです。フォントサイズ、テキストの長さ、文字間隔はすべて行の高さに関連しており、これらの要素を正しく把握することがあなたの仕事です。一般的なルールとしては：

• 大きなフォントは、行間を短くした方が見栄えがします。特にヘッダーはそうです。
• 文字サイズが小さい場合は、行の高さを大きくするとよいでしょう。
• 段落の幅が広い場合は、行間を多めにとるとよいでしょう。
• 長い段落も同様です。

最近行われたアイトラッキングの実験では、104人の人がウィキペディアのテキストを読み、研究者はテキストの行間を0.8から1.8に変えて、読みやすさと理解度を測定しました。その結果は？0.8と1.8の両極端の行間では、読みやすさが損なわれており、テキストが多いウェブサイトでは、より控えめな行間を使用すべきだと考えられます。間隔をこの範囲の真ん中あたりに調整すると、最も効果的であることがわかりました。繰り返しになりますが、行間を1.3～1.5程度にすることには議論の余地がありますが、それは文脈によります。

まとめ

HTMLの行間に黄金比はありませんが、次のプロトタイプにテキストを組み込む際には、読みやすさ、アクセシビリティ、そして全体的な美しさを考慮してください。UXデザイナーでこのスタイリング要素について考えている人はほとんどいないので、あなたはデザイン革命の最前線に立つことになります。 タイポグラフィを強化し、スタイリングを効率化するNo.1のUIデザイン・プロトタイピングツールであるUXPinで、完璧な行と文字の間隔を見つけてください。無料でお試しいただけます。