01 / From problem to patterns
困りごとから改善案を探す
①課題を選ぶ → ②3案を比較 → ③使い分けを学ぶ
改善の選択肢
ひとつだけが正解ではありません。切り替えて違いを試してください。
触って比較する
注意が必要な場面
設計判断を試してみる
02 / Component literacy
名前と役割を覚えるパーツ辞典
まず覚えたい基本コンポーネント
03 / Practice with AI
自分のUI課題を、AIと整理する
いきなり改善を依頼するのではなく、課題の原因仮説と改善案を3つ以上出し、条件による使い分けまで説明してもらうためのプロンプトを生成します。下の入力内容は外部に送信されません。
コピーした文章を普段使っているAIに貼り付けて使えます。
教材の根拠と注意点
この試作は学習用の例です。項目数だけでUIを機械的に決めることはできません。利用頻度、ユーザーの習熟度、アクセシビリティ、端末、エラーの重大性などを踏まえて検証してください。
- GOV.UK Design System / Components — コンポーネントの使いどころと注意事項
- WAI-ARIA Authoring Practices — UIパターンの振る舞いとアクセシビリティ
このプロトタイプの実演UIは教材用に簡略化されています。実製品に転用する際はアクセシビリティや細かな振る舞いを別途検証してください。