UI/UXとは、利用者が製品に触れる接点を指す「UI（ユーザーインターフェース）」と、その接点を通じて生じる知覚と反応の全体を指す「UX（ユーザーエクスペリエンス）」を、ひと続きで呼ぶときの言い方です。どちらも日本産業規格 JIS Z 8530:2021 に定義があり、UIはUXを構成する一部という関係にあります。この記事では、規格の定義文でUI・UX・ユーザビリティの境界を引いたうえで、UIの対象範囲、設計時に使うコントラスト比や接触領域の数値基準、制作工程と外注の線引きまでを順に整理します。
まとめ｜UI/UXの定義と、設計に入る前に決める4つのこと
UIは「情報と制御を提供する構成要素」、UXは「利用前・利用中・利用後に生じる知覚及び反応」で、UIはUXの一部です。UIは視認性だけでなく、操作への応答や画面間の一貫性も評価します。UXは目標達成に加えて、利用前の期待、利用中の感情、利用後の印象などを含めて評価します。評価の単位が違うので、数字が伸びない原因がどちらにあるかを先に切り分けます。
設計に着手する前に固定しておく項目は4つです。
- 誰のどの目的を、どの画面で完了させるかを文章で書く。ここが曖昧なまま配色やフォントの議論に入ると、判断基準がなくなって好みの応酬になります。
- 情報の構造を、見た目より先に決める。順序を逆にすると、後からナビゲーションごと作り直す手戻りが生じます。
- コントラスト比と接触領域の数値を、配色を決める前に確定する。WCAG 2.2は通常の文字で4.5:1、接触領域で24×24 CSSピクセルを示しており、完成後に直すと画面全体の配色をやり直す作業になります。
- 公開後に何を見て判断するかを、リリース前に決める。指標を決めずに出すと、改善が感想の言い合いに終わります。
切り分けの入口になるのは、離脱がどの画面で起きているかの分布です。ただし分布だけでは原因は決まりません。画面の操作性に加えて、その画面で提示している料金や条件、読み込み時間も併せて確認してください。体験設計そのものはUX（ユーザーエクスペリエンス）とはの記事で、使いやすさの評価軸はユーザビリティとは何かの記事で扱っています。自社の画面設計を見直す段階であれば、調査から画面設計・実装まで引き受けるUI/UXデザインのサービスもご検討ください。
UI/UXとは何か｜JIS Z 8530:2021が定めるUI・UX・ユーザビリティの定義
UIとUXの違いは、解説記事ごとに言い回しが変わって混乱しやすい箇所です。日本産業規格に定義文があるので、そこを出発点にすると社内の認識をそろえやすくなります。
規格が定める3つの定義と、UIがUXの一部になる包含関係
人間中心設計の規格である JIS Z 8530:2021（ISO 9241-210に対応）は、箇条3の用語及び定義で次のように定めています。
- 3.16 ユーザインタフェース：インタラクティブシステムを用いて特定の仕事を遂行するユーザに対して、情報及び制御を提供する、インタラクティブシステム（ソフトウェア及びハードウェア）における全ての構成要素
- 3.15 ユーザエクスペリエンス：システム、製品又はサービスの利用前、利用中及び利用後に生じるユーザの知覚及び反応
- 3.13 ユーザビリティ：特定のユーザが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い
この3つを並べると関係がはっきりします。UIは「情報及び制御を提供する構成要素」という物理的・論理的な部品の集合で、ソフトウェアだけでなくハードウェアも含みます。対してUXは「利用前、利用中及び利用後に生じる知覚及び反応」で、対象が時間軸に広がっています。広告を見て期待した時点、解約手続きを終えた後の印象まで含むということです。UIはその一部を担う要素であり、UIとUXは対立する概念ではありません。
ユーザビリティが両者の橋渡しになります。規格の定義にあるとおり、ユーザビリティは「効果、効率及び満足」という3つの観点で目標達成の度合いを測るもので、UIの出来をUXの評価へつなぐ物差しとして働きます。画面を作る人と体験を設計する人の議論がかみ合わないときは、この物差しに乗せると論点が具体化します。
「UI/UX」とひと続きで呼ぶ習慣と、評価軸が別であること
求人票や制作会社のサービス名で「UI/UXデザイン」と併記されるのは、画面の見た目だけを整えても体験は良くならず、体験の設計だけを書いても画面に落ちなければ利用者に届かないという不可分さがあるためです。ただし、ひと続きで呼ぶことと、評価が一体であることは別の話になります。
見た目の美しさとUIの品質も同じではありません。JIS Z 8530:2021の3.16が定めるUIは「情報及び制御を提供する構成要素」であり、視覚的な装飾ではなく、情報が読み取れて操作が通るかが評価の対象です。装飾の水準が高くても操作しにくい画面、装飾が素朴でも迷わず使える画面はどちらも成り立ちます。評価軸を分けずに「UI/UXを改善する」とだけ掲げると、どの数字が動けば成功なのかが決まりません。画面単位の指標（入力エラー率、目的の要素への到達率）と、体験全体の指標（継続率、解約理由の内訳）を最初から別々に置いてください。
UIの具体例と対象範囲｜画面・音声・物理操作の接点
規格の定義がハードウェアまで含むとおり、UIの対象はWebサイトやアプリの画面に限りません。券売機のタッチパネルと物理ボタン、家電のリモコン、車載機器のダイヤル、スマートスピーカーの応答文はいずれもUIです。「情報及び制御を提供する構成要素」という定義に当てはまるものは全てUIと考えて差し支えありません。
表示・対話の方式にはGUI、CLI、VUIなどがあり、入力方法にはタッチやジェスチャーなどがあります。次の例は分類軸が異なるため、互いに組み合わせて使われます。
- GUI（グラフィカルユーザーインターフェース）：アイコンやボタンを視覚的に操作する方式。1970年代から80年代に研究・製品化され、MacintoshやWindowsの普及で一般化しました。現在のWeb・アプリの大半がこれにあたります。
- CUI／CLI（キャラクタ／コマンドラインインターフェース）：文字コマンドで指示する方式。開発者向けツールやサーバー運用では現在も主流で、操作の自動化と再現性で優位に立ちます。
- VUI（音声ユーザーインターフェース）：音声で入出力する方式。画面を見られない状況で機能しますが、選択肢の一覧提示が苦手という制約があります。
- タッチ・ジェスチャー：指で直接触れる前提の方式。接触領域の寸法がそのまま操作の成否を左右するため、後述の数値基準が最も効きます。
業務システムの管理画面も見落とされがちなUIの対象です。利用者が社内に限られるため見た目の優先度が下がりやすい一方、毎日長時間使われる分、入力の手数や誤操作の起きやすさが人件費に直結します。実装レベルの設計パターンは業務システムの画面デザインの記事で具体的に扱っています。
UIデザインの数値基準｜WCAG 2.2のコントラスト比とターゲットサイズ
UI設計でもめる論点の多くは、「読みにくい」「押しにくい」という主観の突き合わせで止まります。これを避ける方法は単純で、判断を数値に置き換えることです。W3Cが公開する WCAG 2.2 は2023年10月5日にW3C勧告となり、現行版は2024年12月12日付けで再公表されたもので、WCAG 2.1から9件の達成基準が追加されました。このうち設計の初期に効く数値基準を抜き出すと次の4つになります。
| 達成基準 | レベル | 数値 | 主な対象 |
|---|---|---|---|
| 1.4.3 コントラスト（最低限） | AA | 4.5:1 以上 | 本文の文字色と背景色 |
| 1.4.3 の例外（大きなテキスト） | AA | 3:1 以上 | 18pt以上、又は太字14pt以上（日本語等は相当サイズ） |
| 2.5.8 ターゲットのサイズ（最低限） | AA | 24×24 CSSピクセル | ボタン・リンクなどの接触領域 |
| 2.5.5 ターゲットのサイズ（拡張） | AAA | 44×44 CSSピクセル | 同上（より厳しい水準） |
2.5.8には5つの例外（Spacing／Equivalent／Inline／User Agent Control／Essential）が定められています。実務で使えるのはSpacingの例外で、24×24 CSSピクセルに満たないターゲットでも、各小サイズターゲットの外接矩形の中心に直径24 CSSピクセルの円を置き、その円が他のターゲットや、他の小サイズターゲットに置いた円と交差しなければ、この例外の条件を満たします。ボタン自体を大きくできない一覧画面では、間隔を空けることで基準を満たせるということです。文中のリンク（Inline）も例外に含まれます。
国内では JIS X 8341-3:2016 が現行のウェブアクセシビリティ規格で、2025年10月20日に内容を変更せず「有効」と確認されています。対応国際規格はISO/IEC 40500:2012で、これはWCAG 2.0にあたるものです。国際規格の側では2025年9月にWCAG 2.2を採用したISO/IEC 40500:2025が発行されましたが、JISは2016年版のまま据え置かれています。つまりJISの適合宣言だけを根拠にすると、参照している基準はWCAG 2.0世代のものになります。新規に水準を決める場合は、WCAG 2.2のレベルAAを設計目標にできます。JIS X 8341-3:2016への対応が契約や調達要件に含まれる場合は、その要件も併記して確認してください。
法制度の面では、改正障害者差別解消法により民間事業者にも合理的配慮の提供が2024年4月1日から義務づけられました。何をどこまで満たすかの線引きは障害者差別解消法とはの記事で整理しています。
コントラスト比と接触領域を、配色を決める前に確定する理由
この2つを後回しにすると作業が二度手間になります。ブランドカラーを先に決めてから4.5:1を確認すると、主要な文字色が基準を外していた場合に配色全体をやり直すことになるためです。接触領域も同じで、24×24 CSSピクセルを満たすために余白を広げると、1画面に収まる項目数が変わり、情報設計まで戻る羽目になります。
実務では、配色パレットを作る段階でコントラスト比を検証し、基準を満たす組み合わせだけをパレットに載せてください。判定は自動ツールで機械的に行えますが、半透明の重なりや画像上の文字など自動検証が素通りする箇所があります。適用範囲と落とし穴はWebアクセシビリティのコントラスト比の記事で実装レベルまで踏み込んでいます。
レベルAAAを全面適用すべきでない場面
数値基準は厳しいほど良い、とは言えません。接触領域の44×44 CSSピクセル（2.5.5）はレベルAAAで、全ての操作要素に適用すると情報密度が大きく下がります。行あたりの操作ボタンが多い業務システムの一覧画面では、1画面で見渡せる件数が減り、スクロール量が増えて別の使いにくさを生みます。
WCAG 2.2自体も適合の節で、レベルAAAをサイト全体の方針として要求することは推奨しないと明記しています。一部のコンテンツでは全てのレベルAAA達成基準を満たすことが不可能だ、というのがその理由です。
判断としては、レベルAAの24×24 CSSピクセルを全体の必須ラインに置き、押し間違いの損害が大きい操作（決済の確定、削除、送信）だけ44×44相当まで広げる運用が現実的です。プラットフォームの設計指針もこの水準を採っており、Appleは「指で正確にタップできるよう、コントロールは少なくとも44×44ポイントにする」と示し、AndroidのMaterial Componentsではアイコンボタンの既定寸法が48dpのタッチターゲットを確保する設定になっています。単位は揃わないので、Apple向けは44×44ポイント以上、Android向けは48×48dp以上、WebはCSSピクセルの基準と、それぞれの単位のまま確認してください。なお、レベルAAに適合すると宣言するにはレベルAとAAの全達成基準を満たす必要があり、そこは選べません。選択の余地があるのは、各基準の例外条件をどう使うかと、AAAの達成基準にどこまで踏み込むかです。
使いやすいUIを成り立たせる設計原則と情報設計の順序
一貫性・予測可能性と、エラーを防ぐ設計
使いやすさの土台は一貫性です。同じ機能は一貫したラベルや表現にそろえます。WCAG 2.2の達成基準3.2.4は同じ機能の一貫した識別を、3.2.3は繰り返すナビゲーションの相対的な順序の維持を求めています。利用者は明示的に学習しなくても、数画面で法則を身につけて次の操作を予測します。この予測が外れると、操作の前に画面を読み直す時間が発生します。
次に効くのがエラーの扱いです。設計としては「起きないようにする」「起きても戻せる」の2段構えで考えます。入力形式を限定する、破壊的な操作の前に確認を挟む、削除には取り消し導線を用意する、といった措置です。エラーメッセージは原因と次の行動を書きます。「入力内容に誤りがあります」だけでは、どこをどう直せばよいか分かりません。入力フォームの離脱要因と改善手順はEFOとはの記事に具体的な施策としてまとめています。
情報設計（IA）の優先順位と導線の検証
情報設計とは、どの情報をどの階層に置き、どの導線でたどり着かせるかを決める作業です。ここが決まらないまま配色やフォントに入ると、あとから階層を組み替えるたびにナビゲーションと画面の両方を作り直すことになります。
進め方としては、利用者の目的を動詞で書き出し（「料金を比べる」「見積を依頼する」）、それぞれが何回の操作で完了するかを数えます。UIEのクリック数に関する検証では、3クリックを超えること自体は離脱の境界になりませんでした。操作回数だけで判断せず、目的の情報を見つけられるか、途中で迷わないかを利用者テストで確かめます。並行して、同じ情報が複数の場所に置かれていないかを確認します。重複は更新漏れの温床になり、画面ごとに書いてある内容が食い違う原因になります。
UIデザインの基本要素と制作工程・役割分担
レイアウト・配色・書体・部品の状態を決める順序
画面を形にする作業は、粗い順に固めていくと手戻りが減ります。
- グリッドと余白の刻み：列数と余白の基本単位（4pxや8pxの倍数）を先に決めます。単位がそろっていない画面は、密度の差として利用者に「雑な作り」と伝わります。
- 文字の階層：本文サイズを起点に、見出しとの比率を決めます。デジタル庁デザインシステムでは、本文やUIの文字サイズは16 CSS px以上、読み物の本文の行高は文字サイズの少なくとも1.5倍を基準としています。ただし、読みやすさは書体や利用者によって異なるため、拡大表示への対応も必要です。
- 配色：前述のコントラスト比を満たす組み合わせだけをパレットに登録します。色だけで意味を区別しないことも必須で、色覚特性によって判別できない利用者がいるためです。
- 部品と状態：ボタンやリンクは、通常・ホバー・フォーカス・押下中・無効の状態を全て定義します。キーボード操作時のフォーカス表示を消す実装は、キーボードだけで操作する利用者から現在位置を奪うため避けてください。
画面幅ごとの作り分けは、この段階で方式を決めておきます。折り返しの基準と切り替え方式の選択肢はレスポンシブデザインとはの記事で比較しています。
ワイヤーフレームから実装引き渡しまでの工程と担当
制作は調査・情報設計・ワイヤーフレーム・画面デザイン・試作・実装の順に進めますが、一方向には流れません。JIS Z 8530:2021が定める人間中心設計の活動には「ユーザ要求事項に対する設計の評価」が含まれ、評価の結果が要求事項を満たすまで設計を繰り返すことが前提になっています。試作の評価で導線の問題が見つかれば情報設計まで戻る、という往復を工程表に織り込んでおいてください。UXデザイナーが調査から情報設計までを、UIデザイナーが画面デザインと部品定義を担うのが典型的な分担ですが、1人が兼ねる組織も多く、規模で変わります。
骨組みを決めるワイヤーフレームの段階で、載せる情報と優先順位の合意を取ってください。ここを飛ばして配色済みの画面で議論を始めると、見た目の好みに論点がすり替わります。作成範囲と発注側が確認すべき点はワイヤーフレームとはの記事にまとめています。
画面数が増えるほど、作法のずれを防ぐ仕組みが必要になります。部品と規則を一元管理するデザインシステムとはの考え方を取り入れると、共通部品の変更をまとめて管理できます。ただし、変更が各画面の表示や操作に与える影響の確認は必要です。外注する場合は、成果物の形式（編集可能なデザインファイルか、画像の書き出しか）、修正回数の上限、公開後の改修を自社で行える状態にするかの3点を契約前に決めておくと、引き渡し後に動けなくなる事態を避けられます。
UI/UX改善の効果測定と、内製・外注の線引き
改善の成否は、定量と定性を組み合わせて判定します。定量では、目的の完了率、入力エラーの発生率、離脱が起きている画面と位置を見ます。定性では、利用者が操作に迷った箇所を観察で拾います。行動ログだけでは理由を特定しにくいため、操作観察やインタビューで仮説を立てます。変更の因果効果は、適切に設計したA/Bテストなどでも検証できます。
A/Bテストの結果を読むときは、別の施策への接触が比較群の間で偏っていないか、変更同士に相互作用がないかを確認してください。同時期に施策があるだけで因果推論が無効になるわけではなく、無作為割り付けや施策の組み合わせを含む実験設計で判断します。訪問数が少ない画面では、そもそも差を検出できる規模に達しないまま「効果なし」と結論づけてしまう誤りも起きます。
内製と外注の線引きは、頻度で決めるのが実務的です。日常的に手を入れる画面（商品ページ、申し込み導線）は内製で回せる状態にしておかないと、改善の速度が外部の稼働に縛られます。逆に、設計の土台を作り直す場面（情報設計からの見直し、デザインシステムの新規構築）は、経験の蓄積が効くため外部の設計力を借りる価値があります。設計経験が不足していても社内に運用担当者を置ける場合は、外部と土台を作り、運用を内製へ引き渡す方法があります。引き渡しには、編集可能な成果物、運用手順、担当者への説明を含めてください。
よくある質問
UIとUXの違いは何ですか？
UIは「情報及び制御を提供する構成要素」、UXは「利用前、利用中及び利用後に生じるユーザの知覚及び反応」です（JIS Z 8530:2021 3.16、3.15）。UIは画面・音声・物理ボタンなどを通じて情報と操作手段を提供する接点で、UXは利用前・利用中・利用後の知覚と反応です。UIの設計はUXに影響します。ボタンの位置や色を決めるのがUIの仕事、申し込みから利用開始までの流れを組み立てるのがUXの仕事と分けると混乱が減ります。
UIデザインとWebデザインは何が違いますか？
Webデザインはブラウザで表示されるサイトの制作全体を指す言葉で、視覚表現や情報の見せ方を含みます。UIデザインは操作の接点を設計する領域で、対象がWebに限りません。業務システムの管理画面、券売機のパネル、家電のリモコンもUIデザインの対象です。例えば、WCAG 2.2の達成基準2.4.7は、キーボード操作時にフォーカス位置が見えることを求めています。Webサイトを作る場面では両者は大きく重なりますが、「押せると分かるか」「操作の結果が返るか」を判定するのがUIデザイン側の責任範囲だと考えると切り分けられます。
UIデザインは未経験からでも学べますか？
独学でも始められます。既存サービスの画面を写して構造を読み解く練習から入ると、装飾ではなく仕組みに目が向きます。次に余白の刻みと文字サイズの階層を自分で定義し、同じ規則で複数画面を作ってください。並行してコントラスト比4.5:1や接触領域24×24 CSSピクセルといった数値基準を押さえておくと、感覚ではなく根拠で説明できるようになります。制作物には「なぜその形にしたか」を添えて残すと、そのまま実務の説明力になります。
UI/UXの改善はどのくらいの頻度で行うべきですか？
画面の性質で周期が変わります。申し込みや購入のように成果へ直結する画面は、数字を見ながら短い周期で手を入れる価値があります。設定画面など利用頻度の低い場所でも、操作不能や誤操作の報告があれば機能追加を待たずに修正します。例えば、WCAG 2.2の達成基準2.4.7に関わるフォーカス表示の欠落は、キーボード操作を妨げるため修正対象です。ただし全体を通しで見直す機会は、四半期に一度など周期を決めて確保してください。個別の改修を重ねるほど画面ごとの作法がずれていくため、まとめて揃え直す時間を取らない組織では一貫性が保てなくなります。
UI/UXデザインを外注する費用は何で決まりますか？
主に5つの要素で変わります。設計する画面数、対応する画面幅や端末の種類、利用者調査と検証を含めるか、アクセシビリティで満たす水準（レベルAまでかAAまでか）、実装まで委託するかどうかです。同じ「サイトのUI改修」でも、調査を含めるかで工数は大きく変わります。見積もりを比べるときは金額だけでなく、修正回数の上限、納品データの形式、公開後の改修を自社で行える状態にするかまで並べて確認してください。
