ことばに書き出すことからの、UIデザイン

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

Gaji-Labo のUIデザインでは既存のプロダクトに対してのUIの改修や機能の追加に関わることがよくあります。
このようなUIデザインの初期フェーズでは、既存プロダクトを知ることと関連するドメインを把握することを第一歩のインプットとしています。既存プロダクトのUIデザインは何よりプロダクトを知ることから始まります。

クライアントやプロダクトのチームからヒアリングをすることでわかることもありますが、既存プロダクトの現状UIを観察することからも学べることはたくさんあります。
プロダクトの表層のUIになにがあるか、どのように操作できるかから、プロダクトとドメインの理解につなげていくかが重要です。

あくまで自分流ではありますが、今回はこの既存のプロダクトを学んでモデリングへつなげていくプロセスについて書きたいと思います。

UIの観察と操作、そして書き出す

既存のプロダクトについてしっかりインプットするために、下記の3ステップで進めています。

1. じっくり見る：
   プロダクトや機能の全体像を掴むために、UIのレイアウトや配置、色使いなどの視覚的な要素を細かくチェックします。このときUI要素のテキストやラベルも把握しておきます。
2. 触ってみる：
   実際に操作してみて、どのような機能があり、何が起こるのかを体感します。ボタンを押したときにどうなるのか、フォームに入力したときの反応など、ユーザーが体験する流れを実際に試してみることが大切です。
3. 書き出す：
   見て触ってわかったことから、プロダクトについての情報をアウトライン化した箇条書きにまとめます。わかったことをとにかく書き出し、それらを構造化して整理します。
   画面にUI（なにがある・見える）、機能（なにができる）、それらの関係性をシンプルに箇条書きにします。

まず現状のプロダクトをじっくり観察することから始めて、実際に操作することでUIの情報構造の把握を進めます。その次にわかったことを「書き出す」ことをします。

ここでわざわざ「書き出す」ことを強調しているのは、書くことの効果を私が重要視しているからです。

「書き出し」から情報への整理へ

わかったことを箇条書きに「書き出す」と、情報が頭にインプットされやすくなります。考え方としては、単語を覚えるための書き取りに近いかもしれません。知るために覚えるような動きです。

ここからさらに箇条書きを整理していくことで、情報の関係性についても考えていくことができます。
ビジュアルとしてのUIから離れて、UIを「情報」として設計を進めるベースになります。

たとえば、何らかのアナリティクスのレポートのようなプロダクトの場合、以下のように書き出します。

• 共通ナビゲーション
  • ヘッダーメニュー
    • ロゴ
    • ユーザーアイコン
      • 設定メニュー（ドロップダウンメニュー）
        • 設定
        • ログアウト
  • サイドナビゲーション
    • ダッシュボード
    • アナリティクス
• ダッシュボード
  • 通知一覧
  • 統計情報のグラフ（折れ線グラフ、円グラフ）
  • 最近のアクティビティ
• アナリティクス
  • フィルターメニュー
    • データタイプ選択
    • 日付範囲選択
  • データ表示エリア
    • 棒グラフ
    • データテーブル
  • 表示データのダウンロード
• 設定
  • ユーザー設定
    • プロフィール編集
    • パスワード変更
  • 通知設定
    • メール通知
    • プッシュ通知

具体的に書いていくことことで、どのような要素があるか機能があるかがワードとしていて並んでいき、設計のベースになる材料を並べていくことができます。

オブジェクトの理解からモデリング

既存プロダクトのUIデザインを理解するための第一歩は、そこに何があるのかを把握することです。
これには「書き出し」が役立ち、何があるかの「ワード」から対象物や情報を明確にできます。
対象物がわかると、そのオブジェクトがどんな目的で存在し、どのように機能するのかが理解できるようになります。この理解をもとに、書き出された材料となるワードの整理でプロダクトや機能のオブジェクトの抽出を進めていきます。

必要な情報をインプットして対象となるオブジェクトがわかれば、次に行うのはモデリングです。
ここでは、ビジネスやシステムの構造を踏まえながら、プロダクト全体の構造や機能を視覚化（モデル化）します。
モデリングでは、ユーザーがオブジェクトをどのように操作し、どのような状態になるのかを考えます。

たとえば先の章で箇条書きに書き出したプロダクトの場合、通知の「お知らせ」は、一覧にある「未読」状態の「お知らせ」を選択することで「未読のお知らせ詳細を見る」アクションをしています。詳細を見たことによって「未読」状態が「既読」になる、「既読」の「お知らせ」を削除する、といったように対象オブジェクトのアクションと状態を整理できます。

このようなモデリングにより、プロダクトのUIを再構築したり新たなUIデザインを提案するための基礎を築きます。
ユーザーが対象物のオブジェクトの状態や情報を知りどう動かせるかを整理したモデリングから、UIデザインの設計の指針を考えていくことができます。

最後に

観察と書き起こしを通じた理解や把握のプロセスを経ることで、プロダクトのインプットと必要な情報としてUIをとらえることができます。そこから具体的なUIデザインのオブジェクトモデルを作成する基礎を築きます。
プロダクトの基礎になるものをちゃんと押さえることで、より良いユーザー体験を提供するUIデザインを創り出すことができると考えています。

UIデザインのプロセスは複雑になりがちですが、ひとつひとつを着実に積み重ねることで、理解の解像度は向上していくはずです。
泥臭く地道なところからもヒントはあるはずなので、まずはとことんの観察して書き出すことから始めてみてもよいのではないでしょうか？