LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)in株式会社プロドウガ

高齢者にも優しいフォーム作成ガイド：視認性向上 & 自動入力機能の活用

Posted at

スクリーンショット 2025-02-03 17.56.34.png

📖 はじめに

高齢者の方は、視力や操作に不慣れな場合が多いため、入力項目はできるだけシンプルにまとめ、以下の工夫を施すことが重要です。

  • 大きなフォントと十分な余白
     → 視認性とタッチ操作をサポートします

  • 明確なラベルと例示
     → どの項目を入力すればよいか直感的に理解できるようにします

  • 自動入力機能
     → 郵便番号を入力するだけで都道府県・住所が自動で入力され、入力負荷を軽減します🎉

「yubinbango.js」は、郵便番号入力に基づいて住所の自動補完を実現するライブラリです。
必要なclass属性を各入力フィールドに指定するだけで、ライブラリ側が自動的に補完処理を行ってくれます。

🗺️ フォーム構成図

以下は、この登録フォームのレイアウトイメージです。

─────────────────────────────
   【登録フォーム】📋
─────────────────────────────
 氏名　　　　　：山田 太郎
 ふりがな　　　：やまだ たろう
 電話番号　　　：090-1234-5678
 郵便番号　　　：123-4567
   ▼ 自動入力
 都道府県　　　：東京都
 住所　　　　　：新宿区西新宿 1-2-3
 それ以降住所　：〇〇町 1-2-3
 アパート・号室：〇〇アパート 101号室
  [登録する] ボタン
─────────────────────────────

💻 コード例

以下に、HTML、CSS、JavaScript を用いた実装例を示します。

See the Pen Untitled by Yushi Yamamoto (@yamamotoyushi) on CodePen.

HTML

（※住所自動入力のために、フォーム全体に class="h-adr" を、郵便番号の入力欄に class="p-postal-code"、都道府県に class="p-region"、住所に class="p-locality p-street-address" を指定しています。）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>高齢者に優しい登録フォーム 📋</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>登録フォーム 😊</h1>
  <p>必須項目を入力してください。（※は必須です）</p>
  
  <!-- yubinbango.js利用のためのフォーム -->
  <form id="registrationForm" action="submit.php" method="post" class="h-adr" novalidate>
    <!-- 国名必須（おまじない） -->
    <span class="p-country-name" style="display:none;">Japan</span>
    
    <!-- 氏名 -->
    <div class="form-group">
      <label for="fullname">氏名 <span class="required">※</span></label>
      <input type="text" id="fullname" name="fullname" required placeholder="例：山田 太郎">
    </div>
    
    <!-- ふりがな -->
    <div class="form-group">
      <label for="furigana">ふりがな <span class="required">※</span></label>
      <input type="text" id="furigana" name="furigana" required placeholder="例：やまだ たろう">
    </div>
    
    <!-- 電話番号 -->
    <div class="form-group">
      <label for="phone">電話番号 <span class="required">※</span></label>
      <input type="tel" id="phone" name="phone" required placeholder="例：090-1234-5678"
             pattern="^\d{2,4}-\d{2,4}-\d{4}$" aria-describedby="phoneHelp">
      <small id="phoneHelp" class="help-text">ハイフンを含む形式で入力してください 📞</small>
    </div>
    
    <!-- 郵便番号 -->
    <div class="form-group">
      <label for="zipcode">郵便番号 <span class="required">※</span></label>
      <input type="text" id="zipcode" name="zipcode" required placeholder="例：123-4567"
             pattern="^\d{3}-?\d{4}$" aria-describedby="zipcodeHelp" class="p-postal-code">
      <small id="zipcodeHelp" class="help-text">半角数字・ハイフンあり（例：123-4567）または無し 🏠</small>
    </div>
    
    <!-- 自動入力：都道府県 -->
    <div class="form-group">
      <label for="prefecture">都道府県</label>
      <input type="text" id="prefecture" name="prefecture" class="p-region" readonly placeholder="郵便番号入力後に自動入力">
    </div>
    
    <!-- 自動入力：住所（市区町村・町域） -->
    <div class="form-group">
      <label for="address">住所</label>
      <input type="text" id="address" name="address" class="p-locality p-street-address" readonly placeholder="郵便番号入力後に自動入力">
    </div>
    
    <!-- 手入力：それ以降の住所（丁目、番地など） -->
    <div class="form-group">
      <label for="address_extra">それ以降の住所</label>
      <input type="text" id="address_extra" name="address_extra" placeholder="例：〇〇町1-2-3">
    </div>
    
    <!-- 手入力：アパート・号室 -->
    <div class="form-group">
      <label for="apartment">アパート・号室</label>
      <input type="text" id="apartment" name="apartment" placeholder="例：〇〇アパート101号室">
    </div>
    
    <!-- エラーメッセージ表示領域 -->
    <div id="formError" aria-live="assertive" class="error-message"></div>
    
    <!-- 送信ボタン -->
    <div class="form-group">
      <button type="submit" id="submitButton" aria-label="登録内容を送信">登録する 👍</button>
    </div>
  </form>
  
  <!-- YubinBango.js の読み込み -->
  <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  <!-- バリデーション用JavaScript -->
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  background-color: #f7f7f7;
  color: #333;
  padding: 20px;
}

h1 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 10px;
}

