はじめに

マネジャー アクセンチュア ソング、ビジュアルデザイン担当の佐藤薫です。この記事では、3年前から参画している、明治安田生命保険相互会社（以下明治安田と表記）とのデザインシステム構築プロジェクトについて、その取り組みの流れと成果を紹介します。

デザインシステムの概念は昔から存在していましたが、特に過去10年でGoogle Material Designなどの大企業がシステムを構築・公開し、一般に広がってきました。最近では、日本でもデザインシステム導入の動きが見られるようになっていますが、私たちがこのプロジェクトを始めた当時、日本にはあまり事例がありませんでした。それでも、アクセンチュアには海外の経験者が多く、彼らの知見を取り入れながら進めることができたのは大きな助けでした。

一般的に「コンポーネントライブラリ＝デザインシステム」と認識されていることが多いですが、実際にはコンポーネントライブラリはデザインシステムの一部に過ぎません。デザインシステムとは、ガバナンス、運用体制、仕組みなども包括的に含むフレームワークであり、これにより一貫性のあるユーザー体験や、効率的なデザインと開発プロセスを機能的に実現することがゴールです。その結果、ブランドの価値向上に貢献し、ユーザーの信頼性と満足度の向上へつながることはもちろんのこと、デザインシステムがツールとなりチーム間の協力強化、創造力の向上やデザインの文化形成においても重要な役割を果たします。

私たちは、本プロジェクトにて構築した明治安田デザインシステムを「Cuna」と名づけました。Cunaはスペイン語で「ゆりかご」という意味で、「みんなで育てていく」、「一人一人がチャレンジしていく」、「たまには羽を休めに帰る」という意味が込められています。アクセンチュアは、2021年9月から本取り組みを支援し、「MYほけんページ」のリデザインを通じてデザインシステムを構築してきました。

この記事は前半と後半に分け、私たちがどのようにCunaを構築し、発展させてきたのかを対談としてお伝えします。

前半：デザインシステムのスコーピングとディレクションから始まり、成熟度と役割の設定、そして最初の基盤を整える「種まき」のフェーズについて説明します。具体的には、最初にプロダクトの選定やコンポーネントの種類の把握を行い、ユーザーインタビューやヒューリスティック分析を通じてUIディレクションを策定していくプロセスを紹介します。その後、デザインシステムの目標設定やメンバーの役割定義、ツールの選定、そしてドキュメンテーションやトライアルを通じた実践的な取り組みをまとめます。

後半：「成長」フェーズであるデザインシステムのガバナンスとマネジメントに焦点を当て、具体的なマインドセットの設定やコミュニケーションの重要性について掘り下げます。さらに、定期的に行われるカウンシル会やデザインシステムにかかる会議の役割についても言及します。最後に、デザインシステムのスケーリングやメンテナンスに取り組む中で、ホワイトラベリングや紙媒体への展開、効果検証をどのように進めていくかについて触れ、デザインシステムの今後の展望をお伝えします。

私たちの経験が、これからデザインシステムを構築する方々にとって参考になることを願っています。

Level. 0土壌づくり：デザインシステムを成功させるための基盤を整える

【※ 略称表記】ACN：アクセンチュア　/　MY：明治安田

ACN 佐藤: スコーピングとディレクションについては、最初にデザインシステムの核となるプロダクトの選定から始めました。デザインシステムは小さく始め、時間をかけて育てていくことが重要です。明治安田には3つの主要ターゲット（個人保険のお客様、企業保険のお客様、従業員）があります。それらに応じたアプローチを取る必要がありましたが、具体的にどうアプローチしましたか？

ACN 山口: プロジェクトは2021年9月頃から始まり、ビジネス部門、情報システム部門、デジタル部門など６部門から部長とグループマネジャー（以下GMと表記）が参加し、デザインシステムの重要性を説明し、理解を得るところからスタートしました。デザインシステムが単なるプロダクトではなく、将来的な資産となり得ることを伝えたことが、評価につながったと思います。当初、デザインシステムの目標が曖昧で方向性が定まっていないと感じていましたが、10年、20年先を見据えた基盤を構築することを目指しました。お客様だけでなく、営業職員や内勤の職員にも価値を提供する包括的なシステムを目指しました。

ACN 佐藤: デザインの重要性は認識されつつありましたが、進め方についてはまだ漠然としていました。スタートラインとスコープを決めた後、デザイン作業に入り、様々なプロダクトを分析しコンポーネントの種類を把握しましたよね。デザインシステムの構築に臨む意気込みはどうでしたか？

