フツパーのデザインが変わった！【後編：プロダクトデザインの改革】

こんにちは、フツパー人事の宮内です。

以前、フツパー待望の1人目デザイナーの入社で変わったフツパーのデザインについてご紹介をしました。

前回記事

後編となる今回は、プロダクトデザインに絞って、どういう視点で変えたのか？どうやってデザインを構築していったのか？どういうことを想定してデザインに反映させるのか？といったプロダクトデザインが完成するまでの過程をご紹介していきます。

インタビューするにあたって、デザインの検討経緯がまとめられた門外不出のFigmaを特別に見せてもらいましたので、こちらをもとに、デザイナーでない筆者が「こうやってデザインってできていくんだ！」と学びになった点にしぼって、デザイナーの中嶋にインタビューしていきたいと思います。
（Figma画像を掲載できないのが残念です。）

『Hutzper Insight』のデザイン

今回デザインを刷新したプロダクトは、外観検査サービス『メキキバイト』の支援ツール『Hutzper Insight』です。

プロダクトの特性上、生産現場の方が使用されるツールなので、普段ITツールを使う機会がない方でも「使いやすい」こと、忙しい現場の方がパッと必要な情報を確認できるよう「わかりやすい」ことが重要で、これまでもお客様の要望を反映した機能追加や改修を行ってきましたが、この「使いやすさ」と「わかりやすさ」をデザイン側からさらに進めようと、UIを一新することになったのが発端でした。

①プロダクトの今の姿だけを理解していればいいわけではない

検討資料は、フツパーが目指す未来とロードマップ、プロダクト全体のテーマや将来像などを知ることから始まっています。

『Hutzper Insight』そのものの開発はデザイナーが所属するプロダクト開発部が主管ですが、全体イメージを掴むために、部内に限らず社内に広くヒアリングがされています。CTO、連携する『メキキバイト』の開発担当であるAIエンジニアの責任者のヒアリングはもちろん、COOや営業担当の声もSlackなどから拾い上げて集めていました。

ーーこういうヒアリングや、手前の理解が大事なんですね。

中嶋：
プロダクトの現状の姿をただデザインに起こすだけの作業ならわりと簡単なので、ここまで徹底しなくてもよい場合もあります。

ただ、事業やプロダクトが最終的に目指す姿をしっかりと見据え、今の段階から拡張性や将来の成長を見込んで設計しないと、プロダクトの「現在」と「将来」がうまく一致しなくなることがあります。この点は特に大切にしています。

もちろん、将来像が完全に決まっているわけではなく、プロダクトが成長する過程で変わっていくこともあります。フツパーのようなベンチャー企業では、そういった変化が特に顕著です。どんなプロダクトでも、完成後に修正が加わることはよくあり、その修正を通じてプロダクトがより良いものになると考えています。
方向性が少し変わるのであれば、それに合わせて微調整を行い、大きく方向転換する場合は根本的に見直すなど、デザインも常に柔軟に対応しています。ただ、こうした変化を大きなズレにせず、軌道修正程度に収めることが非常に重要です。

チーム全体で、プロダクトの品質を高めるために、可能な限り情報収集を行っています。こうした情報がデザインに与える影響は大きいと感じています。

②誰がどこで使うものなのか？どうすれば使いやすいのか？

冒頭で、外観検査サービス『メキキバイト』の支援ツール『Hutzper Insight』と説明しましたが、支援といってもざまざまな機能があり、判定結果の集計と見える化、AI精度維持向上のための再学習、品質管理機能、さらにはノーコードAI開発を簡単な操作でできる機能などを備えているもので、「お客様自身の手でAIを運用できるプロダクト」になってきています。

これは、検討資料の「プロダクトの目標」にも大きく書かれていました。

このような「目指すところ」を把握したうえで、「誰が使うのか」「その人にとっての使いやすさとは何か」「使いやすさを追求するためにUIができること」から「そのプロダクトを取り巻く環境で今後想定されること」まで、最初にしっかりと確認する作業が行われています。

ーーこの作業はどんなメンバーで進めていくんでしょうか？

中嶋：
いったん1人でまとめます。その後開発メンバーと共有しますね。

1人で作業する部分は、特に時間をかけます。（①の段階で）さまざまなメンバーからヒアリングした「プロダクトの目指す方向」を踏まえ、ユーザーや環境を想定しながら情報収集を進めます。

