パスワード表示切替のUIデザイン！初心者でもわかるCSSとJavaScript実装テクニック

パスワード表示切替のUIスタイル設計

先生と生徒の会話形式で理解しよう

生徒

「ログイン画面で、パスワードの目玉マークを押すと文字が見える機能がありますよね。あれを自分のWebサイトにも作りたいのですが、難しいのでしょうか？」

先生

「その機能はパスワード表示切替といって、Webサイトの使いやすさを上げるための大切な工夫です。実は基本的なCSSとJavaScriptの組み合わせで誰でも実装できますよ。」

生徒

「JavaScriptやUIスタイルという言葉が少し難しそうです……。初心者でも理解できるでしょうか？」

先生

「もちろん大丈夫です。UIという言葉は『ユーザーインターフェース』の略で、画面の見た目や操作性を指します。この表示切替の仕組みをステップバイステップで見ていきましょう！」

1. パスワード表示切替とは？なぜ必要なのか

パスワード表示切替とは、入力した秘密の文字を「●●●」のような隠れた状態から、実際の文字として表示させるためのボタンのことです。これがあることで、ユーザーは自分の入力ミスをすぐに確認できるため、ログインに失敗する確率を大きく減らすことができます。特にスマホなどの小さな画面では、入力した文字が見えにくいことが多いため、この機能は欠かせません。

UIスタイル設計において重要なのは、「今、隠されているのか、表示されているのか」を視覚的にわかりやすくすることです。目玉のアイコンが変わったり、ボタンの文字が切り替わったりすることで、ユーザーは現在の状態を正確に把握できます。これは、ユーザー体験（UX）を向上させるために非常に重要な工夫なのです。

2. HTMLで入力フォームを作成する

まずは土台となるHTMLを作ります。パスワードを入力するinputタグと、切り替えを行うためのボタンを配置します。HTMLはWebサイトの骨組みを作るための言語で、inputは「入力欄」、buttonは「ボタン」を作ります。これらを並べるだけで、基本的な形ができあがります。


<div class="password-container">
  <input type="password" id="password" placeholder="パスワードを入力">
  <button type="button" id="toggle-btn">表示</button>
</div>

ブラウザ表示

3. CSSでアイコンやボタンをきれいに整える

次に、CSSで見た目を整えます。パスワード入力欄の右端にボタンがくるように配置し、クリックしやすいように余白を調整します。position（位置指定）という機能を使って、入力欄の上にボタンを重ねるように配置するのが一般的です。


<style>
  .password-container {
    position: relative;
    width: 250px;
  }
  #password {
    width: 100%;
    padding: 10px;
  }
  #toggle-btn {
    position: absolute;
    right: 5px;
    top: 5px;
  }
</style>
<div class="password-container">
  <input type="password" id="password" value="secret123">
  <button type="button" id="toggle-btn">表示</button>
</div>

ブラウザ表示

4. JavaScriptで機能を動かす仕組みを作る

見た目ができたら、ボタンを押したときに動作するようにJavaScriptを使います。JavaScriptは、Webサイトに動きを付けるためのプログラミング言語です。ボタンがクリックされたら、パスワード欄の「種類（type）」を「password」から「text」に変更するだけで、文字が丸見えになる仕組みです。


<script>
  const passwordField = document.getElementById('password');
  const toggleBtn = document.getElementById('toggle-btn');
  toggleBtn.addEventListener('click', function() {
    if (passwordField.type === 'password') {
      passwordField.type = 'text';
      toggleBtn.textContent = '非表示';
    } else {
      passwordField.type = 'password';
      toggleBtn.textContent = '表示';
    }
  });
</script>

5. 視覚的にわかりやすいUIデザインのコツ

ユーザーが迷わないUIにするには、ボタンのデザインにこだわることも大切です。例えば、Bootstrapなどのフレームワークを使うと、モダンでおしゃれなボタンを簡単に作れます。ボタンの色を変えたり、アイコンを付けたりすることで、「ここをクリックできるんだ」とユーザーに直感的に伝えられます。

Bootstrapアイコンを使えば、文字の「表示」という言葉の代わりに、目の形のアイコンを表示させることも可能です。これなら世界中のユーザーが一目で「ここを押すとパスワードが見える」と理解できます。初心者の方は、まずは既存のアイコンを使ってみることから始めてみてはいかがでしょうか。


<div class="input-group">
  <input type="password" class="form-control" value="hidden">
  <button class="btn btn-outline-secondary"><i class="bi bi-eye"></i></button>
</div>

ブラウザ表示

6. セキュリティと操作性のバランスを考える

パスワードを表示できる機能は便利ですが、周囲に人がいる場所で使うとパスワードを覗き見られるリスクがあります。UI設計においては、デフォルトでは非表示にしておき、ユーザーが能動的にクリックしたときだけ表示されるという仕組みが、セキュリティと操作性のバランスが取れた最も優れたスタイルです。

また、表示した瞬間に画面の他の部分に影響を与えないことも大切です。レイアウトが崩れないよう、CSSのwidth（幅）やpadding（余白）は適切に指定しましょう。初心者のうちは、こうした細かい気配りを一つひとつ丁寧に実装していくことが、優れたWeb制作者への近道となります。

7. Web制作における継続的な学習の重要性

パスワード表示切替のように、一見シンプルに見える機能でも、裏側にはHTML、CSS、JavaScriptという異なる役割の言語が協力し合っています。これらを組み合わせて一つの機能を作る作業は、Web制作の醍醐味といえます。最初は失敗することもあるかもしれませんが、ブラウザで確認しながら、少しずつコードを修正していく時間は、あなたにとって素晴らしい学習体験になるはずです。

Webの世界は日進月歩ですが、基本となる設計思想はそう簡単に変わりません。まずは今回のコードを真似して自分の環境で動かしてみてください。そこから、色を変えたり、アイコンを大きくしたりして、自分なりのアレンジを加えるのが上達の秘訣です。あなたの作る入力フォームが、多くのユーザーにとって快適なものになることを応援しています。

2026年最新スキルアップ・実践セミナー