ユーザー体験を向上させるテキストの下線の使い方

連載

エクスペリエンスデザインの基礎知識

下線はテキスト直下の水平な線です。日常生活では、印刷物の強調したい箇所にペンで下線が引かれます。しかし、デジタルデザインの世界では、下線には別の意味があります。実の所、下線はオンラインで最も認知されている機能の一つです。Webページで単語や文章に下線が引かれていたら、誰もがそれはリンクだと仮定するでしょう。

この記事では、下線のコンセプトを解説し、Web体験を向上する使い方のヒントを紹介します。

歴史的な背景

テキストへの下線は、Webが登場するずっと前から存在しました。例えば、テキストの重要な箇所を強調するために。

画像提供元: Marcin Wichary

広告でも下線は使われてきました。

リグレーのスペアミントの広告（1915）

生活環境の中でも見られます。

道路標識は、重要な情報に下線付きのテキストを使うことがある 画像提供元： Tyler B

今日のデザイナーは、あまり強調を目的としてテキストに下線をつけることがありません。そのような外観は邪魔になると考えられているからです。

リンクに下線が引かれた経緯

1991年、ティム・バーナーズ=リーが最初にワールド・ワイド・ウェブのコンセプトを提示したとき、彼は、「ワールド・ワイド・ウェブは、文書とリンクから構成される」と言いました。それ以来、リンクは、ワールド・ワイド・ウェブをひとつにまとめる接着剤として、オンライン体験の基本的な要素になりました。

初期のWebデザインに使えた手段はごく限られていました。単純な書体とごく限られた数の色です（カラーモニターは16色表示で、モノクロモニターが大半でした）。それでも、リンクを異なるスタイルで強調することは絶対に必要でした。そこで、最も簡単な解決方法が、下線を引くことだったのです。それ以来、下線はHTMLリンクの標準的な装飾になりました。過去30年の間にデザイナーはさまざまなスタイルをリンクに試してきましたが、下線は今でも多くのデザインで好んで使われています。

青い下線のリンクはWebの最も広く認知された慣習のひとつ 画像提供元： Cern

下線付きのリンクには、いくつかの大きな利点があります。

こうしたすべての利点があるとしても、下線はいくつかの面でユーザー体験を損なうことがあります。

最適な下線をデザインする

最適な下線のデザインについて詳細を議論する前に、目的を明確にしておきましょう。つくりたいのは、ちゃんと目に留まって、でも目立ちすぎない下線です。ユーザーは、見たときにそれがリンクで操作可能なことをすぐに理解できるべきです。しかし、下線が独立した要素であるかのように強く主張すべきではありません。

リンク以外のテキストに下線を付けない

リンク以外のテキストに下線を付けるべきではありません。たとえリンクに下線を付けないデザインだとしてもです。下線は、クリック可能という認識を強く与えるため、その期待に合わないとユーザーの混乱や不満の元になります。単語や語句を強調したければ、太字等を使用する方がずっと安全です。

長い下線を引かない

下線を引くフレーズは短くしましょう。せいぜい単語3つから5つ分です。それ以上長いとテキストの見た目がごちゃごちゃします。

下線を付けたテキストの意味をはっきりさせる

下線の引かれたクリック可能なテキストは記述的にし、ユーザーがリンクをクリックしたら何が起きるのかを予期できるようにするべきです。という訳で、「ここをクリック」をリンクに使うのは避けましょう。リンク先に何があるかがほとんど表現されていないため、ユーザーは更なる情報を求めて探す羽目になります。

また、「ここをクリック」にリンクすることは、スクリーンリーダーを使っている人に、サイトを使いにくくするという面もあります。多くのスクリーンリーダーは、リンクの前に「リンク」と言います。「ここをクリック」がリンクされていれば、「リンクここをクリック」です。これはまったく役に立たない情報です。

グーグルの検索エンジン最適化スターターガイドによれば、リンクテキストの冒頭にリンク先のページを予期させる単語を使用することはとても重要です。

「ここをクリック」は単独では無意味。2つ目のリンクは、ユーザーがクリックしたときに何を得られるのかという期待を設定する

リンクに一貫性を持たせる

一貫性は、サイト上でのリンクの見つけ方をユーザーに知らせる鍵です。リンクによって下線が付いたり付かなかったりする状況は避けるべきです。ページごとに異なる視覚的な合図を使えばユーザーは混乱するでしょう。一旦、リンクのデザインを決めたら、それを守りましょう。

デザインの一貫性は個々のサイトだけで重要なのではありません。例えば、CNNのサイトの異なる部門は、異なるリンクスタイルを使用しています。CNN Styleのリンクは下線付です。「David de Rueda」の箇所のように、記事内のすべてのリンクは下線が引かれています。

