フォーム・ボタン

入力と操作の部品

• ボタン クリック・タップで操作を実行させる、最も基本的な部品。見た目の強弱で役割の優先度を示す。
• CTA ボタン 会員登録や購入など、サイトの目標となる行動を促すために大きく目立たせるボタン。
• アイコンボタン 文字を持たず、アイコンだけで操作を示す小さなボタン。狭いスペースやツールバーで使う。
• フローティングアクションボタン 画面の右下などに常に浮いて表示され、スクロールしても付いてくる丸いボタン。
• トグルスイッチ つまみをスライドさせて ON・OFF を切り替える、通知設定などでよく使うスイッチ型の入力部品。
• チェックボックス 複数の選択肢の中から必要なものにチェックを入れる、正方形の入力部品。
• ラジオボタン 複数の選択肢の中から 1 つだけを選ぶ、丸い入力部品。
• セレクトボックス クリックすると選択肢の一覧が開き、その中から 1 つを選ぶネイティブの入力部品。
• テキスト入力欄 名前やメールアドレスなど、文字を直接入力させる欄。label と結び付け、エラー時は状態を明示する。
• プレースホルダー 入力欄が空のときだけ薄く表示される、入力例やヒントの文字。入力を始めると消える。
• フローティングラベル 入力欄の中にあったラベルが、フォーカスまたは入力によって欄の上に浮き上がる表現方法。
• 検索ボックス キーワードを入力してサイト内・サイト外を検索する、虫眼鏡アイコンの付いた入力欄。
• オートコンプリート 入力欄に文字を打つたびに、候補の一覧を下に出して選ばせる仕組み。クリックまたは矢印キーで確定する。
• レンジスライダー つまみをドラッグして数値を決める入力部品。最小値・最大値・刻み幅を指定でき、現在値を表示に反映する。
• 日付ピッカー 日付を入力させる部品。ブラウザ標準の input type="date" を使うと、OS 標準のカレンダー UI がそのまま使える。
• ステッパー 複数の手順に分かれた入力を、今どの段階にいるかを丸数字と線で示しながら進める部品。
• バリデーション表示 必須・形式・文字数などの入力チェックに引っかかった項目に、エラーメッセージを添えて知らせる表示。
• チップ 楕円形の小さな部品。選択のオンオフを切り替えるトグル型と、×ボタンで取り除ける削除型がある。
• バッジ アイコンの右上に重ねる件数の印や、公開状態などを示す色分けラベル。
• コピーボタン クリックするとテキストをクリップボードにコピーし、ボタンの文字が「コピーしました」に一時的に変わるボタン。
• シェアボタン ページやコンテンツを SNS で共有するためのボタン。スマホでは端末標準の共有シートを、それ以外では各 SNS のリンクを使う。
• ファイルアップロード ファイルをドラッグ&ドロップするか、クリックして選ぶための領域。選んだファイル名とサイズを一覧表示する。