シニア層ユーザーのWebサイト利用の様子を観察していると、次のようなシーンによく出会います。
・リンクの設定されていないテキストやアイコンをクリックしてしまう
・リンクの上にカーソルが正しく乗っていない状態でクリックしてしまう
前者については、リンクの有無が見た瞬間に判断できるようなデザインにしてなくてはなりません。また後者については、リンクにマウスオーバーした際の反応をわかりやすくしてあげる必要があります。
今回は、各介護サイトがこうしたリンク周りのデザインにどう対応しているのか、順番に見ていきたいと思います。
主要サイトのリンク周りのデザインをチェック！
HOME'S介護（Link）
『HOME'S介護』のテキストリンクは、基本的に全て下線があり、色はスタンダードな青を採用しています。まさに王道でわかりやすいですね。
一方、マウスオーバー時は色が青から赤へと変化します。色相が大きく変わるので、リンクの反応に気付きやすくなっています。
重要なアクションボタンは、オレンジのグラデーションから赤のグラデーションに変化します。こちらもかなりはっきりと色が変わったなという印象を受けます。
みんなの介護（Link）
『みんなの介護』のテキストリンクも、基本は全て下線があり、赤から黄味がかったオレンジに変化します。このサイトは背景がベージュに近い同系色であるため、特に細い文字の場合は、この反応に気付きにくいのではないでしょうか。
重要なアクションボタンは、濃いオレンジから薄いオレンジへと光ったように変化します。HOME'S介護に比べて見た目の差が小さく、ディスプレイの状況によっては反応が見えにくいかもしれません。
オアシスナビ（Link）
『オアシスナビ』のテキストリンクのほとんどは、最初から下線が付けられていません。そしてマウスオーバー時には色が青からオレンジに変化するのと同時に下線が付き、変化がわかりやすくなっています。
これはYahooやAmazonなどの他のサイトと似ています。最初に下線がないとデザイン的にはスッキリしますが、シニア層にとっては見ただけではリンクの有無に気付きにくいかもしれません。
重要なアクションボタンの方は、赤のグラデーションがマウスオーバーで逆向きになるデザインです。
介護DB（Link）
『介護DB』のテキストリンクは、下線が付いているものの、青から水色へと色相の変化が小さく、反応がとてもわかりづらいデザインです。
重要なアクションボタンの方は、赤のグラデーションがマウスオーバーで少し薄くなったように見えます。差が小さいので、シニア層ユーザーには気付かれにくいかもしれません。
リンクには下線をつけて、反応はハッキリと
シニア層ユーザーが多い介護サイトでは、他の一般的なサイトに比べて、特にテキストリンクの「下線付き」という部分に気を遣っている様子が見てとれました。
一方でアクションボタンのデザインについては、マウスオーバー時に透明度を上げて光ったような処理をするサイトが多いように思いました。この場合、ディスプレイやユーザーの目の状態によっては、反応がハッキリ読み取れないことも多そうです。
シニア層ユーザーの多いサイトでは、余裕があれば、マウスオーバー時の画像を別個に用意したり、そもそもボタン自体をCSSで作成し、色を大きく変更する指定をするのもよさそうです。
また余談ですが、シニア層ユーザーは、よく「マウスカーソルの位置」を見失ってしまいます。その後カーソルを見つけるためにマウスをちょこちょこと動かして反応を見るのですが、その際もマウスオーバー時の反応が大きい方が探しやすいですね。
Follow me!
