#UIデザイン原則

Undo Redoの意味とは?アンドゥ・リドゥの違いと使い方

Undo Redoとは、操作を元に戻すUndo(アンドゥ)と、取り消した操作をもう一度実行するRedo(リドゥ)の組み合わせです。Cmd+Z・Ctrl+Zなどのショートカット、削除前の確認ダイアログの代わりにUndoを使う場面、UI設計のチェックリストを解説します。

2026年2月17日
約10分

プログレッシブディスクロージャーとは?段階的開示の意味とUI例

プログレッシブディスクロージャー(段階的開示)とは、必要な情報や操作を、必要になった時点で段階的に見せるUI設計の原則です。見出しを押すと中身が開くアコーディオンや、押すと追加の項目が出る「詳細設定」などのUI例、使う場面、隠してはいけない情報、フォームや設定画面での設計ルールを解説します。

2026年2月17日
約11分

視覚的階層とデザイン階層の作り方

視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。

2026年1月26日
約15分

スキャンしやすさ (Scannability)

Scannability(スキャンしやすさ)は、ユーザーがページを読まずに走査しても目的の情報へたどり着けるようにするUI設計原則。見出し、太字、リスト、余白、F字型パターンを使った改善方法を解説。

2026年2月17日
約11分

UI設計プロセス完全ガイド|Why→What→Howで設計判断を言語化する

UIデザインの設計プロセスを6ステップで体系化。「なぜそのUIか」を説明できるようになるUX心理→UI原則→UIコンポーネントの思考順序と実践フレームワーク。

2026年3月6日
約20分

UIデザイン完全ガイド|UI原則・UXデザインの法則・コンポーネントを体系化

UI原則、UI設計原則、UXデザインの法則をWhy→What→Howで体系化。UX心理・UI原則・UIコンポーネントをつなげて学ぶUIXHEROの総合入口ガイド。

2026年3月5日
約28分

UIデザイン原則まとめ|UI設計を支える65の原則

UIデザインの原則とは、UI設計で迷ったときに繰り返し使える判断の基準です。視覚設計・認知設計・操作と対話・情報構造・アクセシビリティなど8つのカテゴリで65の原則を一覧にし、各原則がどのUIコンポーネント(ボタンやフォームなど)に当てはまるかの早見表もまとめています。

2026年3月5日
約24分

コントラストと可読性 (Contrast & Readability)

「おしゃれ」と「読めない」は違う。薄いグレーの文字、低コントラストのボタン——視覚的に美しくても読めないUIは、全ユーザーの体験を損なう。WCAGに基づくコントラスト設計の原則。

2026年2月17日
約8分

アフォーダンス (Affordance)

「押せそう」「引けそう」「入力できそう」——UIが操作方法を説明なしに伝える力がアフォーダンス。シグニファイアを正しく設計し、ユーザーが迷わず直感的に操作できるUIを作る原則。

2026年2月17日
約9分

整列 (Alignment)

数ピクセルのズレが積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与える。見えない線に沿って要素を揃えることで、秩序・関係性・信頼感を同時に作り出す整列の設計原則。

2026年2月17日
約7分

代替テキスト・ARIA (Alt Text & ARIA)

スクリーンリーダーが「画像」と読み上げるだけのUIは、視覚障害者にとって意味がない。alt属性とARIAで、すべてのユーザーに同等の情報を届ける設計原則。

2026年2月17日
約9分

ストレスを増やさない (Avoiding Dark Patterns)

「いいえ、私は損をしたいです」——ユーザーを心理的に追い詰めるダークパターンは短期の数字を作るが、長期の信頼を壊す。ユーザーのストレスを増やさない設計原則。

2026年2月17日
約8分
#UIデザイン原則 | Blog | UIXHERO