テキストリンクのデザインで注意すべき４つのポイントインターネット-最新ニュース:IT-PLUS

　ハイパーリンクはユーザーがマウスでクリックするだけで簡単にウェブページもしくはウェブサイト間を行き来することができるウェブ独自の機能である。このハイパーリンクを彩るデザインは、ウェブデザインにおいても最も重要な要素の一つと言えるだろう。今回は安心してウェブを閲覧できるよう考慮したハイパーリンクの見せ方について考えてみたい。

　インターネットはハイパーリンクのおかげで様々な情報がつながり、結果としてユーザーに多くの情報をもたらすことが可能となった。テキストリンクのデザインにおいて、ウェブデザイナーが意識すべき点は、以下のようなものがある。

1.リンクテキストと通常のテキストが簡単に区別できる
2.ユーザーの注目を集める
3.サイトのデザイン性を高める
4.ブランドイメージと関連づける

　何もデザインを施さない標準状態ではテキストリンクは青色の下線付き文字で表示され、ユーザーの目線は自然にリンクテキストに集まる。ユーザーは通常のテキストとクリック可能なテキスト部分を容易に判別することができる。

　しかし、最近のウェブデザインでは全体的なレベルも上がり、標準のままでなくデザイン性を高める方向にある。また、他のサイトや企業などと区別させるような、個性的なブランディングも必要となってきている。そのためデザイナーは上記のような点を意識しながら、テキストリンクの見せ方、そしてサイト全体のデザインを作り上げているのである。

　テキストリンクのデザインにおいて最初に考える点はテキストの色である。以前のコラム「デザインの基本『色』を知ろう・組み合わせのテクニックと心象の違い」でも書いた通り、色が人々に与える影響は心理学的にも証明されており、重要な要素の一つである。また、通常のテキストとリンクテキストを判別するため、そしてユーザーの視線を集めるためにも、テキストの色を標準から変更することは一般的に活用されている。

　しかしながら、色覚に障害を持つユーザーがサイトを訪問することも考えられる。男性では約８％、女性では約0.4％の人々が色覚に何らかの障害をかかえていると言われている。

　以前のコラムでも紹介した「アクセシビリティ・カラー・ホイール」というツールを使うと、色覚に障害を持つユーザーが実際にどのように見えているのかを確認できる。色覚に障害を持つユーザーにも分かりやすいテキストリンクの色を見つけられるのではないだろうか。

・アクセシビリティ・カラー・ホイール
http://gmazzocato.altervista.org/colorwheel/wheel.php?lingua=ja

　色を変えただけではリンクテキストであると簡単に区別できないユーザーも多く存在するため十分でない場合もあるだろう。そのため、標準のテキストリンクには下線がつけられており、リンクテキストであると簡単に区別できる。

　これも標準のままではなく、様々なデコレーションを施すことができる。上下にラインを入れたり、下線を点線に変更したり、背景の色を変更したりすることも可能だ。また、テキストにマウスオーバーすると、下線が消えたり、テキストの色が変わったりするといったデザインにすることもできる。

　こうした自由度のある中からデザイナーは、テキストリンクのデザインを考える。企業のロゴや、サイト全体のデザインとテキストリンクのデザインをうまく関連付けることによって、調和のとれたデザインが完成するのである。

　実際にウェブサイト全体のデザインと調和のとれたテキストリンクのデザインをいくつかご紹介しよう。

・80/20
http://www.8020studio.com/

　ニューヨークとサンフランシスコを中心に活動するデザインスタジオ「80/20」のウェブサイトは、シンプルなデザインの中に緑のドットラインのテキストリンクがよく映えている。マウスオーバーすると、背景が緑に、テキストは白抜きに切り替わる。

・Winnie Lim
http://winnielim.com/

　シンガポール在住の女性デザイナーのウェブサイト。ピンクの下線でリンクテキストが一目で区別できる。また、マウスオーバーすると、薄い茶色に切り替わる。ロゴの色味に合わせて、テキストリンクが設定されている。

・JESUS RODRIGUEZ VELASCO
http://www.jrvelasco.com/

　カリフォルニア大学バークレー校の教授 JESUS RODRIGUEZ VELASCO氏のブログは、大胆なデザインで有名だ。マウスオーバーすると、背景が赤に切り替わる。

　このようにデザイナーはひとりでも多くのユーザーに対してウェブサイトをより使いやすくするために、そしてサイトのデザイン性とブランド力を高めるために、テキストリンクのデザインを思案しているのである。

更新：12月3日 09:20インターネット：最新ニュース

テキストリンクのデザインで注意すべき４つのポイント

-筆者紹介-

略歴

● 関連記事

● 関連リンク

● 記事一覧