【UI設計】使いやすさは、8つの判断で決まる〜レイアウトから余白・状態まで、160の実例で見直す〜
UIが使いにくいとき、いきなり色やフォントを変えてはいけません。
多くの場合、問題はもっと手前にあります。
情報の並び方がわかりにくい。
目的の場所へ移動しにくい。
押せるものと押せないものの違いが伝わらない。
入力途中の不安や、エラー後の戻り方が設計されていない。
この記事では、UI設計で確認したい8つの観点を、20選のチートシートにまとめました。
読後には、画面を「なんとなく整える」のではなく、どこを直すべきかを分けて考えられるようになります。
この記事は、UIを設計する人、デザインをAIに依頼する人、デザインレビューをする人に向いています。
すでに完成したUIの細かな実装コードだけを探している人には、必要な部分だけを参照してください。
見出し画像はAIで生成しました。
プロンプトは下記の記事に掲載中。
毎日プロンプトは増えていきます。
目次
UI設計は、8つの観点に分けると見直しやすい
レイアウトで、情報の関係を決める
ナビゲーションで、目的地までの道をつくる
カードで、情報を比較しやすくする
ボタンで、次の行動を伝える
フォームで、迷わず入力できるようにする
状態で、いま何が起きているかを伝える
マイクロインタラクションで、操作の手応えをつくる
スペーシングで、距離の意味を整える
8つを組み合わせて、画面を確認する
今日やること
【無料ウェビナーのお知らせ】
「なんかダサい」アプリのUIデザインを、
Claude Codeに直させる60分
🔽 申し込みはこちら
既に480名の方が申し込み済です。
UI設計は、8つの観点に分けると見直しやすい
UIを改善するときは、画面全体を一度に直そうとしないことが重要です。
まず、次の順番で分けて見ます。
レイアウト：情報をどう並べるか
ナビゲーション：どこへ移動できるか
カード：情報をどうひとまとまりにするか
ボタン：次に何をするか
フォーム：何をどう入力するか
状態：いま何が起きているか
マイクロインタラクション：操作にどう反応するか
スペーシング：要素同士の距離をどう設計するか
この8つは、見た目の分類ではありません。
それぞれが、ユーザーの別の迷いに対応しています。
「どこにあるかわからない」はレイアウトとナビゲーション。
「何を押せばいいかわからない」はボタン。
「入力できるかわからない」はフォーム。
「処理が進んでいるかわからない」は状態とマイクロインタラクション。
「なぜか窮屈、または散らかって見える」はスペーシングです。
レイアウトで、情報の関係を決める
レイアウトは、画面をきれいに並べるためのものではありません。
情報同士の関係を、配置で伝えるためのものです。
最初に考えるのは、次の3点です。
何を最初に見せるか
どの情報を近くに置くか
どこで次の行動へ進ませるか
一覧ならカードグリッドやリスト型。
複数の情報を見比べるなら2カラムやマスター詳細。
作業の進行を見せるならステップ型やカンバン型。
レイアウトを選ぶときは、流行の画面を真似するのではなく、情報の関係に合わせます。
ナビゲーションで、目的地までの道をつくる
ナビゲーションの役割は、メニューを増やすことではありません。
ユーザーが「次にどこへ行けば目的を達成できるか」を判断できるようにすることです。
主要な移動にはトップナビやサイドナビ。
スマートフォンで頻繁に使う機能にはボトムナビ。
階層が深い場所にはパンくず。
作業の順番が決まっている場合はステップナビ。
同じ画面の中で内容を切り替える場合はタブを使います。
ナビゲーションを設計するときは、項目を増やす前に「この画面で最も多い移動は何か」を確認します。
カードで、情報を比較しやすくする
カードは、情報を区切るための箱です。
ただし、すべてをカードにすると、画面全体が同じ強さになってしまいます。
カードに向いているのは、次のような情報です。
商品やプランの比較
記事や動画の一覧
人物や場所の概要
タスクやプロジェクトの状態
通知や空の状態
カードの中には、見出し、補足、画像、操作の優先順位を入れます。
何を比較してほしいのかが決まっていない場合は、カードの形から決めないことが大切です。
ボタンで、次の行動を伝える
ボタンは、操作できることを示すだけではありません。
押したあとに何が起きるかを予告する部品です。
「保存」「次へ」「削除」のように、動詞を使うと行動が伝わります。
同じ画面に複数のボタンを置くときは、優先順位を分けます。
主操作は塗りつぶし。
補助操作はアウトラインや淡い塗り。
取り消しや削除は、誤操作を防ぐ位置と色。
送信中や完了後は、ボタンの状態も変えます。
ボタンの見た目を選ぶ前に、ユーザーに何をしてほしいのかを一つに絞ってください。
フォームで、迷わず入力できるようにする
フォームで大切なのは、入力欄を置くことではありません。
「何を、どの形式で、どこまで入力すればよいか」を先に伝えることです。
ラベルは入力後も残します。
必須と任意を区別します。
入力例や条件を近くに置きます。
エラーが起きても、入力内容を消しません。
エラーの理由は、直す場所の近くに表示します。
送信中は処理中であることを伝え、完了後は結果と次の行動を示します。
フォームは、入力前、入力中、エラー時、完了後の4つの場面で確認すると抜けが減ります。
状態で、いま何が起きているかを伝える
UIは、通常時だけ設計しても完成しません。
読み込み中、空の状態、エラー、権限不足、オフラインなど、通常ではない状態のほうがユーザーを不安にさせます。
状態設計では、次の3つを伝えます。
いま何が起きているか
ユーザーが待つべきか、操作すべきか
次に何をすれば戻れるか
「エラーです」だけでは、行動につながりません。
再試行、ログイン、権限の確認、入力の修正など、復帰方法まで用意します。
マイクロインタラクションで、操作の手応えをつくる
マイクロインタラクションは、ボタンを押した瞬間の反応や、保存完了の通知のような小さな動きです。
小さいからといって、重要ではありません。
反応がないと、ユーザーは操作が失敗したのか、画面が固まったのか判断できません。
押した反応、フォーカス、チェック、送信中、送信完了、トーストなどを設計します。
ただし、動きを増やせばよいわけではありません。
反応は、状態の変化や次の行動を理解するために使います。
意味のないアニメーションは、操作の負担になります。
スペーシングで、距離の意味を整える
最後に、余白を調整します。
余白は、ただ空ければよいものではありません。
関連するものは近づけ、役割が違うものは離します。
実装では、まず次の3つを分けて考えます。
内側は `padding`
外側は `margin`
並ぶ要素の間は `gap`
そのうえで、width、height、min-width、max-width、line-heightなどを決めます。
数値を先に決めると、見た目だけが整って情報の関係が崩れることがあります。
まず「この距離は何を意味するのか」を決め、そのあとでサイズを調整してください。
8つを組み合わせて、画面を確認する
ここまでの8つは、単独で使うものではありません。
たとえば、商品一覧画面なら次のように組み合わせます。
レイアウトで、商品一覧と絞り込みの位置を決める
ナビゲーションで、カテゴリや詳細画面への道をつくる
カードで、商品情報の単位をそろえる
ボタンで、購入や保存の優先操作を示す
フォームで、配送先や検索条件を入力できるようにする
状態で、読み込み中・在庫切れ・エラーを伝える
マイクロインタラクションで、保存や送信の手応えを返す
スペーシングで、情報のまとまりと距離を整える
レビューでは、次の順番で確認すると効率的です。
構造 → 移動 → 情報の単位 → 行動 → 入力 → 状態 → 反応 → 距離
見た目から入らず、ユーザーの判断順に確認するのがポイントです。
今日やること
今つくっている画面を1枚選び、次の8項目のうち、最も問題が大きいものを1つだけ選んでください。
レイアウト
ナビゲーション
カード
ボタン
フォーム
状態
マイクロインタラクション
スペーシング
最初から全部を直す必要はありません。
問題の種類を一つに絞るだけで、改善案の精度は上がります。
次に読む記事
UIを部品単位で見る前に、画面全体の意図と情報の流れを整理したい人は、IAとデザインシステムの基本から読むと理解がつながります。
AIっぽくないUIデザインを
AIで生成する手順はこちら
【保存版】ノンデザイナーのためのアプリUI設計5ステップ（プロンプト付き）
【アプリ設計】使いやすさは、画面を作る前に決まる〜ノンデザイナーのためのIAとデザインシステム〜
【図解付き】UI心理学辞典〜使われる画面をつくる10の法則〜
使いやすいUIを作る4つの基本
Google Stitchで作って学ぶ
【無料ウェビナーのお知らせ】
「なんかダサい」アプリのUIデザインを、
Claude Codeに直させる60分
🔽 申し込みはこちら
既に480名の方が申し込み済です。
AIを使って副業・マネタイズ・業務効率化を
本気で進めたいという方へ
相談会実施中（初回限定価格）
【お問い合わせ先】
法人研修・顧問: https://kawai-business.pages.dev/
セミナー登壇、動画出演: https://lp-seminar.pages.dev/
月次1on1: https://kawai-1on1.pages.dev/
その他: https://kawai-official.pages.dev/
【メディア】
X: https://x.com/kawai_design
note: https://note.com/kawaidesign
NewsPicks: https://newspicks.com/topics/ai-design/
Voicy: https://voicy.jp/channel/820890
YouTube: https://www.youtube.com/@kawai_design
Threads: https://www.threads.com/@kawai_design_ig
Instagram: https://www.instagram.com/kawai_design_ig/
Facebook: https://www.facebook.com/profile.php?id=100094403012810
LINE: https://lin.ee/TrZG7ZN
【書籍・監修】
AIでゼロからデザイン
https://www.shoeisha.co.jp/book/detail/9784798193427
Google 画像生成プロンプト ガイド
https://cloud.google.com/resources/content/intl/ja-jp/imagenpromptguide?hl=ja
【出演実績】
NewsPicks「実践！仕事術」
https://newspicks.com/movie-series/124/?from=%2Fmovie-series%2F124%2F&movieId=6425
さらば森田のAI〇〇ラボ
https://youtu.be/Vsd2-nEzMWE?si=5ovF0-CroGpeNfTC
https://youtu.be/A0A72V4vi3g?si=QTj3_DNKy8Pq2s8l
ベイジTV（株式会社ベイジ 公式チャンネル）
https://youtu.be/lTzrUc7L3n0?si=Ron__YSOWX1-l9Tb
San Francisco Design Talk（btrax Brandon氏のPodcast）
https://open.spotify.com/episode/4vk0PiJzB0559g3InChcjl
ソフトバンクニュース
https://www.softbank.jp/sbnews/entry/20251217_02
SHE likes
https://x.com/she_officials/status/2025767572604588437?s=46
