「デザイナー以外にも、もっと血肉として使ってもらいたい」　SmartHRにおける、デザインシステムの理想と課題

SmartHRにおけるコミュニケーションデザイナーの関わり方

司会者：ではSmartHRさんに聞いてもいいですか？　コミュニケーションデザイナーのデザインシステムへの関わり方。

samemaru氏（以下、samemaru）：関わり方について、今までどうやっていたのか、体制の話ができればと思います。この話をするにあたって自分の話は避けて通れないなと思ったので、このへんも書いています。

私はプロダクトデザイナー側から入って、SmartHR UIというプロダクトサイドのフロントのベース、オープンソースのコンポーネントライブラリなどの立ち上げに関わっていたのですが、そのSmartHR UIにはブランドと一貫している思想があるわけではありません。スタートアップとして、カラーリングを揃えました、みたいなUIだったんですよね。

そこに「きちんとコミュニケーションデザインとして、ブランドとして根拠のある見た目にしていきたいよね」という課題がありました。なので、それをやりたいですと部署異動をして、私を中心にデザインシステムの立ち上げをやりました。

2020年6月のデザインシステムの立ち上げの時は、最低限のロゴや色だけなんとか定義する感じで改善を続けて、2022年の1月にリニューアルをして、今も運用が続いています。

メンバー的な話をすると、プロダクトのコンテンツもけっこうたくさんありますが、プロダクト周りのメンバーとコミュニケーション（デザイン）で私と関口さん、あとはアシスタントメンバーが1名というのがメインで、デザインシステムの運用メンバーという体制になっています。

先ほどputchomさんがおっしゃっていた、コンテンツの追加に関しては、施策について考えて、その抽象度を上げて、視点を変えて掲載できるように施策ドリブンで動いているのが多いと思います。デザインシステムの運営自体は基本的に1人ではありますが、コンテンツによっていろいろなメンバーとプロジェクト単位でコラボするという作りになっています。

いちはら氏（以下、いちはら）：1人はわかります。私もけっこう1人でがんばるので（笑）。

samemaru：1人になりがちですね。

いちはら：なりがち（笑）。でも周りの方がすごく協力してくれますよね。

samemaru：うんうん。みんなが協力してくれないとか消極的というニュアンスではぜんぜんないです。最初に説明したように、グループ自体が「すべてのタッチポイントに関わる」と言っているので、横断組織として対象領域がすごく広いんですよね。メンバーが増えてはいくのですが、ここのデザインシステムだったり仕組み化だったりに割けるリソースがなかなかなくて、かき集めながら運用をしている感じです。

いちはら：かき集めながらは大変ですね。

司会者：SmartHRさんも最近、もともと公開されていたデザインシステムのサイト自体をリニューアルしましたよね。

samemaru：リニューアルしました。ここは関口さんにバトンタッチしようかな。

デザインシステムのサイトをリニューアル

sekig氏（以下、sekig）：じゃあ僕がお話しします。今、施策ドリブンでという話がありましたが、メチャクチャそうなんですよ。仕組み化は大事ですが、「まずやる」ということを大事にしています。先ほどのペパボさんの事例みたいに丁寧に設計を作っていくことはもちろん試行しているんですが、今の我々のフェーズでは、それを作っている間に状況が変わってしまうことがあります。まずは実利を伴うものを用意しようという考え方を念頭に置いてやっています。

サイトにはコンポーネントライブラリがあって、デザインシステムをまず作ってというように、プロダクトファーストでどんどんやっていたのですが、ちょっとフェーズが変わってきました。Webサイトもあり方を変えたいねと、先日我々の観点でやりました。その紹介をさせてください。

その前にお知らせをしたいのですが、実はスペシャルサンクスがいます（笑）。どうしても紹介したいことが、2つあります。例えば広告とか営業資料とかで、我々のデジタルプロダクトを紹介する時に筐体のモックに入れることがあるのですが、これまでは別のものを使っていました。これを、当社完全オリジナルかつ用途に合ったものにしたいということで三階ラボさんというグラフィックデザイナーのユニットの方にお願いして作ってもらいました。

