カテゴリー
レイアウト/配置系
10

視覚ゲシュタルト

近接、類似、閉鎖といったパターン(プレグナンツの法則)を用いてレイアウトし、要素同士のグループ関係を効果的に示す。

01
Bad

要素の関係性が不明瞭

設定フォーム
ユーザー名
メールアドレス
パスワード
言語
タイムゾーン
通知設定
Good

関連する要素が視覚的にまとまっている

設定フォーム
アカウント情報
ユーザー名
メールアドレス
パスワード
表示設定
言語
タイムゾーン
通知
通知設定
02
Bad

同じ機能のボタンがバラバラなデザイン

アクションボタン
同じ種類のボタンなのにバラバラ
Good

同じ機能のボタンは同じ色・形で統一

アクションボタン
メイン操作
その他
機能ごとに統一されたスタイル
03
Bad

セクション間の区切りがわからない

ユーザー情報
名前: 山田太郎メール: [email protected]住所: 東京都渋谷区電話: 090-1234-5678会員ランク: ゴールドポイント: 1,234pt
どこからどこまでが1つのグループ?
Good

カードや枠線でセクションを明確に区切る

ユーザー情報
基本情報
名前: 山田太郎メール: [email protected]
連絡先
住所: 東京都渋谷区電話: 090-1234-5678
会員情報
ランク: ゴールドポイント: 1,234pt
カードで明確にグループ化
No.10視覚ゲシュタルト
10

視覚ゲシュタルト

近接、類似、閉鎖といったパターン(プレグナンツの法則)を用いてレイアウトし、要素同士のグループ関係を効果的に示す。

01
Bad

要素の関係性が不明瞭

設定フォーム
ユーザー名
メールアドレス
パスワード
言語
タイムゾーン
通知設定
Good

関連する要素が視覚的にまとまっている

設定フォーム
アカウント情報
ユーザー名
メールアドレス
パスワード
表示設定
言語
タイムゾーン
通知
通知設定
02
Bad

同じ機能のボタンがバラバラなデザイン

アクションボタン
同じ種類のボタンなのにバラバラ
Good

同じ機能のボタンは同じ色・形で統一

アクションボタン
メイン操作
その他
機能ごとに統一されたスタイル
03
Bad

セクション間の区切りがわからない

ユーザー情報
名前: 山田太郎メール: [email protected]住所: 東京都渋谷区電話: 090-1234-5678会員ランク: ゴールドポイント: 1,234pt
どこからどこまでが1つのグループ?
Good

カードや枠線でセクションを明確に区切る

ユーザー情報
基本情報
名前: 山田太郎メール: [email protected]
連絡先
住所: 東京都渋谷区電話: 090-1234-5678
会員情報
ランク: ゴールドポイント: 1,234pt
カードで明確にグループ化