電通デジタル社内システム「EASI」のデザイン原則を公開します

こんにちは、電通デジタル開発部のフロントエンドエンジニア石原です。前回の記事は「データサイエンティストでもできるサーバーレスなWebフォーム開発 」でした。電通デジタルアドベントカレンダー 15日目は、デザインシステムの話をお届けします。

はじめに − EASI とは

開発部では、デジタル広告の運用業務全般の各種自動化・最適化を実現する「EASI」という社内向けプラットフォームを開発しています。

そのプラットフォームの下に、デジタル広告のプランニング用のプロダクトや過去実績の確認用プロダクトなど、様々なプロダクトが存在しています。
※ここからは各プロダクトを総称して「EASI プロダクト」と呼びます。

EASI プロダクト開発における課題

開発部では、開発パートナー様と一緒に EASI プロダクトの開発しています。あるプロダクトは開発部で設計・実装し、また別のプロダクトは開発パートナー様が設計・実装するという体制で進めています。

プロダクトごとに開発するチームが異なりますので、EASI プロダクト間でのデザインや操作の統一感をどう担保するかが課題となっていました。

課題解決の方向性 − デザインシステム

課題解決のために、EASI チームではデザインシステムを導入することにしました。「Design Systems―デジタルプロダクトのためのデザインシステム実践ガイド」より、デザインシステムの定義を引用します。

デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連付けられたパターンとその実践方法

抽象的な定義ですので、具体例として、一般に公開されているデザインシステムをいくつか紹介します。

・Lightning Design System (Salesforce)
・macOS Design Themes (Apple)
・Material Design (Google)

内容には細かい違いはありますが、どのデザインシステムも「Principles」や「Design Themes」といった「デザイン原則」の項目と、その他詳細なルールの定義から成り立っています。

デザイン原則

デザイン原則は、一般にいくつかの単語から構成されています。先ほどの本から引用すると、デザイン原則の定義は下記です。

デザイン原則とは、チームにとっての優れたデザインの本質を捉えた共用のガイドラインであり、同時に優れたデザインの作成方法に関する指南書です。言い換えれば、何を持ってプロダクトにふさわしいデザインとするのかに関して、組織内で承認された基準です。

こちらもやや抽象的な定義ですが、デザイン原則策定に向けて、具体的にはデジタルプロダクト（私達の場合は EASI プラットフォーム）の本質を表した「単語」を選定していくことになります。

デザイン原則の策定

EASI にふさわしい単語を決めるため、電通デジタルの EASI デザインシステムチーム（5 名）で、複数日に分け、合計数時間の打ち合わせを重ねました。

打ち合わせでやったこと
・EASI の目的を改めてメンバー間で話し合う
・デザイン原則として採用する単語をメンバー内で決める

まずは EASI というプラットフォームのそもそもの目的から、改めてメンバー間で認識合わせを行いました。

miro というツールを使用し、「そもそも EASI とはどのような目的を持つプラットフォームか、ユーザーにとってどのような価値があるものか」というブレインストーミングをしました。

※リモートでのブレインストーミングの様子

※上記は単語をぼかしていますが、例えば「EASY」「わかりやすさ」「信頼感」「属人性の排除」などの単語が挙がっています。

EASI の目的はすでに文章として存在しましたが、改めて EASI の目的についてメンバー間で議論すると、自分たちの中で解釈として落とし込めていない要素があることに気づきます。

例えば「EASI」という単語には「簡単に使える（EASY）」という意味が込められていますが、この「簡単」という単語 1 つとっても、メンバー間で認識が揃っていない状況でした。

電通デジタルの何年目の社員にとっての簡単さなのか、「簡単さ」は「わかりやすさ」と言い換えて良いのか、効率の良さという概念を含むのかなど EASI というプラットフォームがどうあるべきかという観点で何回もブレストと議論が行われました。

十分に目的についての議論を行った後、実際の「デザイン原則」として採用する単語のブレインストーミングと議論をしましたが、EASI の目的について十分議論を尽くした後でしたので、メンバーが同じ方向を向いており自然にメンバー間で原則として採用する単語が決まっていきました。

EASI デザイン原則

ここからは、実際にチームで定めたデザイン原則を紹介します。EASI のデザイン原則は、ここから説明する 4 つの単語から成り立っています。

・明快
・シンプル
・一貫性
・学び

明快

明快とは、 EASI プロダクトおよびプロダクト各要素の目的や存在意義が明確になっていることを示します。

プロダクト構築の過程で、どうしてもプロダクトに不要な要素が紛れ込み、目的や存在意義が曖昧になることがあります。目的の明快さが守られないと、EASI プロダクトがユーザーにとって使いづらい、複雑なプロダクトになってしまいます。

EASI は、ユーザーが容易に理解でき自信を持って扱えるような、目的の「明快」さを第一に目指します。

シンプル

シンプルとは、EASI プロダクトをユーザーが直感的に扱える状態を示します。プロダクトの全ての要素に無駄がなく、ユーザーを悩ませない状態になっていることを示します。

EASI プロダクトを使うユーザーは、簡単に目的を達成できることを望んでいます。デジタル広告業務は本質的に複雑です。デジタル広告のレポート作成 1 つとっても、非常に複雑で煩雑な、間違えやすい作業です。

EASI は、自動化、統合化によってデジタル広告に関する複雑な業務をインテリジェントに解決し、ユーザーが直感的な操作で目的を達成できるような「シンプル」さを常に目指します。

一貫性

一貫性とは、同じ問題に対して常に同じ解決策が用意されており、ユーザーにとって扱いやすい状態になっていることを示します。

ユーザーが EASI プロダクトを使用する時、操作方法や表示に一貫性がないと、操作を間違えてしまったり、情報の認識に多くの時間をかけてしまったりすることがあります。一貫性は、ユーザーが EASI プロダクトを操作する時の楽さ、簡単さに直結します。

EASI は、全てのプロダクトに予測可能で合理的な「一貫性」を付与することで、ユーザーの業務をより簡単にすることを目指します。

学び

学びとは、EASI プロダクトを使用するユーザーが、プロダクトの利用を通してデジタル広告に関する知識を獲得できることを示します。

EASI は、十分な広告知識を持たないようなユーザーがプロのようにアウトプットを出せる状態を目指します。またそれにとどまらず、EASI プロダクトを介して業務を行う中で、デジタル広告業務のプロが持つ思考回路や気づきをユーザーが得られることを目標とします。

EASI はユーザーを、デジタル広告のプロになりたいと願う貴重な人材であると考えます。EASI は、単なる業務効率化ツールを目指すのではなく、プロの考え方や業務の進め方が反映された「学び」あるプロダクトであることを目指します。

おわりに

デザイン原則を定めた事により、実際に開発チームでは「この要素はユーザーにとって明快でないから、もう少しわかりやすくしよう」とか「この要素は別の要素と一貫性がないから、このコンポーネントを使おう」といったように、デザイン原則をもとにした議論が行われていると感じています。

デザインという要素を、原則という土台に基づいて議論できるのは非常に有益だなと思いました。開発パートナー様ともデザインシステムについて相互に話し合ったり提案しあったりする機会を設けており、デザインの一貫性担保に向けた活動をしています。

私たちの開発チームでは今回紹介したデザインシステムに限らず、React などフロントエンドに関する技術や Micro frontends に関して日々研鑽を積んでいます。電通デジタルではフロントエンドエンジニアを絶賛募集中ですので、是非興味あればご応募ください。

デザイン原則の策定について、この記事が皆さんの参考になれば幸いです。

次回の記事は「SQLスクリプト上でのテーブルや共通テーブル式の依存関係を可視化する」です。