小城 崇
ウェブサイト作成時に役立つ7つのテクニック、第5回のテーマは「リンクの装飾と配置」です。ユーザにとって使いやすいリンクの装飾や配置のサイトを作成するためのポイントをお伝えします。
ウェブサイト設計の時に役立つ７つのテクニック
- ファーストビュー
- 関連性
- 具体性
- ウェブライティング
- リンクの装飾と配置 ←今回のテーマ
- 目線の操作
- 他サイトでの慣習
ウェブサイトでは、ユーザがリンクを見つけることができなければどんなにユーザの関心を引くページやコンテンツを用意しても、まったく見られないまま終わってしまう危険性があります。
そこで、今回は「リンクの装飾と配置」をテーマに、ユーザがスムーズにページ間を遷移することが可能な、回遊性の高いサイトを設計するためのポイントをお伝えします。
リンクの装飾
まずはリンクの装飾について、テキストリンクとボタンリンク、それぞれのポイントを順に解説していきます。
１. テキストリンクの装飾
テキストリンクは青字下線で表すことにより、ユーザがリンクであることを一目で認識できるようにしておくことが重要です。一目で認識できるようにするための基本は「青字下線」による表示で、これは現在でも変わることがありません。
一方、近年ではテキストの可読性やデザイン性を重視し、あえてリンクに青字や下線を使用しないサイトも増えてきています。
今後も、このような流れが続くと思われますが、弊社でこれまでに行われたユーザ行動観察調査の結果から、「青字」か「下線」のどちらかの要素はリンクと視認するためには必須ですので、必ずどちらかの要素は加えるようにしてください。
また、「青字」「下線」のいずれかの要素のみを採用する場合は、補足的な挙動でリンクであることをフィードバックするようにしてください。例えば、ヤフーのトップﾟページでは、リンクの上をマウスが通り過ぎると下線が出現するようなフィードバックをしています。このようなやり方は、特にリンクの数が多いサイトで有効であるといえるでしょう。（図1参照）
図１
「トピックス」１行目のリンクにオンマウスの際、下線が表示される（Yahoo!）
また、リンクではないテキストに「青字」や「下線」を使用することは著しくサイトのユーザビリティを下げることにつながりますので、注意が必要です。
リンクの装飾についてはさらに詳しく知りたい方は、以下の記事をチェックしてみてください。
|
【参考】リンクは青字下線？ |
２. ボタンの装飾
ボタンの装飾は「押せる感」を出すことが重要となります。近年ではクリエイティブのレベルがあがり、「押せる感」の強いボタンが多く見られるようになりましたが、もしデザインをしていて困ったとき、以下2つのポイントを押さえると「押せる感」を比較的簡単に表現することができます。（図2参照）
- バレットを付けることで、ボタンにリンクらしさを出す。（矢印や三角が一般的）
- グラデーションや影を付けたり、角を丸めたりすることにより、ボタンに立体感を出す。
図2
「押せる感」のポイントを反映したボタンの例
リンクの配置
ユーザがスムーズにページ間を遷移することが可能なサイトを設計するには、リンクそのものを適切な位置に配置することも必要です。そこで、ここではリンクを適切に配置するための方法とテクニックを2つ紹介します。
１. コンテンツエリア内の誘導リンク
ユーザは関心のある部分のみを見ようとするため、目的の情報があるページを閲覧し始めると、コンテンツエリアにユーザの視線が集中することが、弊社のユーザ行動観察調査で確認されています。
このため、ユーザにスムーズにサイト内を回遊してもらうためには、コンテンツエリア内の文脈に沿って、次にユーザが見たいと考えるであろうページへの誘導リンクを配置し、より多くの有用な情報を閲覧していただくことが重要となります。
ユーザの関心や視線が集中しやすい場所に、効果的なページへのリンクを配置することで、スムーズに、かつ効果的にユーザをビジネスゴールへと導くことができるのです。
２. フッターリンク
ページのフッターにリンクを配置することも重要です。
上述の通り、目的の情報があるページを閲覧し始めるとユーザはコンテンツエリアに視線を集中させるため、仮にコンテンツエリアを下まで閲覧した後、フッターリンクが自然と視野に入るようになります。
ここにコンテンツに関連するリンクや他カテゴリへの導線を配置することで、ユーザが自ら、より興味のある情報に遷移してくれるのです。（図3参照）
図3
フッターリンクの効果について
なお、リンクの配置についてさらに詳しく知りたい方は、以下の記事をチェックしてみてください。
以上、「リンクの装飾と配置」をキーワードに、ユーザがスムーズに目的ページへ辿りつくことができる、回遊性の高いサイトを設計するためのポイントをご説明してきました。
次回のテーマは「目線の操作」です。ユーザの視線を集める要素と視線を遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。
