現場のプロがわかりやすく教える UI/UX デザイナー養成講座

あらゆるサービスが、Web サイトやアプリを通じて提供されるようになってきました。それにしたがって、操作性やデザイン、ユーザー体験の重要性がますます高まり、同時に「UI/UX」というキーワードが、ビジネスの現場でも多く使われるようになりました。また、DX の取り組みが各分野で加速していますが、それを実現する人材として「UI/UX デザイナー」が挙がっています。では、「UI」や「UX」とは何でしょうか。どうやって学べばよいのでしょうか。
本書では、ユーザーインターフェイス / ユーザーエクスペリエンス (UI/UX) で必要となる多くの分野の情報を有機的に紐付けて 1 つの地図のように並べ、UI デザインや UX デザインを学ぶ最初の一歩として、全体像を理解できる内容になっています。UI デザイナーとして 15 年、講師として 10 年以上のキャリアを持つ著者が、「自分が初心者のときに、こんな本がほしかった」「こんな本があればよかったのに」を形にしたものです。
それだけではなく、UI デザインの現場に立ったときに必要となる「データ作成」のコツ、エンジニアとの「ハンドオフ」の方法などについても説明しています。そして、UI/UX デザイナーとしてのキャリア設計やスキル習得方法についても取り上げています。
本書で最初の一歩を踏み出し、そして次はどこに向かうべきなのかの羅針盤として役立ててください。

○本書の内容
Chapter 1 UI/UX デザインとは
UI デザインや UI デザインとは何か、まずは基本的な部分を説明します。
Chapter 2 デザインプロセス
「デザイン思考」という考え方に沿って、UI/UX デザインのプロセスを紐解きます
Chapter 3 ナビゲーションとインタラクション
UI パーツの扱い方やルールについて、具体的な例を見ながら学んでいきます。
Chapter 4 デザインシステム
使い勝手がよく、わかりやすい UI とするための「仕組み」と「見た目」を解説します。
Chapter 5 データ作成とエンジニア連携
「プロトタイプ」の作り方、データを渡す「ハンドオフ」の方法について説明します。
Chapter 6 キャリアと勉強方法
今後のキャリア設計やスキル習得方法、参考書籍やリソースを取り上げます。

UI デザインと UX デザインを仕事として学び始める人が、領域の全体像を最初につかむための入門書です。『現場のプロがわかりやすく教える UI/UX デザイナー養成講座』は本末英樹 著で、秀和システムから 2023 年 3 月 28 日に発売されました。副題は「UI/UX の基礎からデータ作成やエンジニアとの連携まで」です。版元はこの本を「UI/UX デザインを学ぶための最初の一歩!」と位置づけ、広い範囲の知識を地図のように並べ、図版を多用して簡潔に説明していると紹介しています。楽天ブックスの書誌に載る刊行時の紹介文では、著者は UI デザイナーとして 15 年、講師として 10 年以上のキャリアを持つと紹介されています。

全 6 章の構成、デザイン思考のプロセスからキャリアまで

目次は Chapter 1「UI/UX デザインとは」から Chapter 6「キャリアと勉強方法」までの 6 章です。Chapter 1 で UI と UX の違いと UI デザイナーの仕事を押さえ、Chapter 2「デザインプロセス」ではデザイン思考と人間中心設計を土台に、デザインリサーチ (インタビューとアンケート)、定義 (ペルソナモデル、価値マップ、カスタマージャーニーマップ)、アイデアとコンセプト、プロトタイピング、評価 (ユーザビリティテストとヒューリスティック評価) と工程を順に追います。Chapter 3「ナビゲーションとインタラクション」は Web ブラウザーと iOS と Android の違い、アフォーダンスとシグニファイヤ、メンタルモデル、UI パーツの名称と用途、アニメーション、認知心理学と行動経済学を扱います。Chapter 4「デザインシステム」はタイポグラフィ、カラー、レイアウト、アイコンへ進み、Human Interface Guidelines と Material Design Guideline も取り上げます。Chapter 5「データ作成とエンジニア連携」では Figma のスタイル、コンポーネントとインスタンス、オートレイアウトを使ったデータの作り方と、デザイン指示書や遷移図による引き渡しを説明し、Chapter 6 はスキルマップや会社選びを含むキャリアの節と、参考書籍とリソースの紹介で終わります。

画面の部品をそろえる仕組みと、引き渡しが難しい理由

ボタンや入力欄の形、色の役割、余白の刻みを部品と規則として定めておく デザインシステム は、製品全体で同じ操作が同じ見た目と同じ振る舞いで現れることを個人の注意力でなく仕組みで守るための考え方です。色の選び方も好みだけの問題ではなく、文字と背景の明るさの差が足りなければ、視力の弱い人や明るい屋外で画面を見る人には読めなくなります。これはアクセシビリティの問題です。

デザイナーの手を離れたあとの工程にも難しさがあります。デザインツールの上では静止した画面でも、実装では画面の幅の変化、読み込み中や入力の誤りといった状態の違い、画面と画面の移り変わりまで決めなければなりません。本書は Chapter 5 でデザイン指示書や遷移図を扱い、Chapter 3 ではインタラクションと状態やトランジションにも触れています。なお、目次に HTML や CSS のコーディングを扱う章はありません。刊行は 2023 年 3 月のため、Figma の画面や機能の名前は手元の版と違う場合があります。

未経験から UI/UX デザイナーを目指す人と、協働する職種に

版元はデザイナーを目指す人に加えて、エンジニアや企画職などのビジネスパーソンにも勧めています。デザイナーと一緒に画面を作る立場の人には、リサーチから評価までの工程と、引き渡しの資料がなぜ必要なのかが書かれています。反対に、本書はユーザーリサーチの進め方や Figma の操作を深く掘り下げる本ではありません。

この分野の言葉が飛び交う職場で、何から学べばよいか迷っている人にとって、工程と部品と職業の全体を 1 冊で見渡せる本です。デザインの独学に使う本の組み合わせは Web デザイン本ガイド でも整理しています。