UI/UXデザインのプロセスとプロダクトデザインのプロセスについて

UI/UXデザインプロジェクトはどのように進められるのでしょうか。プロダクトに関わるデザインのため、様々な部門や担当者との関わりがあります。つまり綿密な準備・計画が大切です。今回は “UI/UXデザインのプロセスとプロダクトデザインのプロセスについて” グラフィックデザインからUI/UXまで幅広いキャリアを経験している クリスティーン・マジー(Christine Maggi) 氏の動画からご紹介したいと思います。※翻訳・記事掲載は許諾を得ています。(Thank you, Christine Maggi – Design Gal !!)

以下翻訳内容です。

みなさん、こんにちは。Design Gal、クリスティーン・マジーです。この動画とチャンネルをチェックしていただきありがとうございます。

今日はUX/UIデザインプロジェクトのプロセスを説明します。UXとUIは仕事をしたことがない人には少しわかりにくいかもしれません。そこでプロセスの最初から最後まで段階を追って説明して、UX/UIプロジェクトやそういった会社で働くことがイメージできるようにしたいと思います。

おことわり

私はプロのUXデザイナーではなく、とくにUXデザインの訓練をしたこともありません。私の経歴はグラフィックデザインとビジュアルデザインで、このスキルを使ってUI/UXデザイナーとして働きながらベストプラクティスを学びました。

UX専門のデザイナーなら、私よりも深い知識を持っていて異なる意見を持っているでしょう。しかし、私のように複数の役割を果たしながらUX/UIデザインを体験している人のために、私のデザインプロセスを紹介します。

1. 問題を理解する

どんなUX/UIプロジェクトであっても最初のステップでは、問題を理解しなければなりません。つまり、クライアントや関係者に合って話をする必要があります。また、ビジネスの目標は何か、そのプロジェクトで何を達成しようとしているかを理解する必要もあります。

クライアントに対してアンケート調査することもできます。クライアントの弱点が何かについてもしっかり質問する必要があります。そのプロダクトを開発して解決しようとしていることはなにか？最終的に達成しようとしている目標はなにか？

2. 調査

次にすることはたくさんの調査です。とにかくたくさんです。問題点や関わりのあるユーザーについてあらゆることを調べましょう。ユーザーになるかもしれない人々とじっくり話をするのがベストです。形式張らないインタビューやアンケート、問題が生じたり解決したりする普段と変わらない環境の中での観察などもあります。可能な限り多くの質問をしてユーザーの考えを理解しようとしてください。なぜそう考えるのかを理解すれば、そこに重点を置くことでユーザーのニーズにもっとも合うソリューションをデザインすることができます。

・ペルソナ

ユーザーはどういう人かを見極めてください。ユーザーは何を成し遂げたいのか。ユーザーの問題を解決する最善のことはなにか。問題解決のために何を求めているのか。何に関心があり、何に関心がないのか。これらはすべてユーザーの「ペルソナ」と呼ばれるものを形作る要素です。「ペルソナ」とは、あるユーザーがどんな人物で何を求めているかについて高レベルで要約したものです。ペルソナはひとり分とは限りません。

3. プランニング

広範囲な調査が終わったら計画を練ります。このためには調査段階で得られた可能な限りすべてのことが記録してあることが望ましいです。

・アイデアの分析

さて今度はデータを分析します。何か目立つことがありますか？ユーザーになる可能性のある人々が何度も何度も口にしたことが何かありますか？クライアントや関係者のビジネスニーズおよびユーザーのニーズにどうやって応えるかについて考えを進めます。

・インフォメーションアーキテクチャ（IA）

通常はインフォメーションアーキテクチャ（IA）で分析を始めます。IAはプロダクト内の情報やコンテンツの階層のようなものです。ユーザーが探しているものを確実に見つけ出せるようにしましょう。そうすればユーザーは自然なやり方で簡単にプロダクトを扱えます。混乱することはありません。

・WEBサイトのサイトマップ

もっとも良い階層構造を決定することで、探しているものをユーザーが簡単に見つけられるので、提供したい情報を即座に見てもらえます。

・ユーザーフローとワークフロー

インフォメーションアーキテクチャができたら、ユーザーフローとワークフローについて考えます。これは、システム内のA地点からB地点までユーザーがどのように移動するのか、各部分はどのようにユーザーとやり取りするのかということです。そして様々な目標を達成するための様々なワークフローについてです。

・スケッチとワイヤフレーム

次は、ワイヤフレームと呼ばれているシンプルでラフなスケッチを使ってアイデアを形にします。デザインのブループリント作りで始まります。この時点では完全にデザインを仕上げるのではなく、ラフなレイアウトを考えてください。他の人たちにアイデアを説明して共有してもらい、フィードバックが得られるように、確実にアイデアを理解してもらいましょう。デザインを洗練し過ぎないようにします。

・私のお気に入りはUXPin

ワイヤーフレームを作るためのツールはたくさんありますが、ペンと紙で簡単にできます。AxureやBalsamiqといったアプリを使う人もいます。SketchやIllustratorでも作れます。このようなツールはワイヤーフレームをすばやく作れるので便利です。

