読み仮名を自動的に入れる

Webサイトの入力フォームを設計する（サイト運営側が欲しいデータを検討する）上で、名前の読み仮名が必要であるケースは少なくないと思います。「失礼のない顧客対応を電話や対面で行なうために、正しい読み方を知っておきたい」などの場合です。その一方で上記コラム記事でいただいたコメントには「同じキーを2倍も打ち込ませることを強制している」と書かれていて、ユーザー側が大なり小なり感じるであろう感覚として、とても示唆に富んでいると感じました。

今回いただいたコメントの内容を、もう少し想像を膨らませて考えると、「名前の入力作業を一回やれば、漢字表記と読み仮名の両方が入力された状態になっているべきではないか」という発想につながります。一般的に見られるWebフォームの大半は、ユーザーに名前を入力させる際に、漢字表記とは別に読み仮名の入力を要求しているわけですが、これは「余計な作業をユーザーに強いているのではないか」「より優れたインタラクションをデザインする余地があるのではないか」と考えるのです。そこで：

• 名前を入力すると、自動的に読み仮名も入力される。
• 必要に応じて、読み仮名はその場で修正ができる。

というフォーム入力欄を下記に実装してみました。携帯電話でお友達のアドレスを登録する際に、名前を入力すると自動的に読み仮名も入力されている、というのを見たことがある方は多いと思いますが、そんなイメージです。

上記のサンプルでは、「フォームのフリガナを自動入力させるAutoRuby.js （ホームページ制作・運営のヒント）」で紹介されている、「auto_ruby.js」というJavaScriptを使わせていただきました（別途、prototype.jsが必要です）。JavaScriptが無効になっている環境下では、単に読み仮名の自動入力が機能しなくなるだけなので、プログレッシブエンハンスメントの考え方に沿っています。

この「auto_ruby.js」、デフォルト（初期状態）では、カタカナ表記で読み仮名が自動入力される設定になっていますが、上記サンプルでは「フリガナのカナ表記」に倣い、ひらがな表記で自動入力されるようにカスタマイズしています。このようにひらがな表記にしておくことで、誤った読み仮名を即座に編集したいと思った場合も、都度カタカナに変換するという煩わしい作業をしなくて済むからです。

最近は難しい読みかたのお名前も多いので、必ずしも、読み仮名の自動入力がスムーズに機能するとは限りませんが、それでも、ゼロから入力するよりは部分的に変更できるほうが、ユーザーにとっては楽だと思います。誤った内容のテキストボックスを部分的に編集させることで、かえって訂正ミスを呼び起こさないか（ゼロから入力させる方がミスが少ないのではないか）という意見もあるかもしれませんが、珍しいお名前の方は自覚的に注意深く読み仮名を確認するでしょうし、多くのユーザーにとっての利便性も併せて考えると、この手法は検討してみる価値がありそうです。