リンクのデザインNG集
反面教師として、クリックしづらい、分かりづらいリンクの例を「NG集」としてまとめてみました。
NGその1 - ちっちゃすぎるリンク
小さすぎてクリックしづらいリンクの例
「水」という文字にリンクが貼ってあるのですが・・・
このように、リンクを貼る文字数が少ないと、マウスを動かしてポイントするのが難しいです。まして、フォントサイズが小さかったら、なおさら・・・。
とくにパソコン初心者のユーザーにとっては、ピンポイントでねらいをつけてカーソルを持っていくのはシンドイでしょう。
「どうしてもこの言葉でリンクを貼らないとダメなんだ！」という場合はやむをえませんが、出来るだけ、リンクの文字数は多めに取ったほうが親切ですね（^ ^）
NGその2 - リンクカラー、凝りすぎ！
色がカッコよすぎて（笑）認識しづらいリンクの例
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
何も考えずにパッと見て、「薄めに切った玉ねぎ」にリンクが貼られていることを認識できるでしょうか・・・？
もちろん、様々なWebサイトを見た経験のあるユーザーなら、こういう色のリンク「も」存在することは知っているかもしれません。
しかし、それでも以下のようなムダな労力を強要してしまうのです。
「んっ？ ココは、もしかしてリンクかな？？」
↓
カーソルをポイント
↓
「あっ、やっぱりリンクか・・・クリックしてみるか」
経験のあるユーザーでさえ、こんなに面倒くさいプロセスが必要なんです。
まして、ネット初心者のユーザーに、この箇所がリンクであることを伝えるのは難しくないですか・・・？
ヘタをすれば、この文字列は単なる「強調」とみなされてしまうでしょう。
NGその3 - どこがリンクか分かりづらい・・・
限りなく黒色に近く、判別しにくいリンクの例
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
あなたのディスプレイでは、「薄めに切った玉ねぎ」の文字は、かろうじて紺色になっているでしょうか（^ ^；）・・・？
いちおう、正統派リンクカラーの青色系（#000066）を使ってはいるのですが、ディスプレイの設定によっては、このリンクはほとんど黒と同じになってしまうでしょう。
つまり、通常の文字とリンクとが、非常に判別しづらくなってしまうのです。
まして、色弱の方が見たら、もうアウトです・・・。
NGその4 - リンクを探せ（笑）！
存在すら気づいてもらえないリンクの例
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
あり得ないと思われるかもしれませんが、私、文章中のまっ黒なリンクをたまに見かけます（^ ^；）
本文の中で、リンクの色が黒だったら、たぶんユーザーの半分以上は気づかずにスルーしてしまうのではないでしょうか・・・。
ユーザーに画面の隅々までポイントさせておもしろがるような（笑）、奇特な方は気にしなくてもよいでしょうけど。
番外編 - リンクと間違われてしまう！？
リンクではないのにリンクと間違えられてしまう例
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
とくに「1 - 野菜を炒めて煮る」という文字列、クリックしたくなりませんか（笑）？
でも、カーソルをポイントすると・・・リンクではなくただの文字列！！
これでは、温厚な性格の人でさえ、ちょっとムカッとするでしょう（^ ^；）
ネットには、ネットの「常識」があります。
青い色の文字、下線が引かれた文字は、ほぼすべてのユーザーが「リンク」とみなします。
「どうしても光り輝く青色で強調したい！」
「ネットだろうがなんだろうが、下線以外の強調なんて絶対に許せない！」
こういう強いポリシーのある方は別ですが、もしそこまでのこだわりがないのであれば、強調する時には、一般的なリンクの表現とは異なるデザインにしたほうがはるかに無難。
ささいなことで、ユーザーの怒りを買わないように、気をつけましょう！
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by
