メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。
この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。
そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。
まず前段のお話として、Amebaという事業について説明させてください。
Ameba事業の概要
Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。
多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
Amebaは2004年からはじまり、2021年9月でAmebaは17周年を迎えました。この記事のテーマであるデザインシステムの話が出てきたのは2年ほど前、つまり15周年のときです。
15年も継続し、成長しているサービスは決して多くはないと思うのですが、これもユーザーの皆様や、サービスに関わる色々な方たちのおかげです。
ただこれだけ長く事業を続けていくと、ずっと成長期というわけにはいかず、停滞する時期が訪れます。またその時々に必要だった技術やデザインが時を経て古くなり、アップデートされないまま残って「負債」と呼ばれるものになっていきました。
Amebaはビジョンとして「100年愛されるメディアを創る」を掲げています。ということは100年続くサービスでなければいけませんし、そのためには時代に合わせたアップデートしないといけません。事業として停滞させず、継続的に成長し続けるためにはとても重要なことです。
こうした考えが15周年の節目で事業的にも見直す機会となり、ブランドをアップデートするというプロジェクトが動きました。
Amebaのブランド戦略
今回のブランドアップデートは直接外に向けてのPRのことを考え始めたのではなく、Amebaの中に向けて「Amebaとは何か？」「Amebaらしさとは何か？」という問いを立てるところからはじまりました。
これまでは「Amebaらしさ」といったものが言語化されず、各々の主観でAmebaをイメージして進んできたといえます。そうするとサービスのことを伝えるのにどう伝えればよいかもわかりませんし、何かひとつを企画するにも「誰に」「どのように」というのが一人ひとりの主観だけで判断してしまうことになります。
ここであらためて事業、チームとして「Amebaらしさ」定めることで、そのたどり着き方はどうあれ目指すもの、伝えるべきメッセージの核はぶれないようにすることを目指しました。
こうしたブランドとしてAmebaらしさを再構築するために、1年近くかけてビジョンやミッション、ブランドコンセプトといった核となる要素を言語化していきました。
そうして次のようなビジョン、ミッション、ブランドコンセプトと、Amebaがどういうサービスであるか、というのを言語化・可視化しました。
「生きたコンテンツをつむぐ」というコンセプトは次のようなイメージです。例えばブログを読んだ方がそれに感銘を受けてコメントを書いたり、あるいは自らブログを書いたりする。またはマンガや占いなどのコンテンツを体験した感想をブログに書いて、それでそのコンテンツを知った人がそのサービスを見に行く…というようなサイクルが人の繋がりやコンテンツの繋がりを紡いでいくような、そうしたイメージです。
他にもブランドパーソナリティやバリューといったものも定義していますが、これらのブランド定義のプロセスについては、デザイナーの武本が過去に登壇したときの資料も参考にしてください。
ブランディングとデザインシステム
ブランドについてはここまで触れた通りですが、それをどのように醸成し、伝えるかというのが次の段階です。LandorのBRAND + ingの考えを元に、「らしさ」を伝える手段としてデザインシステムの取り組みをはじめました。
ここで一度そもそもデザインシステムとは何か？というのをおさらいします。
デザインシステムは、次のような要素で構成されているものを指すことが多いです。
– ブランドやデザイン原則などのドキュメント
– 具体的な表現や振る舞いのためのスタイルガイド
– デザインツールや、実装コードに落とし込まれたコンポーネントライブラリ
ただアウトプットとしてこれらがすべて揃ってはじめてデザインシステムと呼ぶのかは組織によっても違いますが、Amebaの場合はこれらを包括したものを目指しました。
Amebaのデザインシステムの狙い
デザインシステムがもたらす恩恵というのは、コンポーネントライブラリのようなツールに焦点を当てると「印象の一貫性」や「開発効率化」側面が目立ちます。実際にコンポーネントライブラリによるそうした効果は高いと感じますし、デザインシステムの機能として重要です。ただAmebaにおいての一番の動機は「ブランド」です。「Amebaらしさをつくる」ためのものであるには、ただ普遍的な品質が担保されているだけではいけません。
「デザイン」「システム」という言葉から、デザイナーあるいはデザイナーによるデザイン業務や、あるいはエンジニアのための何かと思われることもあります。そうではなく、プロダクトとサービス全体を対象にした「設計」としてのデザインと考え、「体験の一貫性」を効率よく設計するために、職種としてのデザイナー以外にも意味のあるものとしています。
Amebaのデザインシステムは言い換えるならば「Amebaを作るすべての人が、Amebaらしさを伝えるため約束事や、それを手助けするツールやガイドラインが揃ったデザインする仕組み」といえます。
Amebaのデザインシステム、Spindle
デザインシステムの構想を練っていく中で、Ameba全体からの認知や浸透を図るために名称を考えました。そこで閃いたのが「生きたコンテンツをつむぐ」というブランドコンセプトから、そしてAmeba=アメーバという生物と捉えて100年進化しながら続いていくことから、Amebaのデザインシステムを「Spindle（スピンドル）」と名付けました。
Spindleには糸を紡ぐ道具である紡錘という意味と、細胞が核分裂するために必要な構造体である紡錘体の意味を持ちます。他にも色々と良い名称案がありましたが、コンセプトのマッチ具合などからSpindleと決まりました。そのままこのコンセプトからデザインシステム自体のロゴデザイン、シンボル化をしました。
デザインシステムに名前をつける、というのは最重要ではないかもしれませんが、コンセプトを表した名前のようなものはチームのアイデンティティにもなりますし、デザインシステムの浸透にあたっても「デザインシステム」よりもキャッチーな名前にしておくというのは戦略的には良いと感じています。少なくともこうした名前を持ったプロジェクトのようにしてしまうのは、私たちの会社の文化としても適切でした。
Spindleの全貌
前置きが長くなりましたが、ここからSpindleの内容に触れていきます。
Spindleチーム
Spindleは現在は6人のメンバーを中心に現在は運用しています。
全体進行をする私と、ブランド設計をリードしたデザイナーと、システムとデザイン基盤をリードする二人、アクセシビリティスペシャリストのWebのエンジニア、UIデザイナーといった構成です。
中心メンバーとはいっていますが、Spindleに全員がフルコミットをしているというわけではなく、Amebaの各ドメインや担当グループとしての本業務と掛け持ちをしています。
こうした横断的な活動において専任ではなく「掛け持ち」というのは事業優先度などの兼ね合いで活動がおろそかになるというアンチパターンもありますが、むしろ現場にいることで課題やニーズを拾えますし、当人が実感してその解決に取り組むきっかけにもなっています。
Spindleの実体とWebサイト
Spindleの具体的な内容はWebサイトにコンテンツとして構築し、その中でガイドラインやライブラリについてのドキュメントを展開しています。Spindleについて知る、利用するためのハブとしてサイトが存在しています。
ツールについて補足すると、初期の段階からzeroheightを採用してサイトを構築しました。zeroheightはGUIと、Figma等のツールとの連携機能も備わっていため、更新性の保ちやすい点などから採用しました。一方で、日本語の読みづらさや表示の重さなどがやや気がかりとなり、現在はシステムをGatsbyに乗り換えています。
ここからはそのサイトの内容を元に具体的にどういったものをSpindleで定義しているのか説明していきます。
ブランド
Spindleの狙いとしてあるブランドについてのコンテンツがまずはじめにあります。
ここではAmebaらしさの片鱗に触れ、関連するコンテンツを展開しています。この記事の冒頭で触れたブランド形成のプロセスや、この記事では紹介しなかったパーソナリティやバリューなどAmebaの総合的なブランドガイドラインの案内をしています。
原則
デザインシステムにおいて基盤となる考え方、ページでは「約束事」と明記していますが、以後解説するのライブラリの設計基準や、そして実際のプロダクトにおいても基本的にこれらの原則を踏まえてつくれることを目指しています。
デザイン原則は「Amebaらしさの基準」であり、らしさをデザインするために念頭に置いて欲しいメッセージです。これらはプロダクトに対してだけでなく、サービス全体を通して意識したい内容です。ブランドから落とし込んだ内容になっており「ブランドデザイン原則」と言い換えても良いかもしれません。
次にAmebaでとても大事にしている「アクセシビリティ」の項目があります。デザイン原則における「歓迎」と強く紐づくとても大切な指針です。
ここで掲げているのは、誰もがいつでも、迷わず「書く」「読む」「応える」ができる状態を目指す、というものです。100年愛されるメディアとして、若いときに使っていたユーザーが歳を重ねて視力が落ちたとしても、あるいは何かの理由で片手しか使えない、マウスが使えない状況であったとしても…いつでも、誰でも使えるサービスでありたいと考えています。アクセシビリティというと障害者や高齢者向けの、というイメージはまだまだ強いので「使いづらさ」についての解説コンテンツなどもあります。またWCAGに基づいたAmeba Accessibility Guidelinesも独立して存在しています。
あまり他のデザインシステムや関連ドキュメントでは見かけませんが「パフォーマンス」についてもその考え方やガイドラインを設けています。これも「軽快」というデザイン原則に基づきますが、心地よくサービスを利用できるようにするためには大切な要素です。アメブロではパフォーマンスに対する取り組みにも力を入れており、過去のDevelopers blogの記事でも公開しているのでチェックしてみてください。チェックリストでは抑えるべきポイントについて記載し、またGoogleのCore Web Vitalsなどで評価される項目についての解説をしています。
他にはまだ未完成ですが「コンテンツ」についてのガイドラインやツールもあります。これらもブランドとしてのボイスやトーンの定義を元に、そしてプロダクト上での表記ガイドラインなど作成しています。サービス全体で使われる用語定義をし、それらの表記ゆれチェックのためのtextlintの導入をしています。
スタイル
スタイルはAmebaらしさの視覚的表現をまとめています。例えば「カラー」「タイポグラフィ」「アイコン」について展開しています。
「カラー」と「アイコン」の設計については、以前にSpindleのデザインリードである本田が、カラーパレットについての記事、Amebaらしいアイコンについての記事を書いてくれたので、解説についてはそちらを是非みてください。
実装に関するところについても少し触れておきましょう。色については、WebではCSSカスタムプロパティでグローバルに参照できる形にし、後述するコンポーネントのスタイルに使われています。Web以外でもなるべくSingle Source Of Truthの考え方で管理をしたいため、Design Tokenとして現在Figmaから半自動的にJSONを生成し、各プラットフォームに適したフォーマットに変換する仕組みを試験中です。
アイコンについてはFigmaで作成されたアイコンの一覧から、FigmaのAPIを利用して追加・更新をGitHubでPR作成するような運用にしています。
タイポグラフィに関してはブランドフォントであるAmeba Sansをはじめに、その他常用するフォントについての内容が主で、UIに関する内容は現在作成中です。
他には「グラフィック」「イラスト」についても公開予定です。
コンポーネント
コンポーネントについてはボタンやフォームといったプリミティブなUIコンポーネントの定義からはじまっています。コンポーネントにおいてはそのUI構造にAmebaらしさといったものはあまり込められていませんが、スタイルやコンポーネント単位でのアクセシビリティには気を配っています。
ここではコンポーネントごとに導入として使い方や、開発者向けのガイドを中心にしており、デザイナー向けのより詳細な作り方のガイドなどはFigmaで展開するようにしています。
実装に関する点では、コンポーネントはWeb向けにはStorybookでのカタログ化とテストをするようにしています。コンポーネントはGitHubでも公開しておりの各Amebaのプロダクトで利用するには、npmから利用することができます。PublicにすることでOSS的にコントリビュートしてもらえる期待はありますが、単純に組織のシステム内でのPrivateな管理よりも、各開発環境・開発者にとってアクセスしやすいのは大きな利点だと感じています。
さて、この時間だけではすべてを解説することができませんし、ここまでの文章やイメージでの説明では伝わりきらないと思うので、実際に皆さんでこのSpindleのサイトを覗いてみてください。まだ旧システムからの移行が不完全な箇所や、内容が読みづらい箇所などありますが、どういった構成や内容になっているのかをご覧ください。
Spindleを公開する理由
Spindle
https://spindle.ameba.design
このような社内向けドキュメントのようなものを公開して何の得になるのか？と思われるのですが、これにも狙いがあります。
まず海外の一部の企業やWebサービスは、それらのデザインシステムを公開しています。中には政府が公開しているものなどもあり、今回のデザインシステムをつくるにあたっても大いに参考にさせていただきました。
それらの企業などが公開するのには各々理由があると思います。例えばプラットフォームサービスであれば、サードパーティの開発者向けに公開する意味はあります。他にはデザインシステムが存在すること、あるいはそこに現れるその企業のデザインへの姿勢なども見られることから、採用の効果もあるでしょう。
Spindleの場合は、後者の採用目的も含めて「ブランディング」が今回にあるため、公開することに価値があると考えています。他には外部のパートナーに協力いただくような場合にも参照してもらいやすいのも利点といえるでしょう。また副次的ですが一般公開されていることを意識することによってドキュメントの質を維持するという効果もあります。
国内の企業やサービスでも徐々にデザインシステムやコンポーネントライブラリがオープンにされつつありますが、個人的にはこのAmebaの取り組みも多くの方の参考になるところがあれば、という想いもあります。
Spindleのこれから
ここまでの話を聞いている限りは、とても充実したデザインシステムのように聞こえるかもしれませんが、まだまだ内容は不十分です。そして本来の目的である「ブランディング」において、内部への浸透や、プロダクトへの反映といったこともまだはじまったばかりと言えます。
少しずつ前進し、すでにいくつかの実績も出ていますが、終わりはありません。
A Design System isn’t a Project. It’s a Product, Serving Products.
Nathan Curtis – EightShapes
海外の著名なコンサル会社のファウンダーの方の言葉ですが、デザインシステムは終わりのあるプロジェクトではなく、プロダクトのためのプロダクトであると述べています。私たちが普段開発しているプロダクト、サービスのように、何もしなければ朽ちていきますし、事業本体に対しての貢献もできなくなります。
またデザインシステムにはユーザーが存在し、どのように利用されるか、何が必要かを考え続けなければいけません。コミュニティとしての活動もし、貢献する人を増やすのも大切です。幸いにもこの取り組みに前向きな方も多く、Issueをあげたり、あるいは具体的な解決方法についてのドキュメント、あるいは実装を提案するコントリビューターも増えています。
今後は組織としてデザインをスケールさせるために、SpindleはDesignOpsといった大きな枠組みの中で、デザインプロセスや他部署との連携を強化していく軸、デザインをつむぐ仕組みとして成長させていきたいと考えています。
これから新しくアップデートされていくAmebaをよろしくおねがいします。