この章では、さらに実践的なＷeb配色について学んでいきましょう。

Webサイトを作成するときに配色の知識を活用することで、
ユーザーにとって利用しやすいWebサイトを実現することができます。

まずこのセクションでは、「リンクの配色が大切な理由」、「リンクを機能的な配色にするには」、「リンクをデザイン的な配色にするには」について学んでいきましょう。

Webサイトにおいて、リンクはアクセスにつながる非常に大切なポイントですので、
しっかりと押さえておきましょう。

リンクの配色が大切な理由

Ｗebサイトには大きく分けて、「自分自身のＷebサイトに繋がるリンク（内部リンク）」と「自分のＷebサイトから他のＷebサイトへ繋がるリンク（外部リンク）」があります。

しかし、リンクの配色がわかりにくい見た目であれば、どちらのリンクも使い心地が悪くなってしまうのです。

Ｗebサイトにおけるリンクは、Ｗebページ同士を結びつけるという大切な役割があります。

リンクの配色にこだわってみると、利用者の使い心地がよくなり、信頼できるサイトへと成長できるのです。

リンクを機能的な配色にするには

使いやすさに注目してリンクを配色するためには、大手検索エンジンサイトの使い方を参考にしてみましょう。

検索後の一覧からリンクの色に注目してみると、ほとんどで「青色」や「紫色」が使われていることに気がつくのではないでしょうか。

一般的なリンクは、未訪問の場合は「青色」、訪問済みの場合は「紫色」がよく利用されています。それぞれについて詳しく確認していきましょう。

青色と紫色のリンク

大手検索エンジンサイトの調査によると、リンクに青色を使った場合は、広告のクリック数が増加したという報告があるようです。

画像ソフトのデフォルト設定では、よく「＃００００ＦＦ」の青色が用いられています。

しかし、Ｗebサイトでこの青色を見かけることはあまりありません。

「＃００００ＦＦ」の青色はリンクとして認識されやすい色ではありますが、デフォルトのまま使うとＷebサイトで使いにくい場合があります。

そのため、Webサイトのリンク色を設定するときには、デフォルト設定を使うことはなるべく避けた方がよいでしょう。

Webサイト全体の色合い、Webサイトが作られた目的、ページ全体の特徴などに合わせて細かな調整をした方が、より見やすく使いやすいリンクになるからです。

また、複数のリンクを同じページで表示するときには、未訪問を「青系」、訪問済みを「紫系」にするなど一目でわかるように色を設定しておきましょう。

好きな色を使ったリンク

リンクに使う代表的な色である「青系」と「紫色」ですが、それ以外の色に設定したいときには配慮が必要です。

最低限、未訪問のリンクと訪問済みのリンクは異なる色相に設定して、それぞれの区別がつくようにしたほうがよいでしょう。

また文字にリンクを作成するときには、リンクだとわかるように
「アンダーラインを引く」、「矢印などのアイコンを使う」など視覚的にわかる装飾をすれば、
見た人が使いやすいサイトデザインになります。

リンクをデザイン的な配色にするには

Ｗebサイトに採用した配色パターンによっては、「青系」や「紫系」のリンクが似合わないかもしれません。

デザイン的な配色で考えたいときには、リンクの色をWebサイトで使用しているメインカラーに設定してみましょう。

メインカラーはページの中でもさまざまな場所に使われているため、文章中にリンクを貼りたいときでも、見た人が違和感なくリンクの存在を認識できる色なのです。

「青系」や「紫系」がリンクとして目に付きやすい色ではありますが、Ｗebサイトに使っている色との調和が難しいときには、まずはメインカラーを試してみてください。

このセクションでは、「リンクの配色方法」について学びました。

機能的な配色にするのか、デザイン的な配色にするのかはＷebサイトの目的などに合わせて使い分けてみるとよいでしょう。

Ｗebサイトの特徴に合わせたリンクを適切に設定すると、利用者にとって使いやすくわかりやすいＷebサイトにすることができます。

次のセクションでは、「画像を加工するための知識」について学んでいきましょう。