素材の制作から仕組みの構築へ：スケーラブルなイラストレーションシステムへの挑戦

PayPayを起点として銀行、カード、証券などサービスが広がる中で、プロダクトチームを跨いだ一貫性の重要性がさらに高まっています。本記事では、単なる素材制作に留まらず、FigmaプラグインやAIを活用したスケール可能なデザインシステム構築などの「Illustration Working Group」の取り組みや、モダンなDesignOpsを支える舞台裏を紹介します。

PayPayにおいて、イラストレーションはプロダクトに親しみやすさやわかりやすさをもたらす重要な要素です。複雑なアイデアを直感的に伝え、ユーザーをスムーズな体験へと導きます。PayPayの成長に伴い、オンボーディングやエンプティステート、ガイダンス、カードサービスなど、イラストを必要とするチームやユースケースはますます増加しています。同時に、「どうすればデザイナーがイラストを作成しやすくし、かつプロダクト全体で一貫した体験を維持できるか」という課題が浮き彫りになりました。そこで立ち上がったのが、「Illustration Working Group」です。

Illustration Working Groupは、PayPayデザインチーム内のクロスファンクショナルな取り組みです。異なるプロダクトチームから集まったメンバーが、「イラスト制作を一貫性・再利用性・拡張性（スケーラビリティ）を備えたものにする」という目標に向かって活動しています。私たちの役割は、単に他のデザイナーのためにイラストを描くことではなく、イラスト制作を取り巻く仕組みそのものの構築です。共有ライブラリやガイドライン、テンプレート、レビュープロセスの整備に加え、デザイナーがゼロから作ることなく自信を持って制作できるツール作りを行っています。

基盤の標準化：ローカルファイルから共有Figmaライブラリへ

私たちが向き合った課題の1つは、イラスト素材が各チームで独立して作成・管理されていたことでした。デザイナーが素材をローカルに保存していたり、似たようなイラストが重複して作成されていたりと、何が存在するのかを把握できる場所がありませんでした。さらに、明確な共通ガイドラインがないため、色やスタイル、パターン、構図にばらつきが生じていました。

そこで、イラスト素材を1つのFigmaライブラリに集約することから始めました。同じ場所で確認できるようにすることで、何がうまく機能していて、何がアップデートが必要なのか、そしてどのパターンを共通のビジュアル基盤として採用できるのかを評価できるようになりました。また、色、形状、パターン、構図、パースペクティブ、オブジェクトのスタイル、ディテールレベルなど、主要な要素を定義したイラストレーションガイドラインを策定しました。例えば、人物イラストについては、ある機能向けにキャラクターを作成した場合、PayPayの同じビジュアルシステムの一部であると直感的に感じられるようなアプローチを開発しました。

同時に、一貫性を保つことはすべてのイラストを全く同じ見た目にすることではありません。新たにデザインを作成する前に、そのイラストの目的、ユーザーのニーズ、そして何を伝えるべきかを考えます。もし同様のアイデアを伝えることができるイラストがあれば、ゼロから作り直すのではなく、既存のものを再利用したり、調整したりすることを推奨しています。

新規デザイン作成が必要な場合にも対応できるよう、テンプレートも用意しました。キャンバスサイズ、カラーパレット、レイヤー構造、構図、再利用可能な要素などの共通の出発点を提供することで、デザイナーはファイルの設定に時間をかけることなく、アイデアを表現することにより多くの時間を割けるようになります。このように、ライブラリ、ガイドライン、テンプレートが私たちの共通基盤となっています。ワークフローは、まず既存のものがないかを確認し、可能であれば再利用・調整、どうしても必要な場合は共有のビジュアル原則に従って新規作成するという非常に明確なものになりました。そして完成したイラストはライブラリの一部となり、その後同様の課題に直面するデザイナーの手助けにもなります。

AIによるスケール：カスタムFigmaプラグインの構築

基盤を整えるにつれ、このワークフローの中で、デザイナーが手作業で行う必要がまだある部分はどこだろうか？といった疑問が浮かび上がってきました。イラスト制作には、創造的な判断が必要なタスクもあれば、素材の検索や共通要素の組み立て、ルールに沿っているかのチェックといった、繰り返し発生する作業もあります。こうした重複する課題こそが、AIや自動化を活用すべき領域でした。

AI活用に対する私たちのスタンス

私たちが目指したのは、AIに最終デザインを生成させることではなく、アイデア出しやプロトタイピングのパートナーとしての活用することです。通常、エンジニアリングのサポートなしでFigmaプラグインを構築するには高いハードルがありますが、LLM（生成AI）をコード生成やアイデアの検証ツールに活用することで、デザイナー自身が短期間で実用的なツールのプロトタイプを作成できるようになりました。

