こんにちは、昨日バランスボールを購入してオフィスの椅子にして、健康意識が高くなった気がしている角田(つのだ)です。
今日はショッピングサイトはもちろんのこと、通常のWEBサイトを運営する際も参考にしていただきたい「テキストリンクのユーザビリティ」について整理させていただきました。
サイト構築の際、その使いやすさはしっかりと考える必要がありますが、そのうちの一つの要素としてテキストリンクって重要なんですよ。色とか、装飾とかですね。
注意すべき点に注意してWEBサイトを構築するかしないかで、使いやすさが大きく変わってくるんですね。
簡単な事ですが結構重要なので頭に入れちゃいましょう^^
1.テキストリンクのユーザービリティ6つのポイント
テキストリンクは、むやみやたらにリンクを貼っておけば良いというわけではありません。
そのリンクを作成する際の6つのポイントを整理いたしました!
1-1.アンカーテキストについて
これはSEO(検索エンジン最適化)にも良い影響があるかと思いますが、そのリンク先のページのタイトルをアンカーテキストにするようにしましょう。
よく言われますが「ここをクリック!」とか「詳細はこちら」とかそのようなテキストでのリンクはなるべく控えるべきですね。
タイトルやキーワードなど、その先のページの内容などを的確に表すテキストでリンクを設置しましょう。
【リンクの例】
<a href="https://ecpack.jp/">ECpack【定期購入・頒布会ショッピングサイト専用コンテンツマーケティング集客サービス】</a>
ECpack【定期購入・頒布会ショッピングサイト専用コンテンツマーケティング集客サービス】
1-2.リンクの説明をつけよう
リンク先のページがどのようなページか?
その内容をリンクに説明文として設置しておく事で、その先のページを把握しやすくなりますね。
下記の様な項目を追記しておくと良いでしょう。
- リンク先サイトの名前
- リンク先ページのサブタイトル
- 目的ページの詳細な情報
- リンク先での注意点など
【titleの設置例】
<a href="https://ecpack.jp/" title="ECpack【定期購入・頒布会ショッピングサイト専用コンテンツマーケティング集客サービス】">ECpack</a>
ECpack
↑カーソルをあわせると「title」に設置した文章が表示されます。
1-3.テキストリンクの色は?
確実に青です。そして既に見たページは紫色
これは確実にこの青という色のリンクにユーザが慣れておりますので、その色合いを変更しない方が良いでしょう。
重要なのは“クリックできる”という事をユーザがすぐに認識できる事と、既に見たページである事が認識できることです。
下記の様な色になります。
a:link(#2200CC)
a:visited(#551A8B)
細かく調べると、ブラウザーによって異なるようですが、概ね上記の様な色合いです。
1-4.テキストリンクの装飾について
リンク部分にはアンダーラインが引かれるようにしましょう。
サイト全体のデザインを考えてアンダーラインをCSSで消していたりしているサイトもありますが、ユーザがリンクを判断する上ではあまり望ましくありません。
1-5.外部へのリンクは?
外部サイトへのリンクについては、同じウィンドウで開くようにする方が良いという意見も多いですが、私は別のサイトであれば、別ウィンドウで開いた方が使いやすい印象はあります。
その際のリンクは別ウィンドウで開くというのが分る様な工夫をしておくと親切です。下記の様なアイコン付きのリンクがよいでしょう。
1-6.ファイルなどへのリンク作成方法
PDFやパワーポイント、エクセルなどのファイルに直接リンクする場合もあるかと思います。
そこからダウンロードしてもらうようにリンクをするのですが、その際にはそのファイルの種類や容量が分るようにしておくとユーザに取っては分りやすいリンクとなります。
クリックする前に「このファイルを開くのには時間がかかるな〜」っとか分るだけでもユーザのストレスを解消できるのです。
下記のようにファイルの容量を書きましょう。
さらにファイルの種類が分るアイコンもつけていると親切です。
ECpack サービス概要[406KB]
まとめ
いかがでしたでしょうか?
ただテキストにリンクを貼るのは簡単なことですが、そのリンクの貼り方もちょっとした工夫で、とても見やすくクリックしやすいものになりますね。
ひとつひとつ上記のようなリンクを作成するのは、作る側からすると面倒ですが、ユーザに取って使いやすいサイトにするために、このようなリンクの作成を心がけましょう。
平日 10:00~18:00
(セールス目的のお電話はご遠慮ください。)