余白と近接・タイポグラフィ・色とコントラストの原則から、Figma のフレーム・Auto Layout・コンポーネント、情報設計・状態設計・レスポンシブ、デザイントークンと CSS への落とし込み、プロトタイプ・ユーザビリティテスト・アクセシビリティまで。全20レッスンで「何を作るか・どう見えるべきか」を自分で決めて、実装に渡せるところまで進みます。デザインの主張は、サンプルを実際にブラウザで描画して測った値で裏づけています。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ Figma の画面はバージョンで変わるため、操作は考え方を中心に説明し、同じ考え方を HTML/CSS のデモで確かめます。デモはブラウザ内でそのままプレビューできます。
余白と近接・タイポグラフィ・色とコントラストという 3 つの原則を、余白のピクセルやコントラスト比といった数値で確かめます。最後は良い UI と悪い UI を観点ごとに分解して、言葉にできるところまで進みます。
フレームとレイヤー・Auto Layout・コンポーネントとバリアント・スタイルを、対応する HTML/CSS（入れ子・Flexbox・クラス・CSS 変数）と並べて理解します。画面ショットではなく考え方で押さえるので、Figma のバージョンが変わっても通用します。
情報設計で見出しの階層を決め、ワイヤーフレームで領域と並びに起こし、読み込み中・エラー・空を含む 4 つの状態を設計します。最後は幅に合わせて列数が変わるレスポンシブまで進みます。
色・余白・角丸を名前つきの値（デザイントークン）にまとめ、命名規則をそろえ、対応表にして開発者へ渡します。最後はトークンだけでボタンを組み、デザインの値と CSS の計算値が一致することを確かめます。
画面をつないだプロトタイプで流れを試し、タスクを与えるユーザビリティテストとアクセシビリティの 4 点で、使える画面かを確かめます。最後は計測 → 発見 → 直す → 再計測のループを before / after の数値で回して、全20回を締めくくります。
全20レッスンを終えたら、次は設計した画面を自分の手で組む HTML/CSS 入門コース や、コンポーネントを実装する React 入門コース へ。メンバーシップで全コースが解放されます。