このプロセスは通常、デザイン上の課題から始まります。「デザイナーはどこで不必要な時間を費やしているのか？」「どこに繰り返しの手作業があるのか？」「システムでサポートできる決定はどれか？人による判断が必要なのはどれか？」私たちはまずこのように問いかけ、そして検証を行います。

AIは、大まかなアイデアから、実際にワークフローでテストできる具体的な形（コードやツール）へと素早く移行する助けとなりますが、課題定義、ビジュアルルール、期待される挙動、そして成果物が有益かどうかを判断するのは、あくまでデザイナーです。このアプローチから、次に紹介する2つのFigmaプラグインが生まれました。

Illustration Inspector

私たちのガイドラインには明確なルールがあります。例えば、承認されたカラーパレットの使用や、フラットなスタイルに合わないストローク、グラデーション、歪みなどの処理を避けるといったようなものです。難しいルールではありませんが、1つひとつ確認することに負荷がかかっていました。

イラストをレビューするたびに、オブジェクトを拡大して色を比較し、何か見落としがないかを手作業で確認するのは、一貫性を保つためには不可欠な作業ですが、反復的なものです。そこで、これらのガイドラインをワンクリックで確認できるようにするFigmaプラグイン「Illustration Inspector」を構築しました。

AI（コード生成・開発支援）を活用することで、エンジニアの手を借りずとも、課題が鮮明なうちにデザイナー主導でツールのプロトタイプを作成し、構築することができました。アイデアをいつか自動化できたらいいという希望で終わらせず、ルールを実用的なデザインツールに落とし込む方法を素早く試すことに繋がりました。最も大きな変化は、単なる技術的な面だけではありません。チェックが簡単になったことで、ガイドラインは「忘れないように開くべきドキュメント」から「ワークフローの一部」へと昇華しました。デザイナーにとってサポーター的な存在になりました。

Illustration Builder

制作プロセスの初期段階で、もう1つ課題がありました。新しい画面や機能のためにイラストが必要なとき、デザイナーはエクスペリエンスの目的を伝えるために、どのビジュアル要素を使うべきか迷うことがあります。適切な素材が見つからないと、デザイナーは古いイラストを再利用したり、ライブラリ外を探したり、あるいはゼロからデザインを作成したりしていました。どの選択肢もプロジェクトを前進させる可能性はありますが、同時に一貫性を損なうリスクも高まります。私たちは、ライブラリによって、よりデザインしやすくできないかと考え始めました。そこで開発されたのが、ライブラリから標準化されたイラスト素材を直接探し、組み立てることができるFigmaプラグイン「Illustration Builder」です。

ライブラリを完成した画像のコレクションとしてではなく、「再利用可能なパーツによる柔軟なシステム」として捉えることで、デザイナーはすでにビジュアル基準を満たしている要素をベースに、ユースケースに応じてパーツを組み合わせることができるようになりました。また、意図するユースケースに合わせてテンプレートサイズを標準化したことで、結果として生まれるイラストも、PayPayのプロダクト全体でより一貫したものになりました。

InspectorとBuilder両方のプラグインに共通するのは、自動化はデザイナーから意思決定のプロセスを奪うことなく、不必要な労力を取り除くべきだというスタンスです。AIは私たちがシステムをより速く探索・構築するのを助けますが、コンテキスト、コミュニケーション、ビジュアルの判断、そして最終的にそのソリューションがユーザーエクスペリエンスを向上させるかどうかの決定責任は、常にデザイナーが持ち続けます。

日常の仕事を、より良いシステムへ：継続的な改善

すべての改善がプラグインや大規模なプロジェクトとして始まるわけではありません。デザイナーの仕事は、プロダクトのために新しいイラストが必要になったり、既存の素材へのフィードバックを求めたり、ライブラリがまだカバーしていないユースケースに出くわしたりするデザイン課題から始まります。

何かを新しく作る前に、まず既存の素材で解決できないかを考えます。もし難しければ、既存のコンポーネントを調整できるか、あるいはそのリクエストがライブラリに加えるべき再利用可能なパターンではないかを検討します。レビュープロセスは、非同期でのテキストコミュニケーションと、定期的なIllustration Working Groupのミーティングの両方で行われます。

デザイナーは、ターゲット画面や素材サイズ、意図する用途、懸念点などの文脈を添えて、専用のSlackチャンネルへ共有します。これにより、色や素材の使い方、構図、ガイドラインへの適合性などをスムーズにレビューできます。より複雑な問題は、定例のミーティングで話し合われます。議論は「このグラデーションは適切か？」「カードの表現はどちらを使うべきか？」「この色は警告状態と誤認されないか？」といった非常に具体的な内容から始まります。しかし、私たちはその場限りの回答で終わらせないようにしています。