ACN 山田: ちょうどその時期、GoogleのMaterial DesignやAppleのHuman Interface Guidelinesが話題となり、多くの企業でデザインシステムが導入され始めていました。私たちもその流れに乗り、基礎部分を担当できることに非常にワクワクしていました。また、デザインシステムはデジタル媒体だけでなく、紙媒体にも展開する大きな目標があったので、その発展性にやりがいを感じていました。

ACN佐藤:ユーザーインタビューやヒューリスティック分析から、デザイン原則を作成しましたね。デザインシステムの初期段階で特に重要だと感じたことはありますか？

ACN 山田: 一番重要だったのは、最初に作ったビジュアルアイデンティティを維持しながら、汎用的なコンポーネントを一貫して作ることです。デザインシステムを1から構築する中で、他社の事例も参考にしつつ、私たちはまずたたき台を作り、必要なパターンやフィードバックを取り入れながら進めていくことを重視しました。ユーザーが使いやすいシステムを目指し、柔軟な発想で取り組むことが鍵だったと思います。

ACN 佐藤: 山本さんは今回のプロジェクトで初めてデザインに深く関わることになったと思いますが、このプロジェクトが開始した当時について教えてください。

MY 山本: おっしゃる通り、私はこれまでデザインとは無縁の仕事をしていました。普段はお客様との接点も少なく、デザインに対する意識もあまり高くありませんでした。そのため、2021年度はデザインに取り組むことに対して少し不安もあり、プロジェクトに入り込むよりも、横目で見ているような位置づけで携わっていました。2022年4月からは、私も担当としてより深く関わるようになり、特にサービスをチームで作り上げる取り組みが非常に重要だと学びました。ユーザーインタビューやフィードバックを通じて、想定とは違う意見が出てくることもあり、そういった声を拾い上げることがこのプロジェクトを進める上での大きなポイントだったと感じています。

ACN 佐藤: 私たちがメインで使っているFigmaについてですが、最初に導入した際にどのようなメリットを感じましたか？また、チームではどのように使われているのでしょうか？

MY 山本: Figmaの導入は大きな変化でした。特に担当者会議では、リアルタイムでデザインにコメントをし、フィードバックをすぐに反映できる点が非常に便利でした。ビジネスサイドやシステム側からも、すぐにデザインの質問や修正ができると好評でした。一方で、全社的にどのように活用していくかはまだ調整が必要です。全体として、より使いやすい形に改善していく必要があると考えています。

ACN 佐藤: 他の会社では多くのツールを組み合わせて使うことが多いですが、それぞれに得手不得手があるため、一つのツールを使う方がコミュニケーションもスムーズになります。私たちもドキュメンテーションや作業を一つのツールで管理したことで、作業の重複やコミュニケーションのズレが少なくなり、結果的に非常に良い成果を得られました。原さんはシステム開発にデザインシステムを導入するため、Storybookを利用しパーツを構築いただきましたが、導入初期はどのように感じていましたか？

MY 原: 最初は、システム開発にデザインシステムを適用するということがあまり理解されず、このツールがどのように使われるのか見えづらいところもありました。しかし、実際に使っていく中で、次第に「自分たちで使ってみたい」という声が増え、手応えを感じるようになりました。

ACN 佐藤: その変化はいつ頃から感じられましたか？

MY 原: 昨年あたりからですね。最初はシステム向けデザインシステムの品質も悪く使い勝手が悪かったですが、こまめに改善を重ね、使いやすさが向上し利用のすそ野も広がることで認知度も上がりました。他部門や関連のない部門からも注目されるようになり、デザインシステムを活用しようという姿勢が見られるようになりました。上層部も「これは有効だ」と評価してくれています。

MY 山本: 確かに、デザインシステム導入後、マネジメント全体にも広がりが出てきました。手順書を作成したことで、システムに詳しくない人たちからも「この手順書を見てデザインシステムを使いたいのですが、どうすればいいですか？」という質問が増え、だんだん浸透してきたと感じています。

ACN 佐藤: 関係者がイメージしやすいように、デザインシステムメンバーの役割定義も重要ですよね。その際に、何か課題はありましたか？

ACN 山口: はい、ありました。「明治安田デザインシステム、Cunaには専任の担当が必要だ」ということは明確だったのですが、その重要性を説明することが難しかったです。デザインシステムは、皆さんの業務を支えるもので、直接何かを生み出すわけではないため、一部の人にはコストセンターのように見えてしまったこともありました。一方で、専任の担当者を置かないと単なるサポート業務のように感じられ、前向きに取り組むのが難しくなってしまいます。デザインシステムやデザインマネジメントの価値をしっかり伝え、専任の役割を明確にすることがとても重要でした。そして、デザイナーやエンジニア、ビジネスサイドの皆さんに「一緒に育てていくもの」という意識を持ってもらう必要がありました。

