ウェブデザインと制作におけるハイパーリンクの効果の向上

ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このような力は不安を生み出す可能性があります。
ハイパーリンクを使用すると、訪問者はあるページから別のページへ、またはあるサイトから別のサイトへ移動できます。しかし、頻繁にジャンプすると、人々は不安を感じてしまうことがあります。

ユーザーが安心して閲覧できるようにするには、リンクは完全に明確かつ明示的である必要があります。
ユーザーがページをより簡単に閲覧できるようにするには、ハイパーリンクは絶対に簡潔かつ明確でなければなりません。
原則
法
1. テキストハイパーリンクは通常のテキストと明確に区別できる必要があります。
ハイパーリンクテキストは通常のコンテンツテキストと区別する必要がある
2. マウスオーバーの動作にはハイライト効果が必要です。
マウスをハイパーリンク上に移動すると、ハイパーリンクが強調表示されます。
3. ハイパーリンクの内容は、可能な限り短く、かつ次のいずれかを識別できる長さにする必要があります。
ハイパーリンクの具体的な内容は簡潔（短く簡潔）である必要があります。
 · 行き先 [ジャンプ先]
 · 得られるもの [得たいもの]
 · 何が起こってほしいか
4. 異なるターゲットを持つハイパーリンクは明確に区別できる必要があります。
異なる宛先へのハイパーリンクは明確に区別できる必要があります
5. ハイパーリンクには、予期しない結果が生じる可能性があることを示す必要があります。例:
ハイパーリンクをクリックした後に発生する可能性のある、次のような特別な状況について説明します。
 · ファイルへのリンク [ファイルへのリンク]
 · ウィンドウを開いたり閉じたりするリンク[リンクをクリックするとウィンドウが開いたり閉じたりします]
何をリンクしますか?
このハイパーリンクを作成する目的を検討してください
ハイパーリンクコンテンツの例: Amapproved.com
ハイパーリンクコンテンツの例: Amapproved.com
承認されたアストンマーティンを見つけるためのサイトです。全体的には良いサイトです。これは検索結果画面です。検索結果から特定の車両の詳細を表示するにはどうすればいいと思いますか? 唯一のリンクは車両モデルです (車両概要列内)。
この場合は、アストンマーティンの車のウェブサイトです。全体的な外観デザインはクラシックであると言えます。検索結果表示ページです。ここで、検索結果を通じて車両に関する詳細情報を表示する方法を想像してみてください。ここでの唯一のハイパーリンクは、「車両概要列」の「車両モデル」へのハイパーリンクです。
最初の、そして最大の問題は、ハイパーリンクを区別できず、原則 1 に違反していることです。詳細情報を取得するにはどこをクリックすればよいかがわからず、推測する必要があります。
最初の最大の問題は、どれがハイパーリンクであるかを区別できないことです。これは、詳細情報を取得するにはどこをクリックすればよいかわからないため、まずそれについて考える必要があるというルール1 に違反しています。

