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