同じ課題が他のプロジェクトでも発生する可能性がある場合、私たちはそこでの意思決定を、いかに再利用可能な知識に変えられるかを考えます。頻繁にリクエストされるイラストはライブラリコンポーネントになり、繰り返し指摘されるレビューコメントはガイドラインの一部となり、リクエストが増えれば、より構造化された運用フローが必要になるかもしれません。反復的な制作作業は、自動化のチャンスになります。

「同じ課題を、二度と繰り返さない」というのが、私たちの活動の核となる原則です。日々の運用が継続的にシステムへとフィードバックされることで、ライブラリ、ドキュメント、プロセス、そしてツールは時間とともに強固になっていきます。

エコシステムの拡大：複数チームでの展開

複数のプロダクトに跨ってサービスが拡大する中で、全体を通したイラストの一貫性がより一層重要になっています。

例えば、PayPayカードやPayPay銀行にはそれぞれのチームとイラストのニーズがあり、マーケティングチームもまた異なる文脈でビジュアルコミュニケーションを制作しています。各チームが自律的に活動する柔軟性は必要ですが、共有されたビジュアル基盤を持つことは、PayPayのエコシステム全体を1つのつながりとして感じさせるために役立ちます。

私たちはイラストレーションガイドラインをチームを跨いでアクセス可能にし、異なる組織のデザイナーがイラストを制作する場合でも、同じ色やパターン、原則、利用可能な素材を参照できるようにしています。コラボレーションは、共通のコミュニケーションチャネル、ワークショップ、ディスカッション、知識共有セッションを通じても行われます。

なぜ特定の意思決定がなされたのかを理解し、新しいユースケースについて議論し、システムを進化させるべき場所を特定するには、ドキュメントだけでは足りません。対話の場が不可欠です。Working Groupですべてのイラストの決定を一括管理するのではなく、私たちの目標は、各チームが自律的に適切な判断を下せるような共通理解を十分に醸成することにあります。

今後の展望：DesignOpsのさらなる進化

Illustration Working Groupの活動は、「一貫性を保ちながら、いかにイラスト制作を容易にするか」という問いから始まりました。時が経つにつれ、その問いは個々の素材作成という枠を大きく超えるものとなりました。私たちはイラストレーションを1つのエコシステムとして捉えています。共有ライブラリ、ガイドライン、テンプレート、レビュープロセス、再利用可能なコンポーネント、コラボレーションのプラクティス、そしてデザイナーのワークフローを直接サポートするツール。すべてが、デザイナーの活動を支えています。

日々のイラスト業務において、私たちの活動は「迷わず始められる場所がある」ことにつながっています。ファイル間を検索し回ったり、ゼロからイラストを組み立てたり、制作の方向性に頭を悩ませたりする代わりに、デザイナーは既存の素材や共有されている原則、そして次のステップを導いてくれるツールを参照できるようになりました。レビューにおいても、基本的なルールのチェックを繰り返すのではなく、文脈やメッセージ、そして体験の質に集中できるようになっています。

AIは、この進化にさらなる興味深い可能性をもたらしています。そしてAIは、デザイナーがアイデアをプロトタイプし、自らが直面する課題に対するソリューションを構築するための新しい手段を提供してくれます。私たちは現在、AIがどこで最も有用か、どこで人間の判断が最も重要になるか、そしてこれらのツールがどのように責任あるデザインプロセスに適合すべきかを学んでいる最中です。そうした試行錯誤自体が、私たちの活動の一部です。

また、これは私たちが奨励したいデザインのマインドセットも反映しています。私たちは、なぜ問題が繰り返されるのかを問い、目先の成果物の先を見据え、実験を厭わず、学びを共有し、日々の摩擦を他者のための再利用可能な価値へと変換できるデザイナーを大切にしています。

最終的に、私たちの目標は、デザイナーをIllustration Working Groupに依存させることではなく、その逆です。より多くのデザイナーが「どこから始めればよいか」を知り、PayPayイラストレーションの背後にあるビジュアル原則を理解し、既存のものを再利用し、必要なときには自信を持って新しいものを生み出すためのツールを手にしている、そんな環境を作りたいと考えています。

システムが強固になればなるほど、デザイナーは判断力や創造性を真に必要とする意思決定に多くの時間を割くことができます。PayPay全体のイラストレーションが、1つのつながった体験の一部として感じられるようになるはずです。