システム化するのが難しいデザインシステム
司会者：クックパッドさんは、コミュニケーションデザインを掘るとどのへんになるのでしょうか。
いちはら氏（以下、いちはら）：私もぶっちゃけて言うと、この登壇が決まってからSlackでみんなに聞きました。
（一同笑）
司会者：最高ですね。
いちはら：「コミュニケーションデザインってなに？」ってコミュニケーションデザイナーに聞いて回りました。それで、一応みんなから同意を得て、図解にして要領を得たのですが、コミュニケーションをデザインするというのは完全に主観なので、一番シンプルに話そうとすると、そうかなという感じですね。
samemaru氏（以下、samemaru）：わかります。説明しやすいかたちに落とそうと思うと、けっこう制限するニュアンスがどうしても出てくるなと思っています。「コミュニケーションをデザイン」は、領域として「ここです」と言い切ってしまうと、「じゃあこれはやらなくていいの？」みたいなものが出てきてしまう。むしろコミュニケーションデザインってそういうのを拾っていく性質があるじゃないですか。
いちはら：確かにそうですね。「コミュニケーションの場を作っていくことじゃないの？」みたいな話は社内でもけっこうありました。モノとかにしちゃうと、samemaruさんが言ったとおりで、「じゃあこの場合は？」と、こぼれちゃうというのはあると思うんですね。だって「コミュニケーション」もメチャクチャ言葉の領域自体が広くないですか？ 定義をすればするほど難しくなってきちゃうのも、逆説的に難しいところだなと思うんです。
putchom氏（以下、putchom）：デザインシステムというところをシステム化するのが難しいですよね。
samemaru：そうですね。
司会者：固定されたアウトプットというか、なにかしらのわかりやすい成果物がある領域ではないというのも難しいところの1つですよね。
sekig氏（以下、sekig）：例えば「場だよね」みたいな話になった時に、同じ職域のメンバーとは「そうだよね」と合意形成しやすいと思うのですが、そこから離れたメンバーとどれだけやれるかこそが大事かなと個人的に思っています。そういう時に「場」という言葉に対する認識がけっこう違うことが多いと思うんですよね。
そうなった時に、「これは場ではないから違うよね」みたいなことになると、ロストしてしまう。少なくともSmartHRではそうなりたくないなという思いがけっこうあります。なんらかの定義をしなければいけない必要性があるとは思いつつも、あえてかなりゆるい状態でやっているという、自覚的なところはあると思います。
いちはら：わかります。宣言するのはちょっと難しい。ふわっとさせておきたいというのがあります。
sekig：そうですね。必要性はあるので、どこかでとは思いつつも様子を見ながらやっているという感じですかね。
GMOペパボがコミュニケーションデザインを言語化した理由
司会者：逆にペパボさんが、戦略の再現性を上げるというのと、制作物の生産性を上げるという2つに言語化したところは、どのへんがポイントなんですか？
putchom：今回のイベント自体がデザインシステムにおいて、コミュニケーションデザインをどう扱うかというところかなと捉えています。それでいうと「デザインシステムにそもそもコミュニケーションデザインを組み込むべきなんでしょうか」というところから問いを作っていて、その時に下のほうに書いたんですが、さっきみたいにすべてをシステマチックに処理をするのはけっこう難しいなと思っています。
（画面の）もうちょっと下のほうにある、ブランドとトピックとプロダクトとコミュニケーションの相関みたいなものを考えています。
プロダクトデザインとコミュニケーションデザインにおいて、ブランド的なものを出していく割合はどれくらいにしたらいいんだろうねというところで、プロダクトとデザインって、けっこう面として全部を取りにいくくブランドとして持っていてもいいんだけど、コミュニケーションをデザインする時は、どちらかというと個別のトピック、下で定義をしていたようなロゴとかというより、写真とか、もう少し個別のトピックでコミュニケートすることが多い。
というのもブランド名だけで信頼感を勝ち取るのは、NikeとかAppleとかのレベルまでいかないとけっこう無理だなと思っているんですよね。僕らみたいに小さめのブランドの場合、コミュニケーションはブランドとトピックの割合を意識してやる必要があるので、こういうのを作って社内で共有している感じです。「共有している」と言ったんですが、これもミーティングで作ったので、これから共有していく感じです。
（一同笑）
putchom：ボヤッとしたものを言語化したので、これから共有していこうかなというところですね。
司会者：コミュニケーションデザインは、各社タッチポイントとか、総じてコミュニケーションデザインは広いぞというところとか、場づくりにすごく関連しているところとかは共通していますが、どれぐらい細かく定義していくのかという点においては、少しずつ違いが出てきそうですね。
いちはら：そうですね。
クックパッド社における、コミュニケーションデザイナーの関わり方
司会者：では次の質問に移っていきましょうか。各社のコミュニケーションデザイナーが、仕組み作りだったり、デザインシステムだったりの活動にどういうふうに関わっているのか。
コンポーネント以外のデザインシステムとは何だ？ というところになるかと思いますが、そのあたりをちょっとうかがっていけたらなと思っています。クックパッド、ペパボ、SmartHRの順にいきましょうか。
いちはら：どう関わっているかは、けっこうフェーズによってぜんぜん違ったなと思っています。「Apron」の立ち上げ時は本当にガッツリというか、デザインのコアコンセプトを定義するのに、ずっとコミュニケーションデザイナーが関わって社内のみんなを巻き込んで進めていた感じですね。
その時にどういうことをやっていたかというと、年表みたいなものをMiroに貼ったのですが、社内のデザイナーさん中心に、非デザイナーさん、エンジニアさん。レンジも新入社員からプロダクトオーナーまでいろいろな方にヒアリングをしたり、社内でワークショップを繰り返したりしてブランドのコンセプトやパーソナリティを定めていった感じですね。
最近はもう少し浸透フェーズになってきていて、週に1回デザインの横断会みたいなものがあるので、システムに載せるのか載せないのかとか、こういうのはシステムにあったほうがいいのかみたいな話をしたり、課題の吸い上げは随時GitHubで受け付けて、更新・管理している感じですね。クックパッドには歴史があって、実は10年ぐらい前からデザインシステムみたいなものは存在しています。
司会者：すごい。
いちはら：それがお皿の「Sara」と言うんですよ。「Sara」は、主にCSSのコンポーネントを提供していました。その後に「citrus（Design guideline）」でブランドコンセプトやパーソナリティが初めて登場しました。
そこの流れを継承したわけではありませんが、今はコミュニケーション部分も含まれているし、本当に実装に近いUIコンポーネント集と、デザイントークンなどもまとめたApronというものができているフェーズです。Saraからの置き換えをやっていて、デザインのアップデートをしていく時期です。なのでちょっと歴史が長いデザインシステムですね。
司会者：コミュニケーションデザイナーならではの関わり方はあるんですか？
いちはら：やはり立ち上げ時期に言語化していくというところ。ふわふわしたブランドのイメージなど、そういうところを定義していくのはけっこう（デザイナー）ならではの関わり方かなと思っていますね。
たぶんApronも、数年後に解体することを念頭に置いて浸透させているのですが、いかに壊しやすく作るか、みたいなところはクックパッドの中でもかなり注意しています。コミュニケーションデザイナーと、社員みんなと一緒に作ったコアコンセプトはコアとして絶対に残り続けて、その上に乗ってくる表層的な表現は、先ほども言ったとおり時代によって適切なかたちに変化していく。
なのでコミュニケーションデザイナーは、そのコアなところをいかに耐久性強くできるか、粘度の高いブランドコンセプトをきちんと社内を巻き込んで作れるか、みたいなところが大事なのかなと思っています。
司会者：チラッと見えているフォトガイドラインも同じくコミュニケーションデザイナーの仕事ですか？
いちはら：そうですね。社内にカメラマンさんがいるんですよね。カメラマンさんと一緒に「いったいどういったものがクックパッドらしい写真なんだろう」というのを定義したりしています。実はクックパッドの写真は全部食べられる写真なんですよ。嘘の写真がないというか、全部手作りで写真を撮ったあとにおいしくいただけるものなんですよ。
samemaru：すごい。
いちはら：おいしそうですよね。実際に食べられるものを嘘なくきちんとコンテンツにするのも精緻化していった感じです。
司会者：なるほど。ありがとうございます。けっこうキーワードが出てきましたね。壊すことを前提に作るところだったり、コアと表層を分けてコアを決めていくみたいなところだったり。
サービスを横断して共通基盤システムを使うGMOペパボ
司会者：ペパボさん、いいですか？
putchom：はい。どう関わっているかというところなんですけれども。コミュニケーションデザインのデザインシステムの設計をする専任のチームを弊社は設けていません。「Inhouse」自体のプリンシプルに、継続的なコミットを促すというのがありますが、そのために各サービスからメンバーを集めて運営をしている感じです。
トピックによりますが、最大10人ぐらいが週1の定例に集まって、例えば「SUZURIでこういう施策をやる時に、こういうコミュニケーション上の課題があるんですけど、どうしましょうか」みたいな話をして、それはこういうふうに一般化や言語化ができそうだし、他のサービスでも活かせそうだねとか、「minneでこういうイラストができたんですけど、これはもしかしたら他のところでも型として使えそうですね」みたいな話をして、それをどんどんInhouseに集約して、バックポートして再利用できるかたちにする活動を週1の定例、もしくは臨時会でやっています。主に、そのトピックを話したい人と、デザイン部のメンバーで臨時でやっています。
ほかにも、界隈のニュースについても話したりして、コミュニケーションデザインおよび、コンポーネントライブラリの話をしつつ、コミュニケーションデザインでの型とか定石の定義みたいなことをやっている感じです。
司会者：Inhouseはペパボさんのデザインシステムですよね。
putchom：そうですね。ごめんなさい、言っていなかったかもしれませんが、Inhouseはペパボの共通基盤デザインシステムです。他のサービスでは珍しいと思いますが、ペパボは社名とサービス名があまり一致していません。会社の名前はペパボですが、minneとかSUZURIとかカラーミーショップとか、いろいろなブランドのサービスを展開しています。また、これは他の企業と一緒だと思いますが、iOS／Androidのマルチプラットフォームでいろいろなサービスを提供しています。
いろいろなサービスやブランドがあって、ここ数年は個別にデザインシステムを作るという活動もあったのですが、社内リソース的に考えてもけっこう無駄が多いので、もうちょっと共通化できるところがあるよねというところで考え出したのが共通化の部分を巻き取るInhouseというプロジェクトです。
このあたりを巻き取ることで、個別で考えないといけない本質的なデザインに集中できるのが良いところかなと思います。
司会者：なるほど。関口さん、samemaruさん、いちはらさん、どうですか？ Inhouseはかなり骨太ですよね。すごいなというのが感想なんですけど（笑）。
sekig：マルチドメインだと、こういうふうにきちんと抽象化して構造化するのが本当に必要なんだなと、うかがっていて思いますね。
putchom：この間、別のイベントでAmebaの本田さん（本田雅人氏）と、1つのブランドの中でも色や形状を変えたい時ってあるよねという話をしていました。
これはどうやって実現しているの？ というところですが、共通部分にFlavorという、システムではデザイントークンと呼ばれるものがあります。それを渡すことで、コンポーネントだったり言葉遣いだったりが自動的に作られるという基本的な設計思想があります。Flavorを受け取って、Inhouseがエクスポートしたデザインシステムを、すべてのサービスで使えるようにしています。
司会者：コミュニケーションデザイナーならではのデザインシステムの関わり方はどうでしょうか？
putchom：コミュニケーションデザイナーならではのデザインシステムの関わり方……難しい質問ですね（笑）。
（一同笑）
putchom：あとで、伸びしろのところで話そうと思っていたのですが、実は、サービスそれぞれのコミュニケーションデザイナーがデザインシステムを構築しているフェーズが、2022年に入ってからけっこうあります。今、社内でアートディレクション分科会を新たに発足して、アートディレクションに関わるこのあたりのアセットを用意していきましょうというところで活動しています。
アートディレクションに関しては、今minneが一番先進的なことをやっているので、それを横展開する感じで、各種サービスのコミュニケーションデザイナーが集まってそれを吸収して各サービスに持ち帰ったり、Inhouseで吸収してここは一般化できるよねという感じでまとめたりしています。
先ほど言ったように、社内でデザイナーのリソース自体を吸収して、実際にデザインすることに集中できる環境を作っています。
sekig：やはり設計には思想が出ますよね。すごく思想を感じます。
（一同笑）
putchom：確かに（笑）。
samemaru：そうですね。
司会者：思想が感じられますね。強めの思想が。
sekig：強めの思想を感じますね。
（一同笑）
putchom：プリンシプルは、けっこうはっきり出していると思います。
sekig：すごく抽象化しているので固有のものは出てこないんですが、全体にはっきりと思想が見えるなと思いました。
（一同笑）
司会者：なるほど。思想もですが、各社色が出ますね。
（次回へつづく）
