用語クイズβ

UIを触って学ぶ

よく出る画面の部品を、実際に動かしながら覚えられます。各部品には初心者向けの説明を付けています。

ボタン

これは「ボタン」です。押すと処理が始まる、操作の入り口です。文字を見れば何が起きるか分かるようにします。

「ボタン」のくわしい説明を見る

カード

これは「カード」です。関連する情報を枠や影で1枚のまとまりに見せ、一覧を読みやすくします。

サンプル商品

画像・タイトル・説明を1枚にまとめた例です。

¥1,200
「カード」のくわしい説明を見る

モーダル

これは「モーダル」です。確認や入力のため、現在の画面の上に重ねて表示します。閉じるまで後ろの操作を止められます。

「モーダル」のくわしい説明を見る

タブ

これは「タブ」です。見出しを押すと、同じ場所の中身だけが入れ替わります。ページを移動せずに情報を整理できます。

タブAの内容です。見出しを押すとここが切り替わります。

「タブ」のくわしい説明を見る

アコーディオン

これは「アコーディオン」です。見出しを押すと下が開き、もう一度押すと閉じます。最初は畳んでおけます。

「アコーディオン」のくわしい説明を見る

トースト

これは「トースト」です。画面のすみに一瞬出て自動で消える短い通知です。作業を止めずに結果を伝えます。

「トースト」のくわしい説明を見る

バッジ

これは「バッジ」です。数や状態を示す小さな目印です。未読数や「NEW」などをひと目で伝えます。

🔔3NEWSOLD OUT公開中
「バッジ」のくわしい説明を見る

プログレスバー

これは「プログレスバー」です。どこまで進んだかを帯で示します。あとどれくらいか分かると安心して待てます。

読み込み3 / 10
「プログレスバー」のくわしい説明を見る

フォーム

これは「フォーム」です。入力欄と送信ボタンのまとまりです。ここでは薄い見本（プレースホルダー）と、入力チェック（バリデーション）も一緒に体験できます。

「フォーム」のくわしい説明を見る

ドロップダウン

これは「ドロップダウン」です。押すと選択肢が下に開いて1つ選べます。選択肢が多いときに省スペースです。

選択中：東京都

「ドロップダウン」のくわしい説明を見る