突然ですが、プロダクトのデザインはどのようなプロセスで進めていますか？

デザイナーとして働き始めたときは、デザインの目的やゴールなどを決めずに、表層のデザインから進めてしまっていて、デザインの方向性が決まらずに迷走することがありました。

しかし「UXデザインの5段階モデル」に沿ってデザインプロセスを進めてからは、デザインで戦略から表層まで一貫性を持たせられるようになり、デザインの効率が向上したと感じています。

そこでこの記事では、「UXデザインの5段階モデルを活用したデザインプロセス」をテーマに、それをどのように活用するかについて紹介します。皆さんのデザインプロセスの参考になれば幸いです！

UXの5段階モデルとは？

そもそも、「UXの5段階モデル」とは何のことでしょうか？
UXの5段階モデルは、ユーザー体験を整理するために考案されました。具体的には「戦略」「要件」「構造」「骨格」「表層」の5つのフェーズに分かれています。各フェーズは、デザインプロセスをスムーズに進行させるための指針となります。 その具体的なプロセスについてまとめていきたいと思います。

1. 戦略

最初のステップは、戦略を決めます。 そもそも、「戦略」って何のことだと思いますか？ 簡単に言うと、目標を達成するための方針のことを指します。戦略を決めることで、プロダクトやサービスの方針や理想的な状態が明確になります。

e.g.
旅行に例えると「旅先を選ぶフェーズ」です。 今回の旅先は北海道？沖縄？それともアメリカ？というように、どの方向に進むべきかを決めるステップが「戦略」です。

2. 要件

このステップは、要件を決めます。「要件」は戦略ステップで決めたゴールや目標を達成するために必要な機能やコンテンツを決めます。

e.g.
もし10日間の有給休暇でアメリカ旅行を計画したなら、どうやって移動するといいと思いますか？ 車や船も選択肢の一つですが、時間の制約があるなら、飛行機を選ぶのが良いですよね。このように、目標達成のために最適な条件や手段を選ぶステップが「要件」です。

3. 構造

次のステップは、「構造」を考えます。ここでは、これまでに決めた「戦略」と「要件」をもとに、プロダクトやサービスがどのようなインタラクションを行うか、機能や情報を扱いやすくするには、どのような構造にすべきかを設計します。

e.g.
これまでに決定した「アメリカへ行く（戦略）」、「飛行機を使う（要件）」という情報から、「いつ、何の航空会社を利用し、どの経路で移動するのか」といったプランを組み立てるステップが「構造」です。

4. 骨格

次のステップは、「骨格」です。ここでは、各画面における設計が行われます。例えば、それぞれのページではどんなレイアウトにするか、どのように各ページ間を遷移するか、また情報をどう見せるべきかを設計します。

e.g.
飛行機の予約が済んで大まかな旅程が決まったら次に何をしますか？旅先で行く観光スポットの具体的な計画を立てますよね。ニューヨーク旅行で例えると、「初日はタイムズスクエアを観光して、2日目は自由の女神、3日目は旅の疲れが溜まってきたのでセントラルパークでのんびり過ごす」といった感じです。それぞれの旅程に合わせてどこを訪れ、何をするかをはっきりさせるステップが「骨格」です。

5. 表層

最後は「表層」を考えるステップです。ここでは、各画面のビジュアル要素が完成します。カラー選択、文字やサイズ、画像の配置といったデザイン要素を決めます。これらすべてを組み合わせて、最終的にユーザーが見て触れる画面などのプロダクトやサービスの世界観が完成します。

e.g.
初日は移動が多いのでカジュアルな服装、次の日は自由の女神に行って写真を撮るからおしゃれな感じにして・・・というように、他の人から見える服装部分のステップが「表層」です。

Tips

上記で紹介したプロセスを進めていく中で迷うときもあるかもしれません。そうなったときは、行き詰まっているステップの前のステップに立ち返ると良いと思います。また、戦略ステップはデザイナーだけで決めるのではなく、プロジェクトのステークホルダーを早めに巻き込んでいくことで、デザインの手戻りが減り、方向性がクリアになるのでプロセスを進めやすくなると思います。

おわりに

デザインは表層を綺麗にすることだけではなく、ユーザーのニーズとビジネスの目標を結びつけるために必要です。この記事を通してデザインプロセスの参考になれば幸いです。
谷口雄翼