1. resize.fm
  2. #128 ちいさくはじめるデザイ..
2023-04-14 1:24:06

#128 ちいさくはじめるデザインシステム

「ちいさくはじめるデザインシステム」という本を読んで、SmartHR社でのデザインシステムの作り方や広め方、出口と元山が関わったクックパッド社のデザインシステムなどについて話しました。

📝ShowNote: https://resize.fm/ep/128-small-start-design-system

おたよりお待ちしてます💁‍♀️
おたよりフォーム(Googleフォーム): https://forms.gle/hkHbCpdTfe54MSyq9

リサイズ編の挨拶・お天気トーク
Takaya Deguchi
[音楽]
kudakurage
こんにちは出口です こんにちは元山です
リサイズ編は元山と出口が最近気になっているサービスやデザイントピックスを取り上げてのんびり話すポッドキャストですよろしくお願いします
お願いします 4月になってだいぶあったかくなりましたね
そうですねなんか最近もすごいあったからしかも晴れてるからいいよね なんか雨でうつうつした感じがなくて
Takaya Deguchi
いやでも花粉もすごいんですか なんかさっきもくしゃみしてましたけど
まあでもなんか花粉の種類変わったのか ああそうなんだ僕は若干収まりましたけど
kudakurage
収まってきたんじゃあ良かったねー いやでもこれからねまた5月っていうさ
僕の一番一番好きな季節が来るからもうそれが僕は楽しみなんですけどねやっぱり5月 はこうちょうどいい温度で
ジメジメもしてないっていう 唯一の月だと僕は思ってるんでただその次にあの最悪の梅雨っていうのが来ますね
Takaya Deguchi
あのね 毎年この話してる気がする
kudakurage
今でも楽しみだなと思ってまぁでも4月もあったかくなってきて本当に良かったなと思う というかあれだあの出口君この前のイベントはどうだったんですかの
Takaya Deguchi
ヒーチャードプロジェクツ あの良かったですよ結構
土曜日はちょっと雨っぽかったけど日曜日は晴れて だいぶ人多かったですねあそうなんだ
うん結構な何人って言ってたかな
kudakurage
何人だった4000人だっけいいな 結構でしたよあ2日間合わせてとろ
Takaya Deguchi
たーしっかー ちょっとな僕
kudakurage
僕なんかちょっと忙しくて行けなかったんだけど本当は僕も行き なんか行きたい奴とかいっぱいあったから行きたかったんだよ
Takaya Deguchi
いやなんかねーもう良かったです盛り上がってる感じありましたよね うん
なんかねー 会場がすごい良かったですねあのキャンパスっていう国用のはい
オフィスのか なんですけど
なんかすごい雰囲気よくて なんかすごいおしゃれなんですよおしゃれだしなんかオフィスって感じじゃないんです
よねなんかなんていうのかな 外にスピーカーが置いてあって
kudakurage
なんかこう bgm 流しながらこうちょっと階段上の なんていうかちょっと説明ムズいんですけどそれはいつもそうなのその
Takaya Deguchi
わかんないや普段行ったことないから知らないけど なんかこう吹き抜けの場所があったりとか
なんか僕らが販売してた場所もうちょっとなんかなんていうのかな だんだんになってて
kudakurage
なんかこう上に立つ全体みは身を見通せるようななんかこう 気持ちいい感じの空間でしたね結構広かったのあれって
Takaya Deguchi
どうそんなでもない めちゃめちゃ広いわけではない
kudakurage
でもあれじゃなくてそのさトークイベントというかなんかセッション的なやつもあるじゃない ですか確か
Takaya Deguchi
だしアメリカへとマーケットのし僕はのマリンみたいな あんまりねセッションの方いけてな
いけていっ1個1個も結局いけなかったんですよねああ そうそうそうだから
kudakurage
なんか軽く あの遠目から見ていただけなんですけどでもなんか会場がそんなキャーなんか色々あるって
Takaya Deguchi
ことはそれ結構広いのかなと思って 広いっちゃ広いっかな
なんと6000人だってトータル a すごいなぁ
リアルイベントの良さとメタバースの話
Takaya Deguchi
すごいなんかね僕いっていけてないんだけどメインの会場は 会場もなんかこう
kudakurage
ソファーとかが置いてあってすごいなんかゆったり見ればあそれいいねー いいのソファーソファー席がある
いやーなんか写真見るとあったっぽいですね まあもちろん全部じゃないよねそのなのが一部とかなんですよねきっと
kudakurage
多分 a いいなそれ
Takaya Deguchi
いや全体的に何かなーっていうのはのカンファレンスとか 行くとなんかこうなんていうの学校スタイルでこう
kudakurage
整列してみるかねなんかあのギジギジに行こうさ パイプ椅子みたいな方こうなっておいてあるみたいなね
Takaya Deguchi
なんかメインの会場を見ると結構なんというかラフに行こう 炎上に行こう
ならね感じだとパイいいね うん
それはいいなぁなんか 全体すごいいい感じの場所でよかったですね
他他も行ってないんですかそのなんかエキシビジョンとかあったじゃんなんか多分 なああエキシビジョン展示とかは見ましたよ
カロスけどええ まあ私ワークショップとかもあるなぁ
とかあとショップもいろいろ回って僕も買ったりとか a なんかどれもいい感じのものをたくさんあってよかったですね
いやーもう一応規定は唯一僕らだけだったんですよねそうなんだ 多分多分
kudakurage
もうちょっとあってもいいよね良さそうだけどね マックちょ会場の制約でその場でし飲食とかできないああまあまあまあまあそれはそうかもしれないけど
Takaya Deguchi
ねだからそう僕らはまあシロップで売買しあの販売してたから だからよかったんですけど
いや人いっぱい来てくれたし僕らのブースにも うん
思った以上にあの買っていただきましたねカウントをよかったん だしポッドキャストを聞きます聞いてきましたみたいな家何かいて
kudakurage
あそっ あじゃあ
Takaya Deguchi
付箋をちょっとだけ持っていけばよかったああそうねそれ思いましたね 僕の手元になかったっていう
いやまさかですいやなんか 聞きなんかみんな買ってくれたししかも
さっき聞きましたええええええ 方
写真撮ったりとかもしてましたよ
kudakurage
3人3人ぐらいにいたかな a 嬉しいねー
Takaya Deguchi
だしまあドクパとの人とかもいたしたクラブの人もいたしなんか結構いろいろ いろいろこういろんな子これまでと設定の人が入っ
kudakurage
はいバイト後同窓会ぽくて楽しかったですね 最近なんかまあそういうの言ってないからなぁ僕も
分かんないどんなんだったっけリアルモテますは見る機会ほぼないんじゃないですか リアレアな
キャラクターになってますよレアモンスターが出てますねたバースで生きているから 声声だけが届いてくるみたいな
Takaya Deguchi
リアルリアルバースできてないん 果たして実体実際しているのかっていう
もしかしたらのその広行メーカーみたいに誰か喋らせてるだけの可能性がね本当にね 中身ももしかしたらチャット gpd
kudakurage
そうするとしてないし
Takaya Deguchi
ちょっとねメタバース空間で永遠の命を得ていこうかなっていう グダグラゲって言うねそうそう
やたらとんかつについては2日働くって
うん いやーでもはそういうリアルイベントまあ僕も久々でしたけど
すごい良かったないや普通にザーキャンパスすげーいい場所で遊べ仕事したいな めっちゃ思いまああー
なそういう場所ではないよなんかそのコアーキングスペース的な うーんなんかそうなのかななんか僕もよくわかってないんですけど
kudakurage
あれがどういう場所なのか でもできす場所なんですかねザーキャンパスって
コアーキングの場所の紹介
Takaya Deguchi
なんかイベントいっぱいやってる場所なのかな うーんでもカフェとかがあって
そうなその中にね 常設のカフェみたいのがあって
なんかまあコアーキングではないけどまあ多少そこで仕事したりもできるのか 基本はイベント会場みたいな感じ
kudakurage
あでもなんかあれなんだねもともとオフィスだった建物の一部を開放して誰でも利用 できるようにしましたよっていう場所なんだね
Takaya Deguchi
うーんなんか2階があってそこはなんかちょっとオフィスっぽい雰囲気入ってないです けど
がしましたねだから結構なんかこう公園とか図書館みたいなそういう場所を作ったみたいな 感じなのかな
kudakurage
なのかな めちゃくちゃ良かった これなんか普通にちょっと
Takaya Deguchi
行ってみようかな 行ってなんかちょっとパスポンいじるぐらいならできるんじゃないですか わかんないけど
kudakurage
いやまあでも普通になんか誰でも入ってショップがあったりとか公園みたいな場所があったり とかカフェみたいのがあるみたいな
Takaya Deguchi
誰でも入っておく 二宮あるんですよね
二宮あって一宮が なんかライブラリーみたいな場所になっててそこがさっき言った段なんか
段々畑みたいな感じになってて でなんか国用のインテリアが結構置いてあったりとかするんですよね
kudakurage
あ2階がなんかホールみたいになってんだ そこがメイン会場だったのかな僕は行ってないからわかんないんだけど
Takaya Deguchi
でオフィスもあるのか だから僕らが入った部分はほんと一部だったのかな
kudakurage
だからやっぱりこうもしかしたら社員の人も行き抜きとかそういう時に使ったりするけど でもオープンな場所としてもなんか
Takaya Deguchi
開放してますよみたいなそういう感じなんですかね うんいやなんか食材もいっぱいいろいろいい感じで
kudakurage
元公園みたいな感じでしたね ええ
デザイン系のイベントについて
Takaya Deguchi
ちょっと行ってみようかな本土 うん
よったら まあしながわでしょでしながわのコーナーのすぐ
kudakurage
そばだからだから普通に僕もより安そうだしながわやったかだと 起点になる駅なんでちょっとよって仕事するにはいい気がします
Takaya Deguchi
ちょっと僕も行きたかったなぁ本当は めちゃ良かったですよ
いやセッション聞いてないんでねそっちの話は何とも言えないんですけど 楽しそうでしたよ
kudakurage
セッションもなんかね面白そうなトピック多かったもんねセッションも
僕も本当は行きたかったしなんか結構ね僕の知り合いの人とかもなんか聞いてるこれ聞いてるみたいなツイートしてたし
Takaya Deguchi
そう本当いろんな人がいた いやだから僕らとしてもすごくいい
まあ公募で今回応募してあの出展できることになったんですけど 本当ラッキーだったっていう感じでしたね
なんかどういう基準なんですかねそれは わかんないその辺は
そのお呼ばれた側だからわかんないけど基準とか でも基本的には多分公募やる前から何組か決まってたから
多分その主催者の人たちの ガキュレーションしてる感じだと思うんだけど
2サイズFMでも出るたりするのかな いやどうかなぁ 無理じゃないかなぁなんかもの作ってないと
いやーあの付箋作ってるし いやそれは厳しい スポンサーになったりとかすればなんかこうノベルティを貸してもらったりとかできるかもしれない
あーねーちょっときついんでねー でも企業ブースもなんか少しあったな スズリとか
そういう系なんかそういうものクリエイター系のあの企業のブースとかもあったな
kudakurage
僕ら大きくなればなんかこうメディアスポンサー的な感じで やるのかもしれない
Takaya Deguchi
公開収録とかやらせてもらえないかな いやーちょっとあのメンツの中でやるのは今日緊張しますけどね
kudakurage
いいんだよ たまにの息抜きだから僕らはそのあの立派なことを話さないんでそんなね
大したこと話さないからみんなでも疲れちゃうじゃんやっぱりそういうなんかさ 真剣な話ばっかだと
Takaya Deguchi
僕らはもうなんかとんかつとかの話して メイン会場とは別になんかねあの割と小さめのホールでワークショップとか
kudakurage
なんとなくミートアップみたいなこともやってたんですよ あーなんかミートアップっていうの確かあったね確かに
Takaya Deguchi
なんでミートアップって なんかフィグマの使い方みたいな話とか
なんかスタートアップ系でプロダクトマネージャー プロダクトマネージャーやってるデザイナーのなんか集いみたいなのがあったりとか
えー まあこれはこれでまたなんかそうそう
なんて勉強会みたいなものなんかな いやーあとなんかそっちの会場を僕チラッと見ただけなんですけど
なんかねそっちはそっち秘密基地感があるなんかコンクリート打ちっぱなしのなんかこう 空間でそこもなんかすげーいい感じだなーと思って見てた
じゃあまあちょっと僕らはまず小さい方からじゃあ読んでいただいて 勝手に言ってるけど
公開収録させてもらえたら 勝手に言ってるけど
いやーめっちゃ良かったですよ来年も そう公募がまたあるなら応募したいなっていう
ワンちゃんリサイズ編出してすってなんか なんかの間違いで取んないかなみたいな
他のイベントの話題
Takaya Deguchi
なんだこいつらってなりますけどね
kudakurage
やっていうなんかすごい気持ちいい場所あったんでちょっと行ってみてください 行ってみようかな
Takaya Deguchi
っていうねでまぁ今週はまだね繰り返しになっちゃうけど クラフツアンドコの
あーそうだね ガレージというイベントがあるというね
あーでなんかね そのリンダのブースでその今週末のそのガレージの方のイベントのフライヤーも配ってたんですよ
で結構そっちも行ってみますみたいな人が多くて うーん
まあだからその場ではね僕らのノベルティもあるし 本山さんのボドゲもあるっていうね
あと出口くんの美学師だもある そうねそっちはまぁ
超実験なんであれなんですけど 本山さんさすがにリアルバースに出現するんですよね
kudakurage
たぶんいると思います もしかしたらあのデジタルになってるかもしれないけど
Takaya Deguchi
なってることあるの? その場でおじさんがデジタルでいるの?なんか
なんかあれだっけ
いる可能性が高いということでね そうですね出現率が高くなってますね
エンカウントしやすい感じなんですね うん
なのでちょっと会える人は会いましょうっていう感じです そうだね
なんか同じ日にさあの前行ってたの深地さんのディグラフっていうさイベント? 僕もなんかあの深地さんに案内いただきました
がさちょうど15日なんだよね土曜日からなんだよね 15日から23日っていう
そうそうそう だから僕ちょっとついでに行こうかなって思ってる
スマートHRのデザインシステムの構成
Takaya Deguchi
もしかしたらそれもあるからあのいるかいないかちょっと いやいたらいいじゃん
わかんないっていう可能性がある いたらいいじゃん
いやだからちょうどさその時にいつ行くかわかんないからちょっと ちょうどまあだからその15日か16日かどっちかわかんないけど
その深地さんの方も行こうかなと思ってたんで 僕も来週行こうかなと思ってました
kudakurage
出社のついでに なんかでもレセプションパーティーみたいなのやるらしいね
前日?なんか14日今週の金曜日かな 今日まあ配信してるもう多分当日だと思うけど
夜になんかレセプションパーティーみたいなのやるらしいよ 誰でも入れそうな雰囲気を出してるけど入れるのかどうかわからない
Takaya Deguchi
仕事会社だけなんじゃないですか でもなんか皆さん来てくださいみたいなの言ってるから そうなんだ
kudakurage
そうそう誰でも入れんのかなって思いながらわかんないからこうちょっとどうしようみたいな 話ずっといるみたいな
そういうのあるよね まあでもちょっと僕は多分そのイベント今週末のねそのクラフツアンドコーガレージの時に
都会に出てくるので その時にちょっとDグラフの方を見に行こうかなと思って
Takaya Deguchi
まず先週先週とか今週 僕らがやってるタネっていうあの
クリプトの会社でもちょっとしたミートアップやってて昨日火曜日なんですけど 最近イベントがめっちゃ立て続けなんですよね
kudakurage
まあでも天気良くていいねまあちょっとちょっとたまに崩れることもあるけど なんかね外出する気分になるよね
Takaya Deguchi
という感じで
今日はちょっと本の紹介会をやろうかなと思うんですけど 小さく始めるデザインシステムっていう
はいはいはいスマート hr の人たちが書いている本ですねもうちょっと取り上げようかな と思ってはいるんですけど
kudakurage
最近出た本だよねたしそうそういつだっけ 今年かな3月か3月ぐらいだよねうんそうそう
Takaya Deguchi
でまぁ僕結構デザインシステムに関わる機会が多かったといえば多かったので クックパッドで本にまあそれもあってちょっと
読んでみようかなという感じで見てみたんですけど あの掃除ですげーいい本でデザインシステムの話ってデザインシステムという概念が
こう世に広まってから結構こうフィグマの コンフィグはないかどちらスキーマかスキーマカンファレンスとかで
まあいろいろ海外の人も発表してるとかしてると割とこうデザインシステムそのものをどう作るかというより は結構煮詰まってきて組織論的な話に結構
言ってることが多いと思うんですよねそうねであと目につく事例としても まあ
ショフィファイのポラリスとかまたネットフリックスとかなんかそういう大きい会社のいろんなことやってる 事例が多くて
なんかデザインシステムっていうといろんなことやらなきゃみたいな なんかこう理想が結構先行してるような感じがなんかあるなーっていうふうに思うん
ですけど なんかこの方は結構小さく始めるっていう風に言ってるのもあって
そういうなんていうか理想論とかギャルに主義すぎない なんか実践的な本でまぁその辺すごいバランス良くて
やすごいいいなと思ったんですよね でまぁそもそもスマート hr のデザインシステムって
まああのスマート hr . デザインっていう url で公開されてるんですけど 結構まあモーラ的であの特徴としてはだいぶかなり社外にオープンになってるって
ところがすごいなと思うところだなと まあ本読む前から思ってたんですけど
まあそれについてこうどうやって作っていったかっていうのがまあ書いてある本ですね ざっくり言うと本の中身としてはまずデザインシステムが何なのかっていうところから始まって
いくんですけど スマート hr としてはデザインシステムっていうのはまあシングルソースオブトゥルースって今よく言われるその
信頼できる一つによりどころとしてまあ作ってきましたみたいな話があり その構成要素としてはまず一つがブランドガイドライン
ブランドガイドラインの中にはいわゆる cib アイみたいなところでまあビジョンミッション バリューを言語化したものコーパレートアイデンティティだとか
またビジュアルアイデンティティまあロゴとかまあと色とかタイプグラフィとか そういったものを集めた
ブランドガイドラインというものと まあ次に後 ui ガイドラインまあいわゆるコンポーネント種とかパターンライブラリーみたいなもの
でまぁそのソフトウェアに関わるエンジニアとかデザイナーが使うようなもの で3つ目がコンテンツガイドライン
これがいわゆるまあボイスアンドトーンと呼ばれるものでなんか表記ルールだとか ライティングのルールだとか結構こう文章を書くすべての人が対象になるものだから割とこう
ui ガイドライン以上にこうノンエンジニアのデザイナーにも対象にしているようなもの まあと4つ目が運用ガイドライン
これがまあデザインしてもそのものを運用し続けるためのガイドラインだったりとか 運用デザインシステムをまあ社内で浸透させるためのまあ教育コンテンツみたいな準備してたりとか
なんかそういう感じでこのブランドガイドライン your ガイドライン コンテンツガイドライン運用ガイドラインこの4つをまあ構成要素としてこのスマートHRの場合は
置いているっていう感じみたいですね だが結構まあおおよそ必要だろうと思われるものはだいたい入ってるっていう感じですね
スマートHRの場合 今となってはそういう感じなんですけどまあでもこれ最初からあったわけではなくて
スマートHRでのデザインシステムの誕生
Takaya Deguchi
徐々にあの次達で追加していったっていうような進め方だったみたいなんですけど
まあそもそもスマートHRで何デザインシステムが生まれたのかっていうところからまあ話が始まってくるんですけどもともとやっぱ
プロダクトのデザインの文脈から始まったっていうようなことが言われていて まあそのコミュニケーションデザインそのブランドとかそういうことよりもどっちかというと
UIガイドラインみたいなプロダクトを効率的に作るところの必要性があってまあ作られてきたっていうような感じらしくて
kudakurage
まあそれはそうだよねっていう まあ特にスタートアップだとまあそうかな最近だとね逆もうちょっと上流からっていうふうに
なる可能性もあるけど結構前だとねやっぱりまずそのコンポーネントをまとめるとかそういう作業から
Takaya Deguchi
そういうこと多かったもんねやっぱり まあここ1,2年こそなんかこうスタートアップでもブランディングとかをちゃんとやるみたいな
最初期からブランディングにこう投資していくみたいなのでやってるところもあると思うけど まあねそれこそ5,6年前とかだったらやっぱまずは
デザインシステムを言えばプロダクトデザインを効率化するためっていうのはまあまあどこもそうなのかなっていう感じですよね
で特にスマートHRの場合はその開発スタイルとしてなんか前この話 figmaのなんかのカンファレンスでもスマートHRの人がしてたんだけど
あのスマートHRってSaaS?んですけど結構こう 最小単位でなるべくこう削ぎ落として削ぎ落として機能を出していって
でまあそれを徐々に機能ABCDっていうのを徐々に徐々に大きくしていくっていうようなスタイルをとるらしいんですよね開発の流れとして
まあなんかその最小単位っていうのを突き詰めていくとどうしてもこう共通にする部分っていうのが発生するのでまあそんな
車輪の再発明みたいなUIの再発明みたいなのを防ぐっていう課題化の中でUIコンポーネントみたいのを作っていったみたいな話らしいですね
まあだからUIの再開発を防いでなるべく開発効率を上げましょうっていう課題感からスタートしたっていうのがまあ一番最初の始まりみたいですね
でまあそうしていく中で単にこう開発の効率化をしましょうっていうだけじゃなくそのデザインシステムを作ることによって
このコンポーネントはそのデザインシステムを参照するべきなのかみたいな参照してそのまま使うべきなのかそれともあえて逸脱するべきなのか
あるいはまあ逸脱した結果それを逆にシステムに追加するべきなのかみたいななんかそういう議論の叩き台になるみたいな
効果も出てきましたみたいなのがあってまあそのデザインの妥当性みたいなのを評価する
まあ一個のそのレビューするときの補助性の一つとして機能することも増えてきましたみたいな話があり
確かにそういう効果もあるよなっていうのは思いましたね
だから結構結果としてデザインシステムはそのプロジェクトデザインの文脈の中ではその叩き、まずは叩き台として中間成果物を
高速で作ってその上でどう磨いていくかという議論するための初速を上げるための道具として使ってますみたいな
話がありなんかそれ結構捉え方として大事だなと思ってなんか UIコンポーネントそのまま組み合わせてプロダクションに出すものを作ってきましょうみたいな感じだと
共通化って結構難しい部分あると思うんですよね 事業のセースによると思いますけど特に2Cとかだと難しいと思ってて
CookpadとSaraの話
Takaya Deguchi
SaaSは比較的なんかその共通コンポーネント作りやすいのあるかなと思うんですけどでもそれをなんかこう
デザインシステムにあるコンポーネントだけを組み合わせて最終成果物作るって言うんじゃなくてまぁ一旦中間成果物を作るところを
高速でやっていきましょうっていう目的にすると割とコンポーネントの共通化とか切り方とかもやりやすいのかなと思って
なんかその捉え方はなんかありだなっていうふうに思いましたね
だから結果としてまあプロダクトデザインの文脈の中ではそういうアジリティみたいのを向上させる効果が
Smart Digitalではありますみたいな話があり
kudakurage
でもその辺の考え方はやっぱりあんまり変わってないというかなんかCookpadの時もそうだったよなっていう感じはしますよねなんか
一番最初の頃はCookpadの場合CSSフレームワークだったけど
あれも別になんかそれがベストっていう話じゃなくてどっちかっていうとエンジニアが簡単にこう組み立てて
Takaya Deguchi
パッドアウトプットを出せるっていうふうなもののために作ってたっていうところがあったし
kudakurage
そういう意味では確かにそういう考え方であるっていうのは正しいような気がしますよね
Takaya Deguchi
まあだから結構Cookpadの話が出たからそれについて触れると
SaraっていうねUIフレームワーク、池田さんがもともと立ち上げたものですけど
それあれ2012年ぐらいかなにあって結構取り組みとしては早かったんじゃないかなって
当時確かGitHubとかが、Twitterブーストラップとかが流行ってて
kudakurage
Twitterブーストラップとかそういうのが流行ってた時代だよね
Takaya Deguchi
そうそう、でそれのCookpad版を作ろうみたいな感じだったのかなと思うんですけど
kudakurage
なんかそんな雰囲気だったね
Takaya Deguchi
うん、だからデザインシステムって言う言葉は全くね、当時はなくて
kudakurage
フレームワークでしたね、CSAフレームワークでしたねあれは完全に
Takaya Deguchi
で特にあの時ってCookpad社内でエンジニアがたくさんいるんだけど
デザイナーって本当池田さんとか限られた本当数人しかいないみたいな時代ですよね
そう、そう、そう、片手に収まるぐらいしかいないみたいな、だから全チームにデザイナーが入るのは難しいから
特にCookpadの場合、文化としてもエンジニアが結構企画を主導するとかっていう文化だったから
だからエンジニア主導でデザインもできるようにするっていう中でそれを高速化するために
CookpadっぽいUIが作れるUIライブラリを作ったっていうのがSaraですよね最初の方
割とその時の考え方は今でも同じなんだなという、特にスタートアップとかそういう
早く高速に検証サイクル回したいみたいな会社だと同じなのかなっていうような
タッチポイントとブランディング
Takaya Deguchi
っていうのが今のプロダクトデザインの文脈なんですけど、もう一個別の軸としてコミュニケーションデザインの方
ブランディングというかの方では、これは本当SaraSaraだなと思うんですけど
やっぱこうタッチポイントがめちゃくちゃ多いと、例えばサービスサイトだとか
SNSだとかオウンドメディアだとかCMとか営業資料とかホワイトペーパーとか
僕も前の会社SaaSだったからよくわかるんですけど、タッチポイントめちゃくちゃあるんですよ
もちろんCookpadみたいな通信もいっぱいあるとは思うんですけど、なんかその種類が多いっていうのが結構B2B SaaSならではかなっていう風に思ってて
でそのタッチポイントごとに、やっぱユーザーってSmart HRだったらこういうものだよねっていう
なんかその認知がそのタッチポイントに触れた瞬間起こると思うので、それの積み重ねがブランディング
いわゆるブランディングだと思うんですけど、それを上手いことやろうっていうのがデザインシステムのもう一個の側面としてあるよねっていう話ですよね
でまぁこれに関しては、僕も前の会社で、やっぱこう、前の会社はSmart HRよりももっともっと小さい会社でしたけど
それでもポスターが、クライアントの社内で貼ってもらうポスターがあったりとか、なんかこう営業資料でも何パターンもあったりとか
あとホワイトペーパーっていうのが、これSaaS用語だと思うんだけど、お役立ち資料みたいなのがよくあるんですよね
でその資料を、例えば前の会社とリファラル採用を効率的にやるにはこういうこと、こういうノウハウがありますみたいな
でこの資料を取得するためには、社名と名前を書いてみたいな、それが営業に使われるんですけど
なんかまぁそういうのがいっぱいあったりするんですよ、でそれ用に広告を込んで回したりとかすると、またその用のバナーが必要だったりとか
っていう、まぁそういうタッチポイントが多いっていうのもそうだし、あと改ざんする人が多い、なんかそのB2Cだと大体デザイナーがこう
あの、社内のインハウスのデザイナーが、例えばなんかこうLP作るとかバナー作るとか
だからまるでそこを押さえとけばコントロールできると思うんですけど
B2Bの場合、営業が実際営業資料を持って説明するとか、営業の営業のこうなんか
紙の資料とかポスターとか名刺とか、なんかこう営業とかマーケティングが結構改ざんすることが多いから
そういう人たちをちゃんとこう押さえておかないと、野良デザインみたいなのが勝手に生み出されたりとか
なんかこうアシュみたいなのがいっぱいできたりとか、まぁするっていうのが結構B2Bあるあるだなと思っていて
kudakurage
あれだよね、だからお客さんと接するのが、2Cだとデザイナーとかプロジェクトを作ってる人なんだけど
2Bだとやっぱ営業の人とかそういう人がこう関わってくることになるからっていうところですよね
Takaya Deguchi
そう、で営業と一口に言ってもインサイドセールスとかなんかフィールドセールスとか分業してるケースも多かったりとか
マーケターもねいろんな役割で分業してたりとか、あとCSもそうだし
だから本当改ざんする人がとにかく多いっていうのが結構B2Bあるあるなのかなと思っていて
でその改ざんする人ごとに当然タッチポイントがオンラインオフラインであるから
それをこういい感じにコントロールするためにデザインシステムが必要ですっていう
特にSaaS系はこのコミュニケーションデザインにおける必要性、デザインシステムの必要性というのは結構高いんじゃないかなっていうふうには思ってて
だからまあおそらく今の話は僕の体験の話ですけど
おそらくSmartHRでも同じようなことがあったんじゃないかなっていうふうに読んでて思いましたね
だからデザインシステムが必要だから作りましたっていうような話が冒頭に書いてあったんですけど
なんか本当こういう掃除で必要性みたいなのって大事だなって思ってて
なんか今デザインシステムいろんなとこが作ってるから結構デザインシステム作ることをありきになるケースってあるんじゃないかなみたいなふうに思うんだけど
結局デザインシステムってそれ作っても別にユーザーが便利になったりとかお金が儲かったりとかしないわけで間接的な効果だと思うから
なんかやっぱりさっきのクックパッドの話だったらデザイナーが当時少なくてエンジニアが企画も関わってるから
エンジニアでもUIデザインが高速にできるためのライブラリが必要だったみたいな
なんかそういう組織とか事業的な必要性っていうのがすごい大事だなっていうふうに思ってて
そうだね
なんか事業内容によってはプロダクトデザインよりもコミュニケーションデザインの方が重みが強い場合もあるかもしれないし
そんな逆もあるかもしれないし
結構やっぱり組織とか事業における必要性の特定みたいなのが結構やっぱり大事だし
それがデザインシステムの会社ごとに色になってくんだろうなっていうのを読んでて思いましたね
kudakurage
わかんないよね 物によってはだからこういうポッドキャストのデザインシステム作ろうってなったら
なんかその喋り方とかコア色とかもしかしたら入ってくるかもしれない
Takaya Deguchi
あるかもしれないですね
kudakurage
なんかできるだけ明るい雰囲気で話しましょうみたいな
Takaya Deguchi
僕らもねなんとなくあるじゃないですか
例えばビデオをオフにして今ね収録してるんだけど
それはなるべくリスナーと同じ環境で話しましょうとかね
なんか結構この本にもスマートエディティアルの場合は内製でシステムをガッツリ作ってるんだけど
場所 企業とか事業によってはGoogle DocsにA4でまとめるだけでもいいかもしれないですねみたいなことが書いてあったりとか
それは本当その通りだなっていう風に思いましたね
デザインシステムの作り方
Takaya Deguchi
でまあその上でこう第2章に入ってくるとデザインシステムをどう作っていくかみたいなコツとかステップがかなり具体的に書いてあって
これもすごい進め方として参考になるなと思ったんですけど
まず最初はとにかく便利コンテンツから作りましょうっていう風に書いてあって
kudakurage
便利コンテンツ
Takaya Deguchi
便利コンテンツっていうのはそのデザインシステムの最初のユーザーになってほしい人
例えばさっきのクークパッドの話だったらエンジニアとかそういう人たちが欲しているものをなるべく作りましょうっていうのと
そういう人たちが作るときになるべく学習がいらないものをまずは着手しましょう
あと使った結果すぐに効果が得られやすいものをターゲットにしましょうっていう
kudakurage
抑えてるね
Takaya Deguchi
それ本当そうだなっていう
kudakurage
抑えてるねそれ
Takaya Deguchi
いやそうそう
なんかあのSaraのねさっきのクークパッドの話とかまさにそうだったなと思ってて
当時って僕もインターンとかしてたんだけど
インターン生でも一個サービス機能作れみたいな一人でみたいな感じのね社風だったから
でもまあ当時UIデザインできるわけでもないし
っていうときにやっぱりライブラリー
CSSライブラリー組み合わせてなんとなくそれっぽいのすぐ作れるみたいな
で本当なんかすぐに効果が得られるし
本当すぐ欲してたから
だから爆発的に広がったと思うんですよねその社内で用途が
Sytrasカラーパレットの作成
Takaya Deguchi
でSmartHRの場合だとさっきの話でコンポーネントライブラリーがまあそれだったっていう話だし
あとなんか僕がそのクークパッド社員だった頃に
そのSaraの光景というかちょっと軸足を変えて2018年頃に
Sytrasっていうデザインシステムを倉光さんと作ったんですよね
でそのときSaraが結構こうエンジニアリングを
エンジニアリングというかサービス開発をスコープにしてたから
ちょっと軸足変えてそのバックオフィスとか
ノンエンジニアのデザイナーをターゲットにした
どっちかというとCI/BIとかさっきのコミュニケーションデザインみたいな文脈の
をスコープにして
まあそのSytrasというものを作ったんですよ倉光さんと
で結果として
まあそれがめちゃめちゃうまくいったかというと
まあそうではない部分もあったりするんですけど
まあでもSytrasが結構こう広まった一番広まったのって
その中の一部にあったSytras Colorっていうカラーパレットみたいなのを
そのとき定義したんですよ2人で
でそれがなんか思った以上に使われてたなっていう風に思ってて
それもやっぱりねまさにここに書いてあった通りで
当時なんかそのCookpadの汎用的なカラーパレットみたいなのなかったんですよね
Saraに一応あったけど
そのSaraに定義されてたのはどっちかというとUI的にこう
設計されたものだったから
その例えばプレゼン資料とか
そういう汎用的に使えるカラーパレットみたいなのがなかったんですよね確か
それでくらみしさんが作ってくれて
なんか2人でなんか名前考えたりとかしてたんだけど
でなんかそのときにちょっとしたね
そのカラーパレット定義するだけじゃなくて
グルーパッドのアイコンフォント作成
Takaya Deguchi
まあ一個ホームページ作って
そこでなんかコピペが簡単にできるようにするとか
なんかそういうのを作ったりしたんですよ
なんか結構それがね使われてたりとか後々して
だからやっぱそういうすぐに効果が得られるっていうのは
大事だなっていうのは思いましたね
kudakurage
僕もなんか関係ないけど
関係ないけどアイコンフォント作りましたもんね
Takaya Deguchi
ああそうだそうだ
あれもまさにそうですよね
Goog Pad Symbolsっていうね
そのあれどういう流れでできたんですか最初
kudakurage
あれはもともとは
Takaya Deguchi
iOSかな
kudakurage
本当オーサム
いやiOSのアイコンをいろいろ作ってたんですよ確か
iOSアプリ向けにね
それを僕もともとそれ以前から
そのアイコンフォントみたいな
シンボルフォントみたいなのを作ってたりしたことがあったから
これなんか本当でなんか使えるようにしたらいいんじゃないですかね
みたいなのをちょっとiOSのエンジニアとかと話したりとかしてて
じゃあそうしようってなって
そうするとAndroidでもWebでも使えるようになるからつって
でそれをまあいろんなところに展開できるようにするっていうのを
まず最初やってて
でこれは別に誰でも使ってもいいから
公開しようっていうか
なんか誰でも使えるようにしようみたいな感じで
グルーパッドっていうさ
情報共有ツールがあるじゃないですか
Cookpadの
そこで僕がこういうの作ったんで
なんか適当にみんな本当にインストールして
資料とかにプレゼン資料とかに使ってくださいねみたいな感じで
書いたっていう流れだった気がしますね
Takaya Deguchi
いやーあれもねめちゃくちゃ使われてましたよね
社内で
kudakurage
そうそうそう当時ね
エンジニアのちょっとしたプレゼン資料とか
なんか勉強会のやつとかで使われたりとか
いろいろ使っていただいてましたね
Takaya Deguchi
ねあれが良かったのはまあフォントだから
そのリガチャーでねなんかレシピとかやると
レシピのアイコンがねに変わるっていう
kudakurage
とかね
Takaya Deguchi
そうそうそうやつだったんですけど
ねそのアイコン選んだりとか一時しなくていいから
そのキーノートとかにフォント入れといて
でレシピって書くとレシピのアイコンがすぐ作れるっていうね
それがすごい使い勝手良くて
クックパッドにおけるデザインシステムの重要性
Takaya Deguchi
だからまさにそれがその使うときに
学習が得られないっていう話ですよね
うん
kudakurage
一応なんかそういうの分かんない場合もあるから
なんか一覧表みたいのも用意してたけど
Takaya Deguchi
あーありましたね
ありました
kudakurage
こういうふうにできるように
Takaya Deguchi
あったあった
うん
今となったよなんかこうFigmaで例えば
今風にやるならもしかしたらFigmaでこうね
kudakurage
ああそうだね
Takaya Deguchi
SVGすぐ呼び出せるようなやつ作ったりとかするんでしょうけど
当時はそういうのもなかったから
フォントっていうのがすごい良かったですよね
kudakurage
うん良かったね
Takaya Deguchi
あとなんかさっきのシトラスカラー
シトラスっていうデザインシステム
くらみさんでやってたやつでいえば
なんか結構名前をなんか最初
赤とか緑とか黄色とかそういう色々
色の名前をなんかちょっとクックパッドに絡めて
なんかあのノリでなんだっけなマンゴーとか
なんかそういう食べ物の色にしたんで
使おうつってなんか2人でなんか
なんかよなよなスラックで話しながら決めたんですけど
なんかそういう名前つけるっての結構大事だなっていう
kudakurage
確かにね
Takaya Deguchi
ふうに思ってて
まあそれがある意味デザインシステムのその会社らしさの色にもなるし
あとコード化する上でも結構そういうユニークな名前がついてるのって結構大事だと思ってて
なんかレッドって書くのとなんかチェリーって書くのとでは
なんかチェリーって書いたね
例えば変数があったらこれちょっと特別な色なのかなってわかりやすかったりするし
デザイントークン設計するよりも結構良かったなっていうふうに思って
kudakurage
確かにね
まあなんかすごい新ではないけどなんか
もうちょっと上流的な部分も見えてくる感じがするよねなんかそれ
Takaya Deguchi
うんそうそうそうそう
kudakurage
その命名の仕方によって
デザインシステムのステップ1
Takaya Deguchi
そうそうそうそう
そうそうそう
っていうね
まあだからその
使うときに学習いらなくて使うとわかりやすく効果を得られるものからまでは着手しようっていう
このステップ1はすごい良いなって
kudakurage
いやそうだね
Takaya Deguchi
思いましたね
kudakurage
それはまさにその通りって感じだね
Takaya Deguchi
なんかね僕らも別に狙ってやっただけじゃないけど確かに言われてみればそうだなっていう
うーん
kudakurage
まあ大体ねこう壮大なものを計画して作って失敗するっていう
誰も使わせてくれないみたいな
そうそうそうそう
よくあるあるの失敗パターンだからねやっぱり
Takaya Deguchi
で当時はそれこそそのデザインシステムというものが
流行ってない
広まった概念としてなかったから
まずは必要なものを作ろうってことでそのフォント作ったりとかしてたと思うんですけど
まあ今となったら結構デザインシステムってこういうものですっていうものがあったりするから
逆にこう
その必要とされない部分から着手しちゃったりとかしそうだなっていうのはあると思うんですよ
そうだね
だからこの本でもステップ1はまず便利なコンテンツから作る
でステップ2はそれを改善サイクル回して改善していく
でステップ3で原則の言語化をしましょうっていう風に言ってて
だからそのデザイン原則とかそういうパーソナリティとか
そういう抽象的なものはもう後回しにしましょうっていう風に言ってて
まあそれがすごい良いなと思ったんですよね
デザインシステムのステップ2
Takaya Deguchi
っていうのはまあやっぱスタートアップとかだと特にその
表層の不細をまず抑えるのが最優先だから
その抽象的なその何ていうの
デザインにはこう向き合いましょうとか
なんかそういうこととかブランドのパーソナリティはこうですって
そういう抽象度が高いものよりもまずは
コンポーネントライブラリを作って
なるべく統一できるようにしましょうとか
車両の再発明を防ぎましょうとか
それによって表層レベルの不細って言ってる
いろんなアシュが出てきてしまうとか
そういうことはまずは防ぎましょうっていう風に言ってて
それは確かにそうだなと思ったし
あともう1個言ってたのが結局パーソナリティとか
そういう抽象度が高いものが先にあっても
結局それだけあったとしても
それを元にしてデザインしたものってのは
結局やっぱり多少ブレがあると思うんですよね
だから抽象度が高いコンテンツが先にあっても
結局ブレが生じてしまうから
であれば具体度が高いものを先に用意した方が
効果的ではっていう風なことが書いてあり
それは確かにそうだなと思いましたね
だから結構なんかこうデザインシステムって
こういうものですってものが広まりつつあるから
なんかこう頭よく進めようとすると
より上流なところからブレイクダウンって進めてこう
みたいなやり方ってやりがちだと思うんですよ
仕事の進め方として
まずはCI/VIを
でそれはその次にデザイナーのデザイン原則を
そしてUIをみたいな
その逆の方がいいですよってことが書いてあったのは
すごい良かったなって思いますね
kudakurage
まあ軽く打ち打ちで作るくらいだったらいいかもしれないけどね
そういうのを一応みんなの共通認識として
デザインシステムじゃないけど
コンポーネントから始めるだとしても
一応共通認識みたいなのを持っておくぐらいの感じの
打ち打ちの仮のものみたいなのがあるぐらいだったらいいかなと思うけど
Takaya Deguchi
結局アブダクションっていうか
多少上流とか上位概念も分かりつつも
まずは具体から始めるっていう
完全にCI/VAとかそういうところは知りませんで
デザインコンポーネント、具体から着手すると
またそれはそれでずれちゃうかもしれないけど
その温度感が大事なんだろうなっていう風に
分かった上で具体をやるっていうのが
大事だなっていうのは改めて思いましたね
っていうもので作り上げていきましたっていうのと
またデザインをこう
デザイナーだけのものじゃなくて
みんなのための組織全体のものにするための
3ステップみたいなことも書いてあって
まずは地味に草の根活動からスタートしますみたいな
社内の勉強会をやってみたりとかしてましたみたいな話とか
あと面白いなと思ったのは
もうこの段階で社外の発信もしてましたみたいな話があって
kudakurage
それはすごいね
結構勇気いるよね
Takaya Deguchi
まともな文化としてオープン社内法っていうのをやってて
社内法をオープンにしていくみたいな
kudakurage
それによって多分採用につなげたりとかしてたんだと思いますけど
Takaya Deguchi
その中でデザインシステムこういうことやってますとか発信して
それがストックされていくし
やってる感にもつながっていって
プレゼンスも上がっていくっていう風な話をしてましたね
社外に出すのは結構勇気いるよな
kudakurage
なんかやってますとか言って
Takaya Deguchi
実際に中見たら全然広まってないみたいになっちゃったらどうしようみたいなさ
kudakurage
そういう不安もちょっとあるからさ
Takaya Deguchi
それがある意味プレッシャーになって
ちゃんとしようみたいになるのかもしれないけど
その上でステップ2として
デザインシステムのステップ3
Takaya Deguchi
次はご意見集めるみたいなよくある
社内で課題発見に協力してもらい
いいなと思ったのがステップ3として
出してもらう人にユーザーだけではなく
コンテンツの作成者側に回ってもらうための仕組みを作ってたみたいな
要はプロリクエスト送ってもらうみたいなことだと思うんですけど
なんかそういうデザインシステムチームが配布しますとか
一歩続こうじゃなくて
ちゃんと相互関係になるようなことを狙って
複数人で更新できるようなシステムを自社で作りましたみたいな話とかもされてましたね
そうこうして結果として
マートHRデザインシステムの2022年末時点での
全貌みたいなのが表として図として書かれてたんですけど
本当なんか必要なもの全部あるみたいな感じで
コーポレートミッションサービスビジョンみたいな
デザインシステムの構成要素
Takaya Deguchi
CI的なものもあれば
コンテンツの運用ガイドライン
例えばTwitterをどう運用していくとか
リリースノートみたいなのをどう書くべきかみたいなものが含まれていたりとか
それが割とどっちかというとコンテンツの運用ガイドラインみたいな話ですよね
またプロデザイン的な話で言えば
まずデザイン原則としてどういう態度で向き合いましょうみたいな話とかがあったりとか
あとデザイントークンとかコンポーネントライブラリとかがありつつ
あとはアクセシビリティをこうしていきましょうとか
あとはコミュニケーションデザインの文脈でスライドのテンプレートとか
名刺とかまた写真動画の撮り方とか
そういう本当におおよそ必要だろうなってものが全部あるみたいな感じみたいですね
それも結構繰り返し言われてるのが
ワークインプログレスの精神で
とにかく必要な部分から拡充していったみたいなことが書かれてて
それぞれをどういう風に作っていったかっていうのが細かく書かれてたんですけど
ちょっとピンときたものだけ紹介すると
SMART HRのブランドパーソナリティ
Takaya Deguchi
まずパーソナリティですよね
ブランドパーソナリティみたいなものってどのデザインシステムにも結構よく登場したりするのかなと思うんですけど
いいなと思ったのが
Smart HRの場合パーソナリティとして誠実とポジティブ分かりやすい親しみやすいっていうのがあるみたいなんですよね
よくそういうパーソナリティを表現するものとしてデザインキーワードみたいなのを挙げることってよくあると思うんですけど
それだけじゃなくて
例えば誠実っていうワードだけだと結構解釈にいろいろ幅があると思うんですよね
それを例えばSmart HRは会社と働く人どちらも安心して利用できるサービスを提供します
数字や情報は適切に扱い誤解を与えるような表現はしませんみたいな
割とこういう解釈ですよっていうのを促す説明文みたいなのをつけるようにしてますみたいな話があったりとか
あと面白いなと思ったのがトンマナダーツってものをやってるっていう風に言ってて
kudakurage
トンマナダーツ?
Takaya Deguchi
結局ブランドパーソナリティってそれを元にして具体的な活用例として
例えばバナーの表現とかをこういう風にしましょうとか
CM打つならこういうエンジェを使ってこういう表現しましょうみたいな時に
これは例えばさっきのSmart HRの話だとこれはこう誠実でいいよねとか
ポジティブでいいよねとか分かりやすいよねっていう議論になってくると思うんですけど
でも結局01じゃないからこうブレがあるわけじゃないですか
その誠実はポジティブ分かりやすい親しみやすいっていうその四軸があったとしたら
そのどこを優先すべきかっていうのが結構ブレるわけじゃないですか
kudakurage
なるほどね
Takaya Deguchi
でそれをなんかダーツみたいにマッピングして議論してるっていう風に言ってて
これは分かりやすさ10点これはポジティブ2点みたいなこのクリエイティブはみたいな
クリエイティブごとにその分かりやすさポジティブ親しみやすい誠実っていうので
まあ点数みたいなのをつけてマッピングをしてるみたいなんですよね
で相対的にちょっとこれはポジティブすぎるよねとか
ちょっとこれは誠実によりすぎてるよねだからもうちょいこっちのクリエイティブに寄せようみたいな
なんかそういうクリエイティブごとのクリエイティブをマッピングして
多分相対的な位置を議論してるっていう感じみたいで
まあそれでなんかこう多分デザイナーのあのなんていうの
認識を擦り合わせるみたいな感じで使ってるみたいですね
kudakurage
なんかそれはなんかちょうどいいここが一番そうだよねっていうスポットがあるっていう
前提というかそこにしていこうって話なんですか
Takaya Deguchi
そうスポット探るためにやってるっていうことみたいな
kudakurage
じゃあ別になんか今回はこれだったらこっち寄りでもいいよねとかそういう話ではないってことなんですか
Takaya Deguchi
なんかそこまではちょっと分かんなかったけど書かれてなかったけど
kudakurage
うんそのまあどっちかっていうとあれかだからやっぱり認識合わせというか
これちょっとこっちに寄りすぎてるからもうちょっとこっちにした方が良さそう
良くないみたいなそういうもののために使ってるって感じなんですか
Takaya Deguchi
だと思いますねだからポイントとしては多分その各パーソナリティの
に対してそのあるクリエイティブがどこに位置するのかっていうその位置を明らかにするっていうところで
ちょっとこれはあるバリューに寄りすぎてるあるパーソナリティに寄りすぎてるよねみたいに議論をするっていうところの材料としてやってるっていう感じだと思います
それでたまな適切なたまな探っていくっていうような感じみたいですね
伝わる文章の重要性
Takaya Deguchi
まあっていうのがパーソナリティの話であとなんか伝わる文章っていう項目もあるみたいで
これはね社外にも公開されているポイントですよね
kudakurage
伝わる文章は大事ですね伝わらない文章はいらないですからね
Takaya Deguchi
そうそうでなんか結構本を通してやっぱこの文章に対する力の入れ方は結構スマートHRのこのデザインシステムは
強いなっていう風に感じて
kudakurage
そうかなんかわかった気がするわちょっとスマートHRが伝わる文章って言ってる理由がなんかちょっとわかった気がするわ
Takaya Deguchi
まあそれね後から言おうと思ってたんだけど
そうやっぱねなんかそうデザイン原則そのスマートHRがデザインする上で大切にしている原則の一つとして
言葉から始まるデザインっていうのがあるらしいんですよで僕もなるほどねと思ったんですよそれ見て
でやっぱ人事とか論文領域って法律とか制度とかがベースにあるじゃないですか国のね
それをベースにしてるからやっぱそれをそのままユーザーに伝えてもわかんないってなるから
それをいかにこう取捨選択して情報設計して伝えるかってところが大事だから
だからその伝える場合解除して言葉が大事ですっていう話らしいんですよ
kudakurage
それは確かにそうだね
Takaya Deguchi
それはなるほどなと思った
kudakurage
こうとかおつとかいっぱい出てきたら何言ってんだお前みたいな
Takaya Deguchi
そうだね
ていうか国がもうちょいそこ大切にしてくれよってね思うんですけど
kudakurage
そこはね今デジタル庁の人たちがね頑張っているからねちょっと期待したいですけど
ガイドラインと伝わる文章
Takaya Deguchi
そうはだからこそガイドラインデザインしてるの中でもその伝わる文章っていうガイドラインがあるみたいで
なんか伝わる文章のチェックリストみたいなのも社内であるみたいで
例えばなんかこう1文が長くなってないかとか
なんかこう二重否定になってないかとかまあよくあるじゃないですか
てか僕もこのチェックリスト全く同じもの前の会社で社内で書いたことあるなって思い出したんですけど
kudakurage
まあよくねエンジニアとかだったらねなんかあるじゃないか
そういう一周にどうコメント書くとかそういうので
なんかこう分かりやすく伝える方法みたいなのなんかそういう話をすることあるけど
いやでもこれは確かに大事だよね
Takaya Deguchi
文章ってみんなね当たり前だけど書くから
なんかやっぱここに力入れるってのはまるみコスパもいいし
kudakurage
確かに
Takaya Deguchi
で特にスマートHRの場合人事労務領域
まあ僕の前の会社も人事だったから人材領域だったから分かるんだけど
いやそうだよねって思った
kudakurage
いやまあ難しいよねなんかちゃんと分かるように伝えなきゃいけないけどでもこう正確さも必要みたいなさ
だからところが多分特にスマートHRとかそういう領域はありそうだから
Takaya Deguchi
HR領域は本当そうだと思う
結構まあ力を入れる場所としては適切なのかもしれないねそういう意味でも
なんか噛み砕きすぎてもね分かりづらいみたいなのあると思うんですよ
なんかそのテクニカルタームみたいなのがあると思うから
はいはいはいはい
なんか分かんないけどカジアンブンとかそういうのって
kudakurage
噛み砕きすぎてなんか逆に言い回しが遠回りになっちゃって
Takaya Deguchi
そうそう
kudakurage
そういうのが大変につらくなるみたいなねとかあるかもしれないし
Takaya Deguchi
あと使い手もプロも使うと思うからそのローム担当者とか
そうすると前の会社であれ言ってたのがなんか噛み砕かれすぎて分かりづらいみたいなのってあると思うんですよね多分
kudakurage
そうだねいやこれは確かにそうだね
Takaya Deguchi
なんか本読んでてそういう時点でやっぱこの言葉を大事にするっていうのはスマートHRらしさがすげー現れてるなっていう風に思って
デザイン原則人に含まれてるっていう話もそうだし
なんか言葉絡みのガイドラインも結構豊富だなと思ったし
あとなんかテキストリントとかそういうリンターツールっていうのを整備して
そういうツールでなんかなんていうのテキストリントっていうOSSがあるんですけど
それなんかルールを定義しておくと例えばなんていうの
いただくっていう漢字は開くひらがなで開いて表記するとかそういうのあるじゃないですかよく
そういうのを定義しておいてで回る文章にそのリンターツールをかけるとエラー出してくれたりとかするってやつがあるらしいんですよね
でなんかスマートHRの場合はなんか用語集みたいなあのエアーテーブルっていうなんかあのエクセルみたいなやつで作って
でなんかそれをデザインシステムからも参照してそこに更新があるとなんかCIが回ってそのリンターツールが自動実行されるみたいなことをやったりするらしいんですよ
ハイテク
いやそうハイテクにやつるっぽい
ハイテクだね
なんかそのプロダクト内で使われてる文言とかもあるじゃないですか
そういうのも全部そのテキストリントでリントかけてるらしいんですよね
結構プロダクトデザインの中でライティングってデザイナーがやったりとかするケースあるじゃないですか
それで表記がぶれちゃったりとかすることあると思うんだけど
そういうのも全部そのツールでCIでリント回してみたいなエンジニアっぽくやってるらしいですね
kudakurage
いやでもなんか結構そういうのやっぱ大事ですよね
クックパッドの時もさっきも出てきた池田さんがよく言ってたんだけど
なんかこうそれなんか自動化できないかみたいなのよく言ってたんだよ
だからそういうなんかこうチェックするだとかなんかこれを例えば画像を最適化するだとか
Takaya Deguchi
そういうのってなんかもう全部自動化できないかなってことあるごとによく言ってて
kudakurage
やっぱなんかそうなんだろう考えなくていいようにするっていうのが
なんていうの考えなきゃいけないことなんだけど
自動化とUXライティング
kudakurage
でもなんかその毎回あれ思い出してあれやんなきゃみたいなやんなくてもいいようにするっていうのが
多分デザインシステムじゃないけどなんかそういう風に導入していくルールみたいなものを
時に多分必要なんだろうなっていう風な気はするよね
Takaya Deguchi
エンジニアマインド結構大事だなと思ってそういう時に
なんか自動化してCIで回そうみたいなそういうの発想大事だし
あとスマートエッジでやるのがそれだけじゃなくてUXライター職みたいな人が結構いるみたいで
そういうライティングUXライティングみたいなことを専門にやる人をちゃんと置いているっていうのも結構言葉を大事にしていることが現れたんだろうなっていう風に思いましたね
こういうところもやっぱ組織とか事業ならではの色だなって思って
kudakurage
そうだね
Takaya Deguchi
なんかクックパッドだとなんかどっちかというとなんか料理が美味しそうに見えるかどうかみたいな軸って結構デザインシステム作る上でも大事にしてたなと思ってた
それこそ色選びとかね
あとUIに使う
UIのレシピコンポーネントのそのレシピのこう切り取り方とかも結構こだわってたなみたいな
その辺はやっぱ会社らしさ事業らしさが表れるなという風に思いましたね
あと色で言うと
そうそうあの前もてもさんがサブトピックス言ってたっけ
カラーチップを作ったみたいな話
ノートにあったじゃないですか
kudakurage
印刷用のやつね
Takaya Deguchi
色交するための色のブレを防ぐための基準となるシートみたいなやつですよね
でなんか面白いなと思ったのがそれを名刺最近は名刺の裏をカラーチップにしたっていう風に書いてて
で僕正直カラーチップの話確かに面白いなと思ったんですけど
なんか運用イメージあんま分かないなと思ったんですよ
なんかデザイナーグラフィックデザイナーが使うのはまあ分かるんだけど
なんかデザイナーのためのツールっぽいく見えてたというか
グラフィックデザイナーのためのツール作りましたみたいな話なのかなと思ってたんだけど
名刺をカラーチップにしてるっていうのはすごいなんかいいなと思って
名刺誰しも行き渡るツールだし
名刺のデザインに対する姿勢
Takaya Deguchi
そこで効率よく迷わず色を確認できるツールとして機能するっていう話もそうだし
あとなんかそのこの本に書いてあったのが色を大事にしてますよっていうその表れを
そのなんかこうその姿勢を伝えるだけじゃなくてちゃんと名刺にもそれをやってるんだっていう風に
物として手に取れる物として存在することで
そのデザインに対する姿勢が伝わるんだみたいな話で書いてあって
それは確かにそうだろうなと思って
例えば営業とかで入社して
いやこれあの名刺の裏がこうこうでカラーチップになってるんですよとか言われると
あそこを大事にしなきゃいけないんだっていう風にこう思うと思うんですよね
だからそういうなんかこう組織を巻き込む意味でも
デザインに対する目線を上げる意味でも
名刺をカラーチップにするっていうのはすごいいいなっていう風に思いましたね
だからなんかその裏面をカラーチップにしてるらしいんですけど
それだけはその正確な色が擦れるような印刷所に頼んで
で表面のその人によって情報が変わる部分はオンデマンド印刷でみたいな感じで
使い分けてるって言っててそんなことできんだと思った
色やイラストにこだわる姿勢と割り切り
kudakurage
いやまあできなくはないけど大変そうだよね
コストかかりそうだけどそれはそれで
Takaya Deguchi
ねまあでもそれぐらい力入れてやってるみたいですね
これはあるあるだなと思ったのがブランドカラーのアップデート一回したらしいんですよね
スマートエディジャルって青色を
でその時にヘルプページにやっぱSaaSとかでやっぱヘルプ作ってくれみたいによく言われるから
でスクショ大体スクショ撮ってヘルプページ作るわけですよ
でそうすると旧カラーが残るわけじゃないですか当然スクショだから
それは良くないつってフォトショップで一括変換するための環境を作ったっていう風に言ってて
撮り直すのもその労力はちょっとコスト避けないから
色だけをフォトショーで実感するための環境を作ったみたいなことが書いてあって
そこまでやるんだなっていうのは思いましたね
まあただそういう色にめちゃめちゃこだわってるなと思いつつも
逆にフォントとかはどんな環境にも入ってるUgothicを選んでるとか
アイコンはフォント王様を使ってるとか
そういうある程度コスパも考えたスタートアップらしい割り切りもしてんだなっていうのは意外なとこではありましたね
意外だしやっぱりそこ大事だよなと思うし
特にアイコンとかね全部作るのって結構大変だし
クックパッドでもやってたけどやっぱそれを
このアイコン必要だからつって作ってもらってそれを
フォントシステムの方に反映してみたいなことをやるのも結構大変だったりするから
そこをフォント王様で割り切るっていうのは結構
B2Bサースだからこそだとは思うんですけど
らしいなと思いましたね
デザインシステムの設計方針
Takaya Deguchi
あとイラストシステムも作ってますみたいな
結構スマートエディジアルだと従業員系のイラストが結構必要になるから
そういうのを誰でも作れるような
言ってものじゃなくてある程度システム化したものを作ったとかいう話がありましたね
ここはやっぱイラストシステムっていうパーツで
例えば体のパーツを分けて顔のパーツ分けてそれを組み合わせて
イラスト作るみたいなことだと思うんですけど
それはなかなかイラストレーターでそれができる人はいないから
適切な人をどう見つけるかが大事ですねみたいな話があったりとか
でも作るの大変だけど汎用性高いですみたいな話があったり
あとUIの話だとデザイントークンの話があって
これも社外に公開されてるんですけど
デザイントークンって黒が000ですみたいなやつを
000ですってやるんじゃなくてブラックっていう名前にしましょうみたいな
そういうすげー大雑把に言うとそういうやつですけど
その設計って結構UI系のデザインシステムを作る上では
一番最初にやることかなって思うんですけど
それの考え方みたいなのも書いてあって
まずはプリミティブトークンっていう
色だったらブラックとかレッドとかそういうやつ
あとはそれを参照するセマンティックトークンっていう
バックグラウンドとかボーダーとかテキストとかディセーブルとか
そういう文脈に依存するようなトークンっていうので分けて
設計しましょうみたいな感じの指針でやってるっぽいですね
色とかサイズSMLみたいなやつとかってのよくやると思うんだけど
LineHeightとかもちゃんとデザイントークン化してるみたいなことが書いてあって
例えばLineHeight1.5をノーマルにして
1.75をリラックスにして1.25をタイトにするみたいな
そこまでやってるんだみたいなのが普通に勉強になりました
結構LineHeightとか抜け漏れがちかなと思うし
あとはデザイントークンだけじゃなくてコンポーネント?
設計もどうやっていったかみたいなこと書いてあって
これもまたいいなと思ったのが
インターフェースインベントリってあるじゃないですか
そのプロダクト内で使われてるUIをとにかく集めてきて
それを共通できそう 共通化できそうなものを探っていくみたいなやり方
でもそれ自体が結構目的がしてしまいがちなんだけど
結局それってUIの統一感を取るためにやることなんだけど
それ自体がそんなに価値がないみたいなことが書いてあって
結局ユーザーって全ページ見るわけではないから
全ページ統一してることにすごく重きを置くことは
あんまり重要視しなくてもいいんじゃないかみたいなことが書いてあって
それは確かにそうだなと思ったんですよね
それよりは確かにさっきの言葉とかの方がよっぽど影響する部分が大きいっていうか
だし この本にも早すぎる抽象化っていうふうに書いてあったんだけど
共通化しようしようとか統一しようと思うことで
結局それによってUIに似たものを共通抽象化してっていう作業すると思うんですよ
そのコンポーネント設計する上で
で 結構新規プロダクトの立ち上げ系を僕もよくやってて
起こる問題 起こる問題として抽象化早すぎて
デザインシステムの抽象度のコントロール
Takaya Deguchi
そのコンポーネントの切り方がちょっと間違ってるみたいなのがよくある
例えばボタンコンポーネントみたいなのを作ったとして
ボタンコンポーネントっていうのは本当にボタンって結構主語が広いから
ボタンの中でもいろいろあるじゃないですかテキストで作られているボタンとか
アイコンがあるボタンとかアイコン単体のボタンとか
メニューが出てくるボタンとかあるじゃないですか
それをどこまでボタンとするかっていうのは難しいと思うんですよね
で それである程度パターンが出てきたら結構プロダクト育ってきてからそれをやるのは
比較的できると思うんですけど
やっぱその早すぎる段階でそれをやると逆にこう使いづらいみたいなことがよくあると思うんですよね
で 抽象度上げすぎると本当それ厄介で
レイアウトコンポーネントとかレイアウトとか結構抽象高いじゃないですか
2からも3からもとか
あるいはなんかこう例えばフィードUIがあって
そのフィードUIに流れてくるアイテムをカードUIみたいな感じで切り出すとするじゃないですか
で カードってめっちゃ主語でかいじゃないですか
それがもしなんか分かんないけどなぜか別のところなんかそのなんていうのかな
バナー見出しみたいなののザブとみたいな感じで使われてたりとか
それもなんかもう違うじゃんみたいな別物じゃんみたいな
で そうすると抽象高すぎるが故にそれをまた剥がすのも大変で
で それが不再化するみたいなのってめちゃくちゃよくあると思うんですよね
kudakurage
まあなんかその例えばじゃあカードコンポーネントを更新したいというかアップデートしたいってなった時に
他のところになんか色々影響しすぎちゃって
なんかねアップデートするのがすごく大変になっちゃうみたいなね
そうそうそう
そういうのがよくある話だよね
Takaya Deguchi
で それこそちょうど去年僕フリーランスでクックパッドの仕事をやった時に
その10年後のさっき出したSaraっていうののリプレイス作業をやってたんですよね
新しくSara、Sitrus、でその次の後継としてApronっていうデザインシステムを富士県がね作ってたんですけど
そのそれにリプレイスするという時はやっぱSaraがもう
あのまあ物によってはその抽象化されすぎているコンポーネントもあって
それの使い方が結構エンジニア主導だったから必ずしも適正に使われてない部分もあって
でその結果抽象高すぎるから故に剥がすのが大変みたいな
のをいかにこう剥がすかみたいなことをフリーランスとしてやってたんですけど
kudakurage
CSSの場合はね特に上書きとかできちゃうから
コピペから始めるデザインからの抜け出し方
Takaya Deguchi
そう技術的にもね
kudakurage
それもあって大変だよね
Takaya Deguchi
今はそのCSSもスコーピングしやすいするためのCSSとかあったりするからあれだけど
昔はそういうのもなかったから
ボタンを持ってきて更にカスタマイズしてみたいなのになってたりすることがほとんどだから結構
でそのねCookpadみたいな10年20年経ってるプロダクトで言えばそうなんですけど
結構01で立ち上げる時も自分一人でこうなんていうのUI作ってる時も
結構こうReactとか使ってるとコンポーネントベースで先のとき切り出すじゃないですか
それをいかにこうどの単位でまとめるかっていうのは悩みがちなんだけど
だいたい抽象化すぎると失敗するんですよね後から
kudakurage
まあまあそうだね
Takaya Deguchi
だいたい抽象化のレベルのコントロールに失敗して
そうするとインターフェースReactプロプスみたいのがどんどん増えていって
なんかこの画面ではロゴは隠すみたいなインターフェースが増えていって複雑化するみたいなことが起こるから
まあやっぱなるべく具体化するものが具体的にまずはピュアに素朴に作っていくっていうのがすごく大事だなっていうふうに思ってて
kudakurage
なんかでもエンジニアリングと基本的に考え方は変わんないのかなって僕は思ってますけどね
Takaya Deguchi
一緒だと思います結局モデリングだと思うから
kudakurage
そうそうなんか抽象化っていうよりは使い回しを減らそうみたいな
使い回しを減らそうっていうか同じコードの車輪の再発明をやめようみたいな
そういうことかなって基本的には思うから
なんか例えば自分で作っててまた同じものを作り始めちゃってたら
これとかコピーしてそのまま置いてたりとかしたら
じゃあこれはコンポーネントに一回しようかみたいな
そうそう
それをどんどん積み重ねていったら
ちょっともうちょっとじゃあこれは抽象化的なものにした方がいいかもねっていう風にちょっとずつ段階上げていくというかさ
多分そういう風にした方がいいよね基本的に
Takaya Deguchi
そうですね
なんか車輪の再発明を避けなきゃ避けなきゃって思いすぎると早すぎて抽象化しちゃうんで
なんかちょっと発明したぐらいに留めとくっていうのがなんかいい塩梅だなっていう風に思ってて
kudakurage
僕もだから普通にフィグマとかでデザインしてて最初コンポーネント作んないもんね
Takaya Deguchi
いやそうっすよねそうですよね
kudakurage
だから普通にボタン普通に作って似たようなものをどんどんコピーしてって
やべえこれコピーしたやつ編集するの大変だってなってから
そこまでいくとちょっと遅いのかもしんないけどもしかしたら
Takaya Deguchi
僕もそうですよ自分でデザインする時とか雑にコピアとかしまくりますからね
そうそうそうそう
コード書く時も
kudakurage
やべえ編集しなきゃってなった時に全部変えなきゃみたいになって
これコンポーネントにしたけばよかったと思ってコンポーネントにするみたいになった
Takaya Deguchi
特にもう使い捨てだと思ってるプロトタイピングとかする時とかもうマジで雑にコピアとかしまくって
まあ後から大変なることもあるんだけどまあそれはそれっていうね
kudakurage
まあなんかそのタイミングちょっと難しいとこあるかもしんないけどでもなんかそれぐらいだよね
その時になってからようやくコンポーネントにしていくというかさ
Takaya Deguchi
そうそうだからなんかインターフェースインベントリしながらプロトタイプ作るみたいな
なんかそのそれが大事だろうなっていうのはずっと常々思ってたし
やっぱそうやって書いてあってやっぱそうだよねって思ったっていう
そうだね
早すぎる抽象化は良くないっていう
デザインシステムの構築要件
Takaya Deguchi
ちょっとねここに関しては僕がよく当たる問題なんですごく頷きながら読んでましたね
あとはさっきの文字の文章の指針みたいのはやっぱこうガイドラインの中でも手集めにやられてるなっていうような感じで
リリースノートの書き方とかも触れられててこれもすごいわかるわと思ったんだけど
僕も結構SaaSのプロダクトオーナーとかやってる時ってリリースノート書くようにしてて
リリースノートっていうのが大概社外向けにこれこれこういう機能アップデートでこういう機能追加しました
この機能はこういうふうに使ってくださいねとか
あとは地味にこういうことも改善しますよみたいなのを書くみたいなことをやるようにしてるんですけど
やっぱそれ書くことによって大概的にこのサービスアップデートされてる感が伝わるのあると思うんですよね
やっぱこう常にアップデートしてる新規機能が全ユーザーに必要とされる
全ユーザーがそれを享受できるかどうかというのはまた別の話だと思うから
見えないところでもアップデートされてるってことあると思うんですよねユーザーにとって
だからちゃんとそれをやってる感を伝えるっての大事だし
あとリリースノートを書くのタイガニア向けにやってるんだけどさっきのオープン社内方と一緒で
結構社内向けにやってる面も僕は結構強くてやるときは
だからエンジニアデザイナーがこういうことやってんだよっていうのを
ビジネス側からしてみるとよくわかんないみたいになりがちだから
リリースノートを書くことによってこういうことやってんだよっていうのを
スペシャルサンクスみたいな感じで伝えるっていうのが結構大事だなと思ってて
SARSの会社だとね特に
その書き方も含めてデザインシステムにあるっていうのはすごくいいなって思ったっていうね
僕前の会社だとノートでリリースノート書くようにしてて
結構それは後半まで自分で書いてたりしましたね
あとはデザインレビューのやり方とかそういうコンテンツもデザインシステムの中であったりとか
そのレビューのテンプレートとかそのデザインレビューに対するスタンスとかの言語が下のとか
あとユーザビリティテストの手順とかそういうのもあったりするらしいですね
ほんと何でもあるなっていう
あとはよくあるスライドテンプレートとか
あとアクセシビリティのチェックリストとか
ほんと必要なものは何でも用意されてんだなっていう感じでほんとすごいなって思いましたね
っていうのは中身の話で
あとはそれをどう運用してるかみたいな話も軽く最後に触れられてて
デザインシステムの運用とテスト
Takaya Deguchi
さっきの自動化の話ですねほんまに
テキストの話だったらそのテキストリントっていうツール使って
CIでリンティング回すみたいなことやってたりとか
あとUIのコンポーネントだとビジュアルレグレッションテストっていう
UIのスクショをとってその差分がないかみたいな
マージされた新しいコードの
例えばボタンコンポーネントが例えば意図せずなんかデザインシステム上で変更されてて
それがプロダクト内全部でボタンっていろんなところに使われるから
影響が波及しちゃうみたいになるときついから
それを防ぐために意図した変更なのかどうか検知するための
なんか仕組みみたいなのがそのビジュアル回帰テストっていうのがあるんですよね
でそれのための最近だとChromaticっていうツールが
僕もちょっと使ったことあるんだけどあったりとかして
それの紹介とかされてましたね
このChromaticっていうのはなんかそのUIをコンポーネントごとにスクショとってくれて
その差分を検知してくれるやつなんですけど
結構便利ですねこれはとか
そういうシステムの運用面の話も触れられてたりとか
あとなんかすごいなと思ったのが
SmartHRはなんかこのデザインシステムの開発を一部
PixelGridっていうJS系に強い製作会社?デザイン会社?となんか協業してるらしくて
結構そういう外の力も作ってなんか力入れてメンテしてるっていうことらしく
この力の入れ合いはすごいなと思いましたね
結構そういうなんていうのかなハイテクなことはいろいろやってるみたいで
デザインシステムの各種ドキュメントの連携
Takaya Deguchi
なんか大きくデザインシステムっていうのがいわゆるドキュメントサイトで
さっきのいろんなガイドラインとかが集まってるドキュメントサイトと
あともう一個SmartHR UIコンポーネント UIライブラリーみたいなやつがあって
そっちは直接アプリからサービスから使われる
そのReactのコンポーネント集みたいなやつと
あとFigma上のデザインライブラリーみたいなものがあるらしいんですよね
でなんかそれらが全部連動するようになってるらしく
なんかそのSmartHR UIコンポーネントっていう
そのコンポーネント集の使い方みたいなドキュメントを
そのデザインシステム本体のドキュメントサイトの方で参照して
なんかこう例えばインターフェースプロプスの例だとか
こういうふうに使うんだよっていうような
このコンポーネントはこういうふうに使うんだよっていう
ドキュメントをなんかこう生きた状態で見れるようにするみたいなことをやってるって書いてましたね
でその上でそのFigma版のSmartHR UIっていう
ライブラリーが公開してるみたいなんですけど
なんかそれは外部にも公開して
なんか外部の製作会社がこうクイックに
製作作る時に使ってもらえるようにしてるとか
でそれをFigmaのアナリティクスの機能で
どれぐらい活用してるか見てるみたいな話もあったりとか
ほんとそこまでやってんだなっていう
すごいなという感じでしたね
であとなんか本の最後の方には
なんかいろんな他社の他社がどういうふうに
デザインシステム作り始めたかとか
そういうののアンケートの結果みたいなのがまとまってて
でそこにCookpadとかもあったりとか
あとCyberJetとかDigitalChowとか
そういうのも結構やっぱ各社のこう
さっきのCookpadだったら料理が美味しく見えるように
みたいなところって大事にしてるみたいな話があったりとか
デザインシステムの紹介
Takaya Deguchi
各社がどういうところに重きを置いてるのかってのがまとまってて
それもそれで面白かったですね
っていうのがざっとしたこの本の紹介なんですけど
そうしてめちゃくちゃ力が入ってて
すごいなという感じだし
なんかほんとこうやり方が地に足ついてて
できるだけワークインプログレスで
できるだけ実践しながらやっていきましょうみたいな感じがあって
すごい良かったですね
kudakurage
めちゃくちゃすごいデザインシステム作ってるけど
タイトルにもある通り小さく始めましょうっていう話ですよね
Takaya Deguchi
だしなんかやってることそれぞれが
言葉の話もそうだけど
SmartHRはこういうサービスだこういう事業だからこうだよねっていう
必要性が必然性がちゃんとあるというか
それがすごい良いなと思いましたね
かつ単にデザイナー向けのシステム作りましたっていうんじゃなくて
ちゃんと全社巻き込むためにこういう仕掛けをしてますっていうところが
ほんとデザインされてるのが良いなっていう感じでしたね
デザインシステムを作る機会がもしあれば
すごい参考になるものかなという風に思いましたね
kudakurage
なるほど
Takaya Deguchi
なかなか僕らまた作る機会があるのか分かんないけど
クライアントワークしてると
いやまあ小さくっていう意味では全然ありますよ
kudakurage
なんか立派なもの作るのがデザインシステムっていう風な考え方をやめた方がいいってことだと思うんで
この本が言ってるのは
だからそういうちょっとした便利グッズみたいなのを作る
そのデザインをするというかなんかねそういうものにあたってちょっとした便利グッズを作るっていうのが
もう一つのデザインシステムなんだっていう風に思った方がいいという風なことだと思うよ
Takaya Deguchi
確かに
なんかふと思い出したけどなんかコロナの時期になって前の会社なんだけど
zoomでやり取りする機会増えたじゃないですか
なんか結構営業系の職種だとzoomの背景を自分の名前にするみたいなことをやりたいみたいな話があって
でその時なんかあの当時道川さんっていうあのキベラも一緒に作ってた今アリフカムのCDをやってる人がいるんだけど
なんかその人がなんかその名刺の名刺っぽいzoom背景を自動で作るなんかちょっとしたツールみたいのを作ってくれたことがあって
でそれをすることによって
それもちゃんとその前の会社のアリフカムっぽい感じのデザインのものが自動生成されるみたいなスラックのツールみたいなのを作ってくれたことがあったんだけど
なんかまあそれも確かにデザインシステムの一つだよなっていう風に今は思って
kudakurage
そうだよねそういうもう一部だよねだからその後々一部になるものだよねパーツの一つ
Takaya Deguchi
さっきのCookさっきのねもてやまさんのあのCookpadのアイコンフォントもねそうだし
kudakurage
結局だからそれの積み重ねとか統合によってそのすごいドンっていうまあスマートHRだったらそういうものができてるだけであって
それをいきなり作ろうっていうのはやっぱりなんかちょっと大変だし間違った方向に行っちゃう可能性もあるから
労力かけた分にダメとかなっちゃう可能性もあるからそういう風に小さく始めた方がいいんじゃないのっていう話なんじゃないですかねやっぱり
小さく始める
Takaya Deguchi
あのアイコンフォントもあのCookpad内で10年経った姿を見ましたけど去年すごいなんか立派になってましたよシステムと
kudakurage
そうなんだあれね僕がやってたところはまだ手作業で作ってましたからね
Takaya Deguchi
いやだいぶ自動化されてましたよ
kudakurage
僕も自動化したかったんだけどね僕にあんまりそこまでの技術力とかがなかったからあれだったけど
Takaya Deguchi
すごい立派になってましたよ
kudakurage
よかったよかったでも最初はやっぱりだからそういうのねできる範囲でやっていけばいいんだと思うんだよねやっぱり
まあでもいい話っていうかいい本なんじゃないですかね
Takaya Deguchi
いい本でした
kudakurage
じゃあ皆さんも気になったら読んでみてください
僕も多分僕もちょっと読んだりはしてるけどまだ全部は読めてないんでもうちょっとちゃんと読んでみようかなって思いますね
あとまじゃああれだ一応しつこく消しますが
Takaya Deguchi
またするの?
kudakurage
ちょうどねこの配信している日に聞いている方はあれですけど
あの明日明後日4月の14、15日にイベントでリサイズFMのだって無料だよ
オリジナル付箋
Takaya Deguchi
そうね
kudakurage
オリジナル付箋無料で配るんで
Takaya Deguchi
そこはそんな強調しなくてもいいと思うけど
無料だよもらうでしょ無料だったら
kudakurage
それなりにねちゃんとしたものを作ったつもりなのでなんかもし暇だなっていう人がいたらあの中目黒のオープンっていうカフェに
オープンだったよね確か
あのクラフツー&コーガレージっていうイベントで置いてるんでぜひぜひ遊びに来てください
Takaya Deguchi
ボドゲーもあるよっていうね
kudakurage
ボドゲーとか植物とかなんか色々あってなんかカオスな感じになりそうだなっていう風に思ってます
配信終了
kudakurage
どういう感じなのか全く分かんないけど
Takaya Deguchi
多分そういうコンセプトのイベントだと思うから
ガレージとか
kudakurage
まあまあでもね多分なんかそのいろんな人がいると思うから
あの当日のイベントの時僕も多分いる時はいるだろうし
だからまあそういうのに会いに来るとかでも全然いいし
Takaya Deguchi
ちょっとオフ会的な感じで
kudakurage
話に来るとかでも全然いいし
また来ていただければなと思います
リサイズヘムへのご質問やご感想リクエストなどは
#リサイズヘムでツイッターにつぶやくか
小ノートにあるお便りのリンクから送っていただければ
配信内で取り上げたりしますので
どしどしいただければと思います
リサイズヘムは毎週金曜日に配信しています
Spotify、Apple Podcast、Google Podcast、YouTubeなどで配信していますので
よかったらチェックしてみてください
ということで今回はここまでまた次回お会いしましょう
さよなら
Takaya Deguchi
さよなら
kudakurage
さよなら
Takaya Deguchi
♪~
01:24:06

コメント

スクロール