https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0/ Recent content in ログインフォーム on akky@サイボウズラボ・ブログ Hugo ja Wed, 25 Jan 2023 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/ Wed, 25 Jan 2023 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/ <p>画面上の目がマウスカーソルを追いかけるというと、X Window System の <a href="https://ja.wikipedia.org/wiki/Xeyes">Xeyes</a> の昔(Wikipedia によれば 1988 年!)からあるアイデアですが、ウェブサイトのログイン画面を見ているキャラクターというアイデアがこちら</p> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">What a cute login form 🥰 <a href="https://t.co/Qc1csk0I52">pic.twitter.com/Qc1csk0I52</a></p>&mdash; Victor (@vponamariov) <a href="https://x.com/vponamariov/status/1617763405708025856?ref_src=twsrc%5Etfw">January 24, 2023</a></blockquote> <script async src="https://platform.x.com/widgets.js" charset="utf-8"></script> <p>メールアドレスを入力するタイプに応じて雪男風のキャラクターの視線が動きますが、面白いのはパスワードを入力する時のキャラクターの動作。</p> <p>パスワード入力時のマナーとして確立した挙動ですね。</p> <p>twitter のリプライからは、この手のキャラクターがいつ登場したかの情報が集まっています。</p> <p>小物に自分のデータを印刷して購入できるサービス<a href="https://www.stickermule.com/jp/login">Sticker Mule のログイン画面</a></p> <p><a href="https://www.stickermule.com/jp/login"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/stickermule-login-form-character-and-password-form_hu_f3ba1b033154173c.webp 480w, https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/stickermule-login-form-character-and-password-form_hu_a067c95091880cab.webp 683w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/stickermule-login-form-character-and-password-form.png" width="683" height="687" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>Sticker Mule のログイン画面</p> <p>VPNサービス <a href="https://www.tunnelbear.com/account/login">TunnelBear のログイン画面</a></p> <p><a href="https://www.tunnelbear.com/account/login"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form_hu_dc64a9ecfc335652.webp 480w, https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form_hu_2c160e9ff0c8c244.webp 768w, https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form_hu_ebeffda672ed9335.webp 918w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2023/01/character-looking-your-web-form/tunnelbear-login-form-character-and-password-form.png" width="918" height="870" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>昔 dribble でも見た、という反応は多かったのですが、<a href="https://dribbble.com/">Dribbble.com</a> のことであれば、今のログインフォームにはキャラクターは居ないようです。</p> <p>2019年の Flutter と Flare のデモで、スマートフォン上で同様のフォームを作るコードもありました。</p> <p><a href="https://github.com/GJJ2019/Flutter-Teddy-SignIn">GJJ2019/Flutter-Teddy-SignIn: A Flutter Project For Real Sign In Page Based on Flare Teddy animation</a></p>