UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。
「UIデザイン＝画面を綺麗にすること」と思われている——この誤解がプロダクトを壊す。ユーザーとシステムの間にある「対話」を設計し、目的達成を邪魔しない道具を作るUIデザインの根本原則。
数ピクセルのズレが積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与える。見えない線に沿って要素を揃えることで、秩序・関係性・信頼感を同時に作り出す整列の設計原則。
ブランドカラーを並べただけでは配色設計ではない。プライマリ・セマンティック・ニュートラルの役割を定義し、色を「装飾」ではなく「情報」として機能させる配色システムの設計原則。
同じ役割を持つUIコンポーネントが、画面をまたいで異なる見た目・振る舞いをしていると、ユーザーは毎回「これは何だ？」と学習し直す羽目になる。コンポーネント単位で視覚的一貫性を担保するための原則です。
「おしゃれで淡い」デザインは、誰も読めないサイトを生む。色・サイズ・明度の「差」を意図的に設計し、情報の優先順位と役割をユーザーの視線に直接語りかけるコントラストの設計原則。
ユーザーの視線は画面上でランダムに動くわけではありません。ZパターンやFパターンなどの自然な眼球運動を利用し、目的のアクションまで迷わずユーザーを「案内」する設計技術です。
要素をなんとなく並べると、画面は「整っているようで整っていない」状態になる。カラム・ガター・マージンを定義し、すべての要素を見えない格子に揃えることで一貫性あるレイアウトを作るグリッドシステムの設計原則。
アイコンは「言語の壁を越える道標」であると同時に、「意味が伝わらなければただのノイズ」になる両刃の剣です。直感的な機能理解を助けるためのアイコン設計原則です。
画面に載せる情報量は「多ければ多いほど良い」でも「少なければ少ないほど良い」でもない。ユーザーの目的と認知能力に合わせて最適な密度を設計する原則です。
アニメーションは「動けばいい」ではない。意味のない過剰な動きはユーザーの邪魔になり、遅すぎる動きは操作を妨げる。UIにおけるモーションを「機能」として設計するための原則。
ラベルと入力欄が同じ距離で並んでいると、どれとどれがペアかわからない。線や枠を使わずに「近づける・遠ざける」だけで情報のグループを作る、近接の設計原則。