プロダクトの成長フェーズに合わせてUIデザインを考える

こんにちは、Gaji-Labo UIデザイナーの今西です。

SaaSやWebサービス系の事業では「これまでは問題ではなかったけれど、UI設計が成長課題になってきた」という状況や、「いますぐUI改善すれば事業が伸びそう…」というタイミングがあるかと思います。

スタートアップのプロダクト成長支援をしているGaji-Laboでは、フェーズや状況が変化するタイミングに合わせてUI設計・UIデザインに入らせていただくことがあります。

• UIデザイナーなしで開発してきたが、ユーザーが増えてきてプロダクトとしてのクオリティやユーザビリティに不安を感じる
• 機能の要件ばかりあって、具体的な形にならない
• ユーザーにとって良いUIでありつつ、開発効率も両立したUI設計が必要
• 機能が増えていく状況に対応できるUIを用意したい。既存のUIも活用したい

上記は例ですが、要件・機能要求ドリブンになっているこれらの状況でUIデザイナーに求められることは単に画面をきれいにすることではなく、根本的な課題解決であると考えています。

①「UIデザイナーなしで開発してきたが、ユーザーが増えてきてプロダクトとしてのクオリティやユーザビリティに不安を感じる」という場合

UI設計の専門家がいなくても伸びてきたサービスが「そろそろUI設計から見直さないと…」というフェーズまで成長してきた、というのは伸びているスタートアップのプロダクトでよく見かける変化のひとつだと思います。

そういった変化のフェーズでUI設計の支援に入る場合には、扱う情報や機能から根本的に整理し、UIコンポーネントを含めたUIデザインの改善提案をする必要があります。

具体的には「概念モデリング」を用いてプロダクトを抽象的なかたちでほどいて、抽象的に扱う情報（オブジェクト）とその操作を整理し、ユーザーが期待する機能やわかりやすいUIのありかたを考えていくことになります。

モデル化（モデリング）は、ビジネスやユーザーなど複雑な事象やシステムの特徴・性質・関係性の重要なところを捉えて、簡略化した図表などで表現できるようにしたものです。ビジネスにまつわる複雑な現象からユーザーが触れるプロダクトのすがたを理解するために有用です。

Gaji-Laboの概念モデリングは、ビジネスやシステムに関連する複雑な事象を紐解いて、プロダクトとそれを使うユーザーとの大切なポイントをしっかり押えて整理をします。そこからユーザーが触れるイメージを持てる画面や機能の情報を設計したワイヤーフレームに落とし込んでいきます。

検討のための情報収集や整理から入るため、UIを改善という依頼に対して遠回りに見えるかもしれませんが、これからのプロダクトの成長を支えるUIを作るためには整理や分析から入った方が結果的には近道であると考えています。

ユーザーが認識しやすく、操作していてストレスがない情報の見せかたとフローにしていくことはもちろん、この取り組みで整理した情報は一回のUI改善プロジェクトで終わることなく、継続的な改善や開発にも使えるUIにしていくキッカケにもなると思います。

②「機能の要件ばかりあって、具体的な形にならない」という場合

事業には、ともかく必要な機能を形にしていくスピードを上げなくてはいけないフェーズにもかかわらず具体的な形が見えず、ふわっとしたまま時間が過ぎてしまうというのもよくある状況だと思います。

この状況ですぐに機能要件に合わせたUIが欲しいからといって、ビジネスドメイン・機能要件の理解が浅いままUIから作りはじめてしまうと、考慮漏れや不要な機能実装などが生じて、実装フェーズでの手戻りが大量に発生したり、実装の長期化につながります。

ビジネスドメイン・機能要件の理解を深めた上で抽象的な概念レベルで検討をし、情報と体験の設計とフローに焦点を当てます。

たとえば企業同士が案件マッチングするようなサービスであれば、取引にどのような情報が必要なのかや、商慣習としてどのようなコミュニケーションするかのシーンなど、マッチングに関わるドメインまわりの情報をふまえて実際の使用状況を整理していきます。
これをせずに機能要望ベースでUIから作りはじめてしまうと、かなりの遠回りをするのはプロダクト開発に関わったことがある方なら想像できることと思います。

