UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。
スキューモーフィズムとは、実物の質感や立体感をUIに再現する表現です。フラットデザインとの違いを、見た目・押せそうに見えるか（アフォーダンス）・情報密度の3点で比較し、現代UIが両者の間のどこに立っているかを画面例で示します。
UIとは、ユーザーが見て・触れて・操作する接点のことです。本記事では、インターフェースデザインとは何か、UXとの違い、UIデザインの基本要素を初心者向けにわかりやすく解説します。
UIデザインの設計プロセスを6ステップで体系化。「なぜそのUIか」を説明できるようになるUX心理→UI原則→UIコンポーネントの思考順序と実践フレームワーク。
Button・Modal・Toast・Sidebarなど、UIコンポーネント69記事を9カテゴリで体系化。各コンポーネントの設計判断・状態設計・アクセシビリティをまとめたハブページ。
UI原則、UI設計原則、UXデザインの法則をWhy→What→Howで体系化。UX心理・UI原則・UIコンポーネントをつなげて学ぶUIXHEROの総合入口ガイド。
UI原則とは何か、UI設計でどう使うかを解説。視覚設計から認知設計、操作・対話、情報構造、アクセシビリティまで65のUIデザイン原則を体系化。
「UIデザイン＝画面を綺麗にすること」と思われている——この誤解がプロダクトを壊す。ユーザーとシステムの間にある「対話」を設計し、目的達成を邪魔しない道具を作るUIデザインの根本原則。
数ピクセルのズレが積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与える。見えない線に沿って要素を揃えることで、秩序・関係性・信頼感を同時に作り出す整列の設計原則。
ブランドカラーを並べただけでは配色設計ではない。プライマリ・セマンティック・ニュートラルの役割を定義し、色を「装飾」ではなく「情報」として機能させる配色システムの設計原則。
同じ役割を持つUIコンポーネントが、画面をまたいで異なる見た目・振る舞いをしていると、ユーザーは毎回「これは何だ？」と学習し直す羽目になる。コンポーネント単位で視覚的一貫性を担保するための原則です。
「おしゃれで淡い」デザインは、誰も読めないサイトを生む。色・サイズ・明度の「差」を意図的に設計し、情報の優先順位と役割をユーザーの視線に直接語りかけるコントラストの設計原則。