1. Web-Knight[ウェブナイト]トップ
  2. UI/UX・デザイン
  3. リンクは次への生命線!しっかりと考え機会損失を防ごう
UI/UX・デザイン

リンクは次への生命線!しっかりと考え機会損失を防ごう

こんにちは、ゆうたまです。

あなたは自分のホームページのリンクについて意識したことはありますか?

ウェブアプリ開発でリンクの在り方もを考える機会があり、本記事ではその時に学習したことを共有します。

良いリンクとは、ユーザーがリンクと認識できることです。せっかく広告や検索結果からユーザーが訪問しても、リンクと認識できないと、クリックしてもらえず機会損失になります。

下記の5つを参照して、自分のホームページ、ウェブサイトはどうか確認してみましょう。

スポンサーリンク

リンク文字色は青がわかりやすい

インターネットが普及したころからリンク文字には青色が使われており、認識されやすいです。

とは言え、リンクの文字色にサイトのメインカラーを採用している事例も多く存在します。

その場合は次に解説するのかアンダーラインを付ける、リンクの文字色を統一するなど工夫が必要です。

リンクにアンダーラインを付ける

これもインターネットが普及したころから、リンクにアンダーラインが付いていたため、ユーザーの共通認識として使われています。

リンクにアンダーラインを付ける場合は、サイト内で統一しましょう。ページごとにリンクが付いていたり付いていなかったりするとユーザーが迷うためです。

リンクのマウスオーバー時に変化させる

マウスオーバーしたとき、リンクに何かしらの変化があるとリンクと認識されやすいです。リンクのアンダーラインを消す、文字を薄くするなどのエフェクトです。

ボタンの場合は、ボタンの色を濃くする、凹ませる動作を加えるなど多様ですね。ただし、スマホにはマウスオーバーがないため、効果はありません。

リンクテキストの内容

リンクテキストの文言は、リンク先のページ内容がわかるテキストにしましょう。「ここをクリック」などの文言は、遷移先の内容がわかりづらいためNGです。

適切なリンクテキストはSEO効果も期待できます。

スマホのタップ可能なリンク範囲

スマートフォンでは指でタップさせることを考慮して、リンクを工夫しましょう。

タイトルなどのリンクだけではなく、写真やブロックにもリンク貼りましょう。これによってスマホでもタップしやすいように範囲を広げることができます。

今回は以上となります。

上記5つを参照して、リンクにも細かく気を払い、ユーザーにもう1ページ見てもらえるよう工夫しましょう。