メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
デザイン・CSS
/
ユーザビリティ10原則 (Nielsen)
▧
ユーザビリティ10原則 (Nielsen)
design/design-ux-heuristics
ユーザビリティ10原則 (Nielsen)を一覧表示。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
ユーザビリティ10原則 (Nielsen)では、ユーザビリティ10原則 (Nielsen)を一覧表示。
関連する観点として ユーザビリティ10原則 (Nielsen)、nielsen heuristics、CSS を確認し、結果をコピーして別の作業に使えます。
項目
内容
1
システム状態の可視性
2
システムと現実世界の一致
3
ユーザー制御と自由
4
一貫性と標準
5
エラー防止
6
認識よりも想起させない
7
柔軟性と効率性
8
美的でミニマルなデザイン
9
エラー認識・診断・復旧
10
ヘルプとドキュメンテーション
使い方
左列の1から10で、レビュー時に使うヒューリスティック番号を確認します。
右列で「システム状態の可視性」「一貫性と標準」などの短い日本語名を拾います。
エラー周りを点検する場合は5のエラー防止と9のエラー認識・診断・復旧を分けて見ます。
詳細な解釈や事例が必要な場合は、表をチェックリストの見出しとして使い、別途レビュー観点を書き足します。
入力例・出力例
INPUT
1
OUTPUT
システム状態の可視性
NN/gのVisibility of System Statusに対応します。
INPUT
6
OUTPUT
認識よりも想起させない
Recognition Rather than Recallの掲載行です。
INPUT
10
OUTPUT
ヘルプとドキュメンテーション
10原則の最後の項目です。
よくある利用シーン
UIレビュー会でNielsenの10原則を番号付きチェック項目として参照するとき。
エラー、ヘルプ、一貫性などの観点抜けを短時間で洗い出したいとき。
英語名ではなく日本語の短い見出しでレビューコメントをそろえたいとき。
結果確認のポイント
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
ユーザビリティ10原則 (Nielsen)、nielsen heuristics、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
ユーザビリティ10原則 (Nielsen)の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
Nielsenの10原則をどの形式で確認できますか?
1から10までの番号と日本語の短い見出しを表で確認できます。システム状態の可視性、一貫性と標準、エラー防止などをレビュー用の見出しとして拾えます。
詳細な解説や採点機能はありますか?
いいえ。表示するのはNN/gの10 Usability Heuristicsに対応する見出し一覧です。詳細な解釈、点数付け、レビュー結果の保存は別途メモや評価表で行ってください。
コードやUIプレビューは生成されますか?
いいえ。ユーザビリティ原則の参照表であり、HTML/CSSの生成や画面プレビューはありません。UIレビュー前に観点名をそろえる用途に向いています。
関連ツール
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。
Material Elevation
Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。
accent-colorが効く要素
CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。
CSS角度単位
CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。
animation-direction
CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。
animation-fill-mode
CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。