UIデザイナーは中間成果物に何を作るのか

UIデザイナーと言うと、「アプリとかウェブサービスの見た目を作ってくれる人でしょ」みたいな至極ざっくりとした認識の人が業界内でもいるわけですが、実際には見た目だけを作っているわけではなく、開発プロセスの中で様々な中間成果物を作ったりします。この記事では、中間成果物という観点から、UIデザイナーがやっていることを解説したいと思います。

概念モデル図

クライアントワークの場合だと、クライアントの求めているモノ、具体的にはアプリやウェブサービスが、どのような情報の構造を持っているか、どのような語彙を持っているかをまず理解する必要があります。

ここで単に打ち合わせしてヒアリングしただけだと、齟齬や漏れが生じたりして後で痛い目を見ることがあります。これを防ぐために概念モデル図を作成して、クライアントの前で説明してフィードバックをもらって認識をすり合わせます。

この概念モデル図を作成する仕事は、必ずしもUIデザイナーの仕事ではありません。というのも開発プロジェクトにおいてはUIデザイナーだけではなくエンジニアにとっても必要になる情報だからです。プロマネなどに作ってもらうのも良いでしょう。

概念モデル図だけだとデザインに必要な情報が足りない場合もあるので、プロジェクトに応じてユースケース図やペルソナ等、後工程で必要な中間成果物をこの段階で作成するとよいと思います。

スケッチ

全体的な画面の遷移、画面の構成やレイアウト、インタラクションなどを思いつくがままに紙にスケッチしていきます。考えられる様々な案をスケッチしてみてアイデアを発散させて、良さそうな案を後工程に活かします。

この中間成果物は、アイデア出しのために個人的に作成されるもので、チーム内で見せることはあるかもしれませんが、外部のクライアントにそのまま見せることはあまりありません。

ワイヤフレーム & 画面遷移図

ワイヤフレームには、どういう画面があって、画面の中にどういうテキストや情報を乗せるか、大まかにどういうレイアウトになるのか、どういう遷移を作るのかなどを表現します。画面だけだとどういう遷移になるのかパッと見分かりづらくなるため、補足する資料として画面遷移図も作成します。

アプリやSPAの場合だと、遷移や画面内インタラクションが複雑になるのでワイヤフレームや画面遷移図は作成せずに、後述するローファイプロトタイプを作って見せることが多いです。

ワイヤフレームを作るのに、私は以前はOmniGraffleというツールを使っていたのですが、最近はSketchで書いています。Balsamiqのようなワイヤフレーム専用のツールもあります。Cacooのようなオンラインで共同編集できるツールを使っても良いでしょう。

ローファイプロトタイプ(ローフィデリティプロトタイプ)

実際に触って試すことのできる忠実度の低いプロトタイプです。ワイヤフレームと同様に、細かいビジュアルデザインは排除して、画面にどういう情報を乗せるかや大まかなレイアウトや画面遷移を表現するために作成します。このローファイプロトタイプでは、ワイヤフレームとは違って画面遷移や大まかなインタラクションを実際に動かせる形で見せることができます。ワイヤフレームのプロトタイプ版と言っていいでしょう。

ローファイプロトタイプを作成できるツールとしては、Adobe XDやSketchやProttやUXPinなど探せば数え切れないほどあるので良さそうなプロトタイピングツールを選ぶと良いでしょう。

この成果物を完成させると、大まかな画面構成や遷移の動線などを固定することができるので、ようやく細かなビジュアルデザインの作業に移ることができます。プロジェクトによっては、このままプロトタイプのフィディリティ(忠実度)を上げていって、後述するハイファイプロトタイプを作っていきます。

デザインカンプ

ビジュアルデザインを表現する中間成果物です。いわゆるデザイナーが作る成果物として皆が一般的に認識しているものです。デザインカンプは、「モックアップ」とも呼ばれたり、時には単に「デザイン」と呼ばれたりします。

一昔前はデザインカンプを作るのにPhotoshopを使うのが普通でしたが最近はSketchやFigmaのようなツールを使うことが多くなりました。

ウェブサイトのデザインであれば、このデザインカンプがデザイナーの最終的な成果物になることが多くありました。しかしデザインカンプのような静的な一枚絵では、アニメーションやインタラクションを表現できないという弱点があるため、アプリやSPAなどではそうではないことが多いです。

ハイファイプロトタイプ(ハイフィディリティプロトタイプ)

ハイファイプロトタイプとは、実際には機能としては動かないけれども、ビジュアルやインタラクションやアニメーションをほぼ完全に表現したプロトタイプです。静的なデザインカンプでは、アニメーションや細かなインタラクションが表現できないので、アプリやSPAの場合にはハイファイプロトタイプを作成します。

このハイファイプロトタイプには、Adobe XDのようなプロトタイピングツールを使う必要は必ずしもありません。

むしろ、ハイフィディリティ(高い忠実度)を持つプロトタイプを作成するには、そのプラットフォーム上の開発ツールで実際に作成するほうがよいです。具体的には、開発するものがiPhoneアプリであれば、実際に動くiPhoneアプリを、SPAであれば実際にSPAを作成します。もちろん、ここで作成するのはUIなどのガワだけで、機能は一切必要ありません。また、開発チームとコードを共有する必要もありません。

部分的に細かいインタラクションやアニメーションを備えたハイファイプロトタイプを作りたい場合には、Framer Xのようなアニメーションやインタラクションを作り込めるデザインツールを使うのも良いと思います。

ほとんど完成形に近いプロトタイプを関係者等に見てもらうことで、デザイン面での最終的なすり合わせを行うことができます。開発チームに対しては、アニメーションやインタラクションなどを含むデザインを正確に伝えることができるようになります。

このハイファイプロトタイプがデザイナーが作るべき最後の中間成果物になります。ウェブサイトのデザインの場合にはこのハイファイプロトタイプを作る必要はあまりありませんが、アプリやSPAやGUIソフトウェアをデザインする場合には、このハイファイプロトタイプが生きたUI設計書となるので重要な成果物になります。

まとめ

UIデザイナーが作る中間成果物は、デザイナー以外の職種の人にはなかなか見過ごされがちです。この記事では、UIデザイナーが作る中間成果物を整理することで開発プロセスの中でUIデザイナーがどのような役割を果たしているのかを紹介しました。