#UIデザイン原則
グリッドシステム (Grid System)
要素をなんとなく並べると、画面は「整っているようで整っていない」状態になる。カラム・ガター・マージンを定義し、すべての要素を見えない格子に揃えることで一貫性あるレイアウトを作るグリッドシステムの設計原則。
ヘルプ・ガイダンス (Help & Guidance)
困ったユーザーを助けるのではなく、困らせないUIを作る。それでも迷ったとき、必要な瞬間に必要な助けを届けるコンテキスチュアル・ガイダンスの設計原則。
アイコン設計 (Iconography)
アイコンは「言語の壁を越える道標」であると同時に、「意味が伝わらなければただのノイズ」になる両刃の剣です。直感的な機能理解を助けるためのアイコン設計原則です。
情報アーキテクチャ (Information Architecture)
機能があっても見つけられなければ存在しないのと同じ。ユーザーのメンタルモデルに合わせた情報の整理・構造化で「迷子ゼロ」を実現する設計原則。
情報密度の最適化 (Information Density)
画面に載せる情報量は「多ければ多いほど良い」でも「少なければ少ないほど良い」でもない。ユーザーの目的と認知能力に合わせて最適な密度を設計する原則です。
多言語/i18n 前提のUI (Internationalization UI)
日本語で設計したUIをそのまま英語に翻訳したら、ボタンのテキストが溢れた——i18nを後付けにすると必ず壊れる。最初から多言語・多文化を前提に設計するUI原則。
一時停止・中断・再開 (Interruption Handling)
ユーザーは必ず中断する。電話が来る、通知が来る、急用が入る。中断しても「続きから始められる」設計が、完了率を守り、ユーザーの信頼を保つ原則。
キーボード操作 (Keyboard Navigation)
マウスが使えなくても、すべての機能が使える——キーボードだけでUIを操作できるかどうかは、運動障害・高齢者・パワーユーザー全員に影響する。WCAGが定めるキーボード操作の設計原則。
マイクロコピー (Microcopy)
ボタンの一言が、コンバージョンを変える。UIに散りばめられた小さなテキスト——ラベル・エラー文・プレースホルダー——がユーザーの行動と感情を左右するマイクロコピーの設計原則。
モーションの品位 (Motion Quality)
アニメーションは「動けばいい」ではない。意味のない過剰な動きはユーザーの邪魔になり、遅すぎる動きは操作を妨げる。UIにおけるモーションを「機能」として設計するための原則。
ナビゲーション設計 (Navigation Design)
「今どこにいるか」「どこへ行けるか」「どうやって戻るか」——この3つが答えられないナビゲーションはユーザーを迷子にする。現在地・行き先・帰り道を常に示す設計原則。
計測できる形にする (Observability & Metrics)
「リニューアルして良くなった気がする」——感覚ではなくデータで判断するために、UIは最初から計測可能な形で設計する必要がある。何を・どこで・どう計測するかを設計に組み込む原則。