UI/UXデザイナーの基本｜仕事内容とスキルの土台をやさしく解説

UIはユーザーが触れる部分の設計

UIは、ユーザーが実際に目にして操作する部分の設計です。たとえば会員登録画面なら、入力欄の並び順、ボタンの色と大きさ、エラーメッセージの表示位置などがUIの範囲になります。同じ機能でも、UIの作り方ひとつで「迷わず登録できる画面」にも「途中でやめたくなる画面」にもなります。

UXは体験の流れの設計

UXは、画面の外側も含めた体験全体の設計です。同じ会員登録でも、「そもそも登録が必要なタイミングは今なのか」「入力項目を減らせないか」「登録後に何をすればいいか分かるか」といった問いを扱います。UIが整っていても、体験の流れに無理があればユーザーは離れてしまいます。

公的な職業情報から見る求められる知識

厚生労働省の職業情報提供サイト（job tag）のUX/UIデザイナーのページでは、この職業に求められる知識や特徴が次のように示されています。

この記事で紹介する原則や考え方は、ここに挙げられたデザインや情報設計の基礎、人間中心の設計、心理学の知識に対応しています。UI/UXデザイナーという職種の位置づけや、UIデザイナー・Webデザイナーとの違いは、UI/UXデザイナーとはどんな職種かで詳しく紹介しています。

ユーザーと課題を調べる

ユーザーインタビューやアンケート、アクセスデータの分析などを通じて、ユーザーが何に困っているのかを把握します。思い込みで画面を作らないための、大切な工程です。

解決すべき課題を決める

集めた情報を整理し、「誰の、どんな課題を解決するのか」を言葉にします。ここが曖昧なまま進むと、関係者ごとに思い描く完成形がばらばらになり、手戻りが増えます。

画面の骨組みと見た目を設計する

画面遷移図で全体の流れを整理し、ワイヤーフレーム（画面の骨組みを線や箱で描いた設計図）で情報の配置を決めてから、色や文字を含めた画面デザインに仕上げます。いきなり完成形を作らず、粗い段階で確認を重ねるのが基本です。

プロトタイプで検証する

画面同士をつないで実際に操作できる試作品を作り、想定ユーザーに触ってもらいます。「ボタンが見つからない」「次に何をすればいいか分からない」といった問題は、開発に入る前に見つけるほど修正の負担が小さくなります。

リリース後に改善を続ける

公開後も、利用データやユーザーの声をもとに改善を続けます。UI/UXデザインは一度作って終わりではなく、調査と改善を繰り返す仕事です。

近接・整列・反復・コントラストの原則

関連する要素は近づけ、関係の薄い要素は離す「近接」。要素の端や中心をそろえる「整列」。同じ役割の要素には同じ見た目を繰り返す「反復」。重要な要素を大きさや色で目立たせる「コントラスト」。この4つはデザインの基本原則として広く知られており、画面を見直すときのチェック項目としてそのまま使えます。

文字と余白で情報の優先順位を示す

見出し、本文、補足の文字サイズや太さに段階をつけると、ユーザーは読む順番を迷わなくなります。余白も「空いている場所」ではなく、情報のまとまりを示す要素です。8の倍数など決まった単位で余白をそろえると、画面全体に統一感が出ます。

一貫性を保ってユーザーに覚えさせない

同じ操作をするボタンが画面ごとに違う色や位置にあると、ユーザーは毎回考えなければなりません。色、文字、ボタン、入力欄などのルールを整理したデザインシステムやコンポーネントを用意し、どの画面でも同じ見た目と動きにそろえることが基本です。

押しやすさと見やすさに配慮する

スマートフォンでは、指で押す部分に十分な大きさが必要です。また、文字と背景の色の差が小さいと読みにくくなります。Webアクセシビリティの国際的な基準であるWCAG 2.2では、通常の文字で4.5対1以上のコントラスト比を求めており、操作対象の大きさについても原則として24×24 CSSピクセル以上という最低限の基準が示されています。こうした数値の基準を知っておくと、感覚ではなく根拠をもってデザインを説明できます。

ユーザビリティを評価する視点を持つ

ユーザビリティ研究者のヤコブ・ニールセンが提唱したユーザビリティの10原則（10 Usability Heuristics）は、使いやすさを評価するときの代表的な基準です。内容は次のとおりです。

