View the Qiita 15th anniversary article

1

PR: Qiita株式会社

Qiita Conference 2026 Autumn 申込受付中！【10/27（火）〜29（木）開催!!】

About Promotions

in

Qiita株式会社

NN/Gの指針に学ぶ類似UIパーツの使い分け

1

Posted at 2026-08-31

はじめに

UXリサーチ機関 Nielsen Norman Group(NN/G) が公開している一次資料を元に、似ているUIパーツの使い分けをざっくり整理しました。
改めて整理することで、AIにUIを作成してもらう際やセルフレビュー時に活用したい意図もあります。

Nielsen Norman Group(NN/G)

1998年にJakob NielsenとDon Normanが設立したUXリサーチ機関
- 「User Experience」という言葉の生みの親
ユーザビリティテストや視線追跡調査などの実証研究に基づいてガイドラインを発表している

ラジオボタン or チェックボックス

ラジオボタン
- 選択肢の中から必ず1つだけ選ぶ場合
  - 1つ選ぶと他が自動的に非選択になる
チェックボックス
- 選択肢の中から0個〜複数個選ぶ場合
  - 各項目が独立していて、任意の数を選べる

1984年以来のGUI標準的な使い分け
この標準に従うことで、ユーザーが操作前から動作を予測でき、習得コストが下がる

チェックボックス or トグルスイッチ

チェックボックス
- 複数選択に対応させたい、または送信ボタンで確定させたい場合
- フォームの一部として扱われ、送信されるまで実際の処理が実行されない
トグルスイッチ
- 単一の設定を即座に反映させたい場合
- 常にオン/オフの2択で、切り替えた瞬間に効果を発揮する

トグルスイッチは常にデフォルト値が必要
フォーム内にトグルとチェックボックスが混在すると、即時反映か送信が必要なのか、ユーザーが混乱する可能性もある

モーダルダイアログ or モーダレスダイアログ

モーダルダイアログ
- 取り返しのつかない操作の防止、または続行に必須な情報の入力を求める場合
- 元のタスクに戻れない状態を作ることで、重大な判断を強制できる
モーダレスダイアログ
- 補足情報の提示や、作業を妨げずに参考情報を見せたい場合：モーダレスダイアログ
  - 背景コンテンツへのアクセスを保ったまま、ユーザーが自分のペースで確認できる

モーダルダイアログは重大な場合に限定するのが良さそう
- ワークフローの中断、コンテキストスイッチによる認知負荷の増加、背景コンテンツの遮蔽とデメリットが多い
- 必須ではない情報には使わない

ドロップダウンリスト or リストボックス

ドロップダウンリスト
- 選択肢が7個〜15個程度、または画面スペースが限られる場合
  - 省スペースで済む
  - デフォルト値として最適な選択肢を提示できる
リストボックス
- 選択肢が15個以上あり一覧性を重視したい、または複数選択が必要な場合

メガメニュー or 通常のドロップダウンメニュー

メガメニュー
- サイトの機能・オプション数が多く、階層構造を持つ場合
  - 選択肢を一目で全て表示でき、短期記憶に頼らずに済む
  - アイコンや見出しでの視覚的なグルーピングも可能
通常のドロップダウンメニュー
- オプション数が少なく、シンプルな構造の場合

ボトムシート or モーダルダイアログ（モバイル）

ボトムシート
- 背景コンテンツを参照しながら一時的な操作をしたい場合
  - 背後のコンテンツへのアクセスを保持したまま、文脈に応じた情報を表示できる
モーダルダイアログ
- 他の操作の前に必ず対応してほしい重要な確認や、複雑なコンテンツを扱う場合
  - シート形式は複雑な内容や長時間の滞在には向かない

スケルトンスクリーン or スピナー or プログレスバー

スケルトンスクリーン
- 待機時間が2〜10秒で、画面全体を読み込んでいる場合
  - ページの見た目を先に把握させることで認知負荷を減らせる
スピナー
- 待機時間が2〜10秒で、動画やカード1つなど単一モジュールの読み込みの場合
  - 単一要素の読み込みであればスピナーだけで十分に意図が伝わる
プログレスバー
- 待機時間が10秒以上の場合
  - 進捗の度合いを具体的に示さないと、ユーザーが「処理が固まっているのでは」と不安になる

待機時間が1秒未満の場合は何も表示しない

無限スクロール or ページネーション

無限スクロール
- 特定の目的を持たず同質コンテンツを眺め続ける用途の場合
- エンタメ・ニュース・SNSのフィードなど
  - 中断が少なくインタラクションコストが低い、モバイルでも扱いやすい
ページネーション
- 特定のアイテムを探す、複数アイテムを比較する、またはアクセシビリティ配慮が必要な場合
- 無限スクロールはコンテンツの再発見が困難

判断軸として、以下の4点を確認することが推奨されている

「ユーザーは誰か」
「訪問時の目的は何か」
「主にどのデバイスを使うか」
「アクセシビリティニーズがあるか」

ボタン or リンク

ボタン
- クリックした結果、システムに何らかの処理・アクションを実行させたい場合
リンク
- ページ遷移や外部サイトへのアクセスなど、別ページへ移動させる場合

ボタンのようなUIでリンクを置くことが多いですが、テキストが示す内容と実際の遷移先・実行結果が異なると、ユーザーの信頼を損なうため、「詳細」「続きを読む」のような抽象的なラベルではなく、具体的な行動・遷移先を示すラベルを付けるべきとしています。

まとめ

今回まとめた事例は、いずれも「見た目が近い」「なんとなく置き換え可能に見える」パーツですが、NN/Gの一次資料を辿ると「選択肢の数」「即時反映か送信が必要か」「作業を止めてよいか」「待機時間の長さ」といった、明確な判断軸が存在すると分かりました。

AIにUIを作成してもらう際やセルフレビュー時に見返したいと思います

参考

1

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

1