2021年末から使っているのですが、ちょっと言う機会を逃していたので、この際に「三階ラボさんの宮澤さんありがとう！」と言いたいです。もう1つはこのサイトリニューアルのプロジェクトについて。Jamstackにすごく強いフロントエンドの会社のピクセルグリッドさんと一緒にやりました。

もともと我々は、直接黒い画面を叩いてやるスタイルでこれまでやってきていて、これからもそうやっていくのですが、グッと開発リソースが必要なので、テクニカルディレクションというか、壁打ち相談のところから、リニューアル後の改善も含めて一緒にやっているという中で、こういうのが言えないのはモヤモヤするじゃないですか（笑）。なので「一緒にやっているよ！」ということをお知らせさせてください。僕らだけの力じゃないんですよということですね。

リニューアルのポイント

sekig：何をやったかですが、デザインシステムが乗っかっているサイトのリニューアルをしました。もともとプロダクトファーストでコンポーネントライブラリがきちんと載っていて、それをどんどん最新にしていくというドキュメントサイトとしての実利を優先していて、これからも優先するのですが、ビジネスサイドのメンバーが使う営業資料のリソースだったり、いろいろなステークホルダーだったりが増えてきていたんですよね。

そういう時にいわゆる技術文書的な体だけだと、利用者のニーズに添えきれないかもしれないという仮説が出てきました。なので、サイトとしての体をテコ入れしたいなというところから、構成とスタイリングのリニューアルをしました。

細かいことも書いているのですが紹介してもしょうがないので、ざっくりいきますね。もし「細かいことを知りたいぞ」という方がいたら、いっぱいリプライをくれたら資料を公開するかもしれないので、いっぱいください（笑）。

司会者：お！　リプライのチャンスですね。

sekig：主にフロントを変えました。ブランドサイトにするわけではありませんが、間口を広げたいというのがありました。なので、例えば技術者でない方やデザインシステムとは何？　という方でも、なんとなくメリットがある場所なんだとわかる場所にしたいねと、エントランスであるトップページの作りを大きく変えました。

この画像にGOTCHA！（ガチャ）ボタンがありますが、これを押すとデザインアセットを使って作られたアウトプットの画像が差し変わります。そこからそこで使われたアセットのページに飛んだり、何を思考しているかがわかるテキストがきちんと載っていたりという作りに変えています。

あとは、サムネイルをきちんと入れることで、単語で想起できないメンバーも、欲しいものがどこにあるかわかるように、インデックスのあり方を見直したり。また、いろいろなメンバーがいろいろなかたちで関わっているので、問い合わせ先や規約が散逸していたんですね。なのでそれを一元化したり。

あとはそもそも、「このデザインシステムは何のためにあるの？」とわからない人のためにはやはり必要なんじゃないかということで、オンボーディングコンテンツ的な意味合いで、1度仮に「コンセプト」という名称で、そういったものをまとめたページを作りました。

デザインシステムとしてはドキュメントサイトであればいいのですが、そもそも「とは」みたいなものを丁寧に説明をするセクションを丸ごと集約して設けた改修をしました。説明をしたいことが他にもいっぱいあるのですが、時間もアレなので「いろいろやったよー！」ということを紹介させてください。

あと1つだけ。我々がデザインシステムで大事にしていることの1つに、WIPの精神というのがあります。デザイナーがいろいろ練っている間に状況が変わるし、社員のみんながどんどん施策を動かしてくれているので、途中でも載せて使ってもらって、改善のフィードバックを回すのを最重要視しています。

なので、僕らのサイトは書きかけのものが載っていたりするのですが、それを恐れずにやっていこうと、優先してやっています。ちなみにこのテキストはみんなで作っているのですが、「UXライターの@aguringoさんいつもありがとう！」ということで、こんなかたちでリニューアルをしました。現場のsamemaruさんにお戻しします。

デザインシステムは目的ではなく手段

samemaru：はい、こんな感じです。ありがとうございます。

sekig：いろいろなものを、ある程度載せているということですね。

いちはら：「デザインシステムがなんであるのか」という定義を明言することは本当に大事だなと私も思いました。そうしないと、あることが目的になったり、運用することが目的になっちゃうので。結局デザインシステムは手段なので、そこを忘れないように定義する。作っている私たち自身にも、いい振り返りの楔になるんじゃないかなと思って聞いていました。

