Webの黎明期から、ハイパーリンクはオンライン上での体験の基礎をなす要素でした。リンクを開くということは、Webを閲覧している人々が最も頻繁に実行する行為のうちの一つであるということが研究で分かっています。
30年以上に渡り、デザイナーたちはリンクの新しいデザインを試してきましたが、今でもアンダーラインが最も広く使われています。青いアンダーラインのハイパーリンクは最も広く理解されているWebでの慣習の一つです。
World Wide Webは文書とリンクから構成される ―Tim Berners-Lee, 1991
一方で、リンクの視覚的表現がUXとユーザビリティに大きな影響を与えているのも明白です。デバイスとユーザー習慣の変化にともない、アンダーラインのリンクはUXとユーザビリティを阻害しているのではないでしょうか？
シンプルで効果的なように見えるとしてもハンブルク大学の研究は、アンダーラインは読みやすさとデザインに不利益な影響を与えていると示しています。
Web閲覧において、リンクは必要不可欠なものであり続けるでしょうが、だからこそ、デバイスの種類が増えてデザインやUXが改善される中で、私たちは自分自身にこのままでよいのかと問いかけなければなりません。
私たちは長きにわたって不変の、アンダーラインされたリンクを使い続けていて良いのでしょうか？
アンダーラインとは？
アンダーラインとは正確には何なのでしょうか？ そしてアンダーラインされたリンクの習慣はどのように発生したのでしょうか？
Webが存在する以前は、アンダーラインは、Wikipediaで定義されているように、「文章下部の平行線で、キーとなるテキストを強調するために利用される」ものでした。この強調の手法としての特徴はデジタル上でのアンダーラインの出現においてもまだ続いていますが、それはより幅広い範囲で必ずしもポジティブではない影響をともなっています。Practical Typographyというブログは、アンダーラインを「まるでタイプライターの時代から続くひどい二日酔いのような習慣」と述べ、今や強調の手法には他の方法があるので、もうアンダーラインを使うのはやめましょうとアドバイスしています。
アンダーラインが青い理由
では、どのようにしてリンクは青いアンダーラインのテキストと同義となったのでしょうか？
Webはタイプされた文章と全く異なるため、テキストはもはや強調を示すためにアンダーラインを必要としていません。Webにおいては、アンダーラインのある単語がクリックされたときユーザーを異なるサイトにリダイレクトするという別の目的で利用されていました。
では、なぜ青なのでしょうか？ それは歴史の偶然です。Tim Berners-LeeのWebブラウザープロトタイプの時代、ほとんどのコンピューターは16色ディスプレイに制限されていました。そして青は黒の次に濃い色でした。技術が急速に発展する一方で、ハイパーリンクの書式は青とアンダーラインのままでした。
アンダーラインのメリット
どうしてアンダーラインがリンクの視覚化としてこれほどまでに支配的であり続けたのでしょうか？ これには正当な理由があります。
クリック率の向上
テキストを読む時、それは視覚的にリンクを保証し、どのリンクがあなたがすでに訪れた物なのかを示します。そして、これらの視覚的なサインは、クリック率を向上させます。
流し読みの補助
アンダーラインされたリンクは文章を中断するという性質を持っています。これによって、ユーザーはページ内の重要もしくは有用な情報に容易にたどり着くことができます。Lee Munroe氏はSmashing Magazineでこのように言っています。「ユーザーは文章を読んでいません。流し読みしているだけです。」
つまり、アンダーラインされたリンクは、ユーザーが流し読みしたり要約するための補助となりえます。これは、Steve Krug氏の「ユーザーに考えさせるな」というユーザビリティの教えを実現するものです。
アクセシビリティ
また、アンダーラインされたリンクは、アクセシビリティの観点でも有用です。色盲や色弱のWebユーザーは、色だけで差別化されたリンクは識別できませんが、アンダーラインされたハイパーリンクであれば問題なく識別できます。
UXへの悪い影響
しかしこれらの良い点があったとしても、アンダーラインされたリンクが批判をまぬがれる意味にはなりません。特にUXに関してはそうです。
Googleがアンダーラインを削除
2014年に、インターネットの巨人・Googleのアンダーラインされたハイパーリンクをやめるという決断により、このことは明白になりました。Googleは色による差別化を支持し自身の検索結果ページ（SERP）からアンダーラインを削除するという決断をしました。主任デザイナーのJon Wiley氏によれば、「読みやすさを改善し、よりクリーンな見た目を生み出すため」のものでした。さらに、多くの記事を持ついくつかのサイトもそのリンクをやめました。例えば、NNGroupはアンダーラインをやめて、ハイパーリンクの書式についての記事を掲載しました。
ハンブルク大学の研究
可読性の改善について、GoogleはアンダーラインされたリンクによってユーザビリティとUXが良くない影響を受けているということをほのめかしています。このことは、ハンブルク大学の研究にも裏付けられています。
同大学は2003年にさまざまな手法で視覚化されたリンクのテストを行い、アンダーラインされたリンクは可読性と全体の内容の理解において最低点であったと発見しました。リンクのついたテキストは読みにくく、リンクのついた単語の理解力を減少させます。「リンクであることのマークはデザイン面での妥協である」と論文では主張されていますが、アンダーラインは読みやすさにおいても妥協であるように見えます。
インターフェースの美しさと視覚的デザインの観点では、アンダーラインはデザイン上の妥協です。AwwwardsやCreative Bloqの「最もミニマリストなWebサイト」のリストを一瞥すれば、アンダーラインを使っているサイトはごく少数であることがわかるでしょう。
リンクの改善と代替案
Webサイトのハイパーリンクをデザインするとき、デザイナーは既存のものを改善するか、ほかの手段を試すことができます。標準的な手法から離れすぎていない１つのオプションは、青の色合いを改善することです。しかし、もしデザイナーがより根本的な改善方法を探しているなら、考慮すべき代替案はハンブルク大学の研究で良いパフォーマンスを示した「色のオーバーレイ」を利用するか、「リンクをオンデマンド」で表示するかでしょう。
リンクの色を変える
リンクの色を決める際には、デザイナーは色盲のユーザーに気を配り色のコントラストを考慮すべきです。全てのユーザーに適合させるため、リンクは黒いテキストに対して3：1のコントラストと、白い背景に対して4.5：1のコントラストを持つべきです。色盲を再現するいくつかのツールが利用可能です（Adobe Illustratorのビューに組み込まれたものを含みます）。これはデザイナーが彼らのデザインが標準に準拠しているか決めるときに非常に役に立ちます。
アクセシビリティを考慮したサイト作成の支援をしているWebaimは、リンクがアンダーラインされていない場合、視覚的障害を持つユーザーがリンクを認識できるように、少なくとも何らかの「色以外の識別子」をリンクが持つべきであると助言しています。
Jakob Nielsen氏が言うように「リンクテキストが色付きであることを前提とすると、リンクをアンダーラインすることは必ずしも常に必要ではない」です。しかし、何らかの方法でリンクを強調する必要は常にあります。
マウスオーバー時にリンクを表示する
この場合、リンクを認識するためにユーザーはテキストにカーソルを合わせる必要があります。これにより、サイトをよりミニマルにすっきりした見た目に見せることができますが、大きな欠点もあります。青いテキストやアンダーラインがないと、ユーザーはリンクを探す必要があるため、リンクのクリック低下に繋がります。
タッチスクリーンの問題もあります。モバイルユーザーはマウスオーバーすることができず、リンクを隠してしまうことになります。Hoa Loranger氏がNNGroupの記事でアドバイスしているように、「テキストがクリック可能か判断するためにマウスオーバーを頼るということは決してしないでください。リンクを探すのは労力がかかるので人々はそれをやりたがりません。
リンクを装飾する
Hoa氏のアドバイスによると、リンクの存在を視覚的に表示することは必須です。しかし、それはいつもの青いアンダーラインされたリンクである必要はあるのでしょうか？
Andy Rutledge氏は、ボーダーや背景色、画像、打ち消し線など、あまり見ることのない代替案について論じています。これらは興味深い結果をもたらし、特定のブランドアイデンティティには適するかもしれませんが、デザイナーはこの選択肢をとる際、可読性への影響について考慮しなければなりません。
次のステップ
アンダーラインされたリンクに固執する必要はありません。アンダーラインは不都合な点とUXへの害を持っているのです。しかし、リンクのバリエーションとUXに優先順位をつけることは必要です。
どのようにリンクがサイトにおいて印付けされるべきか考慮することは、デザインとユーザビリティ両方の観点から意味があります。また、どのような方法にも共通する、UXを考慮したリンクのルールがあります。
- リンクではないテキストにアンダーラインを引かない
- 訪問済みリンクと未訪問リンクで異なる色を使う
- 正しいHTMLを書きリンクをアクセス可能にする
- リンク先を示すメッセージを書く（Click Hereのようなフレーズは避ける）
- リンクフレーズは３ー５単語にする
- サイト全体のスタイルの一貫性と統一性を定期的に保守する
- 100以上のリンクを一つのページに記載しない
