Component Gallery

行政・公共

マイナンバー入力（My Number Input）UIとは？

マイナンバー入力（My Number Input）は、12桁のマイナンバー（個人番号）をマスク表示しながら入力するコンポーネント。セキュリティ要件に対応したペースト制御・入力値の非表示機能を持つ。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

マイナンバー入力（My Number Input）は、12桁のマイナンバー（個人番号）をマスク表示しながら入力するコンポーネント。セキュリティ要件に対応したペースト制御・入力値の非表示機能を持つ。

自前UIプレビュー

マイナンバー入力の役割と状態を確認するための簡易プレビューです。外部サイトの画像転載ではなく、Component Gallery側で作成したHTML/CSS表現です。

使うべき場面

  • ・マイナンバー入力の役割が画面上で明確で、ユーザーの次の行動を支援したいとき。
  • ・同じUIパターンを複数画面で再利用し、学習コストを下げたいとき。
  • ・状態、エラー、読み込み、無効化などを一貫したルールで扱いたいとき。

使わない方がよい場面

  • ・単なる装飾として置くだけで、ユーザーの目的に関係しないとき。
  • ・既存のOS標準やフォーム要素で十分に伝わるのに、独自UIで複雑にしてしまうとき。
  • ・アクセシビリティやキーボード操作を担保できない状態で本番利用するとき。

構成要素

  • ・ラベルまたは主要テキスト
  • ・状態表現（通常、hover、focus、disabled、error、loading）
  • ・補助テキストまたはアイコン
  • ・操作後のフィードバック

アクセシビリティ

  • ・キーボードだけで操作できることを確認する。
  • ・フォーカス位置が視覚的に分かるようにする。
  • ・読み上げに必要なラベル、説明、状態をHTMLで表現する。
  • ・色だけに依存せず、テキストや形でも状態を伝える。

よくある失敗

  • ・見た目のバリエーションだけを増やし、使い分けルールがない。
  • ・エラー・空状態・読み込み中の表示が後回しになる。
  • ・モバイル幅でラベルやコード例がはみ出す。

デザインシステム比較

デザインシステム参照先見るポイント
Apple HIG公式を見るiOS/macOS文脈での操作感、階層、アクセシビリティを確認する基準。
Material 3公式を見るAndroid/Webでの状態表現、モーション、コンポーネント仕様を比較する基準。
Fluent UI公式を見る業務アプリ、管理画面、Microsoft製品に近いUIの比較基準。
shadcn/ui公式を見るReact + Tailwind CSSで実装する際の実用的な構成例。

実装例

Reactでマイナンバー入力を実装する

まずは意味のあるHTML構造とフォーカス状態を優先し、装飾は後から調整する。

export function MyNumberInputExample() {
  return <div className="rounded-md border p-4">マイナンバー入力のUI</div>;
}

HTML/CSSでマイナンバー入力を設計する

AIに渡す前のワイヤーとして、役割・ラベル・状態を明示する。

<section class="ui-component" aria-label="マイナンバー入力">
  マイナンバー入力のUI
</section>

Flutterでマイナンバー入力を実装する

Material標準の状態・タップ領域・セマンティクスを優先して組み立てる。

class MyNumberInputExample extends StatelessWidget {
  const MyNumberInputExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Card(child: Padding(padding: EdgeInsets.all(16), child: Text("マイナンバー入力のUI")));
  }
}

SwiftUIでマイナンバー入力を実装する

Apple標準の余白、Dynamic Type、VoiceOverでの読み上げを確認する。

struct MyNumberInputExample: View {
  var body: some View {
    Text("マイナンバー入力のUI")
      .padding()
      .background(.regularMaterial)
      .clipShape(RoundedRectangle(cornerRadius: 8))
  }
}

AI実装プロンプト

実装プロンプト

マイナンバー入力（My Number Input）を、アクセシビリティとキーボード操作を考慮してReact + Tailwind CSSで実装してください。使う場面、状態、エラー時の表示、モバイル表示も含めてください。

比較プロンプト

マイナンバー入力（My Number Input）について、Apple HIG、Material Design、Fluent UI、shadcn/uiの設計思想の違いを比較し、どのプロダクトでどれを参考にすべきか整理してください。

関連コンポーネント

和暦入力（Japanese Calendar）和暦入力（Japanese Calendar）は、令和・平成・昭和などの和暦（元号）と西暦を相互変換しながら日付を入力・表示するコンポーネント。行政・公共サービスで必須の機能。住所入力（Address Input）住所入力（Address Input）は、郵便番号入力による住所自動補完と、都道府県・市区町村・番地・建物名を分割入力する複合フォームコンポーネント。口座番号入力（Bank Account Input）口座番号入力（Bank Account Input）は、金融機関コード・支店コード・口座種別・口座番号を分割入力する複合フォームコンポーネント。給与振込先や公金受取口座登録などに使われる。

関連画面

設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。

比較・実装レシピ

マイナンバー入力のデザインシステム比較Apple、Material、Fluent、shadcn/uiの見方を比較します。マイナンバー入力をReactで実装するReact + Tailwind CSS向けの実装レシピです。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

マイナンバー入力とは何ですか？

マイナンバー入力（My Number Input）は、ユーザーが目的の操作や情報理解を進めるためのUIコンポーネントです。画面内での役割、状態、アクセシビリティを合わせて設計します。

マイナンバー入力を設計するときに最初に決めることは？

最初に決めるべきなのは、見た目ではなくユーザーが達成したい目的、表示する状態、操作後のフィードバックです。

マイナンバー入力の実装でよくある失敗は？

状態名やラベルが曖昧なまま装飾から作り始めることです。読み上げ、キーボード操作、エラー表示、モバイル幅を先に確認します。