既存のアプリをこの原則に照らして見直すだけでも、改善点を見つける練習になります。

ペルソナとカスタマージャーニーマップで考えをそろえる

ペルソナは、想定ユーザーを年齢や生活習慣、抱えている悩みまで含めて一人の人物として書き出したものです。カスタマージャーニーマップは、そのペルソナがサービスを知ってから使い続けるまでの行動と感情を時系列で整理した図です。どちらも、チーム全員が同じユーザー像を思い浮かべながら議論するための道具として使われます。

ユーザーに考えさせる量を減らす

選択肢が多いほど人は決めるのに時間がかかる、という傾向は「ヒックの法則」として知られています。また、ユーザーはほかのサービスで慣れた操作方法を期待するため、一般的な配置から大きく外れたデザインは迷いを生みます。独自性を出すことより、ユーザーが考えずに操作できることを優先するのがUXデザインの基本です。

デザインツールはFigmaから始める

UI/UXデザインの実務では、Figmaを使う現場が多くあります。Figmaの公式の料金ページによると、無料のスタータープランが用意されているため、学習の最初のツールとして選びやすいのが特徴です。なお、同じくUI設計に使われてきたAdobe XDは、Adobeのサポートページで現在メンテナンスモードであると案内されています。これから学ぶなら、継続的に機能が更新されているツールを選ぶと安心です。PC選びも含めた学習環境はUI/UXデザイナーのパソコンの記事で紹介しています。

普段使うアプリを観察して書き出す

毎日使っているアプリを一つ選び、「使いやすいと感じる箇所」と「迷った箇所」をそれぞれ書き出します。そのうえで、なぜそう感じたのかを近接・整列・反復・コントラストの原則やユーザビリティの10原則に照らして言葉にします。デザインを見る目を養う手軽な練習です。

既存の画面をFigmaで再現する

観察したアプリの画面を、Figmaで同じように作ってみます。文字サイズや余白を測りながら再現すると、プロのデザイナーがどんなルールで画面を作っているかが体感として分かります。ツールの操作にも自然に慣れていきます。

改善案を作って理由とともに記録する

書き出した「迷った箇所」について、自分なりの改善案を作ります。完成した画面だけでなく、「どんな課題があり、なぜこのデザインにしたのか」を一緒に記録しておくと、そのまま学習の記録になり、将来のポートフォリオの材料にもなります。ポートフォリオの作り方はUI/UXデザイナーのポートフォリオの作り方で解説しています。

見た目の装飾ばかりに時間をかける

グラデーションや凝ったアイコンなど、見た目の作り込みに時間をかけすぎて、ユーザーが目的を達成できるかという視点が抜けてしまうパターンです。画面を作る前に「誰が、何のために使う画面か」を一文で書き出す習慣をつけると、UXの視点を保ちやすくなります。

理由を説明できないまま流行をまねる

流行のデザインをまねること自体は良い練習ですが、「なぜその表現が使われているのか」を考えずにまねると、別の場面で応用が利きません。まねる前に、その表現がどんな課題を解決しているのかを考える癖をつけましょう。

一人で作って誰にも見せない

独学では、自分のデザインが使いやすいかどうかを確かめにくいという弱点があります。家族や友人にプロトタイプを触ってもらう、オンラインのコミュニティで意見をもらうなど、他人の目を通す機会を意識して作ることが上達の近道です。体系的に学びたい場合はUI/UXデザイナーのスクールの記事も参考になります。

デザインセンスがないとできない

UI/UXデザインは、ユーザーの行動を観察し、仮説を立てて検証する論理的な作業が中心です。この記事で紹介した原則や考え方を学べば、センスに自信がない人でも、根拠のある設計に近づけます。

ツールの使い方を覚えれば十分

Figmaなどのツールはあくまで手段で、目的はユーザーの課題を解決することです。操作を覚えるだけでは、なぜその設計にしたのかを説明できず、仕事としての評価にはつながりにくくなります。

UIとUXは別々の人が担当するもの

大きな組織では役割を分けることもありますが、一人のデザイナーが両方の視点を持って設計する現場もあります。だからこそ、UIとUXの基本を両方そろえて学ぶことに意味があります。