パスワード入力に合わせて目玉アイコンが動く！遊び心のあるUI演出の実装方法

8月 22, 2025 8月 22, 2025

小瀧

視線を追いかける「遊び心」のあるUI

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

パスワード入力フォームといえば、ただの四角い入力欄に「●●●」が並ぶだけの無機質な存在。
ですが、そこにちょっとした遊び心を加えることで、ユーザー体験を大きく変えられます。

今回紹介するのは「目玉アイコンがパスワード入力に合わせて動く演出」です。
ユーザーがキーを叩くと、まるでアイコンが入力を見守るように視線を動かします。

こうした工夫は、フォームの堅苦しさを和らげ、ユーザーに「楽しい体験」を提供する小さな仕掛けとなります。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTMLの基本構造

<div class="eye-wrapper">
  <div class="eye">
    <div class="pupil"></div>
  </div>
  <input type="password" id="password" placeholder="パスワードを入力">
</div>

ここでは「目玉（eye）」と「瞳（pupil）」を div で作成し、その横にパスワード入力欄を置いています。

CSSで目玉をデザイン

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f4f6f8;
  font-family: sans-serif;
}

.eye-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.eye {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.pupil {
  width: 18px;
  height: 18px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 16px;
  left: 16px;
  transition: transform 0.2s ease;
}

input[type="password"] {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s ease;
}

input[type="password"]:focus {
  border-color: #4caf50;
}

これで「白目」と「黒目」が完成です。
CSS の transition を効かせて滑らかに動くようにしています。

JavaScriptで入力に連動

const input = document.getElementById("password");
const pupil = document.querySelector(".pupil");

input.addEventListener("input", () => {
  const length = input.value.length;
  // 入力文字数に応じて瞳が左右に動く
  const offset = Math.min(length * 2, 14);
  pupil.style.transform = `translateX(${offset}px)`;
});

ユーザーが入力するたびに文字数をチェックし、その数に応じて瞳を translateX で左右に動かしています。
「入力するほど視線が端に寄っていく」という演出はシンプルながら直感的です。