Level. 1 種まき：初期構築を行い、最初の要素を導入して成長させる準備をする

ACN 佐藤: 役割の明確化と同時に、フィードバックを反映させる仕組みを作ることも重要でした。最初は手探りでしたが、やりながら少しずつ進め方が見えてきましたよね。

ACN 山田: はい、最初はプロダクトを進めながらDSのパーツも並行して作っていましたが、専任の担当者ができてからは、デザインシステムがしっかり回るようになりました。特に佐藤さんが指揮を取ってくれたおかげで、専任の担当者を立てることの重要性を強く感じました。

ACN 佐藤: パーツを専任の担当者が管理するようになってから、パーツの整備もスムーズに進みましたよね。コンポーネントを作成する際、特に注意した点や「これがうまくいった」と思えることはありましたか？

ACN 山田: Figmaの大きなアップデートに対応するために、パーツを作り直さなければならなかったことがありました。デザインシステムでのパーツ管理において、各プロダクトに散在している要素を整理するのは非常に重要でした。何が足りないのかを洗い出し、新しいパーツを作りつつ、重複したパーツを統合するかどうかを判断する監査プロセスが重要だったと思います。

ACN 佐藤: 汎用的なパーツをどう作るかが最初から課題でした。山田さんがスプレッドシートでリストを整理してくれたことで、進めやすくなりましたよね。

ACN 山田: そうですね。コンポーネントを一度作り、ユーザーに試してもらい、フィードバックを受けて修正するという流れはとても大事でした。ユーザーの意見を反映して調整することが、システムの成功に繋がったと思います。

ACN 佐藤: ドキュメンテーションが整ってから１年以上経ち、だいぶ落ち着きました。日々改善のためアップデート内容は、毎週DSチームで議論していますが、メンテナンスやアップデートを行う際に、何か気をつけていたことはありますか？

ACN 山田: そうですね。原さんたちフロントエンドのStorybookチームが全体をまとめてくれたおかげで、私たちが「些細な修正」と思っていたものが、実は大きな影響を与えることがあると気づかされました。例えば、タイミングを少しずらしただけで、システム全体に影響が出ることがありました。その経験から、「どんな小さな変更でもしっかり伝える必要がある」という意識が強まりました。また、開発メンバーが異なるチームで、作業者にルールを正確に伝えるためにドキュメンテーションを別の視点から書き分けることに気をつけることが重要だと実感しました。

MY 原: そうですね、特に、弊社はIE対応も必要だったため、他のブラウザやOSに加えて、それぞれの仕様に合わせるのが非常に難しかったです。パーツの組み合わせや、実際に画面に載せたときにうまくいかないことも多く、ただパーツを作るだけでなく、その先の適用まで考慮しないといけないと学びました。

MY 増田GM: 確かに、取組み初期に多く課題が発生したように思います。1つ修正すると他の部分にも影響が出ることが多く、コミュニケーションの重要性を強く感じました。お互いの理解を深めることが、プロジェクト成功の鍵だったと思います。

MY 原: 特に、Storybookチームには情報システムメンバーの関係者が多かったことが成功に繋がったと思います。

ACN 佐藤: デザイナーの意図をシステム側が理解し、橋渡しをしてくれたことは本当に助かりました。

MY 原: そうですね、システム側とデザイン側の両方に近かったので、それぞれの視点で必要な要素を探しながら進めるのは大変でしたが、楽しかったです。

MY 増田GM: 2022年にこの組織ができたときは、まるでスタートアップ企業のような環境でした。最初は何もない状態からスタートし、「自分たちは何のためにここにいるのか？」という問いを持ちながら進めました。ゼロからのスタートだったからこそ、柔軟に取り組めた部分もありました。

MY 原: それは、GMが「やってみよう」という姿勢を持っていたからできたことです。普通なら断られるような提案も、「まずやってみよう」と言ってもらえたので、進めることができました。

ACN 佐藤: その当時のデザイナーから受け取ったコンポーネントデザインをコードに変換していくStorybookチームの皆さんの様子はどうでしたか？

MY 原: 最初は「やるしかない」という雰囲気で、目の前の作業に集中していました。品質に対して厳しい指摘もありましたが、Storybookを使用しプロトタイプを構築するとユーザー部からは「画面が動いている方がわかりやすい」という意見もありました。それがモチベーションになり、より良いものを提供しようという意識が高まりました。

