UI・UXデザイン入門（全8回）｜使いやすさの原則から情報設計・プロトタイプ・アクセシビリティ・テストまで

「使いにくい」と言われる画面には、たいてい理由があります。ボタンの文字が分かりにくい、探している情報が見つからない、入力でつまずく、エラーの意味が分からない――。この講座は、そうした「つまずき」を勘やセンスではなく、原則と手順で見つけて直せるようになるためのUI・UXの入門講座です。全8回で、UIとUXの違い、ユーザー中心設計（HCD）の考え方、情報設計、ユーザビリティの原則、ワイヤーフレームとプロトタイプ、フォーム、アクセシビリティ、ユーザビリティテストまでを順番に学びます。

こんな人におすすめ

• 自社のWebサイトやアプリ、業務システムについて「使いにくい」という声が出ているが、どこから直せばよいか分からない人
• 制作会社やエンジニアに画面づくりを依頼する立場で、デザイン案の良し悪しを言葉で説明できるようになりたい人
• マーケティングや営業の担当者で、サイトやLPの数字を上げるために、ユーザー目線で画面を点検する方法を知りたい人
• デザイナーではないが、ワイヤーフレームを描いたり、簡単なプロトタイプを作ったりして、チームの話を前に進めたい人
• アクセシビリティ（誰もが使えること）への対応を求められ、まず何を知っておけばよいかを押さえたい人

読み終えるとできるようになること

1. UIとUXの違いを説明し、目の前の問題が「画面の問題」か「体験全体の問題」かを切り分けられる
2. ユーザー中心設計（HCD）の原則と活動の流れに沿って、画面づくりの進め方を組み立てられる
3. サイトやアプリの情報の分け方・並べ方を設計し、カードソートやツリーテストで確かめられる
4. ニールセンの10のヒューリスティクスを使って、画面の問題点を見つけ、優先順位をつけられる
5. ワイヤーフレームとプロトタイプを目的に応じて使い分け、早い段階で試せる
6. フォームとアクセシビリティの基本を押さえ、ユーザビリティテストを企画・実施して改善につなげられる

シラバス（全8回）

1. UIとUXの違い：画面の使いやすさと「体験全体」をどう考えるか
2. ユーザー中心設計（HCD）：ISO 9241-210の6つの原則と4つの活動
3. 情報設計とナビゲーション：迷わせない構造をつくる（カードソート・ツリーテスト）
4. ユーザビリティの10原則：ニールセンのヒューリスティクスで画面を点検する
5. ワイヤーフレームとプロトタイプ：粗く早く作り、試しながら仕上げる
6. 入力とフォームのUX：ラベル・入力補助・エラーメッセージの基本
7. アクセシビリティ：WCAG・JIS X 8341-3と、誰でも使える画面の基本
8. ユーザビリティテストと改善：5人に試してもらい、観察し、直す（総まとめ）

講座の進め方

• 1回あたりの目安は15〜25分です。第1回から順に読むと、前の回で学んだ考え方が次の回の前提になるように組んでいます。
• 各回の途中に「ちょこっとクイズ」、最後に「確認テスト」があります。選択肢を押すと、その場で答えと解説が出ます。
• 画面の例に出てくるサービス名（予約アプリ「ヨヤクル」、ネットショップ「ツギノ雑貨店」など）は、説明のために作った架空の例です。
• 色・文字・レイアウトといった見た目のデザインの基本は、別の講座デザイン・クリエイティブの基本で扱います。この講座では、主に「使いやすさ」と「体験」の側から画面を考えます。

関連する講座・記事

• LPのコンバージョン率を上げる改善はLP・CVR改善の教科書、アクセス解析の数字の読み方はアクセス解析とGA4の講座で扱っています。
• 新しいサービスや施策の「何を作るべきか」から考えたい方は、「デザイン思考入門」の講座もあわせてどうぞ。
• 画面づくりを依頼する先を探している方はホームページ制作会社おすすめ比較とアプリ開発会社おすすめ比較、ユーザーの行動を見る道具はヒートマップツールおすすめ比較もご覧ください。

サイトやアプリの改善について相談したい場合は、ツギノテ編集部への相談から受け付けています。