p {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

input[type="text"],
input[type="tel"] {
  width: 100%;
  padding: 10px;
  font-size: 1.1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[readonly] {
  background-color: #e9e9e9;
}

button[type="submit"] {
  width: 100%;
  padding: 14px;
  font-size: 1.2em;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

.required {
  color: red;
}

.help-text {
  font-size: 0.9em;
  color: #666;
}

.error-message {
  color: red;
  font-size: 1em;
  margin-top: 10px;
  text-align: center;
}

JavaScript (script.js)

document.addEventListener("DOMContentLoaded", function() {
  const form      = document.getElementById("registrationForm");
  const errorDiv  = document.getElementById("formError");
  const zipcodeIn = document.getElementById("zipcode");

  // 郵便番号入力欄のチェック
  zipcodeIn.addEventListener("blur", function() {
    const zipcode = zipcodeIn.value.trim();
    const regex   = /^\d{3}-?\d{4}$/;
    if (!regex.test(zipcode)) {
      errorDiv.textContent = "郵便番号の形式が正しくありません。例：123-4567";
    } else {
      errorDiv.textContent = "";
      // yubinbango.js は、フォーム内のclass属性に基づいて自動的に
      // 都道府県（p-region）や住所（p-locality, p-street-address）へ値をセットします。
      // この処理はライブラリ側で行われるため、追加処理は不要です。
    }
  });

  // フォーム送信時の基本的なバリデーション
  form.addEventListener("submit", function(event) {
    errorDiv.textContent = "";
    const fullname    = document.getElementById("fullname").value.trim();
    const furigana    = document.getElementById("furigana").value.trim();
    const phone       = document.getElementById("phone").value.trim();
    const zipcode     = zipcodeIn.value.trim();
    const prefecture  = document.getElementById("prefecture").value.trim();
    const address     = document.getElementById("address").value.trim();
    
    if (!fullname || !furigana || !phone || !zipcode || !prefecture || !address) {
      event.preventDefault();
      errorDiv.textContent = "すべての必須項目を入力してください。";
      return false;
    }
    
    // 電話番号形式チェック（例：090-1234-5678）
    const phoneRegex = /^\d{2,4}-\d{2,4}-\d{4}$/;
    if (!phoneRegex.test(phone)) {
      event.preventDefault();
      errorDiv.textContent = "電話番号の形式が正しくありません。例：090-1234-5678";
      return false;
    }
    
    // 郵便番号形式再チェック
    if (!regex.test(zipcode)) {
      event.preventDefault();
      errorDiv.textContent = "郵便番号の形式が正しくありません。例：123-4567";
      return false;
    }
  });
});

📚 yubinbango.jsによる自動入力の解説

  1. ライブラリの読み込み
     HTML内に下記のスクリプトタグを追加するだけで、yubinbango.jsが動作します。
      <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

  2. フォーム全体にクラス指定
     フォームを囲むタグ（ここでは <form>）に class="h-adr" を指定してください。
     また、国名を非表示（または hidden）で指定するために、
      <span class="p-country-name" style="display:none;">Japan</span>
     を配置します。

  3. 各入力欄のクラス指定
     - 郵便番号入力欄には class="p-postal-code"
     - 都道府県入力欄には class="p-region"
     - 住所（市区町村・町域）の入力欄には class="p-locality p-street-address"
     これにより、郵便番号が入力された時点で、ライブラリが自動的に住所情報を取得し、対応するフィールドに値をセットします。

これにより、高齢者の手間を大幅に削減でき、入力ミスも防止できます🎉

🎯 おわりに

今回ご紹介した登録フォームは、以下のポイントを重視しています：

  • シンプルかつ直感的な項目配置
     – 氏名、ふりがな、電話番号、郵便番号の入力後、
      yubinbango.js により自動で都道府県と住所（市区町村・町域）が補完され、
      さらに「それ以降の住所」と「アパート・号室」を手入力できるようにしています。

  • 視認性・操作性の向上
     – 大きめのフォント・十分な余白と明確なラベルで、誰でも使いやすいデザインに。

  • 自動入力機能の活用
     – 郵便番号入力で自動補完されることで、高齢者の入力負担を大幅に軽減！

このような工夫により、高齢者を含む全ユーザーがストレスなく登録できるフォームを実現できます。
ぜひ現場での実装にお役立てください😊

💖 ご支援いただけませんか？

スクリーンショット 2025-01-31 7.51.39.png

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

暗号資産による寄付

以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

  • Ethereum (ETH)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: ERC-20）

  • BNB Chain (BNB)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: BEP-20）

  • Polygon (MATIC)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: Polygon）

  • Avalanche (AVAX)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: Avalanche C-Chain）

  • Solana (SOL)
    EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f

  • Stellar (XLM)
    アドレス: GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
    メモ: 必要に応じて入力してください。

  • Ripple (XRP)
    アドレス: r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
    タグ: 必要に応じて入力してください。

  • Cardano (ADA)
    addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7

  • Dogecoin (DOGE)
    DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H

資金用途

寄付金は以下の目的で活用させていただきます：

  1. サーバー維持費やデザインツール購入
  2. 学習活動（オンラインコース受講・書籍購入）
  3. 読者向け無料コンテンツ制作

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

補足情報

  • Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
    上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

  • USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。

  • 初回送金時には少額でテスト送金することをおすすめします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?