【デザインのツボ】機能実装の注意点その2

menu

2019年6月25日

コーダーの輿水です。
【デザインのツボ】第9回！
前回に引き続き、フォームやログインなどの機能をデザイン・実装する場合の注意点についてお送りします。

■今回のテーマ

今回ちょっと考えていただきたいのは、“入力内容の仕様、ちゃんと考えていますか？”ということです。ちゃんと考えてデザインしてるよ！と言いたくなる所だとは思いますが、ちょっと立ち止まってみてください。細かく見ていくと、意外と曖昧なままになってしまっていることがあるんです。

■どういうこと？

例えば電話番号。”電話番号かどうか”チェックできればOK！とだけ思いがちですが、その時「+1-206-555-0100」という入力を想定できているでしょうか？これはアメリカ国際電話の例示用番号なので、立派な”電話番号”です。しかしこれを入力できるということは、海外からの問い合わせOKとも取れます。一方で、本来はグローバル用のフォームなのに入力欄が日本国内番号の仕様になっていたら、海外からの連絡お断り、と取られてしまうかもしれません。
他にも「その他にチェックが入っていたら詳細を必須にする」といった組み合わせで条件が変わる箇所など、そのフォーム特有の仕様は特に、デザインからだけでは読み取れない場合もあります。

■何が困るの？

デザイン時に思っていた仕様と実装された仕様が違ったり、仕様がきちんと定まっていないと、欲しい入力内容をきちんと取ることができなくなってしまいます。
上記の電話番号の例のように、NGなはずの内容が入力されてしまったり、逆にOKな内容が弾かれてしまったり･･･。その次の組み合わせ条件についても、詳細も入力して欲しかったのに･･･！となってしまいますよね。そうならない為には、一つ一つの入力項目の仕様を定義して、それをコーダーに伝えて共有することが大切です。
例えば、表に入力項目名、その項目の仕様、OKな入力例、NGな入力例、とまとめてみる。デザインを見ただけでは曖昧な仕様は、別レイヤーに仕様を書き込んでおく。などなど。
見れば分かる！ではなく、まとめておけば自分にとっても分かりやすく、一石二鳥です。フォームをデザインする際には是非一度、仕様をまとめてみてください。