フォーム入力の補助機能

フォーム入力の補助機能

　携帯サイトでも、PCサイトと同じように会員登録の際などに自分の名前やメールアドレスなどを指定されたフォームに入力するシーンがよくあります。

　フォーム入力に限らず、携帯電話で文字を入力する際には、入力モードを切り替える操作が必要です。例えば、名前を入力する場合は「漢字モード」、メールアドレスを入力する場合は「英字モード」や「数字モード」に切り替えるはずです。

　同じことを携帯サイトでも行うわけですが、あらかじめユーザーに入力させる文字列が想定される場合は、入力時にすでに入力モードを切り替えてあげると、非常にユーザーにとって便利になります。例えば、誕生日を入力する場合、半角の数字を入力するはずですから、入力の際にはじめから入力モードが「数字モード」になっていれば、ユーザーの入力をスムーズに行わせることが可能です。

　実際に、この入力モードをどのように指定するかですが、キャリアによって少々異なります（図2-1）。サンプルソースはこちらからダウンロード（http://www.thinkit.co.jp/images/article/143/4/14342.zip）できますので、参照ください（14342.zip/0.885 KB）。

　ドコモのiモードHTMLの場合は、「istyle」属性を、iモードXHTMLの場合は、style属性で「-wap-input-format（WCSS）」を指定します。auの場合は「format」属性で、ソフトバンクの場合は「mode」属性をinputタグに指定します。3キャリア対応で書く場合は、それぞれの属性をinputタグに併記すれば問題ありません。例えば、アルファベットで入力を行わせる場合は以下のようになります。

<input type="text" name="test" value="入力欄" istyle="3" format="*m" mode="alphabet" style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;-wap-input-format:*m;" />

　ただし、すべての属性を併記する上記の例では、一部のソフトバンクの機種で不具合が報告（http://d.hatena.ne.jp/Yudoufu/20080914/1221393041）されています。

視認性を高めるコツ

　携帯サイトでは、できる限り1画面に多くの情報を詰め込む努力がなされています。視認性を高めつつ、見やすさやデザインを向上させるポイントを解説します。

　携帯サイトでは「いかに1行に収めるか」が非常に重要な要素となっています。例えば、前回（http://www.thinkit.co.jp/article/143/3/）に作成例で紹介したサイトでは、実は多くのテクニックが使われていたことに気づかれたでしょうか（図2-2）。

　画面下部の「プライバシーポリシー」ですが、これは携帯サイトでは慣例となっている半角カナを使ったテクニックです。半角カナにすれば文字幅を半分に減らすことができるのですが、むしろ重要なのは、このようになるために2段階の手順が踏まれているということです。まず、このプライバシーポリシーを「個人情報の取り扱いについて」としないのは、文字が長いからです。全角13文字は機種によっては改行されてしまうので、ほかに取って代わる文言を考えているのです。

　また、「動画いっぱい」という文字の後に「無料動画見!」という一見意味の通らない文言が書かれていますが、無料の動画が見られるんだということは分かるはずです。ほかの行と文字列を合わせるという作業によって全体的なデザインがすっきり見えるのです。このように携帯サイトでは「文字でデザインする」というのが重要な考え方になっています。

　ほかにも、例えば「デコメをゲット」の部分であえて「デコメ」を半角、「ゲット」を全角にしたり、「そのほかはコチラ！」の最後にあえて半角の「！」マークを挿入していることにも意味があります。

　実はこの文字を短くして文字量をほかと調整するというプロセスは多くの携帯サイトで実践されており、Webディレクターやコピーライターの涙ぐましい努力がうかがえます。ぜひ、有名なサイトを参考にしてうまい文言を考えてみてください。