「誰もがつかえる」を目指したnoteのデザインシステムの導入とこれから
--- 「デザイナーのための仕組みだと思われないように、本当はデザインシステムという言葉をつかいたくなかった」
デザインシステムと聞くと、デザイナーのための仕組みだと思う人もいるかもしれません。しかし、noteにおけるデザインシステムはその定義とは真逆を目指しています。
そもそもデザインシステムとは、Webサイトやアプリのデザイン原則を示し、開発のパターンやベストプラクティスを組織として体系化した仕組みです。具体的には、スタイルガイド、イラストシステム、フロントエンドの共通コンポーネント整備、表記ガイドラインなど多岐にわたります。
noteでは全社員が理解でき、誰もがつかえるデザインシステムを目標にしています。デザイナーが使用するツールではなく、全社員が同じ意思で進むための目的や指針を言語化した仕組みがデザインシステムなのです。
全社員がデザインに取り組みやすくなるように、2021年8月から始動したnoteのデザインシステムを立ち上げた理由や具体的な取り組みについて、デザイナーの沢登さん、UXエンジニアの臼井さん、イラストレーターのキムさんに話をお聞きしました。
沢登 達也（さわのぼり たつや）
ウェブ制作会社のマークアップエンジニアや、UI・サービスの制作会社を経てnote株式会社に入社。プロダクトデザインに関わりつつ、アクセシビリティやデザイナー採用など、フェーズで動き方を変えているデザイナー。コーヒーとかカレーが好き。note
臼井 優斗（うすい ゆうと）
デザインスタジオでキャリアをスタートさせ、Condé Nastに入社しWIREDやGQなどのウェブメディアのフロントエンドやクリエイティブディレクションに従事。2021年5月にフロントエンドエンジニアとしてnoteに入社し、デザイナーとエンジニアの横断的な課題を解決するため、UXエンジニアに転身。note
金 兌妍（キム テヨン）
新卒でWeb制作会社に入社。Webデザイナー兼イラストレーターとしてWebから広告イラスト、モーショングラフィックス制作など幅広い経験を積む。2020年8月よりnoteにイラストレーター として入社。現在は主にnoteの世界観を表現するためのイラスト制作やイラストシステム開発を担当。note
デザインシステムをつくることは、社員全体の共通認識を言語化する作業
– noteにおけるデザインシステムについて教えてください
臼井さん：デザインシステムの概念やカバーする範囲は企業によって変化しますが、noteにおいては全社員がデザインに取り組みやすくなるシステムだと捉えています。みんなの仕事が少しだけ楽になるような仕組みを僕らはつくっていきたいと思っています。
沢登さん：弊社のデザインシステムは、「ドキュメントがある」「コンポーネントカタログがある」だけではなく、全社員の目的や共通認識が言語化されており、誰でも簡単につかえる仕組みであることだと考えています。
– なぜデザインシステムを通して言語化する必要があるのでしょうか？
沢登さん：会社の規模が大きくなって人数が増えていくことで、noteらしいデザインやnoteらしい言葉遣いなど捉え方が多様化していきます。考えや思想が増えていくことで、共通した意思はどんどんと希薄化していくでしょう。
目標にブレずに向かうためには、全員の意思を固めるための指針が必要です。その指針を言語化するための仕組みがデザインシステムだと考えています。デザインシステムとして目的を言語化しておくことで、デザイン作業を通じて指針自体をつねに見直していくキッカケにもなるからです。
臼井さん：言語化することで課題が共有しやすくなり、課題を解決していくことで理想のnoteに近づいていくイメージですね。
– 現状での具体的な取り組みを教えてください
沢登さん：デザイン原則の定義・検証やデザインカタログの整備、フロントエンドのコンポーネント開発、イラストシステムの構築などを主に進めています。僕自身はデザインシステムチームの取りまとめを行いつつ、デザイナーとしてデザインカタログの整備などの細かい作業も行っています。
臼井さん：デザインシステムを導入するときに、デザイン原則を明確にしてから進めることが多いかもしれません。しかし、僕たちは手を動かしながら原則を決めていくことにしました。作業を進めていくと見えてくることがありますし、目の前にある解決すべき課題に取り組むことに重きを置くことにしたんです。
沢登さん：デザイン原則はデザインのための原則ではなくサービス全体の指針になるため、経営陣に合意をとりつつ慎重に進めています。
臼井さん：僕はUXエンジニアとして、フロントエンドのコンポーネントやCSSの整備を主に進めています。Storybookでアクセシビリティチェックをできるようにしたり、FigmaからデザイントークンやアイコンなどのアセットをCIで自動生成できるようにして、デザインデータとソースコードを連携させたり、開発作業が楽になるような施策も行っています。
キムさん：私が担当しているイラストシステムでは、イラストをシステムやルールに落とし込んで管理ができるようにしています。Adobe Cloudでイラストパーツの管理を行なっており、イラストを切り貼りするだけで、noteらしい画像を簡単につくることができます。今は主にグラフィックデザイナーがイベントのバナー作成などに使用していますが、プロダクトデザイナーとエンジニアがFigmaを使って簡単にイラストをつくれる仕組みを検討中です。
沢登さん：実はイラストシステムの一部はすでにクリエイターさんにも使用してもらっています。プロフィールアイコンが選択できるようになったのがその一環ですね。
デザインシステムをつくりたかったわけではない。社内整備のためにデザインシステムを導入した
– そもそもデザインシステムをチームで取り組むことになったキッカケは？
沢登さん：「デザインをデザイナーだけで抱えることが難しくなってきた」と感じるようになってきたことがキッカケです。体験・言葉・スタイルなどを、誰でも扱えるようにシフトしていく必要性を感じていました。
デザイナーの人数を増やせば問題は一時的に解消するかもしれませんが、本質的な解決にはなりません。人が少ない状態でもワークする体制を考えたときに、デザインシステムを導入して社内の共通言語をつくっていく方が良いだろうという結論になりました。
– 課題を解決するためのツールとしてデザインシステムを導入した？
沢登さん：最初はそうですね。「デザインシステムを構築していく」のではなく「デザインシステムを利用して社内整備を進めていく」というイメージの方が近いかもしれません。デザインシステムと呼んで進めた方がコミュニケーションも取りやすいですし、チームをつくるときに会社からの承認も降りやすいかなと思って（笑）
– 取り組みはどこから始めたのでしょうか？
沢登さん：最初は、デザイナーチームでデザインシステムの方針を決めていきました。ある程度固まったところでデザインシステムに協力してくれるエンジニアを社内で募集したところ、すぐに臼井さんが手をあげてくれましたね。
臼井さん：もともと僕自身がデザインシステムやデザイナーとエンジニアの協業を楽にする仕組みづくりをしたいと思ってnoteに入社したので、ありがたい提案でした。
沢登さん：デザインシステムを立ち上げる前は、フロントエンドのコーディングやスタイリングもデザイナーが担当していました。今は臼井さんがいることで、デザイナー以外がスタイリングに取り組める仕組みが実現しつつあります。現に僕はほとんどコードを書かなくなりました。これだけでもデザインシステムを導入した効果があったと言えますね。
– イラストシステムも最初からデザインシステムと一緒に進めていたのでしょうか？
キムさん：いえ、イラストシステムは私が入社したときからすでに構築を始めていました。そもそも求人内容が「noteのイラスト画風を決めてシステム化していく」ことでした。
沢登さん：デザインシステムもイラストシステムも目指す方向が同じなので、キムさんに声をかけて一緒にやっていくことにしました。どちらも作って終わりではない取り組みであるため、それぞれの観点でアドバイスしあえると良い知見にもなりますし。
キムさん：1人で作業を進めていたので、相談したりアドバイスがもらえたりする環境があるのは良い刺激になっています。
沢登さん：デザインシステムという枠組みで集まるけれど、それぞれが並列に動いて個々でオーナーシップを持って進めている感覚です。それぞれが独立したプロジェクトですが、向かっている目的は同じです。
デザインシステムという言葉をつかいたくなかった。誰もがつかえるものだと浸透させていきたい
– 導入を進めていて課題に感じている部分はありますか？
沢登さん：やるべきことは山ほどあるのですが、一番の課題は社内にデザインシステムをどうやって浸透させていくかだと思っています。最初に話したとおり、デザインシステムは会社全体の指針でもあります。しかし、現状はデザイナーとエンジニアだけで動いてしまっているため、他部署からすれば関係のないものだと思われていても仕方がない状況です。
沢登さん：そもそも個人的にはデザインシステムという言葉をつかいたくないとも思っていました。デザインと名前がついてしまっているため「デザイナーがつかうもの」と先入観を抱きやすいんですよね。「デザインシステムは誰もがつかえるもの」だと社内で浸透させていきたいんです。
– デザインシステムを社内で認知させていくためには何が必要だと思いますか？
沢登さん：「大変なもの」「難しいもの」「関係ないもの」と捉えられてしまうと、システムとしては失敗です。認知されるためには、「つかうと便利」「作業が楽になる」と見て感じてもらえることが重要です。
キムさん：イラストシステムはまだグラフィック制作に関わるデザイナーの人しか利用していません。しかし、いずれはPRチームやディレクターチームなどの人たちにもnoteらしい画像を作れるようにしていく予定です。デザインがわからなくてもバナーが作れるようになれば便利だと実感ができ、デザインシステムへの理解が深まっていくかもしれません。
– なるほど。デザインシステムありきではなく、便利な機能としてつかってもらうことを優先することが大事なんですね
沢登さん：あとは、当事者意識を持ってもらうように実際に作業をしてもらえる環境を作っていくことも大事かなと。会社としてデザインシステムにリソースを100%割ける状態ではないので、メインでやっているタスクに混ぜ込んで一緒に作業してもらえたらなと。施策を動かしながらデザインシステムの観点を混ぜてもらい、少しずつ関われる工夫をしていく予定です。
臼井さん：デザインシステムにはUXライティングの観点も含まれているので、「ヘルプページやSNSの文言をみんなで一緒に考える」などで他部署も巻き込んでいきたいですね。note社員は文章を書くことが好きな方も多いですし、興味ある人もいるんじゃないかなと。
いきなり100点を目指さない。まずは30点をとるところから
– デザインシステムチームとして、今後取り組んでいきたいことはありますか？
臼井さん：コンポーネントライブラリをStorybookなどで活用しつつ育てていきたいですね。また、noteではアクセシビリティにも力を入れているため、コンポーネントの整備と合わせてアクセシビリティ向上に努めていきたいと思っています。
キムさん：noteで創作がしたくなるイラストを作っていきたいと思っています。1人で考えるのは悩ましい部分があるので、社員インタビューやユーザーインタビューを通して、システムに落とし込んでいきたいです。
沢登さん：やりたいことは山ほどありますね。デザインカタログも充実させていきたいし、デザイン原則ももっと詰めていきたい。
臼井さん：単純に人手が足りずにできていないことが多いので、仲間は増やしていきたいです。切実にメンバーを募集しています（笑）
沢登さん：社内にデザインシステムの知見がある人もいるんじゃないかな。リソースの問題で手を上げづらい部分もあると思うのですが、まずは一回僕らに相談してほしいですね。
臼井さん：デザインシステムをつくっていくことは、会社全体のデザインを磨き、理想を見つめ直すことにもつながります。チェックリストやガイドラインによってクオリティや一貫性が担保されたり、パーツを組み合わせるだけでUIや画像をつくることができたり、デザインに安心して誰もが取り組める環境を作っていくことこそがデザインシステムの役割かなと思っています。みんなでつくっていくことで全社員が幸せになれるので、ぜひ協力していただければうれしいです。
沢登さん：デザインシステムに完成はなく、つねにアップデートされるものです。また、つくることが目的ではなく全社員が意識できる・つかえることが目的なので、さまざまなメンバーに関わって欲しいと感じています。興味ある人がいたら声をかけてください。
デザインシステムチームでイベントに出演
note、hey、ANDPADで合同イベントを開催します。デザインシステムを運営する上での苦労や課題などについて、それぞれトークする予定です。興味ある方はぜひご参加よろしくお願いします。
■日時
3/10（木）19:30-21:00
■タイトル
Frontend Talk 〜デザインシステム構築のリアルな裏側〜【hey｜note｜ANDPAD】
▼エンジニアの記事をもっと読みたい方はこちら
▼noteを一緒に作りませんか？
Text by megaya