このページの中身

UI部品

部品は見た目ではなく、動作で選びます。定番のものと、その選び分けです。

UI部品で決める順と、前後の分野とのつながりを示した図
図を大きく見る
図の中身を文字で読む
  • UI部品で決めること　どの部品で、何をさせるか
  • 先に決まっていること　デザインシステム　UX・情報設計
  • 動作させる　ボタンとリンク
  • 入力させる　入力　選択　フォームの検証
  • 移動させる　ナビゲーション　重ねる
  • 状態を伝える　知らせる　4つの状態
  • ここが効く先　アクセシビリティ　モーション

このページから降りる#

この分野が答えになる場面#

全20件。ほかの分野もまとめて引くなら逆引きへ。

この分野が答えになる場面困り事から引く20 件
こういうとき答えいますぐ詳しくは
ボタンとリンクのどちらを使うか迷う画面が移動するならリンク、その場で何かが起きるならボタン。見た目ではなく動作で決める。コードを開くボタンとリンク
ボタンの種類をいくつ用意するか主・副・控えめの3種で足りる。1画面に主ボタンは1つ。コードを開くボタンとリンク
押せる大きさをいくつにするか44×44を目安にする。WCAG 2.2 の下限は24×24。見た目が小さくても当たり判定を広げれば足りる。コードを開くボタンとリンク
選択肢をどの部品で出すか迷う2〜5個で全部見せたいならラジオ、6個以上ならセレクト、複数選べるならチェックボックス。コードを開く選択
トグルとチェックボックスのどちらかその場で即座に反映されるならトグル、保存を押して確定するならチェックボックス。コードを開く選択
モーダルとドロワーのどちらにするか作業を止めてよいならモーダル、元の画面を見ながら操作させたいならドロワー。迷ったらページ遷移。コードを開く重ねる
通知が見落とされる、または、うるさい気づかなくてよいものは控えめに出し、操作を止めるべきものだけ読み上げにも割り込ませる。コードを開く知らせる
トーストを何秒で消すか読む時間＋2秒。消えると困る情報はトーストに載せない。コードを開く知らせる
データが0件のときの画面がない読み込み中・空・エラー・正常の4つを必ず作る。空の画面には最初の操作への導線を置く。コードを開く4つの状態
読み込み中の表示をどうするか回転する印より、これから出る形をかたどった枠のほうが待ち時間を短く感じる。コードを開く4つの状態
タブとアコーディオンのどちらにするか同時に1つだけ見せたいならタブ、複数を開いて見比べたいならアコーディオン。コードを開くナビゲーション
パンくずは必要か階層が3段以上あるなら置く。1〜2段なら戻る導線で足りる。コードを開くナビゲーション
ページ送りと無限スクロールのどちらか探して戻るならページ送り、眺めるだけなら無限スクロール。フッターに用があるなら無限にしない。コードを開くナビゲーション
入力欄のラベルをプレースホルダで代用してよいか代用しない。入力を始めた瞬間に消えて、何を入れる欄か分からなくなる。ラベルは欄の外に置く。コードを開く入力
必須と任意のどちらを明示するか少ないほうを明示する。ほとんど必須なら任意にだけ印を付ける。<label>会社名 <span class="optional">任意</span></label>入力
入力欄の幅をどう決めるか入る内容の長さに合わせる。郵便番号の欄が氏名と同じ幅だと、何を入れるか伝わらない。コードを開く入力
エラーの伝え方が分からない何が悪いかと、どう直すかを両方書く。入力欄のそばに置き、色だけに頼らない。コードを開くフォームの検証
エラーをいつ出すか入力中は出さない。欄から離れたときか、送信を押したときに出す。コードを開くフォームの検証
送信後に何も起きないと言われる処理中の表示と、完了の表示を分けて出す。押した直後にボタンを無効化して二重送信を防ぐ。コードを開く知らせる
入力の自動補完が効かないautocomplete 属性を正しく付ける。氏名・住所・電話は決められた値がある。コードを開く入力

他の分野へ#

基礎 ／ タイポグラフィ ／ 色彩 ／ レイアウト ／ デザインシステム ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。