Design at PayPay：デザイナーの開発したオリジナル図解「Ninode」が、フローチャートの弱点解消に貢献

PayPayのデザインチームは、最初のスケッチから最終的なデザインに至るまで、Figmaをメインのデザインツールとして活用しています。ですが、プロジェクト内の複雑なユーザーフローを、ノンデザイナー（エンジニアや事業部門など）へわかりやすく伝えることに苦戦していました。

そこで、抱えていた課題を解決するために、デザインチームのNinoは、複雑なフローをシンプルに表現するための新しい図解術を開発しました。この記事では、彼の名前と「Node」を組み合わせて名づけられた「Ninode」の効果的な活用方法や、Ninode開発を通じて学んだことを本人に聞きました。

フローチャートの「弱点」を解消した図

まず、Ninodeとはどのような図か教えてください

Ninodeは、複雑なユーザーフローを設計する際に発生する、多くの意思決定ポイント（例：ユーザーがはい／いいえを選択する場面）を管理するための図解です。

Ninodeを使うと、2～5つの選択肢をわかりやすくまとめられるため、複雑なユーザーフローも明確化できます。具体的には、適切な見出しや色・大きさによるジャンル分けなどによって、図を見る人が無意識のうちに構造を理解できるように工夫しています。

上の図は、一般的に使われているフローチャートの例です。詳細な情報を得るためには、図を行ったり来たりして探し回る必要があり、使い勝手は良くありません。

ですが、Ninodeを使えば、図解に必要な空間を減らしつつ、フロー同士のつながりや段階を明確にできます。フローチャートは1つの思考につき2つの選択肢しか示せませんが、Ninodeなら3つ以上の選択肢をシンプルに可視化できます。

Ninodeを開発する前の課題を教えてください

一般的に、ユーザーフローを可視化する際はフローチャートを活用することが多いです。ただ、前で述べたようにフローチャートは入り組んだフローの設計には弱く、複雑なユーザーフローを設計することの多いPayPayでは分かりにくい図解になりがちでした。実際、PayPayアプリ起動後のユーザー体験をフローチャート化すると、以下のような複雑さになってしまいます。

デザイナーの立場で、どうやってNinodeを開発したのですか？

プロダクトデザイナーになる前は、プロダクトマネージャー（PdM）をしていたため、私はもともとフローチャートに強く、弱点もよくわかっていました。後に、FigJamのコンポーネント機能を知り「この機能を活用すれば、フローチャートの弱点を解消できるのでは？」と好奇心に火がつき、プロトタイプを試作してみたことがきっかけです。

数年前に所属していた前の会社では、シーケンス図やマーメイド図などを取り入れたNinodeの初期プロトタイプのアイデアを、開発者にテストしてもらっていました。このベータテストではポジティブな反応が得られるとともに、開発者に説明する時間が減り、部門の作業効率化につながりました。

その後、私がデザインチームのSang-eunさんにNinodeをシェアしたところ、彼女がそれをチーム全体に共有してくれたことで、PayPayでもNinodeの開発を本格化していきました。時間をかけて他のデザイナーからフィードバックを収集し、2024年5月に正式な形でNinodeをチームに発表しました。

PayPay社員以外でもNinodeは活用できる

Ninodeはどのように使えばいいですか？

Ninodeを使う場合、「核となるノード」を設定し、各プロセスで共通している要素を探したうえでフローを組み立てます。例えば、PayPayへのログインプロセスでは、核となるノードは「PayPayへのログイン」です。そしてログインする前には、ユーザーID・パスワード・ワンタイムパスワード利用が可能かの「確認プロセス」があります。1つのフローにまとめると、以下のように一連のプロセスが整理できます。

自分の会社でもNinodeを使いたい場合、どうすれば良いですか？

Ninodeは特別な図ではありません。ある程度Figmaを使える方なら誰でも試すことができるので、まずは自分から率先して使ってみることをお勧めします。Ninodeが得意とする複雑なプロジェクトで導入できるほか、フローチャートの代わりとしてシンプルなプロジェクトで使うこともできます。

Ninodeを使って業務が効率化されている姿を周囲が見たら、各自の業務に取り入れてみようと感じるかもしれません。実際、私がPayPayでNinodeのことをシェアして以降、何人かのデザイナーが仕事にNinodeを使い始めているのを見ました。PayPayのデザイナーは業務効率化のためのアイデアを積極的に取り入れてくれるので、開発者のモチベーションが上がりやすい環境があります。

誰もが使いやすい図を目指して

Ninode導入の効果は感じますか？

冒頭でも触れましたが、デザイナーとノンデザイナーの両面に好影響がありました。まず、デザイナー目線では、デザインに関する質問に答える時間が減りました。誰にとってもわかりやすい図のおかげで、何度も同じ質問に回答するのも回避できています。今では空いた時間で別のクリエイティブな作業ができるようになりました。また、デザインファイルの整理にも役立ちました。実際、過去には他のデザイナーのFigmaを整理して、画面数を200程度から80以下に減らしたこともあります。

ノンデザイナーに関して言うと、まず開発者がプロダクトの仕様や設計を正確に理解するのに活用してくれています。また、プロジェクトマネージャー（PjM）視点ではデザイナーとデザインを議論する際、既存のユーザーフロー把握に役立てることができますし、品質保証（QA）部門がデザインの品質をチェックする際にも使い勝手が良いです。

最後に、今後Ninodeが目指す姿を教えてください！

Ninodeはまだ万人向けの図ではないと思っています。私にとっては使いやすいですが、開発を通じてほかのデザイナーからフィードバックを集めてみると、多くの人が私とはまったく違う考え方をしていることが分かりました。例えば、私にとっては設計しやすいNinodeのフローも、ほかのデザイナーからは「どうやって設計したらいいか、よくわからない」と言われてしまうことがありました。

ですが、実力あるデザイナーからNinodeにフィードバックをもらえる環境には感謝しています。自分では気づかないNinodeの欠点を指摘してくれるおかげで、誰もが使いやすい図にするための改善点が見えてくるからです。

改善の第一歩として、他のデザイナーたちがNinodeをスムーズに使い始められるように、Ninodeの高品質なガイドラインを整備していきます。まずはガイドラインの作り方から学ぶ必要はありますが、デザインチームへの貢献は私のミッションですし、学びを通じて自分が成長することにもワクワクしています。

※募集状況、社員の所属等は取材当時のものです。