Webサイトを見たユーザーが、Webサイト運営側の意図した行動を起こしてくれることを「CV（コンバージョン）」と言います。このコンバージョン率に大きく関わるのが、WebサイトのUIとUXです。より多くのコンバージョンを得るために意識したい、UI/UXのポイントをご紹介します。
まず確認「UI/UX」とは？
UI（ユーザーインターフェース/User Interface）とは「製品とユーザーの接点」のことです。Webサイトの場合は、「ユーザーの目に入り、操作できるものすべて」がUIだと言えるでしょう。例えば、「とある製品を調べようとWebサイトを見たところ、デザインが美しく、メニューバーもシンプルでわかりやすい」とユーザーが感じたとき、そのWebサイトは「UIがいい」と言えます。
一方で、UX（ユーザーエクスペリエンス/User eXperience）とはユーザー体験のことです。ユーザーが「製品サイトが見やすかったため、すぐに知りたかった情報を得ることができた」ときや「製品の価格が気になっていたところ、製品サイトに設置されたチャットで聞くことができて疑問が解決した」といった場合に、「UXがいい」と言えます。
つまり、UIは見た目の良さや操作のしやすさについて、UXはユーザーがそのWebサイトを通して得られる体験や感情のことを指しているのです。
CVを意識したUI/UXデザインのポイント
UIやUXが優れていれば、ユーザーは快適にWebサイトを閲覧することができ、購入や資料請求といったCV（コンバージョン）に至りやすくなります。そこで、CV（コンバージョン）を意識したUI/UXデザインのポイントを具体的にご紹介します。
1.レイアウトのポイント
大事な要素は左上に基本的に人間の視線は左上から右下へと流れていきます。そのため、重要な要素は左上に配置するのが有効でしょう。
「戻るボタン」は左上に
ユーザーは過去の経験から「操作ボタンが置かれている場所」を無意識に予想しています。戻るボタンは、ブラウザやスマートフォンの操作画面とそろえた左上に配置しましょう。
ファーストビューで勝負
ブラウザでWebサイトを表示したとき、スクロールせずに見ることのできる範囲を、「ファーストビュー」と言います。ユーザーは、このファーストビューを眺めて「探している情報が載っているか」を判断し、回遊するか離脱するかを無意識に判断しているのです。ファーストビューには、ユーザーが求めている情報をわかりやすく配置しておきましょう。
余白をとる
1つ1つの要素を近づけすぎず、余白を設けて、情報を見やすく配置しましょう。
おすすめの選択肢を強調する
選択肢が並列だと、意思決定を促しづらいものです。製品の料金プランなど、いくつかの選択肢から提案する場合は、おすすめのものを強調しましょう。
無駄にリンクを配置しない
リンクが複数あると、ユーザーは迷い、重要でないリンクをクリックしてしまいます。リンクは重要なものだけに絞りましょう。
2.配色のポイント
多くの色を使わないいろんな色が使われすぎていると、ゴチャゴチャした印象を与えてしまいます。世界観に合った数種類の色に絞りましょう。
背景色と文字色に差をつける
背景が白や薄桃なら文字は黒、背景が濃い色なら文字は白にするなど、背景色と文字色にはハッキリと差をつけて、読みやすくしましょう。
コンバージョンポイントの色を変える
コンバージョンポイントを他と異なる色にすると、注目されやすくなります。よく赤やオレンジがおすすめされていますが、A/Bテストなどを行って一番成果が出る色を採用しましょう。
3.フォントのポイント
なじみのあるフォントを使う読みづらければユーザーは離脱してしまいます。明朝体やゴシック体など、多くの人がなじみをもっているフォントを使いましょう。
使うフォントは統一する
フォントが混在してしまうと、読みづらいものです。使用するフォントは、基本的に日本語と英語でそれぞれ1つずつにしましょう。
重要な部分は強調する
特に伝えたいことや見出しは、フォントを大きくしたり太字にしたりするなどして差別化し、ユーザーの内容理解を助けましょう。
