来訪者（ユーザー）にとっての「使いにくさ」を排除しよう

ウェブサイトの運営では「来訪者」にとっての「違和感」を取り除くのが命題です。命をかけると言うと大げさに聞こえるかもしれませんがユーザーは無意識で判断しているので常に意識しておきましょう。

来訪者（ユーザー）にとっての「使いにくさ」を排除しよう

とても魅力的なコンテンツなのに「使いにくさが原因」でお客様を取りこぼしていると考えたら残念ですよね。でも意外とよくあります。細部のあしらいが手抜きになっていて機会を失っているパターン。

メールアドレス入力欄がわかりづらい例

以前に当研究所でもいつもお世話になっている方からご連絡をいただきました。内容をお伺いすると「気になっているページからメールアドレスを登録しようと思っていますが安全でしょうか？」という内容。

URLとスクリーンショットを共有してもらうと以下でした。入力欄が非常にわかりづらいですよね。

見方によっては「メールアドレスの入力フォーム」には見えません。下の緑色はボタンですが、入力フォームと登録ボタンの大きさ（比率）がおかしなことになっています。 まるで「真実の口」のような雰囲気。

何より直感的に「入力フォーム」とわかりません。実際に「登録が安全か気になる」というクライアントの感想通りで多くの方がメールアドレスの入力に戸惑っている状況が考えられますよね。

メールアドレス入力欄を改善した表示例

PC・タブレット・スマホどの端末で改善させるかなど「細かい仕様」は決めなければなりませんが、とりあえずの機会損失を防ぐ対策としては以下画面が使えそうです。

ちなみに「透かし文字」をゴシック体にするか、明朝体のままにするかはウェブサイト全体で使っているフォントとのバランスを見て決めていきましょう。ページ全体がゴシック体ならゴシックがベスト。

具体的には「ボタンの横幅」と「入力フォームの横幅」を一致させています。グレーの線も込みで幅を統一。

セレクトボックスの見た目（バランス）例

ちょっとした違和感の例では以下もあります。いくつか気になる点がありませんか？

・薄グレーと濃グレーで角丸（かどまる）の度合いが違う
・ボックス内の「選択してください」の文字が左に寄りすぎている
・下向きの矢印アイコンの位置とサイズ感のバランスが悪い

少し省略していますがざっくりと上記の３つならすぐに気づきますよね。以下の通り横配置もアンバランスで一致していません。角丸の度合いも「要素同士が横に並ぶ」のであればどうしても気になります。

セレクトボックスの見た目を調整した例

以下が全体でバランスを取った例です。時間がかからない程度に調整を入れました。

あえて言うまでもありませんが、調整した箇所は下記の通りです。

・薄グレーと濃グレーの角丸（かどまる）バランスを統一
・既定の文字「選択してください」の位置を自然な場所へ移動
・下向きの矢印アイコン位置とサイズ調整で視認性を確保
・左右のボックス全体像を違和感がないようにバランス調整
・濃グレーボタン内にある「選択」の文字位置を真ん中へ

もう一度見比べてみましょう。改善前が上で改善後が下です。

わずかな差にも見えますが、見た目に受ける印象はまるで違いますよね。

細かな改善作業で効果はあるか？

もし上記を見て「本当に意味があるの？」と感じていたらイエローカードです。

理由はシンプルで『サイト改善は運営者（オーナー）目線で行うべきではない』からですね。ウェブサイトを実際に使うのは不特定多数の来訪ユーザーとなります。つまり、サイト運営オーナーではありません。

そのためには「いかに違和感なくユーザーに使ってもらえるか？」が肝になります。ウェブサイトを使っているリアルな目線は（私たち・僕たちの主観ではなく）常に来訪ユーザーの感覚で判断しましょう。

まとめ

本日は「ウェブサイトの使いにくさを改善する方法」をご紹介させていただきました。参考までに業界用語ではUI/UX改善とも呼ばれていて、デザインをゼロから作成する制作の技術としても使えます。

特にプロのデザイナーから受け取るデザインデータは1px単位で組み上げられています。プロが使うデザイン作成ソフト「フォトショップ」ではグリッドやガイドという機能を使って精密に作っていくわけです。

建築の世界でも数ミリ単位の違いを意識しています。目の前の“些細（ささい）”を無視してしまうと、いづれどこかで大きなズレとなって「影響する範囲が目にわかるレベルにまで発展するから」です。

有名な言葉では「神は細部に宿る」とも言われますよね。来訪ユーザーは小さな違和感を見落としません。具体的にどこがおかしいという指摘はなくても「ん？」とチグハグを感じて去ってしまいます。

普段から気づいた点があれば即改善して次につなげていきましょう。