見出し画像

Figmaを使った既存プロダクトUI改善の話

既にある自社のサービス・プロダクトのUI改善にFigmaを使ってみて良かったので、自身の文章によるアウトプットの練習・振り返りや備忘録としてまとめてみました。今回の話は見た目のデザイン作業に至るまでの前段階の整備の話になります。Figmaを使った一つの事例みたいに捉えてもらえると幸いです。

はじめに

今回、「よし!Figmaを使ってやってみよう!」と踏み切れたのは以下の記事を参考に読んで大丈夫そうだぞという確信が持てたからです。感謝!
同じようにまだFigmaを検討中の方はご参考に是非ご一読ください。

ツールとして「Sketchと比較してどこがいいのか」とか、「Figmaがどれだけ素敵なのか」とかのお話をお求めの場合は以下の記事が詳細に書かれていらっしゃいましたので是非ご一読ください。

まずはプロジェクトを知るところから

もともと今回のプロジェクトにデザイナーのニーズは無かったのですが、同じ社内で開発している光景を傍目で見ていて、デザイナーの職能でより良くするお力になれると強く感じたため、自ら参画に名乗りを挙げました。

プロダクトの詳細は俯せさせていただくのですが、とにかくアジャイルで開発して機能をどんどん追加していく事を最優先としてきたプロジェクトだったので、あとから参照できる仕様書や遷移図のようなドキュメントはほとんど存在していませんでした。

参画したばかりの私は、まずはどんなプロダクトなのかを知るために、そして現在どんな問題を抱えているのかを知るためにも、想定されるユーザーの行動に沿った全てのページをキャプチャしてFigmaに貼り付け、プロトタイプ機能を使ってリンクをつなぎ合わせた擬似プロダクトをFigma上で再現しました。

そうして出来上がった疑似プロダクトのプロトタイプをプロジェクトメンバーに共有して、ユーザーから上がっている要望や、開発者目線で気になっている点などなどをコメントでつけてもらいました。

疑似プロダクトはFigma上で俯瞰して見ることができるので、遷移図の代わりになりましたし、プロトタイピングすることで遷移元のラベルとページのタイトルのゆらぎなども確認しているその場で「ここが気になる!」とコメントを付けてもらえました。

現状の問題点の整理

いただいたコメントをスプレッドシートに集めて、コメントの指す原因が重複しているものをカテゴライズしていくと、整理すべきポイントと優先順位が見えてきました。

プロダクトを俯瞰して見えるようにしたことで、全体は広く浅い構造になっている事が分かりました。よくよく見るとユーザーに行動から対象を選択させるモーダルな状態。いただいたコメントも踏まえて考えてみるとナビゲーションを整理してモードレスな状態を目指すだけでもぐっと使い勝手が向上しそうだぞ!という事が見えてきました。

【モーダル】
モーダルモードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由に操作を行えなくなることと、モード別に機能の意味や振る舞いが変化することから、ユーザーインターフェースのデザインでは、できる限りモードを設けないほうがよいとされる。

【モードレス】

モードがない状態。ユーザーインターフェースをデザインする際に目指すべき状態。状況に依存した機能制限がなく、自由な手順でタスクを進行することができ、かつ特定の操作がシステムによって常に一定に解釈される状態。

改善案の反映

それを元にデータを別にして「あるべき」な姿を出来るだけ具体化しつつも、配色や形状など今議論する必要の無い部分の作り込みは後回しにして無味簡素なWFを作成しました。 WFとは言っても、この段階でデザインの4原則(近接、整列、強弱、反復)は意識して要素を配置し、後の作業で悩むであろうポイントは出来るだけ排除しました。さらにWFの段階で共通要素はコンポーネント化してしまうことで、後の見た目のデザイン作業の効率化が図れるように準備しておきました。

他にも「こういう変化が起きたとき、こっちのステータスはこうなる」といったステータス変化の図解などもFigmaの端に画像で貼り付ける事で、全ての情報をFigma上で参照できるような状態を目指しました。

まとめ

今回良かったのは、常に節目節目でPMやPOとディスカッションをしたり、コメントを付けてもらったりすることで大きな認識やイメージのズレを発生させる事なく進めることができたこと、何よりプロジェクトにデザイナーのニーズがあって参画したわけではないので、周りを巻き込んで自分のやりたいことを実現していく必要があったのですが、Figmaで視覚化したものを見せるたびにメンバーの気持ちが少しずつこちらに向いてくるのを感じることができました。

今では二週に一度の定例MTGを設けていただき、こちらから意見を求める必要もなくみんなから「これ、どうにかならないかな?」と声が上がるようになりました。もう少し時間が経ってメンバーのみんなが慣れてきた頃にはslackにつなげて議論の活性化を図れるといいなと思っています。

今回の私のプロジェクトの関わり方はあまり一般的では無いかも知れないのですが、表層的な部分だけを担うのではなく、デザイナーとして全体を整備する作業にFigmaが一役買ってくれました。今回の状況に最適なツールがFigmaだったのかも?と思っています。

ツールはあくまで選択肢に過ぎませんが、初期段階や途中からデザイナーとして参画し、周りを巻き込んでプロジェクトを牽引したい時に、Figmaはプロセスを開示できるため、みんなの興味を惹きつけられるので有益なんじゃないかなーとふんわりと思っています。

この記事が気に入ったらサポートをしてみませんか?