Contents
2018/07/16加筆
2021/09/24加筆修正
「 ユーザビリティの高いホームページが良い」ということは多くのWeb担当者が聞いたことがあると思います。
ユーザビリティ (usability):
特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。
要するに「ホームページの使い勝手」です。しかし「 ユーザビリティ の高いホームページ」と漠然と言われても、「使いやすい」という感覚は人それぞれですよね。よって主観による「使いやすい」「見やすい」という判断はユーザビリティ向上には当てになりません。
今回は「 ユーザビリティが高いホームページ」を ユーザビリティテストと アクセス解析結果という客観的データを基にまとめました。ホームページ制作時の参考までに。
ユーザビリティを向上させるテキスト、ボタン要素
見るものではなく、使うものであるホームページにおいて、リンク、ボタンデザインは成果に直結します。
「見栄えの良さ」だけでなく、ユーザ視点を含めて検討しましょう。
１、テキストリンクはテキストとの違いをハッキリさせる
テキスト と テキストリンク は明確に違いがわかるスタイルにしておくことが重要です。
※このテキストリンクはトップページが別窓で開きます。
多少デザイン面を犠牲にしても「リンクであることに気づかれないこと」が最も回避したい事項です。
利用者のユーザ層によっては、画像よりテキストリンクの方がクリックされるケースもあるので、注意が必要です。
２、クリック（タップ）箇所は押せるとわかるデザインにする
テキストリンクよりも深刻な問題です。
最近のフラットなデザインでよくあるケースですが、クリック（タップ）できる箇所であると気づかないデザインであれば、ユーザにとってその機能やページは無いもの同然です。
３、クリック（タップ）できない要素はボタンデザインにしない
押せる部分を押せるデザインにすることは上記の通りですが、「押せない要素は押せないと伝わるデザイン」にしなければ、どこが押せるのかわかりづらいホームページになってしまいます。
これはユーザにストレスを与えてしまうので、留意すべきポイントです。
赤枠内はいかにもボタンっぽいですが、クリックできません。
メニュータイトルなのであれば、メニュータイトルであって、クリックできないことを視覚的にアナウンスすることが必要です。
４、クリック（タップ）要素のエリアは限定しない
ここで論じるのは上記の「3、クリック（タップ）できない要素はボタンのようなデザインにしない」とは少し違います。
ひと括りの要素の中で、クリック（タップ）エリアを限定するのはナンセンスです。
赤枠内がこの要素はひと括りです。
しかし、実際にクリックできるエリアは青枠内のみ。
ひと括りすべてをクリックエリアにすることで、ユーザに行動を制限させることなく、ユーザビリティは向上します。
５、わかりづらいコピーは使わない
ユーザは無意識にその先にどんな情報があるかを予測して行動します。
ユーザにとって有益な情報がクリック（タップ）した先にあったとしても、予測できなければ当然使われません。
よくある例が「専門用語」と「独自用語」
メニュー名やクリック要素のコピーとしては専門性が高い用語は避けるべきで、造語を含む独自の用語は論外です。
その他はある程度予測がつきそうなメニュー名ですが、「モーメント」は初めてみたユーザが理解できるかというと困難だと考えられます。
６、アイコンは万能ではない
アイコンを使う理由は大きく2つです。
「情報の補足」と「省スペースで的確なアナウンス」
しかし、当然ながらアイコンは万能ではありません。
例えば紳士服のネットショップでネクタイカテゴリのボタンであれば以下アイコンで十分伝わります。
しかし、ツイッターのアプリにある以下アイコンを説明文無しで理解できる方は極小数ではないでしょうか。
アイコンは万能ではありません。
この機能が素晴らしいものであったとしても、わからなければ無いのと同義です。
７、切り替え（選択）ボタンは誤解されないデザインにする
オン/オフを切り替えるUIは「現在の状態」を示すものなのか、「押すことによって起こること」と解釈するのかユーザによって分かれます。
デザインを一工夫するだけで分かりやすくなるので、参考にしていただければ。
ユーザビリティを向上させるレイアウト設計について
表示画面のレイアウト、構造設計によって使い勝手は大きく変わります。
ここではユーザビリティを向上させるレイアウト設計について以下に記載します。
８、重要な要素はできるだけ格納させない
情報や要素をシンプルに整理しようとすると、メニューなどを格納する選択をしてしまいがちです。
特によく使うと想定される機能は格納することによって使い勝手を低下させてしまう要因となってしまいます。
全てをメニュー内に格納していた状態から、よく使われる必要情報を常時表示させたことで、売上が向上した例は多くあります。
何を格納すべきで、何を格納すべきかは熟考が必要です。
ハンバーガーメニューに関しては別途記事に記載しているので、合わせて確認いただけると幸いです。
９、クリック（タップ）要素は十分な余白と取る
上記ではクリック（タップ）要素の「わかりやすさ」について記述してきましたが、ここでは「押しやすさ」を検討します。
「押しにくい」そして「見にくい」の最も多い要因は「要素と要素の余白の狭さ」によるものが多いです。
| １テキストリンク２テキストリンク | １テキストリンク２テキストリンク３テキストリンク |
どちらが「押しやすく」「見やすい」かは明らかです。
特にスマートフォンでの操作の場合、要素間の「適切な余白」を意識しましょう。
１０、クリック箇所、目線箇所は集中させる
よく使う機能を画面の各所に散りばめてしまうと、操作ごとにマウス操作や指をあちこち動かさないといけなくなり、ユーザは使いにくく感じてしまいます。
上下の赤枠内のようによく使うであろう項目はできる限り近づけて構成すべきです。
この記事を書く際にサンプルを探していて、時刻表などの下にあるメニューに初めて気づきました。
要素を分けることは、使いにくいだけでなく、気づかないという現象を防ぐためにも重要な検討事項です。
１１、選択肢は絞り込んで提供する
多様なユーザ層やニーズを想定し、それらすべてに答えようとすると、多くの選択肢を提供してしまいがちです。
しかし、多くの選択肢はユーザに「選択するというタスク」を強要することとなります。
たくさんの選択肢はユーザを満足させるというよりは、迷わせることの方が多いと考えるべきです。
テキストが多くかなり読み込む必要があります。
しかもテキストを読み込んでもイマイチ各プランの差別がわかりません。
選ばせるステップ（ユーザの絞り込み作業）を踏んでから、予約画面に遷移させる必要があると考えられます。
１２、画面遷移でフォーマットを変化させない
画面遷移ごとに基本フォーマットを変化させてしまうと、ユーザの頭の中ではあるはずボタンが消えていたり移動していたりと迷わせてしまいます。
基本フォーマットは画面遷移があったとしても変化させないことが基本です。
カテゴリごとに絞り込むことを目的としているようですが、あったりなかったりするのはユーザビリティが低いと考えられます。
１３、サイト内の現在地をわかるようにする
大規模サイトでは特にサイト内で迷子になってしまうユーザも多く見受けられます。
「困ってトップぺージに戻る」という選択しか提供していなければ、使いづらいホームページとして認識されてしまいます。
パンクズリストを実装することで、現在地を明示し、迷わせないホームページを心掛けましょう。
左上の赤枠内のパンクズリストだけでなく、学部ごとに色分けしていることで、構造的にも視覚的にもユーザがホームページ内のどこに自分がいるのか明確になっている。
１４、ページの続きを認識させる
ホームページを最初に表示したときに最初に表示される領域をファーストビューといいますが、ファーストビューで下にページが続いていることを的確にアナウンスする必要があります。
フルスクリーンのデザインはインパクトがありますが、このトップページは下に7倍ほどスクロールできるほど情報があるとは誰も思わないのではないでしょうか？
メインビジュアルを小さくし、下の情報を見切らすか、メインビジュアルをより大きくし、下にはみ出させる等させることで、このページは下にも情報があると認識させることがユーザビリティ向上には重要です。
１５、追走型の固定メニューの高さに留意する
スクロールに対して追走して固定表示されるグローバルナビゲーション（メニュー）を設置する際には、その高さに注意が必要です。
とてもユーザビリティの高い構成ですが、高くなりすぎてしまうと、ノートPCのような小さい画面で見た場合、肝心なコンテンツエリアが見えづらくなってしまうこともあります。
分厚いグローバルナビゲーションは画面を圧迫するため、欲張り過ぎずに掲載情報を絞り込む必要があります。
１６、クリック（タップ）数を減らす
ひと昔前であれば、1ページ当たりの情報量を少なくするような構成が流行っていました。
しかし、スマートフォンでの閲覧を中心に考える現在、「ページの長さ」よりも「ページの移動」の方がユーザにストレスを与えることは、多くのユーザビリティテスト、アクセス解析で明らかになっています。
ページを短く、端的に伝えることも重要ですが、ひと括りの情報は1ページ内で完結させることも重要なポイントです。
ユーザビリティを向上させる仕様や機能面について
１７、表示待ちの場合は処理中であることをアナウンスする
表示待ちである場合、ユーザには「待っているのか」「ボタンが反応していないのか」をアナウンスしなければなりません。
表示待ちであるアナウンスが無いと、「反応していない」と考え、同じ処理を何度も行い、さらに処理を遅くしてしまいます。
１８、表示スピードは早ければ早い方がいい
スマートフォンのページ読み込みに3秒以上かかるページは53％の訪問者が離脱する
ホームページはアニメーションやエフェクトが色々できるようになりましたが、表示スピードをどの程度犠牲にするかは実装前によく議論が必要です。
表示までに時間がかかりすぎると来訪者は離脱（直帰）してしまいます。
来訪者へ与えるインパクトは重要ですが、目的はそれだけではないはずです。
１９、アプリ頼みにしない
最近減ってきましたが、メールアドレスをクリックするとメーラーが立ち上がったりと、アプリ頼みの構成はユーザにネガティブな驚きと戸惑いを与えます。
ホームページ内で完結できるアクションに関しては、なるべく他のアプリに頼らない構成が必要です。
２０、戻るボタンを設置する
16で説明したように、ページを長く制作することが増えているので、「トップに戻る」といったユーザの操作を補助するボタンは有効です。
ユーザビリティを向上させるフォームついて
最もユーザに操作させる部分がフォームです。
そのフォームのユーザビリティが低かったがために、機会を損失することは非常に勿体ないので、慎重に構築するべきポイントです。
２１、無駄な入力はさせない
ユーザにとってフォーム入力は面倒な作業です。
必要でない情報が含まれていないかどうか、再度確認しましょう。
フォームのユーザビリティ向上の第一歩は入力項目の削除です。
２２、無駄な操作はさせない
よくある無駄な操作とは「姓」「名」を分けて入力させるフォームです。
多くの場合が姓名を分ける必要はないのではないでしょうか？
フォームからのデータを別アプリに移行させるみたいなことをしているのであれば、必要かもしれませんが、多くの場合はあまり考えることなく分けてしまっているのではないでしょうか。
２３、必須をわかりやすく表示させる
フォームのユーザビリティを考える上で必須項目の表示方法は非常に重要なポイントです。
よくあるのが「＊」のみでのアナウンスです。
「必須」と記載するだけで、ユーザは最低限何を入力すれば良いかを理解しやすくなります。
２４、書式をユーザに強制しない
半角やハイフン有り無しなど、サーバ側である程度処理できる要件をユーザに強制することは好ましくありません。
できる限りユーザに操作させることのないフォーム構築を心がける必要があります。
２５、Back space（戻るボタン）で戻ってもやり直しをさせない
制作者が思っている以上にユーザは「戻る」を多用します。
この時に情報が消えて入力のやり直しをさせてしまう仕様はユーザにとって親切だとは言えません。
ユーザが戻ったとしても、再入力をしないで済む仕様であるべきです。
まとめ
ホームページに関するユーザビリティのポイントを25にまとめましたが、全てに対応すればユーザビリティに関しては100点という訳ではありません。
上記に挙げたポイントの中には両立が困難なポイントも存在します。
ユーザビリティはターゲットの特性によって大きく異なります。
新規？リピーター？若年層？シニア？PC？モバイル？等々、最適な仕様、構成はあくまでもターゲット目線でなければなりません。
ユーザビリティに「絶対」はありません。
条件に対して最適なバランスを検討することが最も重要となります。
弊社ではユーザビリティのバランスを考慮したホームページ制作を提供しています。
新規制作、リニューアルをお考えの方は、お気軽に下記お問い合わせフォームボタンよりお問い合わせください。
