この記事は「未経験からUXデザイナーへ！~UXの世界に飛び込んで学んだこと②~」の後編になります。ぜひ前編から続けてお読みください。
前編では、戦略・要件のフェーズを中心に、ペルソナやAs-Is/To-Beの整理を通じて土台をつくる過程を振り返りました。
後編では、その土台をもとに、
- 構造：画面遷移
- 骨格：ワイヤーフレーム
- 表層：ビジュアルデザイン
にフォーカスしています。
また、ユーザーテストについても本記事内で扱っていますが、特定の階層に属するものではなく、構造・骨格・表層それぞれの設計を横断して仮説を検証するプロセスとして位置づけています。
画面遷移・ワイヤーフレーム作成：思考を可視化する
As-Is/To-Be整理後は、To-Beで定義した理想体験をもとに、画面遷移とワイヤーフレームを行き来しながら、画面構成や導線を具体化していきました。
チーム間での共有や後工程でプロトタイプを作成することを考慮し、Figmaを使用しました。
ワイヤーフレームでは、機能を並べるのではなく、
ユーザーが迷わず目的を達成できるか という視点で画面構成を考えました。
前編で整理した業務フローを基準に設計を進められたことで、画面ごとの大まかな流れや優先順位に迷うことはありませんでした。
一方で、実際に画面に落とし込んでいく中では、
- どの情報から提示すれば理解しやすいか
- どの順番で操作するのが自然か
- どこで迷いや不安が生まれそうか
- 前提資料の内容を過不足なく反映できているか
といった点を、ひとつひとつ確認していく必要があります。
画面単体ではなく、画面遷移も含めて体験全体の流れを意識しながら 進めました。
（図：ワイヤーフレームの例。実案件を参考にしたサンプルです。）
ワイヤーフレームは一度作って終わりではなく、お客様との打ち合わせを重ねながら少しずつ形にしていきました。
実際の業務に照らしたときに違和感がないか、認識のズレがないかを確認しながら、
都度修正を加えていくことで、より現実に即した形へと近づけていきました。
前工程で整理したはずの内容も、実際に形にしてみると曖昧だった部分が浮き彫りになります。
「ペルソナが、この画面で安心して次に進めるだろうか」「迷わず操作できるだろうか」といった視点で、何度も立ち止まりながら検討を重ねました。
ここで学んだのは、
ワイヤーフレームは完成形を描く作業ではなく、思考の曖昧さを可視化する作業でもある
ということです。
実際に形にしてみることで、「ペルソナがどこで迷うのか」「どの情報が不足しているのか」「流れに無理がないか」といった点が具体的に見えてきます。
以前は、ワイヤーフレームは「デザイン前の下書き」だと捉えていましたが、実際には体験設計の精度を左右する重要な工程でした。
頭の中では整理できているつもりでも、形にしてみると抜けや矛盾が見えてきます。その違和感こそが改善のヒントでした。
業務フローによって大枠の優先順位は整理されていましたが、この工程を通して、デザインに落とし込むための具体度を高めることができました。
ビジュアルデザイン制作：体験を磨く
ワイヤーフレームで整理した内容をもとに、ビジュアルデザインを具体化していきました。
実際のUIデザイン制作はデザイン会社に依頼し、案をすり合わせながら方向性を共に固めました。
（図：ビジュアルデザインの例。実案件を参考にしたサンプルです。）
このとき意識していたのは、大きく2点あります。
① 前工程で定義した体験との整合性
② 可読性・視認性に問題がないか
①では、ワイヤーフレームで整理した情報構造や優先順位が、ビジュアルの中で崩れていないかを確認しました。
例えば、
- ワイヤーフレームで「最も優先度が高い」と定義していたボタンが、実際の画面でも自然と目に入るかどうか
- 画面ごとに整理した情報の優先順位が、色やレイアウトによって逆転していないか
- 想定していた視線の流れが、装飾によって分断されていないか
デザイン案が上がるたびに、「体験として一貫しているか」 を軸に検討を進めました。
また、個別の画面だけでなく、ボタンの大きさや色が示す意味が画面間で統一されているか、例外的なデザインが増えすぎていないかといった、全体を通した一貫性やルールにも注意を払いました。
一部だけ異なる表現があるとユーザーの理解を妨げる可能性があるため、全体として整合性が取れているかを意識していました。
②では、文字サイズや行間、コントラストといった基本的な可読性・視認性の観点も確認しました。
情報設計が正しくても、読みにくければ意図は伝わりません。
正直、システムエンジニアとして開発案件に携わっていた頃は、細かいコントラスト比まで意識したことはありませんでした。ユーザー視点で設計を見るとはどういうことかを、あらためて考えさせられる瞬間でした。
ビジュアルデザインは最終工程のように見えますが、ここで設計意図が崩れてしまえば、これまでの整理が形骸化してしまいます。ワイヤーフレームで整理した設計意図を崩さず形にすること が、この工程の役割だと感じました。
また、直接デザインを手掛けていなくても、体験の方向性を共に磨いていく役割は担うことができる と実感しました。
ビジュアルデザイン検討後は、ボタンやテキスト、余白などの一貫性を保つUIガイドを作成しました。
今回デザイン検討を行った画面は一部ですが、今後プロジェクト側で他画面へ展開していくことになります。システム全体の基準としてルール化することで適用しやすくなり、品質と効率の両面で価値があると感じました。
ユーザーテスト：ユーザー調査に基づいた仮説を検証する
ワイヤーフレームやデザインがある程度固まった段階で、ユーザーテストを実施しました。
本プロジェクトではスケジュールの都合もあり、ワイヤーフレームとデザイン適用後の画面を混在させる形で行いました。
To-Beで定義した業務フローをもとにテストケースを作成し、お客様に操作していただきました。また、ユーザーテストはFigmaのプロトタイプ機能を用いて、画面遷移や挙動を再現しました。
実際にテストを行うと、
- 想定していた操作と異なる動き
- 迷いやすいポイント
- 情報の見落とし
が明らかになりました。
特に印象的だったのは、こちらが「自然に進めるはず」と考えていた箇所で立ち止まる場面があったことです。
ボタンの視認性が十分ではないことや、名称が操作者のイメージする操作内容と一致していないことが要因でした。
また、現場の方のお話を通して、実際の業務では「まずここを確認する」「この情報を確認しないと次に進めない」といった優先順位があることも見えてきました。
ワイヤーフレーム作成時にも検討していましたが、現場の感覚との小さなズレに気づくことができました。
ここで痛感したのは、自分たちの設計は常に“仮の前提”の上に成り立っているということです。ユーザー調査や業務理解をもとに整理した事実に基づいて仮説を設定していても、その前提は検証しなければ確かなものにはなりません。
ユーザーテストでは、正しく操作できるかどうかを確認することに加えて、「意図した体験になっているか」を検証すること が重要です。
仮説は完成形ではなく、検証を通して磨かれていくものだと感じました。
実務と学習の循環
実務と並行して、11月にUX検定基礎、色彩検定2級を取得しました。
受験を決めた理由は、UXデザインの基本的な考え方やプロセスを体系的に学びたいという想いと、デザインを判断するための自信を持ちたかったからです。
UX検定基礎の学習では、UXデザインの五段階モデルや人間中心設計の考え方を体系的に整理することができました。
本プロジェクトと並行して学習を進めていたため、「なぜこの順番で進めるのか」「なぜ検証が必要なのか」を意識しながら実務に向き合えるようになりました。
色彩検定2級では、配色理論やコントラストの重要性、可読性・視認性といった基礎を学びました。
ビジュアルデザインの確認時に、「この配色は視認性に課題があるのではないか」「補助情報が主情報より目立っていないか」といった点に自然と目が向くようになったことは大きな変化でした。
実務と学習を往復する中で、自分の中の判断軸が少しずつ育ってきたように感じています。
後編まとめ：体験を形にし、検証する中で見えてきたこと
前編で整理した土台をもとに、ワイヤーフレーム・ビジュアルデザイン・ユーザーテストといった工程を通して、体験を具体化していきました。
後編の工程を通して得た学びは、
- ワイヤーフレームは、思考の曖昧さを可視化し、設計の具体度を高める工程である
- ビジュアルデザインでは、見た目ではなくより分かりやすく、使いやすい形に磨いていく視点が重要である
- ユーザーテストは、仮説を検証し、実際の利用とのズレを明らかにするためのものである
という点です。
本プロジェクトを通して、一通りのUX業務を経験することができました。
実務を中心に取り組みつつ、並行して学習を行うことで、各工程の役割やつながりを理解し、UXを点ではなく一連の流れとして捉えられるようになりました。
今回の経験を通して得た視点を活かしながら、今後も実務と学習を行き来し、より良い体験を設計できるよう取り組んでいきたいと思います。