UIデザイナーの今西です。UIデザインでは既存のプロダクトに対してのUIの改修や機能の追加に関わることがよくあります。このようなUIデザインの初期フェーズでは、既存プロダクトを知ることと関連するドメインを把握することを第一歩のインプットとしています。既存プロダクトのUIデザインは何よりプロダクトを知ることから始まります。クライアントやプロダクトのチームからヒアリングをすることでわかることもありますが、既存プロダクトの現状UIを観察することからも学べることはたくさんあります。プロダクトの表層のUIになにがあるか、どのように操作できるかから、プロダクトとドメインの理解につなげていくかが重要です。自分流ではありますが、今回はこの既存のプロダクトを学んでモデリングへつなげていくプロセスについて書きたいと思います。UIの観察と操作、そして書き出す既存のプロダクトについてしっかりインプットするために、下記の3ステップで進めています。見る:プロダクトや機能の全体像を掴むために、UIのレイアウトや配置、色使いなどの視覚的な要素を細かくチェックします。このときUI要素のテキストやラベルも把握しておきます。触ってみる:実際に操作してみて、どのような機能があり、何が起こるのかを体感します。ボタンを押したときにどうなるのか、フォームに入力したときの反応など、ユーザーが体験する流れを実際に試してみることが大切です。書き出す:見て触ってわかったことから、プロダクトについての情報をアウトライン化した箇条書きにまとめます。わかったことをとにかく書き出し、それらを構造化して整理します。画面にUI(なにがある・見える)、機能(なにができる)、それらの関係性をシンプルに箇条書きにします。現状のプロダクトをじっくり観察することから始めて、実際に操作することでUIの情報構造の把握を進めます。その次にわかったことを「書き出す」ことをします。ここでわざわざ「書き出す」ことを強調しているのは、書くことの効果を私が重要視しているからです。「書き出し」から情報への整理へわかったことを箇条書きに「書き出す」と、情報が頭にインプットされやすくなります。考え方としては、単語を覚えるための書き取りに近いかもしれません。知るために覚えるような動きです。ここからさらに箇条書きを整理していくことで、情報の関係性についても考えていくことができます。ビジュアルとしてのUIから離れて、UIを「情報」として設計を進めるベースになります。何らかのアナリティクスのレポートのようなプロダクトの場合、以下のように書き出します。具体的に書いていくことことで、どのような要素があるか機能があるかがワードとしていて並んでいき、設計のベースになる材料を並べていくことができます。オブジェクトの理解からモデリング既存プロダクトのUIデザインを理解するための第一歩は、そこに何があるのかを把握することです。これには「書き出し」が役立ち、何があるかの「ワード」から対象物や情報を明確にできます。対象物がわかると、そのオブジェクトがどんな目的で存在し、どのように機能するのかが理解できるようになります。この理解をもとに、書き出された材料となるワードの整理でプロダクトや機能のオブジェクトの抽出を進めていきます。必要な情報をインプットして対象となるオブジェクトがわかれば、次に行うのはモデリングです。ここでは、ビジネスやシステムの構造を踏まえながら、プロダクト全体の構造や機能を視覚化(モデル化)します。モデリングでは、ユーザーがオブジェクトをどのように操作し、どのような状態になるのかを考えます。先の章で箇条書きに書き出したプロダクトの場合、通知の「お知らせ」は、一覧にある「未読」状態の「お知らせ」を選択することで「未読のお知らせ詳細を見る」アクションをしています。詳細を見たことによって「未読」状態が「既読」になる、「既読」の「お知らせ」を削除する、といったように対象オブジェクトのアクションと状態を整理できます。このようなモデリングにより、プロダクトのUIを再構築したり新たなUIデザインを提案するための基礎を築きます。ユーザーが対象物のオブジェクトの状態や情報を知りどう動かせるかを整理したモデリングから、UIデザインの設計の指針を考えていくことができます。最後に観察と書き起こしを通じた理解や把握のプロセスを経ることで、プロダクトのインプットと必要な情報としてUIをとらえることができます。そこから具体的なUIデザインのオブジェクトモデルを作成する基礎を築きます。プロダクトの基礎になるものをちゃんと押さえることで、より良いユーザー体験を提供するUIデザインを創り出すことができると考えています。UIデザインのプロセスは複雑になりがちですが、ひとつひとつを着実に積み重ねることで、理解の解像度は向上していくはずです。泥臭く地道なところからもヒントはあるはずなので、まずはとことんの観察して書き出すことから始めてみてもよいのではないでしょうか?Gaji-Laboでは、UIデザイナーを募集しています弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?抽象的な物事を具体的な機能にビジュアライズできるUIデザイナー募集要項UIデザイナーとして手ざわりのいいUIを作りたい業務委託パートナーさん募集(Wantedly)パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。オンラインでのリモート面談からはじめましょう。EmiUIデザイングループリード。サービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。