リンクテキストをわかりやすくする
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
リンクテキストをわかりやすくする。それはつまり、リンクのテキストとそうでない通常のテキストを、一目でわかるようにする……ということです。いうまでもなく、これはWebデザイナーにとって基本中の基本といえるでしょう。
あまりにも基本すぎるため、意外にもWeb制作の際はほとんど意識しないこともあるかもしれません。しかし、じっくりと見つめ直すことも時には大事です。私も今一度、自分自身の確認の意味も込めて記しておきます。
基本ポイント
基本はブラウザのデフォルト設定
最も無難なリンクテキストの設定は、ブラウザのデフォルト設定であると言えるでしょう。デフォルト、つまりそのままということで、CSSであれこれ指定しないということです。大抵のブラウザは青文字・アンダーラインであり、これが一番間違いのないリンクテキストと言えます。特にデザインよりも文章に価値があるサイトは、このデフォルト設定が向いていることが多いでしょう（当サイトもそうですね）。
ただし、サイトによっては濃い青が他の色と合わず、どうしてもデフォルトの見栄えではおかしいこともあるでしょう。もちろんそういった際は、頑なにデフォルトにこだわらなくても大丈夫です。
現在はユーザもネットに慣れる、つまり学習してきていますので、きちんと考えて見栄えを設定すれば、リンクと認識してくれる可能性は高まります。しかし、最低限リンクに見せるポイントと注意点は、是非とも認識しておきたいところです。
では、これからリンクに見せるポイントと、注意点を順に考えてみたいと思います。
リンクに見せるポイント
アンダーラインをつける
先ほどブラウザのデフォルト設定が最も無難と言いました。デフォルト、つまり大抵は青文字・アンダーラインですね。しかしその片方であるアンダーラインがついているだけでも、リンクっぽく見える可能性が高まります。
後述しますが、マウスオーバーしたときにアンダーラインを消したり、色を変化させたりするとよりわかりやすいでしょう。
色を青系統にする
デフォルトの青でなくても、文字を青系統にするだけでリンクっぽく見える可能性が高まります。なんとなく青系統＝リンクのイメージが残っているからかもしれません。
コンテンツ部分以外でこっそりとリンクスタイルを教える
大抵のサイトは、コンテンツ部分以外に、ナビゲーション部分やヘッダー・フッター部分など区分けされていると思います。
よく見てみると、コンテンツ部分以外はリンクテキストが多く配置されています。ナビゲーション的な意味合いになることが多いからですね。こういったところは、コンテンツ部分と比べてリンクを判別しやすいのです。横にアイコン（矢印など）などが置いてあったりすることもあるので、自然とわかりやすいのでしょう。
人間はこういった部分を無意識に見て解釈しています。そしてコンテンツ部分のリンクを認識する際の参考にしているようです。ですから、コンテンツ部分以外のリンクテキストと、コンテンツ部分のリンクテキストのスタイルを同じにすると、わかりやすいと言えます。これは、暗黙のうちにサイト内のルールをユーザに教えているような感じですね。
マウスオーバーで何らかの変化がでるようにする
マウスがリンクテキストの上部にきたとき、つまりマウスオーバー（オンマウス・オンマウスオーバーとも呼ばれたりします）したときに何らかの変化がでるようにすると、非常にリンクと認識しやすいです。
例えば、マウスオーバーしたときに色が変わったり、アンダーラインが消えたり、逆にアンダーラインがついたり、背景色を変えたり、位置をずらしたりなど様々な手法が考えられます。また、これらを複合して使うと、よりリンクに見えやすくなります。ただしあまり派手にすると素人っぽく見えてしまうことがあるので気をつけてください。自然な感じでセンス良くやるのがコツです。
これらは一目見てリンクと判別することには役立ちませんが、マウスオーバーしたときに「あっ、見た目に変化があったからこれはリンクなんだ」と思ってもらえ、ユーザビリティを高める効果があります。
サンプル
実際にマウスオーバーの変化をやってみましたので、ためしにマウスオーバーしてみてください。初期設定は色を黒にし、「マウスオーバーでアンダーラインを消す」以外はアンダーラインを消して変化をわかりやすくしています。（なお、このリンクはクリックしても何も起こらないようにしています）
- マウスオーバーで色を変える（←マウスを載せてみてください）
- （CSSの例：
- マウスオーバーでアンダーラインを消す（←マウスを載せてみてください）
- （CSSの例：
- マウスオーバーでアンダーラインをつける（←マウスを載せてみてください）
- （CSSの例：
- マウスオーバーで背景色を変える（←マウスを載せてみてください）
- （CSSの例：
- マウスオーバーでいろいろ変える（複合）（←マウスを載せてみてください）
- （CSSの例：
注意点
サイト全体で統一する
大規模サイトでは例外もありますが、一度リンクとしたスタイルは、サイト全体で統一しないとユーザを混乱させてしまいます。
通常は共通のスタイルシートで指定するのであえて変えることは無いかもしれませんが、覚えておくとよいでしょう。
リンク以外はリンクテキストのスタイル（見栄え）を使用しない
せっかく工夫してリンクテキストを考えても、それと同じようなスタイルの非リンクテキストがサイト内に含まれていると台無しです。ユーザが誤ってリンクだと勘違いしてしまうからですね。
リンクとそうでないものの区別をつけるため、類似したスタイルを同一サイト内で利用するのはやめましょう。
リンク以外はなるべくアンダーラインは使わない
リンクのイメージとして根強く残っているのがやはりアンダーラインだと思います。ですので、アンダーラインは特に必要に迫られない限り、なるべく使わないようにしたほうがいいでしょう。絶対に使用するなというわけではありませんが、アンダーライン以外で解決できることもあるからです（下記Tips参照）。
クライアントにこう頼まれたら
たまにクライアントから、「ここは重要だからアンダーラインをつけてほしいんだけど」と言われることがあります。
もちろん技術的にはCSSでアンダーライン（text-decoration: underline）を設定するだけなので簡単です。しかしこのページで述べているように、、時にユーザビリティ的な問題が発生することがあるのも事実。でも、クライアントは何も知らないで依頼してきます。
そういった際、言われるがままにクライアントの要望を全て受け入れるよりも、きちんとアドバイスができるようになれるといいですね（代替案、例えば太字にしたり背景に色を付けたりなどを提案するのも一つの手です）。幅広い知識を身につけておいた方がより良いアドバイスができますから、日々学習して知識を深めたいものです。
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
コメント
この記事へのコメントはまだありません。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- ├インデントで読みやすいソースコードを
- ├文字化けを防ぐ&解消する方法
- └背景画像ありのボックスの文字をはみ出させない方法
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)