UIデザインとは？
UIデザインとは、人が画面を使うときに触れる部分を、迷わず使える形に設計することです。UI は「ユーザーインターフェース」の略で、ボタン、入力の欄、メニュー、エラーの出し方など、人と画面の接点を指します。見た目をきれいにするだけでなく、押す場所が分かる、間違えても戻れる、といった使いやすさまで決めるのが UI デザインです。
この記事では、身近な例で UI デザインの考え方を説明します。そのあとで、UX との違い、UI デザイナーの仕事と1日の流れ、AI での変化、未経験から学ぶ段取りまで見ていきます。
UI デザインを、身近な例で見ると？
UI は、毎日使うスマホのアプリやサイトのあちこちにあります。よい UI と、困る UI を並べてみると、考え方がつかみやすくなります。
| 場面 | 困る UI の例 | よい UI の例 |
|---|
| ボタン | 押せるのか、ただの飾りなのか分からない | 押せる物は形と色で押せると分かる |
| 入力の欄 | 何を書けばよいか、送ってから初めて分かる | 「例 090-1234-5678」のように書き方が先に見える |
| エラー | 「エラーが起きました」とだけ出る | どこが違うかと、どう直すかが書いてある |
| 送るボタン | 押したあと、何も変わらず不安になる | 「送っています」と出て、終わったら知らせる |
| 消す操作 | 押した瞬間に消え、戻せない | 消す前に確かめるか、あとで戻せる |
どの例も、見た目の好みではなく「使う人が困らないか」で決まっています。UI デザインは、使う人の立場で画面を1つずつ確かめる仕事だと言えます。
UI デザインで大切な考え方は？
UI デザインには、多くの画面で共通する考え方があります。初めて学ぶ人が押さえたい4つを並べます。
同じ物は、同じ形にそろえる
ある頁では青いボタン、別の頁では緑の文字のリンク、と同じ操作の見た目がばらばらだと、使う人は迷います。同じ働きの部品は、どの頁でも同じ形と色にそろえます。こうしてそろえた部品の決まりをまとめた物を「デザインシステム」と呼びます。
今どうなっているかを、見せる
読み込んでいる最中か、送り終わったか、どこまで進んだかを、画面で知らせます。何も変わらない時間があると、使う人は何度もボタンを押したり、やめたりしてしまいます。
間違えにくくし、間違えても戻れるようにする
選ぶ物が決まっているなら、文字を打たせずに選ばせます。消す、払う、のように取り消しにくい操作の前には、確かめる画面をはさみます。
誰でも使えるようにする
文字の大きさ、色の濃さの差、スマホでの押しやすさを考えます。色だけで違いを伝えず、言葉や形でも伝えると、色の見え方が違う人にも伝わります。
公的な機関も、UI の決まりを公開している？
公開しています。デジタル庁は、行政のサイトやサービスで使うためのデジタル庁デザインシステムを公開しています。ボタンや入力の欄などの部品の仕様と、使いやすさとアクセシビリティ (誰でも使えるようにすること) を踏まえたガイドラインがまとめられていて、Figma のデザインのデータも取得できます。
UI デザインを学び始めた人が、部品ごとの決まりを読むための教材としても役に立ちます。「なぜこのボタンはこの形なのか」が言葉で書かれているからです。
また、情報処理推進機構 (IPA) のDX推進スキル標準では、DX を進める人材の1つに「デザイナー」を置いています。そこでは、ビジネスの視点と使う人の視点をあわせて捉え、製品やサービスのあり方をデザインする役割と書かれています。画面の見た目だけでなく、使う人の視点で考える役割が求められていることが分かります。
UI と UX は、何が違う？
UX は「ユーザーエクスペリエンス」の略で、サービスを使う人が得る体験の全体を指します。UI がボタンや画面そのものなら、UX は「使ってみて、目的を果たせて、また使いたいと思えたか」までを含みます。
| 比べる点 | UI | UX |
|---|
| 指す物 | 画面の部品と、その動き | サービスを使う前から後までの体験 |
| 例 | ボタンの形、入力の欄、メニュー | 予約が早く済んだ、迷わず買えた、という感じ方 |
| 考えること | どう見せ、どう操作させるか | 誰が、何のために、どんな流れで使うか |
UI は UX の一部です。よい UI があっても、そもそも使う人の目的に合っていなければ、よい体験にはなりません。そのため、UI デザインの仕事でも、使う人の話を聞く作業がよく入ります。
UI デザイナーは、どんな仕事をする？
UI デザイナーは、アプリや Web のサービスの画面と操作を設計する人です。仕事の流れを表にしました。
| 段 | すること |
|---|
| 1. 知る | 誰が、どんな場面で使うかを聞く。今の画面で困っている所を見る |
| 2. 流れを決める | 目的を果たすまでに、どの画面をどの順に通るかを決める |
| 3. 下書き | 線と箱だけの下書き (ワイヤーフレーム) で、画面ごとの置き方を決める |
| 4. 見た目と動き | Figma で色、文字、部品を決め、押したときの動きも作る |
| 5. 確かめる | 実際に人に使ってもらい、迷った所を直す |
| 6. 作る人に渡す | 画面を組むエンジニアに、決まりと例外の場合を伝える |
Webデザイナーが UI デザインを受け持つことも多く、2つの仕事の境目ははっきりしていません。Webデザイナーの仕事全体は、次の記事で説明しています。
Webデザイナーとは｜仕事内容、1日の流れ、未経験からの始め方
聞き取りから公開まで、5つの段で仕事を見ます
UI デザイナーの1日は、どんな流れになる？
ここでは、例えば、家で働く UI デザイナーが、予約のアプリの画面を直している日を考えてみます。実在の人の記録ではなく、よくある組み立て方を示した例です。
朝7:00〜9:30
- 起きて朝ごはん、家族の支度、片づけ
仕事の時間9:30〜17:00
- チームのチャットで、今日することを伝える
- 予約の画面で「途中でやめた人が多い所」の記録を、チームの人と見る
- 日付を選ぶ画面の直しを、Figma で3案作る
- 昼ごはん、少し休む
- 社内の人に3案を触ってもらい、迷った所を聞く (オンライン、1時間)
- 迷いの少なかった案を整え、ボタンの決まりを書き足す
- 画面を組むエンジニアと、例外の場合 (空きが無い日など) を話して決める
家族の時間17:00〜21:00
- 作業を区切る。夕ごはん、子どもとの時間
UI デザイナーの1日は、1人で描く時間より、人と話して確かめる時間が多くなりがちです。家で働く場合も、オンラインの打ち合わせとチャットで、チームとやり取りしながら進めます。
AI で、UI デザインの仕事は何が変わった？
AI の道具で、画面の案を短い時間でいくつも作れるようになりました。ここに書くのは、仕事の数を数えた統計ではなく、ゆめさくの見立てです。
| 作業 | AI でどう変わったか (ゆめさくの見立て) |
|---|
| 画面の案出し | 文で頼むと、AI が画面の下書きを何案も出せる |
| 画面を動く形にする | AI に画面のコードを書かせ、触れる試作を早く作れる |
| 文言の案 | ボタンやエラーの言葉の候補を AI に出させられる |
| 使う人の話を聞き、何が困りごとかを決める | AI に任せにくく、人に残る |
| 案が本当に使いやすいかを、人で確かめる | AI に任せにくく、人に残る |
案を出す速さで差がつきにくくなった分、「どの案がなぜ使いやすいか」を確かめて説明できる人が頼られやすい、とゆめさくは見ています。AI に画面を作らせたあと、ボタンが押せる物に見えるか、エラーで直し方が分かるかを確かめるのは人の役目です。
未経験から、どんな段取りで UI デザインを学ぶ？
ここでは、1日1時間ほど学ぶ人を例に、今日、1か月、3か月、半年でできることを並べます。かかる期間は人によって違うので、目安として見てください。
| 時期 | できること | 要る物 |
|---|
| 今日 | よく使うアプリで「迷った所」を3つ書き出し、どう直すかを考える | スマホ、メモ |
| 1か月 | Figma で、ログインや入力の画面を1つ作れる | Figma (無料で始められる)、手本にする画面 |
| 3か月 | 3〜5画面の流れを作り、人に触ってもらって直せる | 触ってくれる人、デジタル庁デザインシステムのような手本 |
| 半年 | 直す前と後の画面と、直した理由を作品集 (ポートフォリオ) にまとめる | 作品2〜3つ、HTML と CSS の基礎 |
UI デザインの作品集では、きれいな完成の画面より、「何に困っていて、どう考えて、どう直したか」が見られることが多いです。HTML と CSS が分かると、自分の画面を動く形にして確かめられるので、学ぶ順に入れておくのがおすすめです。
UI デザインの講座で、気をつけることは？
「UI デザインで在宅で稼げる」とうたう講座の誘いもあります。国民生活センターは2026年9月16日に、ビジネス講座のトラブルに注意を呼びかけました。発表では、広告や勧誘のときの説明と、実際の講座の中身が大きく違った、という相談が挙げられています。
| 確かめること | なぜ大事か |
|---|
| 学ぶ中身と難しさを、契約の前に細かく見せてもらえるか | 受けてみないと中身が分かりにくい、と発表でも書かれています |
| 作った物を、誰がどのように見て直してくれるか | UI は人に見てもらって直すことで身につくからです |
| 総額はいくらか (月々の額だけでなく) | 長いクレジットの契約で高い講座を払う例が載っています |
| 解約と返金の条件が、書面で分かるか | 契約のあとで厳しい解約の条件を知った例が載っています |
| 「必ず稼げる」「仕事を必ず紹介する」と言っていないか | 収入を約束できる講座はありません。仕事の紹介をうたうときは、件数と条件が書面にあるかを確かめます |
迷ったら、消費者ホットライン「188」に電話すると、近くの消費生活センターにつながります。
ゆめさくエンジニアで学べること
ゆめさくエンジニアは、AI と一緒に Web のサービスを作れるようになるスクールです。画面を考えるだけでなく、HTML や CSS で形にして、自分で動かして確かめるところまで、未経験から順に学べます。目指すのは、AI と一緒に作れて、家でも働ける人になることです。
受講生の声は、受講生の声の頁にまとめています。Web の仕事の種類を広く知りたい人は、次の記事も参考にしてください。
Webクリエイターとは｜Webデザイナーとの違いと仕事の種類
Web の作り手の呼び名と、受け持つ範囲の違い
よくある質問
UI デザインに、絵のうまさは要りますか？
要りません。UI デザインで大切なのは、使う人が迷わない形を考え、確かめることです。色や文字の組み合わせは、決まりを学べば身につけられます。
UI と UX は、どちらから学べばいいですか？
目に見える UI から学ぶと、つかみやすいです。画面を作って人に触ってもらうと、自然に「この人は何をしたかったのか」という UX の問いにぶつかります。UI を作りながら、UX の考え方を少しずつ足していくのがおすすめです。
UI デザインは、Figma が使えればできますか？
Figma は画面を作る道具で、使えると始めやすくなります。ただ、道具の使い方より、どの画面に何を置くか、なぜそうするかを考える力のほうが大切です。HTML と CSS が分かると、作った画面を動く形にして確かめられます。
AI が画面を作れるなら、UI デザイナーは要らなくなりますか？
AI で画面の案は早く出せるようになりました。ただ、その案が使う人に合っているかを確かめ、直す理由を決めるのは人です。AI を使って案を早く出し、確かめる時間を増やせる人が頼られやすい、とゆめさくは見ています。
ゆめさく
