UI/UXデザイナーの役割

こんにちは！Design Switchです。前回はUI/UXデザイナーという職種の概要についてご紹介しました。

UI/UXという言葉や職種について理解が深まったところで、今回はUI/UXデザイナーの具体的な役割を”UXの5段階モデル”というフロー図を通してご紹介します。また、UXの5段階モデルとは何なのかも合わせてもご紹介していきます。

UI/UXデザイナーの役割とは?

そもそもUI/UXデザイナーの役割とは何でしょうか?その役割をわかりやすく説明するための参考として、ユーザー体験を構成する非常に重要なJames GarrettのUXの5段階モデルをご紹介します。この図について、サービスや製品がもたらすユーザー体験は5つのレイヤーから構築されるという概念です。

このモデルは、サービスの企画から実際の画面設計に落とし込むまでの作業の流れをわかりやすく表現しています。

この図で表現されている「戦略 / 要件 / 構造 / 骨格 / 表現」の作業工程を通してUI(画面)へ落とし込むまでがUI/UXデザイナーの大きな役割です。本来はUIを作って終わりではなく、その後も作ったUIやサービスに対して適切な評価や修正を行います。ですが、その工程は別の機会にお届けします。(記事が長くなるため割愛。)

戦略 / 要件 / 構造 / 骨格 / 表現の5段階モデル

下流ほど具体的で上流ほど抽象的なアウトプットになっています。では、具体的にこれらの工程で何をやるのでしょうか? それぞれの工程に分けて説明します。まずは最上層から順に見ていきましょう。

◆ 戦略
このフェーズでは自分達(クライアント)が作ったサービスや製品の目的と、それを使うユーザのニーズを明らかにします。ここでのサービスや製品の目的は、なぜそのサービスを作るのか示しています。次にそれを使うユーザのニーズは、サービスを使う上での課題や求めていることを示しています。そのユーザーニーズを把握するためにペルソナというユーザーの中で重要なモデル像をターゲットにして明確にしていきます。

◆ 要件
要件のフェーズでは、ユーザのニーズや課題を達成解決するために機能やコンテンツの要件を明確に決めていきます。明確にする方法として、カスタマージャーニーマップ（ターゲットにしたペルソナ / ユーザーの体験シナリオ）などを作成します。これはユーザがサービスを利用する前、利用中、利用後の時系列に分けて行動や思考、感情をマップ上にマッピングを行います。メリットとして、開発メンバー内でユーザの利用状況の把握ができ、課題を抽出することができます。抽出された課題の解決策としてサービスに盛り込む機能を検討しますが、その機能や要件は後のフェーズでのコンテンツ（骨組み）となります。

◆ 構造
ここでは、要件フェーズで決めた機能を分類・整理をした上で優先順位をつけて全体的なUIの構造を作っていくフェーズとなります。具体的には画面のリストを樹形図化、構造化したマップ (サイトマップ)を作成します。また、関連性のある画面同士の繋がりを考えることも重要なポイントとなっていきます。

◆ 骨格
骨格フェーズでは、構造で分類整理した機能（ナビゲーションなど）を実際の画面へ落とし込んでいき画面の骨組みを作っていきます。要約すると画面の設計書 (ワイヤーフレーム)を作ります。画面サイズや機能の表示領域を明確に可視化していくためです。画面内に入る文言なども詳細に書いていきます。理想となるイメージは、ワイヤーフレームを見ただけでどの情報をどの程度表示するか、画面遷移の繋がりなどがわかる程度まで可視化します。ただし、色などのデザインテイストはまだ表現しません。

◆ 表現
作成したワイヤーフレームに色やフォント、影などビジュアル的な表現を施し設計していきます。UIでどのように印象付けるのか、使いやすく違和感のない動き、デザインの統一、配色、グラフィックなどに注力していきます。
また、ユーザの属性（性別や年齢、ニーズ、利用状況など）やサービスの目的に合わせて表現する必要があります。ここで表現された画面はGUI (グラフィカルユーザインタフェース)と呼ばれます。

例えば、おばあちゃんが使うECサイトの場合は文字大きく読みやすいゴシックフォントを使い、美しくわかりやすい商品イメージを配置し見やすくする必要があるでしょう。サービスの目的として生産者の声を届ける地元愛を消費者に届けるというコンセプトならば、暖かさを表現する暖色系のオレンジなど取り入れる必要があるかもしれません。※そのような感じでGUIを作成していきます。

UI/UXデザイナーなるためには?

前回記事で既にお届けましたが、特に資格などは必要ないです。しかし、デザイナーと言ったもん勝ちというわけでもありません。「戦略、要件、構造、骨格、表現」の工程を責任を持って質の高い、満足度の高いUIへ落とし込んではじめてUI/UXデザイナーと言えるのではないかと思います。簡潔に一言でまとめてますが、これがなかなか難しいものです。日々のデザインなどでのインプット、アウトプット、言語化の小さな積み重ねが重要になっていきます。

最初に何からはじめればいいの？

まずは自身で「戦略、要件、構造、骨格、表現」の工程をトライしてみるのはいかがでしょうか？とはいえ、何のサービスを誰向けに作ればいいの？とハードルが高いかもしれませんので、ここで例題を出してみます。

サービス名：Design Switch
サービス概要：デザイナーになるきっかけを提供する教育支援サービス
サービスの目的：デザインに興味がある人向けに学ぶ、はじめるキッカケを提供したい
ターゲットユーザー：就職活動をこれからはじめる学生、転職活動中の社会人、デザインに興味のある高校生

上記を例に「戦略、要件、構造、骨格、表現」までを作り、自分の作品集に掲載するUIを作成してみましょう。時間的に余裕がない人は、上記を例にサービスのトップ画面だけ作成してみるのも良いかもしれません。デザインでは何事もやってみることが重要です (深く考えないように気楽に楽しくやりましょう)。

まとめ

🔳 UI/UXデザイナーの役割とは

「戦略 / 要件 / 構造 / 骨格 / 表現」の作業工程を通してUI(画面)へ落とし込むこと。

🔳 戦略 / 要件 / 構造 / 骨格 / 表現の5段階モデル

・「戦略」はサービスや製品の目的とそれを使うユーザーのニーズを明らかにすること
・「要件」はサービスなどの目的を果たしユーザーのニーズを満たす必要な機能やコンテンツの要件を決めること
・「構造」は機能の詳細を検討し、分類構造化し優先順位を付けて全体的なUIを設計すること
・「骨格」は画面のワイヤーフレームを作成し情報の配置決めをする（骨組み作り）
・「表現」はワイヤーフレームを基にビジュアル的な表現を加え見た目を整える（GUI作成）

🔳  UI/UXデザイナーなるためには

「戦略 / 要件 / 構造 / 骨格 / 表現」を通してUIを作成し、質の高いUXをユーザーに提供できるのがベスト。

今回はUI/UXデザイナーの役割となる具体的な方法を交えてご紹介しました。( 戦略 / 要件 / 構造 / 骨格 / 表現の5段階モデル )段々と専門的な内容になってきましたね。この調子でUI/UXについての知識を深めていきましょう！

次回はサービスがUIに落とし込まれるまでの「戦略 / 要件 / 構造 / 骨格 / 表現」を前半と後半に分けて詳細に解説していきたいと思います！

▼ 次の記事

🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて

ARCHECO inc. | UX/UIデザイン、アプリ、WEB、新規事業