ログインフォームに大切な7つの要素と重要な1つの機能
Post on:2011年2月18日
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。
元記事では下記のCSS3で実装されたフォームもダウンロードできます。

The Anatomy of a Perfect Login Page
デモページ
[ad#ad-2]
下記は各ポイントを意訳したものです。
ログインフォームに大切な7つの要素

-
- フォームのタイトル
- このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。
-
- 非メンバー用のリンク
- 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。
-
- ラベルとフィールド
- ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。
-
- パスワードを忘れた場合
- これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。
また、配置する際にも注意してください。パスワードのフィールドの近くがベストでしょう。
-
- サブミットボタン
- これはフォームで必ず必要な要素でしょう。最も良いユーザエクスペリエンスのためには、それ自身がボタンのように見える、ということです。
-
- 「Remember me」ボタン
- 再びアクセスするメンバーにとって、非常に有用な要素です。技術的に可能であるなら、このチェックボックスを含めるようにしてください。きっとメンバーはあなたに感謝することでしょう。
一つ重要な点は、クリックエリアを大きくすることです。チェックボックスだけでは小さく、クリックすることが難しいです。
-
- Back link
- メンバーが元のウェブサイトのページに戻れるようリンクを提供してください。
[ad#ad-2]
ログインフォームに重要な1つの機能

入力されたデータの妥当性をチェックするのはJavaScriptだけに頼るべきではありませんが、JavaScriptベースの妥当性チェックのスクリプトの実装は重要です。
これはユーザーの入力操作に対して、即時にレスポンスを返すことができ、直ちに修正を提示することができます。
sponsors