スマホ向けウェブサービスのユーザー登録画面/ログイン画面を作る際に工夫したところ

@jishiha です。

まちクエストは主にスマートフォンから使うサービスです。新規登録とログインの画面には、スマートフォンから操作することを想定したいくつかの工夫を施しています。

ユーザー登録画面

入力する項目は、

の3つです。

これに加えてよくみかけるのは「パスワードの確認」という項目ですが、スマートフォンからはあまりたくさん文字をタイプしたくないですから、あえて削りました。

しかし、そうすると間違ってパスワードを入力してしまう危険がでてきます。

そこでパスワードの項目は、通常は *（アスタリスク）で隠して表示するところを、あえて隠さずにそのまま表示するようにしました。

こうすることで間違ってタイプしてしまっても見直して間違いに気づく可能性が大きくなります。

パスワードをそのまま表示してしまうと盗み見されるという心配が生じてしまいますが、スマートフォンは手許で使うことがほとんどですから、他の人にのぞき込まれる心配は PC と比べてあまりないと考えました。

ログイン画面

これは、スマートフォン向けに限らない話ですが、ログインに必要なのは、ユーザー名とパスワードなのかメールアドレスとパスワードなのかいちいち注意深く項目名を見たりしないものです。

そこで一つ目の項目は「ユーザー名またはメールアドレス」として、どちらにも対応できるように作りました。

ユーザー登録のときには隠さず表示していたパスワードですが、ログイン画面では * を伏字にして隠して表示します。

パスワードを間違えたまま登録してしまうと面倒ですが、パスワードを間違えてログインしても、もう一度ログインをやり直すだけですから構いません。

また、iPhone の場合、項目を選択して入力し始めるとき、最初の一文字目が大文字になってしまう設定になっていることが多いので、input タグの autocapitalize という属性を off にすることでこの設定を無効にしています。

これらひとつひとつの工夫は、実は小学生の息子に実際にユーザー登録とログインをさせてみて、つまづくポイントを観察しては直す、ということを繰り返すことによって実現しました。

誰にでも使ってもらえるサービスにできるように、これからもこうしたユーザビリティテストやユーザーの皆さんからのフィードバックを大切にしていきたいと思っています。（フィードバックは、このブログの一番上のメニューにある「お問い合わせ」よりお願いします）

まちクエスト運営ブログ