UIスタイル辞書
フラット、グラス、リキッド、クレイなど、UIの質感と見た目の方向性を目で比較できる一覧です。
このページの見方
ここではデザインシステムそのものではなく、画面の印象を決める視覚スタイルを整理します。 各カード上部のモックプレビューで雰囲気を確認し、詳細ページで使いどころと注意点を確認できます。
影を抑えた6分割のタイルで、フラットな情報整理を表します。
UI Style
フラットデザインFlat Design
影や質感を抑え、色面、アイコン、タイポグラフィで情報を整理する軽量なUIスタイルです。
薄い影とサイドナビで、実務UIらしい階層を表します。
UI Style
セミフラットSemi-flat UI
フラットな情報設計に、最小限の影や薄いグラデーションを足して操作対象を分かりやすくする実用系スタイルです。
カード、チップ、FABで階層と操作状態を表します。
UI Style
マテリアル系UIMaterial-inspired UI
紙の重なりや状態表現を参考に、カード、FAB、チップなどで階層を明確にするスタイルです。
革や金属のような質感とノブで、現実物の比喩を表します。
UI Style
スキューモーフィズムSkeuomorphism
革、金属、紙など現実の素材や物体の手触りをUIに持ち込む、具象的なスタイルです。
同色の面と内外シャドウで、浮き出しとへこみを表します。
UI Style
ニューモーフィズムNeumorphism
背景と同系色の要素に内外の影を付け、押し出しやへこみを表現する柔らかい立体スタイルです。
グラデーション背景上のblurパネルで、透明感と奥行きを表します。
UI Style
グラスモーフィズムGlassmorphism
半透明の面、ぼかし、薄い境界線で、すりガラスのような奥行きを作るスタイルです。
光沢のある透明カードで、液体のような屈折感を表します。
UI Style
リキッドグラスLiquid Glass
透明なガラス表現に、液体のようなハイライトや屈折感を加えたリッチなスタイルです。
丸いカードと立体的なパステル要素で、粘土のような親しみを表します。
UI Style
クレイモーフィズムClaymorphism
粘土のような丸い3D形状とパステルカラーで、親しみやすさを出すスタイルです。
暗い面に多色の光を重ね、先進的なLPヒーローを表します。
UI Style
オーロラUIAurora UI
発光する多色グラデーションとぼかしで、未来感や先進性を強く演出するスタイルです。