UI設計の基礎 — 読まなくても分かる画面の作り方

このページは入口（ハブ）です。まずここを読んで、上から順に各章へ進んでください。

画面を作るのは、いまや AI に頼めます。しかし「その画面が使いやすいか」を判断するのは人です。判断の物差しがないと、AI が出した画面を「なんとなく良さそう」で受け取ることになります。

この連載は、UI（ユーザーインターフェース。人が触れる画面と操作のこと）の設計で昔から守られてきた原則を、初めての非エンジニアの人向けに、出典つきでまとめたものです。原則の多くは数十年前から言われているもので、流行りの見た目とは関係なく効きます。

⚠️ この連載について — AI と一緒に書き、出典は一つずつ開いて確認しています。それでも読み違いや古い情報が混じる可能性はあります。間違いに気づいたら PR（プルリクエスト）か Issue で教えてください。

1. 誰のため、何のため

誰のため … 画面を作る人、作らせる人、確認する人の全員。プログラミングの知識はいりません
何のため … ①使いやすい画面と使いにくい画面の違いを「言葉で」説明できるようになる、②AI に画面を頼むときの指示と、できた画面を見るときの観点を手に入れる
どう読む … 各章は「ひとことで → なぜ → 避けたい例と改善例 → やってみる → 出典」の順です。例は画面の文言で示してあるので、自分の画面に当てはめながら読んでください。図は左が避けたい例、右が改善例です

この連載の出発点になった三つの言い回しです。章を読む前に、まずこれだけ覚えてください。

合言葉	意味	くわしくは
一貫性をもたせる	同じ意味のものは、同じ見た目・同じ場所・同じ言葉で	第1章
読まなくても分かる	説明文を読まなくても、見れば何ができるか分かる。文字を減らすことであって、文字をなくすことではない	第2章
肯定形と否定形をまぜない	設定の項目は「〜する」の形にそろえる。「通知を受け取る」の隣に「メールを受け取らない」を置かない	第3章

「読まなくても分かる」は、よく「ノンバーバル（言葉に頼らない）」と言われます。ただし「文字をなくしてアイコンだけにする」まで進めると、かえって意味が伝わらなくなります。アイコンには言葉を添えるのが定番の指針です（第2章で扱います）。

本文で引く出典は、次の五つに絞っています。どれもこの連載を書いた時点で開けることを確認したものです。

ソシオメディア「ヒューマンインターフェースガイドライン」 — 日本語で読める実務向けの指針集。一項目が短く、画面レビューの観点にそのまま使えます
NN/g（ニールセン・ノーマン・グループ）の記事 — 「ユーザビリティの10原則」をはじめとする定番。英語ですが、原則の名前と要点だけ押さえれば十分です
デジタル庁デザインシステム — ボタン・スイッチ・入力欄など部品ごとの使い方を日本語で確認できます。「原則を学んだあと、実際の画面でどうするか」を調べる用途に向きます
書籍 — ノーマン『誰のためのデザイン？増補・改訂版』（考え方の土台）と Tidwell『デザイニング・インターフェース第2版』（画面のパターン集）の二冊です
公的な基準と大手の指針 — WCAG 2.2、NIST の SP 800-63B、Apple の Human Interface Guidelines、Google の web.dev、英国政府のデザインシステム。第7章の「戻る」の節と、第8章の入力・ログイン・登録の節で引きます

一覧は付録Bにあります。

最後まで読むと、こんなことができるようになります。