このように具体的なユースケースや使用フローを整理しながらモデリングの検討材料にし、具体と抽象を行き来することで、仮説立てと検証を繰り返しながら多面的に検討精度をあげながらプロダクトの方向性を考えていくことができます。

また、これらの作業から作られるワイヤーフレームは、まずは制約なしでプロダクトのインターフェイスのあるべき姿をアウトプットするようにしています。

③「開発効率も両立したUI設計が必要」という場合

ユーザーにとって良いUIであることはもちろん、同時に開発効率を意識したUIデザインが求められるフェーズもあります。

わたしたちの UIデザインは、それ自体が情報の構成物になるように検討しています。
①でも書きましたが、UIデザインのために行うモデリングによって、企画や開発においてもプロダクトを表現する共通言語がつくられるようになり、開発メンバーとのコミュニケーションの前提がそろうようになります。

UIデザインを画面をつくる絵として見ているだけでは情報設計は見づらいところがありますが、モデルとしての共通言語を示すと、ビジュアル画面のUI設計と構造の理解にも役立ちます。またプロダクトのオブジェクトを中心にしたモデルは、そのままオブジェクトベースのとらえかたとして、開発での設計にも適用しやすいです。

デザイン自体やUIの周辺情報がプロダクト開発の仕組みを支えるような橋渡しとなるよう、開発へハンズオフできる作業フローを念頭に置いたデザインドキュメントの作成を進めます。

④ 「機能が増えていく状況に対応できるUIを用意したい。既存のUIも活用したい」という場合

現在すでに多くのユーザーに使われているプロダクトで、これからの機能拡張に備えなくてはならないフェーズもまたプロダクトの成長過程でよくある状況かと思います。

③ではコミュニケーションツールにもなるデザインドキュメントを中心としましたが、こちらではより具体的に機能拡張や保守開発を見据えたUIライブラリのコンポーネントを整備し、プロダクトに必要なUIに対応することになります。
既存のプロダクトの機能やUI、ユーザーを深く理解して特有のデザインパターンや基本コンポーネント・拡張コンポーネントを整備し、柔軟性のあるデザインシステムを構築します。

過去、あるプロダクトで一部の機能追加のみのUIデザインを担当したことがあるのですが、追加される機能の要求や仕様ではなく、まずは現状のプロダクトの使われ方やデザインパターンをひもといてプロダクトの抽象的なすがたをとらえるアプローチから入りました。
そのアプローチをとることで機能を検討することで、進行中のプロダクトでも違和感ない操作性で機能をUIデザインとして落とし込むことができました。

プロダクト特有のニーズは、プロダクト自体のドメインや情報オブジェクトが理解できないととらえづらいものがあります。定められた機能や要件がある場合でも既存プロダクトから抽象的な学習プロセスを挟むことで、ユーザーの使いやすい基本コンポーネント、拡張コンポーネントを検討できるようになると考えています。

UIデザインの使命はプロダクトのストーリーを具現化すること

全体的に「遠回りに見えるけれど、この方が近道です」という内容になっていますが、ユーザーに提供したいものやユーザーとコミュニケーションするものの共通言語を築き上げサポートするUIデザインの提案が、プロダクトの成果に結びつくとわたしたちは信じています。

UIデザインは、プロダクトのニーズや課題を把握し、価値ある最適な体験とインターフェイスを提案する重要な役割を果たします。

Gaji-Labo では UIデザインを、ビジネスに価値をもたらすUIを構築するために抽象的な概念を具体的なモデルに変換し、そのモデルを共通の言語としてコミュニケーションしながら、実際の触れることのできるタンジブルな状態にしていくことだと考えています。

Gaji-Labo のUIデザインのアプローチをまとめてみました。
このような様々なフェーズに合わせてスタートアップのUIデザインやプロダクト開発におけるお悩みの解決に取り組んでいます。

「うちはこんなフェーズなんだけど…」というご相談はいつでも承っておりますので、お気軽にご連絡いただけたら幸いです。