一方、CNN Sportは、リンクを視覚的に区別するための手段に色を使っています。「READ: Inside the Kodokan — judo’s spiritual home」の箇所のように、記事内のすべてのリンクは色をを変えて、視覚的に差別化されています。

文字のディセンダーとの重なりを避ける

欧文書体にはディセンダーと呼ばれるベースラインより下に出た部分が存在します。ディセンダーと下線の重なりは、おそらく見た目の煩雑さの次に重要な、下線が引き起こす問題です（p, g, j, y, qのようにディセンダーがある文字への配慮が無い場合に発生します）。見た目が煩雑になるだけでなく、醜く読みにくいテキストになります。

y, g, pのディセンダーが下線と重なり読みやすさが低下している

適切な下線は、文字のベースラインに位置し、文字との重なりを避けます。特定の文字の下で下線を隠すのは、読みやすさを改善するだけでなく、より洗練された見た目につながります。

Adobe XDの下線の例。下線は、文字と重ならない箇所、あるいは近づき過ぎない箇所だけに引かれる

文字との重なりはどのように避けたらよいでしょうか？Webでの下線は、CSSのtext-decoration属性の値にunderlineを指定するのが基本です。残念ながら、この属性はディセンダーとの重なりを考慮していません。

最も単純な解決手段は、CSSのtext-decoration-skip属性を使うことです。要素のどのような箇所で装飾をスキップするかを指定できます。テキスト要素への下線指定だけでなく、親要素によって引かれた下線にも適用されます。

しかし、text-decoration-skip属性は、まだすべてのブラウザでサポートされていません。もし、重なりがテキストを読みづらくしているなら、代替手段（box-shadowなど）も検討の価値があるかもしれません。

text-decoration-skip属性がサポートされるブラウザでは、yやpなどの文字の周囲に少し空白ができる

リンクのリストには下線を引かない

すべての要素がリンクであるリストでは、下線を引かなくても問題ありません。この場合には、レイアウトがその領域の機能を明確に示します。

リスト内の個々の要素に下線をつける必要は無い 画像提供元： Wisegeek

色

色はデザイナーの強い味方です。リンクを他のテキストから目立たせるためにも使用できます。

クリックできないテキストを色で目立たせない

リンク以外のテキストの色を変えるのは避けましょう。ユーザーは、色付きのテキストをリンクと勘違いするかもしれません。

リンクの色はいつも青？

必ずしもそうではありません。ヤコブ・ニールセンによれば、「青い線はリンクを最も強く伝えるが、他の色も同様に機能する」とのことです。しかし、もし色を自由に選べるのなら、青は常に最適の選択です。サイト閲覧の経験者は、青い下線をリンクと自然に関連付けます。他にも、青には他の色よりも優位な点があります。色覚異常の人に最も分かりやすい色なのです。

もし、青以外の色をリンクの色に選んだ場合でも、青をリンクではないテキストに使うのは避けましょう。クリックできない青いテキストは、ユーザーをいらつかせるでしょう。

訪問済みリンクの色を変える

訪問済みのリンクの見た目を変えると、ユーザーはこれまでに何を見たのか容易に判別できるようになります。色はリンクテキストとの関連が分かるように、同じ色の変種を使うべきです。未訪問のリンクの色は明瞭に、訪問済みのリンクの色は少しくすませましょう。

モバイルへの配慮

いまや、ほぼ50%のユーザーがモバイルデバイスからアクセスしています。Web体験をモバイルユーザーに最適化するのは、デザイナーの最優先事項です。

モバイルアプリではリンクを使用しない

モバイルアプリでは、下線付きのリンクの使用は避けるべきです。下線はサイトでは有効ですが、アプリのモデルには適合しません。アプリはリンクではなく、ボタンを使うべきです。

iOS向けTD Bankのアプリ

リンクの大きさを確保する

親指でリンクをタップするのは困難な操作です。特に、リンクが見つけづらく、拡大しなければならない場合は大変です。タッチスクリーン上では大きさが重要です。操作対象になる要素は、見つけて操作することが簡単にできる十分な大きさを確保しましょう。

まとめ

リンクはインターネットを成り立たせている根幹です。スティーブ・クルーグは彼の著書「ユーザーに『考えさせない』デザインの法則」の中で、「人々がWebで行っていることの多くは、次にクリックする対象を探すことです。だから、何がクリックできて何ができないかを明確にするのは重要です」と書いています。しっかりとしたビジュアルデザインは、ユーザー体験を楽しいものにする基本です。下線には欠点もありますが、リンクを示す最も明確な手段の一つです。下線を正しく使って、訪問者にリンクを見つけやすく且つ使いやすくしましょう。

この記事はHow To Use Underline Text To Improve UX（著者:Nick Babich）の抄訳です