今回のポイント
入力項目が増えることで発生する問題点
入力項目を分割する2つの方法
共通デザインに埋めるか別ページにするか
リストボックスの使い方

 何らかのWebアプリケーションを組む場合,前回見たようなログイン・フォームや検索フォームのように,入力エレメント(入力要素)が1つあるいは2つだけのフォームは少ないでしょう。例えば会員制のサイトを作成するログイン場合を考えてみましょう。ログイン時はたしかにIDとパスワードの2つだけを入力するフォームですが,会員登録の画面では氏名やメールアドレス,場合によっては住所や電話番号,性別,趣味など10項目前後の入力エレメントをもつフォームになります。

 例としてYahoo! JAPANの会員登録画面をみてみましょう(図1)。

図1●Yahoo! JAPANの会員登録画面。入力項目は約15項目
[画像のクリックで拡大表示]

 これくらいの規模のフォームになると,“ページの一部がフォーム”ではなく,“ページ全体がフォーム”になります。

 企業が何らかのサイトを作る場合,多かれ少なかれサイト内で企業活動を行います。私は不動産の物件検索サイトを作ったことがあります。他に,ホテルの客室や,レストランの予約システム,求職サイトで仕事の検索システムも作りました。

 企業はサイトを構築することで,サイトから何らかの利益を得たいと考えています。したがって自社が持つリソースの予約/販売/検索といったシステム構築を考えることが非常に多いです。単純な会社紹介だけのためにサイト構築費として(つまりデザイン費だけに)数十万円,数百万円を出そうとは考えていません。そしてこれらの企業活動にかかわるシステムは,ほぼすべてにおいてフォームを使います。

入力項目が増えることで発生する問題点

 フォームでどの程度の情報を入力させたいのかは,発注企業側担当者と開発側で調整を行います。発注者側は往々にして,とにかくたくさんの情報を入力させたいと考えます。入力項目が増えていくと,大きく2つの問題が発生します。

(1)項目が多すぎることで閲覧者が辟易してしまわないか

 あまりに入力項目が多すぎるサイトは,閲覧者がフォームを見ただけで圧倒されてしまい,登録を避けてしまう可能性が高くなります。登録者数を増やすことが重要だと考えるサイトでは,フォームの項目数は絞り込んだほうが効果的です。

 登録後のサービスが同等であった場合のことを考えてみます。一方のサイトは会員登録で5項目の入力だけで済み,もう一方のサイトでは50項目の入力を必要とするとしてください。このケースで,あえて50項目が必要なサイトを選択する人はまずいません。

 それでもボタン選択できる入力項目が多い分にはまだ救いがあります。テキスト入力が多いフォームの場合,日頃からPCを積極的に使っている人でなければ“一本指打法”でいろいろな文章を入力することになり,大変な労力になります。すべての人がエンジニアや,メールを連絡手段としている人たちではありません。キーボードに慣れていない閲覧者のほうが遥かに多いことを忘れてはいけません。

 とはいえ,テキスト入力を伴わないボタンやリスト選択ならなんでもいいというわけでもありません。皆さんも常々疑問に思われているでしょうけれど,例えば会員登録で「趣味」欄があって,何を入力するかといえば「ドライブ」「カラオケ」「音楽鑑賞」「読書」その他ありきたりのもの2つ3つの中から選択といった入力要求をするサイトが未だにたくさんあります。こうした情報を集めて,そのサイトで何かの分析に役立てていることはまずありません。そのくせ必須などと書かれていたりします。

 趣味欄として入力される最も多い回答は「その他」だと言われています。つまりアンケート項目としての意味をなしていません。後々そのデータを利用することもなく,選択肢の大半が回答者の答えとマッチしていないような選択肢は必要ありません。「いずれかの選択肢:その他」の比率が,少なくても7:3程度になるようにしなければ統計データでもなんでもない嫌がらせにしかなりません。

 フォームの入力項目は近年,目に見えて減少傾向にあります。例えば会員登録でも,最近ではIDとパスワード,連絡用のメールアドレスだけでいいといったものが増えています。

 もし企画の段階で発注企業側が,あれもこれもと言い出したら(十中八九言い出します),イエスマンになってすべてを実装するのではなく,本当に必要なものだけに絞らないと閲覧者が忌避するということと,最近の登録の傾向について話して説得してください。

(2)個人情報を安全に管理できるか

 もうひとつの懸念点は,多すぎる入力項目の中に含まれるであろう個人情報の管理です。数年前に私がかかわった不動産の検索システムでは,登録者の氏名,住所の基本情報のほかに,年齢,年収,職業,家族構成といった個人情報も含まれていました。たしかに家族の住居探しですし,こうした情報も必要なのかもしれません。しかしサイトそのものは物件を検索するだけで,実際の契約や交渉は店頭で行う形です。現実的には個人情報は必要ありません。店頭で面談できる内容です。言い換えると「ネットでは入力を回避できる個人情報」です。

 私がかかわった別のサイト構築案件では,クレジットカード決済のシステムを持っていたのですが,サービスの追加や延長処理のために,サイト内に会員のクレジットカード番号を保持しなくてはなりませんでした。こちらはたしかに後々に個別面談するわけにもいかないので,データベースに入れておかざるを得ません。これは「システム上,入力回避できない個人情報」になります。

 回避できるかできないかはともかく,サイトに入力された個人情報が流出しないかどうかビクビクしながら開発者はシステムを作ります。開発者は個人情報が嫌いです。もし個人情報が流出してしまえば,私が勤めていたような下請けのIT企業は,軽く3回倒産できるくらいの補償金を上流から請求されることになります。

 確実に個人情報を管理する自信がない場合には,システムとして最低限必要な情報だけに絞り込むなどして,いざというときの被害を最小限に食い止めるような設計が必要になります。もちろん,どんなにシステムとしては安全かつ堅牢に作っても,関係者のパソコンからWinnyで流出する事故は避けられませんけれども。

 こうした背景から,フォームに本当に必要な項目は何で,全部でいくつになるのかということを,フォームのデザイン作成前にしっかりと考えなくてはなりません。入力エレメントの数が確定しないとページのデザインには入れません。

 システムにかかわるフォームのデザインについては,他のページと異なり開発側の裁量に委ねられるケースが多くなります。会社案内や製品紹介のページは発注者側が用意したテキストを貼り付けて作成し,実際のHTML化の前からレイアウトにもいろいろと注文がつきがちです。しかしフォームについては,プログラムの都合で必要なものが何かといった判断を発注者側ができないため,プログラマの意見が重要視されます。「デザインは営業やSEがアチラと決めてくるもの」というスタンスで待ちの姿勢に入ることなく,プログラマも積極的に意見を出してください。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら