menu

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

2019年6月25日

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

■今回のテーマ

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

■どういうこと?

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

■何が困るの?

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

CPTIMES

   

投稿一覧

初めてのお客様はこちらからどうぞ

お見積りはこちらから

資料請求はこちらから

  

GAレポート

wordpress実装 初期費用0円 ワードプレス構築

下層ページデザインサービス

Coding Pack News Letter

コーディングパックのメールマガジン

お得な情報満載!

バックナンバーはこちら

最新納品実績

  • コーディング

    9P

    2019.07.04

    リゾートホテル

  • コーディング

    3P

    2019.07.04

    アプリ会社

  • コーディング

    2P

    2018.05.07

    服飾メーカー

  • コーディング

    1P

    2018.05.01

    不動産

  • コーディング

    1P

    2018.04.30

    専門学校

more

pagetop