其の39 訪問済みのリンクは把握しやすいデザインに | デザインってオモシロイ -MdN Design Interactive-

其の39 訪問済みのリンクは把握しやすいデザインに

2024.4.19 FRI

【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル初級其の39

訪問済みのリンクは把握しやすいデザインに


テキストリンクの設定では、ユーザーを迷わせないよう、リンク色と訪問済みリンク色を、ひと目で違いが識別できるものにすることが大切だ。

訪問済みのリンクは、それまでユーザー自身がたどってきた経路を示すので、現在いる場所を理解する手助けとなる。過去にどのページを訪問したかがわかれば、ユーザが意味もなく何度も同じページを開いてしまうのを避けることができる。

また、リンク色と訪問済みリンク色をまったく関連性のない色にするのは、逆に紛らわしくわかりにくい。そうした点も考慮しながらリンク色・訪問済みリンク色の選定を行わなくてはならない【1】。

リンク色と訪問済みのリンク色を、まったく関連性のない色を使用した例
【1】リンク色・訪問済みリンク色にまったく異なる色を使用すると両方が主張しすぎてしまい、どちらが訪問済みなのかわかりにくく、かえってユーザーを迷わせる。特に両方に下線の設定をしている場合はなおさらだ

その際のポイントは、ふたつの色を、同じ色相で明度の違う色にすること。そうすることで、視覚的にもリンクと訪問済みの関連性がわかりやすい【2】。


リンク色を鮮やかで明るい色にし、訪問済みのリンク色は同色相の薄い色を使用した例
【2】リンク色は訪問済みリンクよりも鮮やかで明るい色にするとよい。また、訪問済みはリンク色とは逆に薄い色を使用するとわかりやすくなる

お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在