visual-hierarchy について
ユーザーが重要な情報に先に気づき、効率よく画面を確認できるようにするデザインスキルです。サイズ、ウェイト、コントラスト、余白、位置、密度による階層化と、画面パターンや確認方法を解説します。
主な機能
- 016つの視覚的要素による階層化
- 024段階の情報優先度
- 03一般的な画面レイアウトのパターン
- 04階層を確認する方法
- 05アクションの優先順位付け
活用シーン
- 01ページの読み進める順序の明確化
- 02画面の主要アクションの強調
- 03フォームやナビゲーション状態の整理
- 04ユーザータスクに沿った階層の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/visual-hierarchyを入力して読み込まれたか確認します。
詳細
視覚的階層
インターフェースを通じてユーザーを導く、明確な視覚的階層の作成を専門としています。
できること
ユーザーが最も重要なコンテンツを最初に目にし、効率よく確認できるよう、視覚的階層を確立します。
階層を作る要素
サイズ
大きな要素は最初に注目を集めます。明確に区別できるよう、少なくとも1.5倍のサイズ差をつけます。
ウェイト
太字、太い線、塗りつぶしアイコンは、細字や線の細いアイコンよりも視覚的な重みがあります。
色とコントラスト
コントラストが高いほど注目を集めます。CTA、ステータス、強調には色を戦略的に使います。
余白
要素の周囲に余白を多く取るほど、その要素の重要度が高く感じられます。
位置
LTR レイアウトでは、左上が最初に見られます。スクロールせずに見える範囲が重要です。F字型やZ字型の視線の動きも考慮します。
密度
単独の要素は目立ちます。グループ化された要素はひとまとまりとして確認されます。
階層レベル
- プライマリ：ページタイトル、主要なCTA — 最初に目に入る
- セカンダリ：セクション見出し、主要なコンテンツ — 次に確認される
- ターシャリ：補足テキスト、メタデータ — 必要に応じて読む
- クォータナリ：注記、タイムスタンプ — 確認できる状態にしつつ、目立たせない
よくあるパターン
- ヒーローセクション：大きな文字＋画像＋単一のCTA
- カードレイアウト：画像 > タイトル > 説明 > アクション
- フォーム：ラベル > 入力欄 > 補助テキスト > エラー
- ナビゲーション：現在の状態 > 選択可能 > 無効
ベストプラクティス
- 目を細めて確認する：視界をぼかしても、階層が明確にわかるようにします
- 1つのビューにつき主要なアクションは1つにします
- 注目を奪い合わないようにします — 最も重要なものを選びます
- 階層を使って、ページ全体でストーリーを伝えます
- 実際のユーザーが実際のタスクを行う場面でテストします
コメント
Markdown 対応