・インタラクティブなワイヤーフレームはプロトタイプと呼ばれる

ワイヤフレームにインタラクションを設定できるので、ユーザーにアイデアをテストしてもらえます。一刻も早くユーザーに手渡すことができるので、長い時間をかけてプロダクトを完成させる前にアイデアをしっかりとしたものでできます。

・プロトタイプによるユーザーテスト

UX専門のデザイナーなら、この段階でワイヤーフレームをユーザーとともに徹底的にテストします。ユーザーはどのように使うかを観察します。混乱していないか。見つけてほしいものを見失っていないか。理想をいえば、フィードバックを得るために本当のユーザーにテストしてもらい、それを継続的に繰り返して、適切な状態になるまでワイヤーフレームを改善したら、UIデザイナーに引き渡します。繰り返しますが、ユーザーニーズに応えるとともに、プロダクトのビジネス上の目標にも合致するように徹底してください。

4. UIまたはビジュアルデザイン

ワイヤーフレームがとても良い状態になれば、UIまたはビジュアルデザイナーに引き渡す準備ができています。この段階では、ビジュアルデザインシステムを構築します。これはビジュアルの全体像です。カラーパレット・タイポグラフィのスタイル・ボタンのスタイル・共通部品のデザインといったものはプロダクト全体にわたって繰り返されます。

・ルック&フィールのスタイルガイド

デザインに時間をかけすぎないうちにプロダクトのルック&フィール（見え方と操作感）を決定してください。ワイヤーフレームと同じく、スタイルガイド（スタイルタイルと呼ばれることもあります）やムードボードをユーザーや関係者に見てもらって、デザイナーが正しい方向へ向かっていることを確認できます。クリーンでシンプル、高級で豪華、企業、地味など、目指しているデザインの全体的な感じを確実にとらえましょう。

・高精度なデザインカンプ

デザインの方向性が決まったらデザインシステムをワイヤーフレームに適用して、完全な高精度モックアップを作る時間になります。このモックアップはプロダクトがどのように見えるかを忠実に表現します。ですから、完成したプロダクトが実際にはどうなるかについて開発者もユーザーも関係者も疑問を抱くことはありません。

5. 開発

デザインが固まってきたら開発部門へ受け渡すときです。

・フロントエンド開発

デザイナーがフロントエンドコーディングも担当するケースもあります。ウェブであれば、HTML、CSS、Javascriptです。純粋なデザインカンプを手渡すだけのケースもあります。

・バックエンド開発

InVisionやZeplinなどのツールを使って開発者がデザインから必要なものを取り出し自らコードに実装することができます。

・デザインと開発者のコラボレーション

この時点で、デザイナーは開発者と協働するのがベストです。何か忘れていないか、完成したプロダクトに入れる予定のデザインの細部で見落としがないかを確認するためです。開発者とのコラボレーションは重要です。私はこれに関する動画をかならず作るつもりです。デザイナーは開発者を手助けすることができます。また、開発者が用いている技術に基づいたデザインに変更するよう開発者が求めてくるかもしれません。

6. テストと品質保証

デザインしたものが開発され構築されたら、デバイスの実物やシミュレーションでテストします。品質保障（QA）と呼ばれる段階です。

・バグフィックス

プロダクトをテストしたり、バグを発見するために可能な限りうまくプロダクトを壊すのがQAの仕事です。そうすることで開発者は出荷前にバグを修正することができます。プロダクトのリリースまでに長い時間を費やしたあげくバグだらけで不具合があった…ということになって欲しくありませんよね。ですから、リリース前に可能なすべてのバグを見つけて修正することは極めて重要です。

7. プロダクトのローンチ

最終的な成果物に全員が満足したら、ついにプロダクトをローンチする準備ができました。祝杯をあげましょう。しかし、すべてが終わったわけではありません。

・テスト・改良・反復を続ける

時の経過とともに継続的にプロダクトをテストし改良すべきです。ユーザーからのリクエストやユーザーが経験したこと、混乱したこと、以前は気づかなかった不具合など多くのフィードバックが寄せられます。すべてのフィードバックを受け入れて改良と調整を続ければユーザーに感謝されるでしょう。必要に合わせてデザインの適正化と機能の強化を続けてください。

・反復、反復、反復

プロダクトは常に改良されているので本当は”いつが完成”と言うのは難しいです。しかしリラックスして労働の成果を味わうのは通常この時期です。

次のリリースへのプロジェクトが始まるまでですが…！

それもユーザーからのフィードバックが増え、再びドローイングボードに向かうまでのことですが。

以上です。

盛りだくさんだったと思います。UX/UIプロジェクトとはどのようなものかの理解に役立てばいいのですが。質問やコメントがありましたら下の欄に書き込んでください。気に入ったら高評価ボタンを押してください。YouTubeのチャンネル登録も忘れないでくださいね。ありがとうございました。

created by Christine Maggi – Design Gal