スライダーで学ぶUI・UXデザインの基礎
余白・整列・色・タイポグラフィからコンポーネント・モーションまで、78の概念を実際に操作しながら目で身につけましょう。デザインに苦手意識のある開発者やフロントエンド入門者のための無料学習サイトです。左側で概念を検索するか選んで始めてください。
すぐに触れる概念
余白Padding & Margin余白とは、要素の枠線より内側のパディングと外側のマージンからなる空きスペースで、デザインで最も頻繁に調整する値です。視覚的階層Hierarchy視覚的階層とは、画面の中の要素の重要度の順序を、サイズ・太さ・色・余白の差で目に見える形にすることです。コントラスト比・アクセシビリティContrast Ratioコントラスト比とは、文字と背景の明るさの差を一つの比率で表した値で、読みやすさとアクセシビリティの基準になります。近接Proximity近接とは、近くに置かれた要素を目が自然にひとつのかたまりとしてまとめて認識する性質で、ゲシュタルトの原則のひとつです。ボタンの構造Button Anatomyボタンの構造とは、ボタンを形づくるラベル・コンテナ・余白・角丸という部品構成のことで、各部を個別に調整して見た目や大きさを整えられます。トランジション & イージングTransition & Easingトランジション & イージングとは、値がAからBへ変わるとき、その変化を時間をかけてどんな速度のカーブでつなぐかを決める仕組みです。
学び方
- 概念ごとにスライダーやトグルを実際に動かし、値が画面をどう変えるかを目で確かめます。
- 定義・なぜ重要か・よくある間違い・実務のヒント・関連概念まで、一つの概念を深く掘り下げます。
- 学んだ概念は、コンポーザーで一つのデザインシステムに組み立ててみることができます。