MY 増田GM: デザインシステムのStorybookチームとしても、1画面を作る大変さを実感しましたが、デザインシステムがあることで効率的に進められると自分たちも感じました。デザインシステムの価値や、迅速に動く必要性を身をもって理解できたことが、プロジェクトの機動力になりました。

ACN 佐藤: デザイナーと一緒に作業する中で、難しかったことはありましたか？

MY 原: デザインの意図がわかりにくいこともありましたが、同じ環境で一緒に働く機会が増えたことで、コミュニケーションや作業がスムーズになりました。

ACN 佐藤: また、ドキュメンテーションやフローを整備し、システムの使い方や手順を明文化して同じ認識を持つことも重要だと感じました。プロジェクトマネジャーやデザイナーが途中から参加し、ファイルの管理や連絡経路などの基本的な情報が整備されたことで、全体がうまく回り始めました。

ACN 山田: 途中から参加するメンバーにとって、オンボーディング資料は非常に有効です。ファイルの場所や連絡経路がドキュメント化されていると助かります。ただし、オンボーディング資料だけでは理解が難しいこともあるので、経験者がナレッジを共有する環境も必要です。

ACN 竹崎: 私は途中からデザインシステムのプロジェクトに参加し、当初はその概念自体を全く理解していませんでした。社内で他の部署やコンサルタントから「デザインシステムがどういったものか」と聞かれても、うまく説明できませんでした。特にデザイナーではないため、デザインシステムを使っていない立場から説明するのが難しかったです。また、ビジネスサイドから「デザインシステムはいつ完成するのか」とよく質問を受けました。進捗をビジネスの観点からどう伝え、システムの価値を理解してもらうかは非常にチャレンジングな部分でした。

MY 増田GM: おっしゃる通り、デザインシステムの進捗や重要性を社内に伝える際、数字や具体的な効果を示すことが非常に重要でした。私たちは、他社の事例や業界の動向を参考にしながら、現在の自社の立ち位置や目標を具体的に見せることで、デザインシステムの重要性を理解してもらいました。それが、長期的にプロジェクトを成功させる鍵でした。

ACN 竹崎: デザインシステムの取り組みが、将来を見据えて重要な決断としてなされていることが大切だと思います。短期的には目に見えにくい部分もありますが、長期的に振り返ると成果が見えてくるので、やり続けるという経営判断は非常に素晴らしいですね。

MY 増田GM: だんだんデザインの効果が求められ、クオリティーへの期待が高まる中で、デザインシステムはそのプレッシャーに応える必要があります。それが、デザインシステムの成熟に伴う次の目標ですね。

ACN 佐藤: デザインシステムの「種まきフェーズ」では、全体の見通しや目的をしっかり持ちながら進めることが重要ですね。特に最初の段階でこれらを明確にすることで、スムーズに進められた部分も多かったと思います。

ACN 山田: 例えば、従業員向けとお客様向けのテーマが異なる用途やニーズを持つことを、最初からもっと強く意識していれば、より柔軟なフレームワークが作れたかもしれません。共通パーツを作ることが最初の目標でしたが、それを異なるユーザーにどう適用するかを事前に深く掘り下げて考えることで、後の修正が楽になった可能性があります。

MY 原: マスターライブラリの柔軟性に関して、後になってから「ここをもっと柔軟に変更しておけばよかった」と気づくことが多いですね。特に、従業員向けのニーズや状況を把握した後に、マスターライブラリの内容が少し硬直的だったと感じる場面がありました。これも、もっと初期段階で柔軟性を考慮した設計思想を取り入れていれば、対応しやすかったかもしれません。

ACN 山田: マスターライブラリ作成の段階で「このデザインが最終的にどのように使われるか」をもう少し深く考えられたら、最初から異なるユーザーやアプリケーションの使用状況に適したパーツやスタイルが設計できたかもしれませんね。ビジネス上のニーズや戦略に適したデザインが求められている中で、柔軟性を持つことでプロジェクトがもっとスムーズに進んだ可能性があります。

ACN 佐藤: 振り返ってみると、やはり大きな課題は「見通しを持ちながら柔軟に進めること」と「異なるユーザー層やニーズに合わせたパーツ設計の柔軟性を初期段階から考慮すること」ですね。これらを乗り越えた今、成熟したデザインシステムをさらに発展させるための次のステップを考える段階に来ています。

デザインシステムが成長し、次にどう進めるかを考えることで、より大きな成果を生み出せるタイミングですね。

後半につづく…。

筆者プロフィール

Instagramアカウントでスタジオの様子をお届けしています。ぜひアカウントに遊びにきてください！: @song.design.japan

アクセンチュア ソングではデザイナーの方の採用も積極的に行っています。
詳細はこちらから：