ページを読み込み中...
しばらくお待ちください
しばらくお待ちください
数ピクセルのズレが積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与える。見えない線に沿って要素を揃えることで、秩序・関係性・信頼感を同時に作り出す整列の設計原則。
ユーザーの視線は画面上でランダムに動くわけではありません。ZパターンやFパターンなどの自然な眼球運動を利用し、目的のアクションまで迷わずユーザーを「案内」する設計技術です。
要素をなんとなく並べると、画面は「整っているようで整っていない」状態になる。カラム・ガター・マージンを定義し、すべての要素を見えない格子に揃えることで一貫性あるレイアウトを作るグリッドシステムの設計原則。
ラベルと入力欄が同じ距離で並んでいると、どれとどれがペアかわからない。線や枠を使わずに「近づける・遠ざける」だけで情報のグループを作る、近接の設計原則。
「スペースがもったいない」と要素を詰め込むと、すべての情報が同じ重要度に見えて何も伝わらない。余白を「空き」ではなく「見えないブロック」として意図的に設計する原則。
「全部目立たせたい」は「何も目立たない」と同じだ。サイズ・コントラスト・余白・配置で情報に強弱をつけ、ユーザーの視線を意図した順序で誘導する視覚的階層の設計原則。
Web上のテキストコンテンツを見る際、ユーザーの視線はアルファベットの「F」の字を描くように動く傾向がある。
「1:1.618」の比率。自然界に多く見られるこの比率をレイアウトやタイポグラフィに取り入れることで、人間が本能的に美しいと感じる調和の取れたデザインを作ることができる。
情報の重要度に応じて、大きさ・色・配置に強弱をつけることで、ユーザーの視線を「見るべき順序」通りに誘導するデザイン原則。
テキストが少なく、画像やCTAが中心のページ（LPなど）において、ユーザーの視線は左上→右上→左下→右下と「Z」の字を描くように動く。