GMOメディアでは、主要な7つの事業から、OEM (*1) を含む30以上のサービスを展開、運営しています。
さまざまな事業・サービスを運営する中で、いかに効率的に、かつ複数のデザイナーが共通認識を持ちながら開発を進めていけるのかを考え、各事業に最適化させた個別のデザインシステムを設計しています。
GMOメディア全体として1つのデザインシステムを用意するのではなく、複数事業にそれぞれ最適化させたデザインシステムを用意することの意図や効果、各システムの設計についてまとめます。
前述したように、GMOメディアでは、7事業を運営しています。デザイナーも20名以上と増えてきており、各自が別々の事業に入って、事業全体の推進をしています。
そんな中で、2019年ごろからデザインシステムの設計に取り組み始めています。デザインシステムをつくりはじめたタイミングで生まれていた課題は大きく2つありました。
1つは、各サービスのデザインルールが統一されておらず、開発の生産性が下がっていたことです。
例えば、GMOメディアでは、他事業者に対してポイントシステムの導入・運用を支援する「GMOリピータス」というサービスを提供しています。
GMOリピータスでは、読売新聞様の「よみぽランド」をはじめ、2019年当時は5つの媒体を同時に運営していました。
複数サービスの効率的な運用・立ち上げのため、基盤となるデザインパターンを、レイアウト含め定義して実装していました。しかし、これら5媒体のターゲットや狙いはそれぞれ異なっていたため、運営する中で、サービスごとにデザインがカスタマイズされたり、独自の機能が生まれたりしていました。
それぞれのサービスが独自に最適化されること自体は良いのですが、基盤となるデザインに対して想定を超えるカスタマイズを行う必要がある場合に、デザインパターンの定義は崩壊し、コードが煩雑になるなどの負債を生み出してしまっていました。
さらに、この時期はチームのデザイナーの人数が拡大しており、少しずつデザインルールやプロセスが整っていないことによる認識齟齬が問題になり始めていました。
デザイナーの人数が拡大する中で、デザインルールやプロセスに共通認識が持ちづらくなり始めていたことを問題視していた
(* 上記ドキュメント内の「みかさ」とは、当時の開発チームの内部向けの呼称です)
例えば、新しく入社する人が、どの色・フォントを使えばいいか、なぜこのコーディングをしているのか、などを理解することができず、オンボーディングに負担がかかっていました。
また、事業が拡大し担当するサービスが増えたり、担当する事業が変更するタイミングなどで、事業ドメインやデザインの背景をキャッチアップするコストが大きくなっていました。
それらの課題を解決するため、共通認識になるようなルールやガイドラインのようなものが必要だと考え始めます。
そこで、GMOメディアとして初めてデザインシステムの構築を始めました。
最初はGMOリピータスから始まり、それが展開されていって、今ではいくつもの事業にデザインシステムが存在しています。
GMOメディアでのデザインシステムのつくり方の特徴は、大きく3つあります。
GMOメディアでは、複数事業全体をカバーする1つのデザインシステムのようなものはつくっておらず、各事業に特化させた個別のデザインシステムをそれぞれ用意しています。
理由としては、事業ごとにフェーズも対象も領域も異なるため、必要なデザインシステムが違うためです。
新規事業、長期運営しているOEM事業など、それぞれの事業の状況を見て、必要十分な項目を入れ込み、最適化させたシステムを用意するようにしています。
GMOメディアでは、事業を伸ばすための共通認識をつくるためにデザインシステムを作成しています。
なので、デザイナーやエンジニアの開発効率を高める項目(ex. コンポーネントや、カラー、フォントなど) だけでなく、事業全体で目指しているもの、ターゲット像、事業構造など、俯瞰した情報も項目としてまとめられているのが特徴です。
デザイナーのためのデザインシステムではなく、事業に関わる全員のためのデザインシステムをつくることを意識しています。
事業ごとに別々のデザインシステムを運営しているからこそ、他事業部のデザインシステムを見て「ここは取り入れよう」「ここは自分たちには過剰すぎる」など取捨選択をして、引用しながら設計を進められます。
運用方針や、うまくいった例は取り入れつつ、事業に最適な形をそれぞれが模索していくため、運用に乗るまでが非常に早くなっています。
ここからは具体的な各事業のデザインシステムの成り立ちと、設計についてまとめます。
前述したGMOリピータスでは、新規媒体のリリース後、開発が少し落ち着いたタイミングでデザインシステムの設計をはじめました。当時運営している5つの媒体全てのデザインシステムをつくるのは範囲が広すぎるので、まずは2媒体に絞って設計することとします。
あらかじめ、デザイナーの四半期目標にデザインシステムの開発を項目として入れ、15%くらいのリソースを使うことを示していました。
新規媒体のリリース後、開発が少し落ち着いたタイミングでデザインシステムの設計に着手。四半期目標に入れることで、15%くらいのリソースを使うことをあらかじめ明示していた
対象の2媒体のユーザー情報 (ex. デバイス/性別/年齢/流入元/利用時間帯) などを分析していきます。さらに、媒体ごとにサイトを構成するパーツをすべて洗い出しました。
さらに、同じようなユーザーが普段使いそうなサービスのデザインも調査していきます。
(このリサーチ情報も、最終的なデザインシステムの中に以下のようにまとめられています。)
2媒体に絞り、ユーザー情報を分析、さらに媒体ごとにサイトを構成するパーツをすべて洗い出し、類似サービスのデザインも調査した
調査を経て、今のデザインではユーザーにとって最適でないことがわかり始めていたので、理想のデザインにつくり直すことを決めます。デザインシステムも、理想としてのデザインを落とし込んだものでつくり、少しずつ実装にも展開していくように進めていきました。
実際のアウトプットとしては、リサーチ情報や、サービスとしてのポジショニング、ムードボードなどの事業を構成する要素から、具体的なコンポーネントまで網羅的にまとめています。
事業のポジショニングマップなどの項目まで網羅的にまとめたのは、サービスの立ち位置や役割について把握することで、事業としてもデザインとしても方向性が見えてくると考えたからです。
デザイナーがやるか、誰がやるか、などは問題ではないと思いますが、事業全体の共通認識をつくることは重要です。新たに人が入った時にもここまでの学習を受け継ぐことができるように、デザインシステムに落とし込みました。
結果として、媒体ごとのユーザーの属性やデザインのトンマナが明確になり、よりユーザーに寄り添ったデザインを作りやすくなりました。デザイン作成やコーディングの際の迷いが減り、意思決定までのスピードも上がったので、全体としての開発コストも大きく削減することができたと感じています。
また、サービスとしての役割や方向性についても再確認し、全員で共通の認識を持てたことで、今後どうしていったらより良いサービスにしていけるか、成長させることができるか、という議論も自然と生まれるようになりました。
もう一つ、昨年11周年を迎えた『ゲソてん byGMO』(以下、ゲソてん) での例も紹介します。ゲソてんは、当初は自社のブラウザゲームプラットフォーム事業としてはじまり、今ではOEM事業として自社のプラットフォーム運営ノウハウを他社に対しても提供しているサービスです。
ゲソてんも順調に事業として成長する中で、関わるデザイナーの数も1名から4名へと徐々に増えてきていました。
少人数でデザインに取り組んでいるときにも、こういうものがゲソてんのデザインだよね、という共通認識はあったのですが、それは言語化されておらず、新しい機能をつくる時にも指針となるものがありませんでした。
デザイナーをはじめ、事業に関わる人が増えていくことで、今後さらに共通認識を持ちづらくなるだろうと考えて、デザインシステムの設計をはじめました。
事業に関わる人数が増えてくる中で、どのようなデザインがゲソてんらしいのか、新機能をつくる時にどうのような方針で進めるべきか、など共通認識となるものが言語化されていることが必要となっていた
GMOリピータスと違い、ゲソてんではコストのかかるデザインシステムの管理・運用に注力はしない方針だったこと、開発期間もそこまで長くは取れないことを踏まえて、最小限の項目で設計することを決めました。
他社のデザインシステムの調査からはじめ、ゲソてんに最適な最小限の項目を探り、それをデザインシステムに落とし込んでいきます。
ビジョンや行動指針の言語化、デザイン面の共通認識を持てるような項目をまとめた『ROCKET』というデザインシステムを3ヶ月で設計・運用開始しました。
事業としてのビジョンや行動指針からまとめて、事業全体の共通認識をつくる
主にはデザイナーのためのものでありつつ、ゲソてんではサービスビジョンや行動指針もまだ言語化されていなかったので、このタイミングで言語化しチーム全体に共有をするようにしています。
現在、デザイナー主導でサービスのリブランディングを進めておりますが、どこをどう変えていきたいという話がチーム全体に伝えやすく、納得感も生まれやすい状況にあると感じています。それはやはりサービスビジョンが言語化され、チーム全体の「ゲソてんはこうだよね」という軸が明確になったからだと思います。
今回はデザインシステムを例にGMOメディアサービスデザイン部のデザイナーの動き方をまとめました。
私たちが最も意識しているのは、デザイナーという立場を超えて、事業全体に共通認識をつくるような動き方をすることです。
ディレクター、エンジニア、ビジネスメンバーなど、職種によって、もちろん視点は違ってきます。それを会話だけですり合わせるのは難しいことですが、事業目線を持ったデザイナーは視覚化して全員の共通認識をつくることができます。
私たちは「デザイナーとして」という職種の意識をあまりしていないのも特徴かもしれません。
GMOメディアには事業がたくさんあるからこそ、どの事業も少人数で運営しています。ディレクターなどの事業全体をまとめる役割の人が必ずしもいるわけではなく、デザイナーだろうとどの職種だろうと、自分が考えて進めないといけない状況にいる人が多いです。
「これはディレクターの仕事じゃない？」など職種の線引きはあまり考えずに、純粋に「今こういう施策を打ったほうがいいんじゃないか」といった、今自分が関わっているプロダクトや事業を成長させる意識で動いています。
目先のことだけではなく将来を見据えて、今これをやっていないと今後まずい状況になるんじゃないか？という予測をした上で動く。その結果として今回のデザインシステムのようなものが生まれていきます。
事業を推進することに当たり前のように責任を持てる、GMOメディアのサービスデザイン部で、より良い取り組みをさらに増やしていこうと思います。