グッドパッチに聞く「UIデザインの本質的意義とその可能性」 Part.2　UIをデザインする事例詳細

UIとは何か、UIデザインとは何をデザインすることなのか。国内でいち早くUIデザインというテーマに向き合い、現在もトップランナーとしてUIデザインの実践と理論化に取り組む株式会社グッドパッチの皆様に、UIデザインの定義から、具体的な制作手順、そしてこれからの可能性についてお伺いしました。

蔡漢翔さん: 株式会社グッドパッチ　https://goodpatch.com/
デザインマネージャー UIデザイナー

栃尾行美さん: クリエイティブディレクター UIデザイナー

UIをデザインする流れ

UIデザインは、単純にカッコよい見た目をつくればよいのではなく、リサーチを通じてプロダクトの目的やユーザーの行動等、制作すべきUIの前提を把握・理解した上で、それらをデザインすることが重要になります。

Goodpatchでは、独自に発展させた「デザインプロセス」や「デザインの5段階モデル」等の思考フレームワークを、UIをデザインする上での基本としています。

サービスとユーザーの両面から理解しよう

UIデザインは、ユーザーとサービスの接点をデザインするものですから、ユーザー理解だけでなく、サービス（ビジネス）側の理解も重要です。ユーザー／サービス両面から考え、接点としてあるべきUIの姿を「ユーザーストーリー」として捉えていきます。

構造を設計する

サービスの構造は、3つの段階に分けて考えていきます。まず、サービス上に表れる情報、すなわちサービスの扱う内容（コンテンツ）を決める段階。次に、コンテンツをどのような「箱」に入れて表示するか、枠組みを考える段階があります。例えばページのレイアウトやナビゲーションの構造をこの段階で考えます。最後に、ユーザーがこれらのコンテンツにアクセスするときにソフトウェアがどのようにふるまうか、すなわち具体的な機能や付随するインタラクションを考えていきます。

コンテンツを設計する

コンテンツを設計する際に最初に行うことは、制作しようとするデジタルプロダクトに、どのような「情報」が表れるかを洗い出すことです。例えば料理に関するプロダクトをつくる場合、「レシピ」「投稿者」「材料」といった、表出する要素を書き出していきます。次に、これらの関係性を考えていきます。「レシピを投稿する人がいる」「レシピの中に材料の情報が出てくる」といったことを、UIのない段階でさまざまに想像してみます。

続いて、デジタルプロダクトの形・性質を考えます。何をつくるかによってUIデザインとして何を重視すべきか方向性は変わるためです。例えばWebサイトであれば、メディアとしての性質が強いため、閲覧のしやすさを考えて設計を考えますが、アプリケーションであれば、ツールとしての性質が強いため、情報の閲覧だけではなく、道具としてどのようにユーザーに使われるかといったことを考えていきます。

Goodpatchではディレクター職は置いておらず、UIデザイナーが、UXデザイナー、エンジニア、プロジェクトマネージャー等のチームメンバーと協働しながら、UIデザインに関する業務を包括的に行っています。

枠組みの設計

枠組みを考える上では、大きくは2つのアプローチがあります。一つはトップダウンで階層的に発想する方法で、例えばWebサイトのグローバルナビゲーションと、それぞれに連なるサブカテゴリを考えていく方法です。もう一つがボトムアップ、すなわち詳細ページから考え、詳細ページにアクセスするにはどのような導線が必要かを考えていく方法です。この両者の視点を行き来しながら、コンテンツを入れる枠組みを整備していくことが大切です。

プロトタイプはどのくらいつくりこむ？

プロトタイプは、つくる「目的」によって、つくり込みの粒度や焦点を当てるポイントは変える必要があります。例えば、ユーザーテストでサービスの価値検証を行うためにつくるプロトタイプでは、インタビューを受ける被験者が画面を見たときに、どのようなツールか理解し、どのように操作すればよいのか想像できるレベルでつくりこむ必要があります。また、実装を前提にエンジニアとのコミュニケーションのためにつくるプロトタイプでは、各機能の仕様やインタラクションがわかるようにつくります。

このような考えから、Goodpatchでは、プロジェクトが始まる前段階で、クライアントを含めたチーム間でワイヤーフレームやプロトタイプをつくる「目的」の目線合わせを行うようにし、つくる「目的」を共有した上で、それに合わせたプロトタイプをつくるようにしています。

表層デザインで実現すべきことは？

