Component Gallery

入力

数値入力（Number Input）UIとは？

数値入力（Number Input）は、数値の入力に特化したコンポーネント。インクリメント・デクリメントボタン付きで、最小値・最大値・ステップ値の制御が可能。

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

30秒でわかる要点

数値入力（Number Input）は、数値の入力に特化したコンポーネント。インクリメント・デクリメントボタン付きで、最小値・最大値・ステップ値の制御が可能。

自前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 NumberInputExample() {
  return <div className="rounded-md border p-4">数値入力のUI</div>;
}

HTML/CSSで数値入力を設計する

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

<section class="ui-component" aria-label="数値入力">
  数値入力のUI
</section>

Flutterで数値入力を実装する

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

class NumberInputExample extends StatelessWidget {
  const NumberInputExample({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 NumberInputExample: View {
  var body: some View {
    Text("数値入力のUI")
      .padding()
      .background(.regularMaterial)
      .clipShape(RoundedRectangle(cornerRadius: 8))
  }
}

AI実装プロンプト

実装プロンプト

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

比較プロンプト

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

関連コンポーネント

テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。チェックボックス（Checkbox）チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。ラジオボタン（Radio Button）ラジオボタン（Radio Button）は、複数の選択肢から1つだけ選択させる入力コンポーネント。グループで使用し、排他的な選択を表現する。日付選択（Date Picker）日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。スライダー（Slider）スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。

関連画面

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

比較・実装レシピ

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

運営・更新・参照元

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

参照元

FAQ

数値入力とは何ですか？

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

数値入力を設計するときに最初に決めることは？

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

数値入力の実装でよくある失敗は？

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