はじめて見るサイトで、どこに何があるのかわからない。やりたいことがあるのに、操作や手順がわからない……。そんな風に困ってしまうこと、ありますよね。

これ、ユーザーの立場でも困ってしまうのですが、サイト運営側としてはさらに切実な問題です。困ったユーザーがどうするかというと、そのまま離脱して、もっと使いやすいサイトやサービスを探す……という可能性につながるわけですから。

競合サイトに移動したユーザーは、そのまま商品を買ったり、サービスに申し込んでしまうかもしれません。大きな損失です。そんな事態を招くことのないよう、サイトに存在する見えない壁は何としても取り除きたいところです。

Webや検索はすっかり日用品になりましたが、日々触れる個々のサイトやサービスには、まだまだ使いにくい部分が残っています。サイト運営側としては、サイトやサービス（もしくは新しいページ）を作るたびに、わかりやすいUIになるか否かを左右する判断を迫られ、成功したり、失敗したりしています。

今回は、この判断をより精度の高いものにするために知っておきたい2つの視点を紹介します。Webデザインは印刷物のデザインよりも制約が多く、思った通りにコントロールすることが難しい側面があります。しかし、デザインの良し悪しを左右する重大な判断の精度をあげ、できる限り使いやすく工夫はさまざまに凝らすことができます。使いやすいサイトを作るため、使いにくさを解消するため、基本を押さえておきましょう。
 

人は道具などの「モノ」を見るとき、形や素材から、用途や使用方法を自然に判断します。反対に道具などの「モノ」は「こう使えます」という手がかりを発信しています。

たとえばお店に入ろうとする時、目の前にあるドアがどう開けるものか（自動ドアかそうでないかなど）は、意識することなく自然に判断できますよね。ドアが、中に入ろうとする人に対し、適切な行動を促すメッセージを発信しているからです。ドアを作ったデザイナーが「近づけば開きます」という適切なメッセージを発信するよう、ドアを設計をているというわけですね。

モノが適切なメッセージを発信するよう設計することで、ユーザーがこちらの意図した通りにスムーズに判断・行動できるよう誘導するのがデザインの役割です。これは、Webサイトやサービスでも同じです。サイトやサービスの運営側は「ユーザーにこう行動してほしい」という意図に添って、それが正しくなされるよう、適切な手がかりを設計しなければなりません。
※この「モノが発信するメッセージ（判断の手がかり）」のことを、アフォーダンスとか、シグニファイアなどと呼びます。

ちなみに、モノは作り手の意図するしないに関わらず「こう使えます」というメッセージを発信しています。時には不適切なメッセージを発信し、ユーザーの行動が意図せぬものになってしまうので注意が必要です。
 

クレヨンを持った子どもにとって、白い壁は「落書きできるよ！」「楽しいよ！」というメッセージを発信しているように見えるでしょう。また、お寺や神社を見てまわる観光客には、ひび割れた古い鳥居や池は「小銭を入れるとご利益があります」というメッセージを発信しているように見えてしまうのでしょう。

しかし、子どもの親や、大切に守っていきたい鳥居を所有する神社側では、壁に落書きしてほしい、鳥居の傷に小銭を差し込んでほしい、などとは思っていないですよね。このように【モノが実際に発信するメッセージ】と【モノを提示する側の意図】は、簡単に食い違ってしまいます。

自社サイトの訪問ユーザーが思うように行動してくれない、操作やサービス内容について繰り返し同じような問い合わせが来る、という時には、サイトが発信している「こう使ってください」という手がかりが適切でないために、誘導が失敗している可能性があります。

サイトがどんなメッセージを発信しているのか（ズレてしまっていないか）を調査し、改善してみましょう。壁に落書きする子どもや、古びた木の鳥居の割れ目に小銭を挟もうとする観光客には、口頭で声をかけて注意したり張り紙をするなどの対策がありますが、Webサイトの問題点はもっと根本的な解決が可能です。

間違った理解や操作がどのような判断によってなされたのか、その判断を変えるにはどうしたらいいのか。Webサイトなら手を変え品を変え、テストして試せます。多くのユーザーを抱えるサイトやサービスであれば、重要な部分をころころ変えるわけにはいかないので判断が難しいところですが、サイト上の要素がどのようなメッセージを発しているのかを確認しながら、問題点の確認・改善を進めましょう。

なお、使いこなすのが難しい道具であっても、熟練してしまえば不便を感じなくなるものです。それと同じで、長くサイトやサービスに携わってきたデザイナーやサービス運営側の担当者にとって、ユーザーの誤った理解や行動につながるポイントはどうしても見つけにくい傾向があります。新メンバー加入時などはユーザー目線の声を聞けるチャンスなので、ぜひ有効活用していきましょう。

上で例としてあげた自動ドアのように実際に存在するモノと、画面上に存在するモノであるWebサイトには違いがあります。Webサイトの場合、ユーザーの行動の結果は意識的に提示しないと目に見えません。

自動ドアなら、自分の行動とドアの機能の関係性はあきらかですよね。近くに寄るとドアが開き、離れれば閉じます。行動の結果が目に見える状態です。Webサイトの場合、行動の結果は、意識的に視覚化しなければ目に見えません。

ユーザーがお問い合わせフォームに必要な情報を入力し、送信ボタンを押した時、ユーザーが見ている画面は何も変化しなくても、内部で処理を行い、管理者にお問い合わせが届くように作ることは可能ですよね。しかしこんなサイトはユーザーにとって不安ですし、使いにくいことこの上ありません。実際には、行動の結果が目に見えるよう、プロセスを追加しているわけです。

※お問い合わせフォームに情報を入力して確認ボタン押すと、内容の確認画面に移動し、最終確認の上で送信する仕組みになっていますよね。送信後は、送信完了画面に遷移し、送信完了メールが届きます。ユーザーの行動は実際の処理とは別に視覚化されています。

ボタンを押すなどのユーザーの行動を促すためには、行動した後にどうなるかの大枠が、行動前にわかるようにしておくべきです。また、操作を行なった後には、それが成功したか否か、どう処理されたかを提示することが必要です。「これをするとどうなるの？」が不明確だと、ユーザーは不安になり、行動をやめてしまいます。もしくは不満を持ち、使いにくいと感じるでしょう。行動の結果は、わかりやすく視覚化すべきです。

Webデザインには、紙とはまた別の多くの制約があります。そのためか、プラグインや便利機能、デザインパーツなどが流行すると、一気にそれが広まります。しかし「多くのサイトがこうしているから」という理由のみで判断するのは得策ではありません。他の多くのサイトがそうしているからといって、自社のサイトやサービスにそのやり方が適合するとは限らないのです。

大手サービス・大手企業サイトでも、どうして……と思ってしまう使いにくいUIが採用されていることがあります。外部からは見えない事情があるのでしょう。そうしたサイトの事情を鑑みず、他サイトがこうしているから、という理由だけでUIを決めるのは失敗のもとです。

自社サイトで発信したい情報や意図に沿ってUI設計を行い、テストを行ってユーザーの声に耳を傾けてください。そこから取得した数値を見ながら、さらに改善を進めていきましょう。