視覚デザイン
視線誘導 (Gaze Guidance)
ユーザーの視線は画面上でランダムに動くわけではありません。ZパターンやFパターンなどの自然な眼球運動を利用し、目的のアクションまで迷わずユーザーを「案内」する設計技術です。
グリッドシステム (Grid System)
要素をなんとなく並べると、画面は「整っているようで整っていない」状態になる。カラム・ガター・マージンを定義し、すべての要素を見えない格子に揃えることで一貫性あるレイアウトを作るグリッドシステムの設計原則。
アイコン設計 (Iconography)
アイコンは「言語の壁を越える道標」であると同時に、「意味が伝わらなければただのノイズ」になる両刃の剣です。直感的な機能理解を助けるためのアイコン設計原則です。
情報密度の最適化 (Information Density)
画面に載せる情報量は「多ければ多いほど良い」でも「少なければ少ないほど良い」でもない。ユーザーの目的と認知能力に合わせて最適な密度を設計する原則です。
モーションの品位 (Motion Quality)
アニメーションは「動けばいい」ではない。意味のない過剰な動きはユーザーの邪魔になり、遅すぎる動きは操作を妨げる。UIにおけるモーションを「機能」として設計するための原則。
近接 (Proximity)
ラベルと入力欄が同じ距離で並んでいると、どれとどれがペアかわからない。線や枠を使わずに「近づける・遠ざける」だけで情報のグループを作る、近接の設計原則。
タイポグラフィ設計 (Typography)
フォントを選んで並べるだけではタイポグラフィ設計ではない。サイズ・太さ・行間・コントラストで情報に強弱をつけ、ユーザーが「読まずに理解できる」テキスト体験を設計する原則。
反復・一貫性 (Visual Consistency)
画面ごとにボタンの色や位置が違うUIは、ユーザーに毎回「これは何のボタンか」を学習させる。同じ機能には同じ見た目を繰り返し適用し、ユーザーの予測を裏切らない一貫性の設計原則。
余白 (Whitespace)
「スペースがもったいない」と要素を詰め込むと、すべての情報が同じ重要度に見えて何も伝わらない。余白を「空き」ではなく「見えないブロック」として意図的に設計する原則。