rabiこんにちは!RABIMAX管理人、らびです。本日の記事はWebサイトにとっては欠かすことのできないフォームについて考えていきたいと思います。みなさんも一度は使ったことがあると思われるフォーム。必須事項が違ったりといろいろありますよね。どのようなフォームがよいのかを考えてみます!!先ず、フォームは対話です。PCと人の、スマホと人との対話なのです。対話をする上に先ず、わかりやすく伝えること。これが一番大切ですよね。1.本当に必要なことだけを入力させるフォームに一つ項目を増やすたびにコンバージョン率は下がります。フォームを作成する前になぜその項目が必要なのか、その情報を何に使うのかを考える必要があります。2.論理的な順序でフォームを並べる論理的な順序ってなんだ?と思われる方も多いかもしれません。一般的なフォームから離れた構造にすることは論理的な順序から離れる行動になるので、注意が必要です。3.関連する情報をグループに分ける関連している情報をグループに分けることによって、入力すべき情報をユーザーの方が理解してくれるようになります。)、ログイン情報(Eメール、パスワード、秘密の質問など)、4.フィールドの数を最小限に上でも触れましたが、入力フィールドが一つ増えるたびにコンバージョン率は下がります。そのため、なるべくフィールドは最小限にしましょう。ドロップダウンでXX年、XX月、XX日といったようにするのではなく、テキストフィールドでまとめて入力できるようにしてあげることが望ましいのです。任意の入力フォームは出来うる限り避けるのがベストです。任意であるということは、そのフォームを扱うユーザーにとってなくても問題ないものということであり、コンバージョン率が下がるかもしれないそのフォームを置くことはリスクでしかないのです。最低でも*を使用する、任意とわかるようにデザインするのが最低条件でしょう。6.デフォルト値の設定を避けるユーザーがフォームのあるページの注意事項を熟読してくれるとは限りません。読み飛ばされる可能性も多いにあります。そのため、デフォルトで値をいれておくことは避けましょう。入力した気になって、そのまま送信ボタンを押してしまうこともあるでしょう。7.(PCに限る)キーボード入力に配慮したフォームにするユーザが全てのフィールドにキーボードだけでアクセスし編集することができるようにしておくことが大切です。キーボードから手を離すことなく、タブのみで移動し入力していけるフォームが理想的です。8.入力フィールドにオートフォーカスを設定する視覚的にどこを選択しているのかをわかるようにしてあげると優しいフォームになります。Amazonの入力フォームでは、自身が選択しているフォームはオートフォーカスでオレンジの枠になるようになっています。郵便番号のフィールドが選択された時に日本語のキーボードを表示する必要はありません。郵便番号は必ず数字だからです。10.無駄のない文字数、ラベル付けを意識するラベルはヘルプ文とは違います。そのためだらだらと長いラベルをつけるのは誤りです。ラベルは出来うる限り、無駄を省きましょう。11.ラベルの位置を意識する左揃え、右揃え、フォームのすぐ上とパターンがあると思います。縦並びが最もよいとされていましたが、現在ではあまり関係がないということが判明しています。上に置くラベルの利点は、ラベルのサイズがまちまちな場合やローカライズする場合でもUIになじみやすいということがあげられます。レスポンシブデザインに最もマッチしているといえます。12.プレースホルダのテキストユーザー名とパスワードだけのようなシンプルなフォームの場合、ラベルを使うのではなく、プレースホルダで簡潔に説明してあげるのがよいでしょう。プレースホルダを書くのは禁物です。・入力フォームの縦幅はファーストビュー(1000×550px)内に収める※これは一目で入力フォーム全体が見渡せるため・クリアやキャンセルを置かない※間違えてクリア、キャンセルをクリックすることを防止するため・プライバシーポリシーを明示する※以外と気にする人が多いとのこと・OpenID(Twittter、FacebookなどのSNS)を利用して登録手続きを簡単にするなどがあります。まとめフォームは入力を避けられる可能性があります。それは面倒だからに他なりません。多く入力してもらうためにはなるべく簡単で使いやすいフォームを作成することが大切です。投稿ナビゲーション【警告】シノアリス終了のデマツイートの注意せよ!ECOMOさんでURBANO(ジャンク)買ってみた。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータがどう処理されているか知りたい方はこちらをお読みください。modernthemes.net。