UIのベストプラクティス
TOPICS
翻訳元記事はこちらです。
ロゴにホームページへのリンクをつける
各ページのトップにあるロゴは、サイトのホームページへのリンクをつける必要があります。あなたのロゴがテーマディレクトリにあると仮定して、これはheader.phpテンプレートファイルにロゴを表示する方法です。
<a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="Home Page" /></a>アンカーテキスト
アンカーテキストとは、ハイパーリンクの目に見えるテキストのことです。良いリンクのテキストとは、それをクリックしたときに読者になにが起こるのかを分かりやすく伝えます。
悪い例
The best way to learn WordPress is to start using it. To Download WordPress, click here.
良い例
Download WordPress and start using it. That’s the best way to learn.
リンクに下線をつける
デフォルトでは、ブラウザはリンクに下線を引いて、何がクリック可能なのかをユーザーに知らせるようになっています。デザイナーの中には、CSSを使ってハイパーリンクの下線をオフにしている人もいます。これは、周囲のテキストからハイパーリンクを識別することが難しくなるため、ユーザビリティやアクセシビリティの問題を引き起こします。
リンクの色を変える
色は、テキストがクリック可能であることを示すもう一つの視覚的な手掛かりです。ハイパーリンクを周囲のテキストとは異なる色でスタイリングすると、区別しやすくなります。
ハイパーリンクは状態を持つ数少ないHTML機能の一つです。最も重要な2つの状態はvisitedとunvisitedです。
この2つの状態に異なる色を持つことは、ユーザーが以前に訪問したことのあるページを識別するのに役立ちます。訪問したリンクを推測するための良いトリックは、訪問していないリンクよりも10%から20%暗い色にすることです。
その他3つの状態がリンクにはあります。
- hover：マウスを要素にホバーしたとき
- focus：キーボードでフォーカスを当てたとき
- active：リンクをクリックしたとき
ホバーとフォーカスは似たような意味を持っているので、同じスタイルを与えると便利です。
ホバーとフォーカスは似たような意味を持っていますが、相互作用のパターンは異なります。微妙なホバー状態を選択すると、より識別しやすいフォーカス状態になるはずです。
リンクの上にカーソルを置く場合は、ユーザーはページ内のどこにいるのかを知っているので、その場所がリンクされているかどうかを識別するだけで済みます。
一方、フォーカスの場合は、ユーザーは以前の場所からフォーカスを移動した後、フォーカスがどこに移動したのかを確認する必要があります。
色のコントラスト
色のコントラストとは、2つの色の違いを指します。紺と黒のコントラストは低いです。白と黒のコントラストは高いです。
非営利のWebアクセシビリティ団体であるWebAIMでは、Webサイトのデザインにおけるコントラストの判断に役立つカラーコントラスト計算機を提供しています。WCAG 2.0では、AAに準拠するために通常のテキストの比率を4.5:1にすることが求められています。
読みやすいフォントサイズ
テキストを読みやすくしましょう。テキストを十分な大きさにすることで、サイトのユーザビリティが向上し、コンテンツをわかりやすくすることができます。最小のフォントサイズは、14pxまでにすべきです。
ラベルと入力の関連付け
ラベルは、入力フィールドが何のためのものであるかをユーザーに通知します。ラベルのfor属性を使用することで、ラベルと入力フィールドを関連付けられます。これにより、ユーザーはラベルをクリックして入力フィールドに焦点を合わせることができます。
<label for="username">Username</label>
<input type="text" id="username" name="login" />ラベルはラジオボタンにも機能します。名前ではなくidフィールドを使用して動作するので、グループの各入力はそれぞれ独自のラベルを取得します。
<input type="radio" id="user_group_blogger" name="user_group" value="blogger" />
<label for="user_group_blogger">Blogger</label>
<input type="radio" id="user_group_designer" name="user_group" value="designer" />
<label for="user_group_designer">Designer</label>
<input type="radio" id="user_group_developer" name="user_group" value="developer" />
<label for="user_group_developer">Developer</label>プレースホルダー
プレースホルダテキストは、ユーザーに入力する内容の例を示します。ユーザーがフィールドにカーソルを置くと、プレースホルダテキストは消え、ラベルは残ります。
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />フィールドのラベルの代わりではなく、フィールドが必要とするデータの種類を示すためにプレースホルダを使用します。
ボタンの文言
ウェブ上には意味不明なボタンがあふれています。前回、ログインフォームで「OK」や「送信」を使ったことを覚えていますか？ボタンに表示する言葉を丁寧に選ぶことで、ウェブサイトをより使いやすくすることができます。
ユーザーを作成する、ファイルを削除する、パスワードを更新する、メッセージを送信する、というパターンを試してみてください。それぞれ、ユーザーがボタンをクリックしたときに何が起こるかを説明しています。