2 つ目の問題は、リンクがまったく異なるターゲット (それぞれ異なる中古アストンマーティン) を指しているにもかかわらず、同じように見えることです。これは原則 4 に違反しています。このページのすべてのリンクの内容 (車両モデル) が同じであるため、リンクである可能性がさらに低くなります。
2 番目の問題は、これらのリンクは完全に異なるターゲットを指しているにもかかわらず (それぞれのリンクは「 Aston Martin 」という名前を使用しています)、見た目はほぼ同じであるため、上記のルール4に違反していること、さらにすべてのリンクに同じコンテンツが含まれていることです。 (車両モデル[ 車両タイプ] ) のため、ハイパーリンクがわかりにくくなります。
「Aston Martin DB7 GT」をクリックすると、Aston Martin DB7 GT 車に関する一般的な情報が表示されると期待します。リンクはクリックすると何が表示されるかを正確に説明していないため、これは原則 3 に違反します。
「 Aston Martin DB7 GT 」というリンクをクリックすると、車種「 Aston Martin DB7 GT 」に関する一般的な情報が得られると期待します。しかし、最終的に得た情報はリンクの説明と一致していないことがわかりました。これはルール3 に違反します。
彼らは何をすべきでしょうか?
ウェブサイトをどのように改善できますか?
「得られるもの」は、特定の車に関する情報です。特定の車を表すのは、表の行全体です。車には他に一意の識別子はありません (走行距離、価格などは必ずしも一意ではありません)。したがって、行全体をクリック可能なハイパーリンクにする必要があります (マウスオーバー時に行の色/トーンが変わると便利です)。
「得られるもの」は、車に関連する情報である必要があります。特定のモデルを表す情報は、テーブル列全体を占める必要があります。また、特定のモデルの情報 (走行距離、価格など) を含む確認オブジェクトがないため、テーブル列全体がクリック可能なハイパーリンクオブジェクトである必要があります。 (マウスをハイパーリンクの上に移動したときにハイパーリンクの色が変わると識別しやすくなります)。
ハイパーリンクでのサイズの表現
ハイパーリンクオブジェクトのサイズを記述します
ファイルにリンクするときにユーザーの期待を設定するために、コンピューターが次のような情報を表示することはよくあります。
ファイルにリンクする場合、ハイパーリンクにファイルサイズの説明が含まれていることが多く、ユーザーはファイルリンクをクリックするかどうかを決めるのに役立ちます。
例: PDF (46,764 バイト)
ユーザーの目的を考えると、ダウンロードにかかる時間を大まかに知る必要があります。数秒でしょうか、それとも数分でしょうか。一般的には、そのくらいの精度で十分です。
ユーザーの目標について考えてみましょう。通常、ユーザーはダウンロードにどれくらいの時間がかかるかを知る必要があります。数秒でしょうか、それとも数分でしょうか?したがって、できるだけ正確に説明する必要があります。
それは何であるべきでしょうか?
上記のファイルサイズはどのように記述すればよいでしょうか?
ファイルサイズを 2 桁以上表示しても、何のメリットもありません。上記は 47 KB にする必要があります。また、オンラインのファイルサイズには、キロバイトまたはメガバイトのみを使用してください。(2 桁の有効数字で表示される適切なファイルサイズは、4.7 KB、47 KB、470 KB、4.7 MB などです。)
ファイルサイズを記述するときは、2 桁を超える有効数字を使用しないことをお勧めします。上記のファイルサイズは47KBと表記されます。したがって、インターネットでは、ファイルは可能な限りキロバイト ( kb ) またはメガバイト ( mb ) を使用して記述する必要があります。（ 2桁の説明を推奨します： 4.7KB、47KB、470KB、4.7MBなど）
ハイパーリンクの書式設定
ハイパーリンクのフォーマットを定義する
テキストのハイパーリンクを他のテキストと区別する必要がある場合、色や下線/太字などの書式設定を使用して区別する必要がありますか?
テキスト内の異なるテキストリンクを区別する必要がある場合は、ハイパーリンク部分に通常のテキストとは異なる色を使用するか、ハイパーリンクテキストに下線または太字を使用する必要があります。
事実上の慣例では、ハイパーリンクは下線付きの青色で表示され、クリックすると赤色に変わり、訪問済みのリンクは紫色で表示されます。
デフォルトのハイパーリンクアクションに対応する色の変化は次のとおりです。最初はハイパーリンクは青で下線が引かれていますが、クリックすると赤に変わり、アクセスしたハイパーリンクは紫色で表示されます。
ほとんどのテキストを最も読みやすくレンダリングする方法は、白い背景に黒で、テキストのハイパーリンクを青にすることです（# 00f ) は白で非常によく機能します。通常の黒のテキストと明確に区別でき、読みやすいように十分な視覚的なコントラストも提供します。
ハイパーリンクの可読性を高める最も一般的な方法は、白い背景に黒いテキストを使用し、青いテキストのハイパーリンクを使用することです（ # 00f ）。そうすることで、色の視覚的なコントラストが明確になり、ハイパーリンクコンテンツとテキストコンテンツを区別しやすくなり、読みやすさが向上します。グレースケールの青いハイパーリンク: 下線ありと下線なし。
ハイパーリンクは、下線の有無にかかわらず、青ではなく灰色になることがあります。

色覚異常の人に対して、色だけで区別することが有効かどうか疑問に思うのは当然です。上の画像は、このページのスクリーンキャプチャで、完全に彩度を下げたものです。色がなくても、黒と青の間にはハイパーリンクを明瞭にするのに十分な色調の違いがあることがわかります。下線付きバージョンは少し明瞭ですが、マウスをホバーすると下線が表示されるようにしても同様の効果が得られます。
同時に、ハイパーリンクの状態を区別するために色の変化だけに頼っている場合、色覚異常を持つ人々に受け入れられるかどうかも考慮する必要があります。色を識別できるかどうか尋ねるのが最善でしょう。上の画像はページのスクリーンショットです。上の画像から、ハイパーリンクの色変更効果を使用しなくても、黒と青のみを使用してハイパーリンクを明確に識別できることがわかります。ハイパーリンクに下線を引くと、ユーザーはハイパーリンクを認識しやすくなります。また、マウスをハイパーリンクの上に移動したときに下線が表示されるようにすると、同じ効果が得られます。ハイパーリンクには下線を付けるべきですか?
ハイパーリンクには下線を引く必要がありますか?