タイポグラフィ、フォント、色彩、アイコン、アニメーション等、表層（視覚的）デザインを構成する要素はさまざまにありますが、重要なのはこれらの表現方法をどう組み合わせて「どのようにサービスの魅力を引き出していくか」という視点です。

言い換えると、ユーザーから「このサービスを使い続けたい・応援したい」という感情をどのように引き出していくかを考えることが、表層をデザインする上で重要なことになります。

そのためには、UIデザイナー自身が好きなデザイン、カッコいいと思うデザインではなく、これまでのプロセスの中で明らかにしてきた情報や設計という、つくるべきUIの「前提」を理解した上でデザインを決めていくことが必要です。

設計を表層デザインに落とし込む流れ

表層デザインをつくっていく上では、プロダクトに関わる3つの性質を意識することが重要です。

1点目は「ソフトウェア」の性質です。メディアなのかツールなのか。例えばInstagramであれば、「写真投稿をベースとしたSNS」と捉えることができます。このためには、つくるプロダクトの範疇だけでなく、UXリサーチやサービス定義書等を確認し、広い視野でサービスのあり方そのものを理解する必要があります。

2点目は「ユーザー」の性質です。例えば、ユーザー層が高齢者中心であればフォントサイズや視認性を強く意識する必要がありますし、逆にITリテラシーの高い層であれば、凝ったギミックやカスタマイズ性を取り入れ「楽しませる」要素を入れる判断につながります。

3点目は、「ブランド」の性質です。サービスに愛着を持ってもらう上では、表層デザインにも、サービスや運用企業のビジョンや方向性といった「ブランド」が表現されていることが必要です。このためにはブランドパーソナリティの理解が必要になってきます。

ここでポイントとなるのは、これら3つの性質の「重なる」部分の配分を適切に見極め、デザインに落とし込んでいくことです。ソフトウェアに属するUIデザインの場合は、まずソフトウェアの性質を軸に、ユーザーの性質、ブランドの性質…と加えていくと、設計と表層デザインの両立がしやすくなります。

アニメーション使用時の注意点

アニメーションやギミックは、使い方によってはユーザーの行動や視覚の邪魔になるものですので、使う必然性に留意することが大切です。具体的には下記の5つの点に注意しましょう。

アート的表現と機能性をどう両立させるか

アート的な表現と機能性が上手く両立できないケースには2パターンあります。

まず、アート的表現が優先されて機能性が悪い場合、デザインする上で視野が狭くなっている可能性があります。「第三者目線」を意識して、ユーザーの行動を阻害している部分がないか、客観的にデザインを俯瞰してみましょう。

逆に、ワイヤーフレームそのままのようになってしまう場合は、ロジックや制約にとらわれすぎているのかもしれません。解決策としては、サービスのコアとなる主要画面に絞って、実現可能性や制約を度外視して、一度「自由に」デザインをつくってみましょう。そこから、要件を満たすように収束させていくと上手くいくことが多いです。

実装における現在のスタンダード

大前提として、最適な実装技術は、つくりたいUIによって異なり、画一的な正解があるわけではありません。最近のトレンドとして、ReactやVue.jsといった、大規模なプロダクト開発でも支援できるJSフレームワークが採用される場面が増えていると感じますが、注意したいのは、こうしたフレームワークやライブラリは、なんらかのUIを低コストで簡便に実装するための一つの選択肢にすぎないということです。

UIを実装する技術を選定する際は、使用する技術ありきで考えるのではなく、つくりたいUI・実践したいUIから考え、それに対して最適な技術を選ぶことが重要です。

UIを実装する上で不可欠な視点

UIを実装する上で、さまざまなプロダクトに共通する重要な観点は3つあります。

1点目はパフォーマンスです。UIのパフォーマンスは、ユーザー体験の価値に直結するものであり、処理速度の向上は実装時の大きな課題となります。具体的な技術としては、スムーズな読み込み・ページ遷移を実現するSPA（Single Page Application）が挙げられます。

2点目にアクセシビリティがあります。アクセシビリティを考慮することで、これまで使用することができなかったユーザーにも使用してもらうことができるようになり、またユーザー数の拡大という点でサービス側にも利点があります。これにはWAI-ARIAの活用が今後ますます必要になってくるでしょう。　　

3点目に拡張性があり、これについては「コンポーネント駆動」という考え方が現在の大きなトレンドとなっています。 UIの構成要素をコンポーネント化、すなわち部品化することで、改善・改修をスピーディに行えるようになるほか、表現を統一することでユーザー体験の再現性を高めることにもつながるため、UIデザインの観点からも重要な実装手法となっています。

UIを評価・検証する方法