ページを読み込み中...
しばらくお待ちください
しばらくお待ちください
スキューモーフィズムとフラットデザインの違いを、見た目・アフォーダンス・情報整理の観点から解説。現代UIがどこに立っているかを図解とモック比較で示します。
UIとは、ユーザーが見て・触れて・操作する接点のことです。本記事では、UXとの違い、UIデザインの基本要素、良いUIを作るための原則を初心者向けにわかりやすく解説します。
UIデザインの設計プロセスを6ステップで体系化。「なぜそのUIか」を説明できるようになるUX心理→UI原則→UIコンポーネントの思考順序と実践フレームワーク。
Button・Modal・Toast・Sidebarなど、UIコンポーネント60記事を8カテゴリで体系化。各コンポーネントの設計判断・状態設計・アクセシビリティをまとめたハブページ。
UIデザインとは何か、なぜ重要か。UX心理・UI原則・UIコンポーネントの3レイヤー構造で体系化したUIXHEROの総合入口ガイド。
視覚設計から認知設計、操作・対話、情報構造、アクセシビリティまで。UIXHEROのUIデザイン原則65記事を8カテゴリで体系化したハブページ。
「UIデザイン＝画面を綺麗にすること」と思われている——この誤解がプロダクトを壊す。ユーザーとシステムの間にある「対話」を設計し、目的達成を邪魔しない道具を作るUIデザインの根本原則。
数ピクセルのズレが積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与える。見えない線に沿って要素を揃えることで、秩序・関係性・信頼感を同時に作り出す整列の設計原則。
ブランドカラーを並べただけでは配色設計ではない。プライマリ・セマンティック・ニュートラルの役割を定義し、色を「装飾」ではなく「情報」として機能させる配色システムの設計原則。
同じ役割を持つUIコンポーネントが、画面をまたいで異なる見た目・振る舞いをしていると、ユーザーは毎回「これは何だ？」と学習し直す羽目になる。コンポーネント単位で視覚的一貫性を担保するための原則です。
「おしゃれで淡い」デザインは、誰も読めないサイトを生む。色・サイズ・明度の「差」を意図的に設計し、情報の優先順位と役割をユーザーの視線に直接語りかけるコントラストの設計原則。
ユーザーの視線は画面上でランダムに動くわけではありません。ZパターンやFパターンなどの自然な眼球運動を利用し、目的のアクションまで迷わずユーザーを「案内」する設計技術です。