下線は、時折のインラインリンクには問題なく機能します。
あまり使用されない組み込みハイパーリンクには下線を付けることができます。
色だけの場合よりもリンクが少し目立つようになります。
ハイパーリンクに下線を引くと（単に色を変更するのではなく）、より目立つようになります。
この例では、下線が記事のタイトルとサブタイトルを区別するのに効果的です。
この場合、下線によって主見出しと副見出しが明確に区別されます。
段落内やリンクリスト内に多数のインラインリンクがある場合、またページ上に多数のリンクセットがある場合、下線は役に立たなくなると思います。
段落、リンクのリスト、またはページ内にハイパーリンクが多すぎる場合、下線を付けても目立たなくなります。以下に、ハイパーリンクのコレクションの例をいくつか示します。元のハイパーリンク (下線付き) と下線を削除したハイパーリンクを示しています。
以下は、2 セットのハイパーリンクの効果の比較です。次のように、左側のハイパーリンクには下線が引かれていますが、右側のハイパーリンクには下線が引かれていません。

下線が引かれていないテキストブロックの方が読みやすく、速いことに注意してください。
注: 上記のようなリンクのリストがある場合は、アンダースコアなしの方が読みやすくなります。
この 2 番目の例では、関連する単語をより明確にするために行間隔も調整しました。
2 番目のケースでは、より明確に見えるように単語間の間隔も調整しました。
一貫性
一貫性
ハイパーリンク形式がページ間で一貫して動作することが重要です。
もう 1 つの重要な点は、すべてのページのハイパーリンク形式が一貫している必要があることです。
当然のことながら、ナビゲーションバーなど、一部のテキストリンクが異なる背景にある場合は、特別な色や処理を使用する必要がある場合があります。
当然のことながら、ハイパーリンクがナビゲーションバーなどの異なる背景にある場合は、特別な色と効果を使用します。

上記の抜粋はガーディアン・オンラインのホームページから引用したものです。
上記のクリップは、 Guardian Onlineのトップページからのものです。
ほとんどのリンクは似ていますが (#036、主に下線が引かれていません)、マウスポインターがアクティブなリンクの上に移動したとき、ホバーに適用されるスタイルが大きく異なります。
上記のハイパーリンク形式は基本的に同じに見えます (フォント色#036 、ハイパーリンクは基本的に下線が引かれず、マウスをハイパーリンク上に移動したときに生成される効果が異なります)。
心理的な影響は当惑させます。すべてのリンクが同じようなことを行うのか（つまり、このサイトの別のページに移動するのか）、それとも予期せず別の場所に移動してしまうのか、疑わしいままになります。この統合失調症的な行動は、ブランド体験を弱めるだけでなく、ユーザビリティも低下させると思います。
心理的には、この効果は当惑させる可能性があります。使用するすべてのリンクがこのようなものなのか（他のページも含む）それとも予期しない場所にリンクしているのか疑問に思うでしょう。このような統合失調症的なアプローチは、サイトのブランドに対するユーザーの印象を弱め、サイトの使いやすさを大幅に低下させると私は考えています。
すべてのハイパーリンクを別々に扱う理由はありません。3 番目の例も 2 番目の原則に違反しています。色の変更によってリンクが弱くなり、目立たなくなるため、「強調表示」にはなりません。
すべてのハイパーリンクに異なる効果を使用することはできません。上記の 3 番目の例は 2 番目のルールに違反しています。異なる色の変更によって焦点がぼやけてしまい、まったく目立たなくなっています。
結論
結論は
全体的に見ると、業界では#を維持するのが主流の慣例のようです。 00fまたは＃ 00cリンクの場合は (やや濃い) 青、リンクをホバーすると赤くなり (オプションで) 下線が付きます。
まとめると、最も特徴的なハイパーリンクの色効果の変更は次のようになります。 # 00fまたは＃ 00c (色は前者より少し濃いめ) をハイパーリンクのフォント色として使用し、マウスがその上を通過すると赤色を使用するか、下向きの線を追加して強調表示します。
これをインラインハイパーリンクとグループ化されたハイパーリンクに一貫して適用すると、機能のバランスが最も良くなると思います。
すべての組み込みハイパーリンクとグループ化されたハイパーリンクに同じ効果のバリエーションを使用すると、機能のバランスが最適に保たれると思います。

<<: スプライトとフォントアイコンを実装するためのCSS

>>: 統計量に対するmySql SQLクエリ操作