putchom氏（以下、putchom）：メタ的なコミュニケーションデザインですよね。デザインシステムに関わる人を巻き込むためのコミュニケーションデザインというか。

いちはら：それいいですね。

putchom：思想があることとか、「なんで作っているの？」があることで周りを巻き込めたりする。

いちはら：コミュニケーションデザイナーは社内でコミュニケーションをしているんですよ。

sekig：まさしくそうですね。

司会者：けっこうデザインシステムを通して、コミュニケーションデザイナーの役割の1つが垣間見える感じですね。

sekig：語弊を恐れずに言うと、デザインを推進するとか統括するというよりは、いかにみんなでデザインをやるかに注力するかというマインドセットかなと思っています。

putchom：北欧型というか。コ・デザインみたいなやつですよね。

sekig：そうですよね（笑）。

（一同笑）

sekig：そういう単語すら使わずにやっている感じですね。コ・デザインなんですけど。

司会者：そうですね。みんなでデザインをするためのものというのは良いキーワードですね。

ブランド作り、コミュニケーションデザイン活動に対しては20点

司会者：最後の質問です。これまでコミュニケーションデザインだったり、デザインシステムについて各社に話していただいて、カラーや重きを置いている部分、厳密に定義している・していないとかもだいぶスタイルが違う中で、今のブランド作りの活動、もしくはコミュニケーションデザイン活動それぞれの点数を付けるなら何点ですか？　あらためて赤裸々モードに入ってお話できればなと思っています。sekigさん、どうでしょうか？

sekig：まず当たり前ですが、主観です。誰とも特に擦り合わせていないのが前提です。僕ね25点……20点です。点数は低いという意味よりは、進捗というニュアンスです。当社の場合は、フェーズ的にもぜんぜんこれからだと思っています。かなりカルチャードリブンな会社だと思っていて、何をもってブランドとするかにもよりますが、個人的にはブランドらしきものがメチャクチャあると思っているんですよね。

ただそれを再利用可能なかたちや、よりしっかり認知していただけるかたちにするところでは、むしろこれからかなと思っています。施策をガンガン回すことに振ってきていて、そういう意味ではやりどころかなと思っているのでそんなふうに（点数を）付けました。samemaruさんどうぞ。

samemaru：後出しみたいになったら、真似しているみたいですが、手元の紙に20点とメモしていました。

sekig：メモしているの、すごい。えらい！（笑）。

samemaru：はい。もう20点だよなと思って、事前準備をしていました（笑）。というのも、ブランド作りの範囲は難しいと思いますが、会社のメンバーがSmartHRブランドというものをわかって、信じて出せる状態がゴールだとイメージすると、まだ20点ぐらいかなと思っています。

今、会社はまだ5年目とかで、かなり初期フェーズからブランド作りを意識している会社です。何十人規模の時から「SmartHRが好きで入ってきました」と、ファンとして入ってくるメンバーもけっこういたんですよね。

SmartHRブランドはすでに地盤があるんですよね。もちろん会社のカルチャーだったり、取り組みだったり、事業だったりのファンもいるし、あとは初期の1人目、2人目のデザイナーのファンであったりが功績として大きいと思っているのですが。なのでそれ（SmartHR Design System）をもっと認知だったり、カルチャーとしてメンバーに浸透させたりというところの進捗で言うと、関口さんと同じ20点ぐらいかなという肌感があります。

司会者：お二人的に、残りの80点、もしくは75点分の伸びしろは「浸透」と言っているあたりになると思いますが、具体的にはどのへんでしょうか？

samemaru：私たちのデザインシステムは、そのまま「SmartHR Design System」という名前なんですが、デザインシステムという名前が付いていることで「あーデザイナーのものだー」みたいな認識をされている部分があるんですよね。別にセクショナリズムというわけではありませんが、もっと血肉として使ってほしいものという意味では、まだ私たちが認知してもらう状態まで発信だったり整いだったりができていないかなという感じです。

司会者：「もっと血肉として使ってもらいたい」というのは良いワードですね。

（次回へつづく）