これも、ただ調べてメモするだけじゃなくて、ひとつひとつ肚落ちするまで考える、考えつくすまでは1人でやりきるようにしています。デザイナーチームがあれば、みんなでやることもありますね。

そこから、自分で考えつくしたものを開発メンバーに共有して、フィードバックをもらって、というのを繰り返します。この行き来はけっこうあるんです。

最初のヒアリングでデザイナーと開発者がすれ違っていると、その後のリサーチが変な方向で進んじゃうこともよくあります。そういう意味でも、さっきお話したように、最初に目指すところをしっかりとヒアリングしておくことが非常に重要です。

ーーこの作業はどんなデザインをする際にも踏む手順なんですか？

中嶋：
会社のホームページのように長期間使用されるコーポレートデザインの場合は、デザインの鮮度を保つためにも、しっかりと時間をかけて取り組みます。逆に、チラシのように一時的に使われるものは、その時点の情報を反映することが重要なので、ここまでのプロセスを踏むことは少ないですね。

プロダクトは、もちろん長く使うものなので特に大事な手順になります。

③リサーチは時間がある限り！

次は、『メキキバイト』と同じような現場で使われる検査アプリケーションや関連するツールのUIのリサーチを実施し、「検査」「製造業」「現場」「工場」「業務用」など広めにざっくりとしたキーワードで、さまざまなアプリケーションの共通点、使いやすいものと使いにくいものの特徴、そうなっている理由などを考察し、参考にしていました。

ーー単にデザインの参考にするというよりは、そこからなぜそのデザインにしたのかという意図を抽出して、同じ意図を持ったデザインの特徴を探しているように見えました。

中嶋：
まさにそうです。

文脈が大事なんですよね。上辺だけを真似しても同じように機能しないので、いろいろな状況を想像して作ります。例えば、出勤して最初にこの掲示されているモニターを見るのか、普段は他の場所にいてたまに見るのか、作業中に手を止めてチラッと見るのかというようなシチュエーションもそうですし。あとは、どんな人が使うかという「人ありき」の場面の想像もですね。

つまり、ご質問にあった「なぜそのデザインにしたのかという意図」って、場面の想像なんですよ。

こういう想像力を駆使して、リサーチは、できる限り時間をかけて行います。

その後、社内でのリサーチも進めます。現状の画面遷移がどうなっているか、どこに課題があるか、改善の余地はどこにあるか、などを確認します。

ーーリサーチメモに「経験が長い人は画面作りが上手」という一言を見ました。これってどういうことなんでしょう？

中嶋：
現場での経験が豊富な人がデザインしたものは、その人自身の作業経験に基づいていると思います。このようなデザインは単に「きれい」かどうかだけでなく、「このタイミングでこう使う」「ここにボタンがあった方が便利」といった実際の作業に根ざしたものです。極論を言えば、デザインの専門知識がなくても、こうしたデザインができることがあります。

ここは僕自身も大変勉強になりました。一見シンプルで簡素に見えるものでも、現場経験が豊富な人が作っていたり、沢山ヒアリングを実施していたりするものは、デザインの専門知識がなくても結果的に使いやすく、見やすいものが出来上がっています。

④とりあえず作ってみる？

ーーその後は、現状の画面遷移をまとめた後、「とりあえず画面遷移を作ってみる」というセクションがありました。いつもこうされているんですか？

中嶋：
最初は、そのプロダクトの資料を読んで、全体を把握することから始めます。その後、まずは全体の相関図を作ってみます。

その後、リサーチした結果を忘れないうちに、主要画面のデザインを具体的に作ります。表示時間の長いものや頻繁にアクセスする画面、リニューアルならば最も課題が大きいところなど、デザイン刷新するにあたって重要なところから仕上げていきます。

そこから『メキキバイト』の開発を担当しているエンジニアにも見てもらってフィードバックをもらいました。

ここまでいっても、というか最終版ができても、結局はプロダクトって動かしてみないとわからない部分は残るので、その後は随時修正を重ねていくという感じです。

ーー作った後もデザインは成長し続けるということですね！

はい、今回デザインを大きく刷新しましたが、私自身もこれでゴールだとは思っていません。

フツパーのように使っていただいているお客様の声を聞けるというのは最強の武器だと思っているので、今後も生の声を反映して、どんどんブラッシュアップしていきたいと思っています。