はじめに
はじめまして、ecbeingのゆきもんです。
最近まで製品開発本部でBtoC開発に携わっていましたが、今後はBtoB開発に取り組むことになりました。
環境は変わりますが、ユーザーが使いやすい機能を提供できるように引き続き知識をアップデートしていこうと奮闘中です。
さて、今回はHTML5で登場した便利な「データリスト（datalist）」について触れ、これを活用したUI改善につながる例を紹介します。
UI改善
データリストについて紹介する前に、まずUI改善とは何かについて説明します。
UI改善とは
UIとは「User Interface（ユーザーインターフェース）」の略で、ユーザーがWebサービスやサイト、アプリケーション、ソフトウェアを利用する際に触れる接点全てがUIです。
つまり、UIを改善するということは「ユーザーとサービスが違和感なく接することができる」ということであり、「ユーザーにとって使いやすいサービスを提供する」ことがUI改善の目的ということになります。
今回の場合ではウェブサイトでユーザーが入力する際に触れる入力欄として、テキスト入力もセレクト入力もできるという点で時と場合によって使い分けることができます。
この点において「ユーザーにとって使いやすいサービスを提供する」ことができているのではないでしょうか？
UI改善が重要な理由２つ
1. ユーザーの利便性が高まる
UIを改善すると、ユーザーがよりサービスやWebサイトを便利に使えるようになります。
ユーザーがストレスなく、サービスを使えるということは非常に重要です。
どれだけ良いサービスや商品だったとしても、購入や利用までに時間がかかったり、分かりにくかったりすると、ユーザーは離れてしまいます。
ユーザーの利便性が高まると、サービスへの評価も高まり、リピーターになってくれます。
自社のサービスを継続的に利用してもらう上でも、UIの改善は欠かせません。
2. 競合との差別化ができる
現在では、世の中にサービスがあふれており、自社と似たようなサービスを提供している競合をユーザーが見つけやすい環境になっています。
そのような環境において、サービスや商品そのもので競合と差別化することももちろん重要ですが、顧客体験（UX）で差別化することも重要です。
上述したように、現代のユーザーは、利便性が高く、快適にサービスの利用や購入をできることを重要視します。
そのため、競合よりもUIが優れていることで、差別化につながるのです。
データリストを活用してUI改善
なぜデータリストなのか？その強みは？
まずはデータリストを使うことになった背景をお話ししたいと思います。
とあるプロジェクトで、「テキストを自由に入力もできるけど、選択肢からも選べるセレクト入力ができるようにしたい」という要望から調べたのが始まりです。
一般的なHTMLでは、input 要素を使うことでテキスト入力ができ（※１）、select 要素を使うことで表示した選択肢からデータを選んで入力できます（※２）。
HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。
「テキスト入力」と「選択肢表示」の２つが同時にできたらユーザーにとって便利だと思いつつも、JavaScriptを使わずにシンプルに実装する方法はないかと考えました。
調べるとHTML5で追加された datalist 要素で実現できるということがわかりました。
これを実装してみたところ非常に便利でUI改善にもつながる強みがあると感じました。
詳しい仕様については次のセクションでご紹介していきます。
データリスト要素
データリスト要素は、input 要素のテキスト型や日付時刻型、範囲型などの特定の入力欄に紐づけることで選択肢を表示させることができます。
特にテキスト型の場合、通常のテキスト入力はそのままに、入力した内容に応じて候補を絞って表示させることができます。
百聞は一見に如かずですので、まずは下記のデータリスト要素を利用したテキスト入力を触ってみていただければと思います。
例として、担当者を自由に入力でき、かつ、従業員のリストから選択できるようにしたものです。
担当者：
表示するブラウザや環境によって微妙にデザインや候補の絞り込み（前方一致または部分一致）が異なるので、その点だけ注意が必要です。
上記のサンプルコードの詳細は下記の通りです。
datalist 要素をコントロールに結びつけるには、id 属性で固有の識別子を与え、同じ識別子を値とした list 属性を input 要素に追加します。
<!-- サンプルコード --> <div> <span>担当者：</span> <input id="leader" value="" list="leaderlist" name="leader" placeholder="テキスト入力またはクリックして選択" style="width: 300px;"> <datalist id="leaderlist"> <option value="テスト アカウント"></option> <option value="佐藤 太郎"></option> <option value="佐藤 次郎"></option> <option value="佐藤 新一"></option> <option value="佐藤 新"></option> <option value="鈴木 一郎"></option> <!-- 省略 --> <option value="てすと あかうんと"></option> </datalist> </div>
最後に
データリストとUI改善というテーマでご紹介しましたが、いかがだったでしょうか？
UI改善を行うには現状の問題点を考え、実際に使用するユーザーの側に立って考えることが大切です。
今後も日々の情報収集や学びを続けながらも、多角的な視点でユーザビリティ向上を意識しながら頑張っていきたいと思います！
ecbeing では、新進気鋭なエンジニアを募集しています！ careers.ecbeing.tech
