デザインシステムの重要性
サンフランシスコ・デザイントーク、この番組は、デザイナーやデザインに関心のある方、デザインをビジネスに生かしたい方、そしてグローバル展開を目指す企業の皆様に向けてお届けします。
BTRAX CEOのBrandonが、サンフランシスコ本社からここでしか聞けない、リアルで実践的な情報をお届けします。
サンフランシスコ・デザイントーク、本日も始めていきます。MCを務みます、りゅうちぃです。Brandonさん、よろしくお願いします。
よろしくお願いします。
本日のテーマですが、デザインシステムとは?というところで、デザインシステムを構築して、世に公開することの重要性というところをテーマに挙げていきたいと思います。
まず、そもそもお伺いしたいのが、デザインシステムって何?という人が多いと思うので、そこをお伺いしたいと思います。
多分、デザイナーを仕事にされている方は皆さんご存知だと思いますし、デザインを勉強している方も聞いたことはあると思うんですけど、
以前より、ブランドガイドラインという言葉はあったんですけど、デザインシステムってここ10年ぐらい聞く頻度が上がったものだと思うんですけど、
ざっくり言うと、その企業が生み出すもののデザインにおけるガイドラインとか設計図とかマニュアルみたいなものですよね。
何かしらデザインする時とか、プロダクトとかプレゼン資料とか広告とか、デザインするものを作る場合はこれに沿って作りましょうということを一通りまとめてある、
ドキュメントっていうかファイルっていうか、そんな感じのガイドラインになりますね。
ありがとうございます。このデザインシステムが最近聞くようになったって話ですけど、どうして重要なのかっていうところが。
そこが本当に重要なんですよ。なぜかっていうと、僕の考え方としてはこういうことなんです。
以前まではブランドガイドラインみたいなものがあって、そこの会社のブランドを作る、主にビジュアルで表現する。
例えばロゴがあって、フォントがあって、カラーパレットがあって、広告とかマーケティングキャンペーンを打ち出す時にそれに沿ってやるっていう世界だったんですけど、
デザインシステムはよりプロダクトに活用することを前提とされたものなんですね。
デジタルであればアプリであるとかウェブサービスみたいなもの、オフラインのプロダクトにおいてもそうだったりすると思うんですけど、
デザインシステムが最近注目されている理由は、プロダクトの体験自体がブランド体験になるからだと思うんですよね。
ノンデジタルの時代は、ブランドの体験と、主に広告とかマーケティングで受け取る部分と、実際の商品に少し差があったというか乖離があったんですよね。
例えば自動車の広告の雰囲気と自動車自体は間接的にはつながっているけど、そのままではない買ったりするじゃないですか。
なのでブランドのガイドラインだったんですけど、ことデジタルサービスに関してはユーザーがそれを使うこと自体が、
そのブランドが表現したい、伝えたいメッセージとかルック&フィールとか感覚とかビジョンになっているので、
プロダクトイコールブランドなんですよ。
プロダクトを通じたブランディング活動ではあるので、そこ包括的に両方やってしまいましょうという、そういう考え方ですね。
ありがとうございます。
このデザインシステムを自社内で構築することっていうのは、お伺いしているとかなり労力のいる知識のいることなのかなと思うんですけど、やはり難しいことなんですかね。
難しいですね。一回やり方がちゃんとわかればできるんですけど、だからこそデザイン会社とか我々みたいなエージェンシーが一緒になって作らなければいけないんですよね。
なので叩き台としてのデザインシステム、ほら最近だとアップルとかのリキッドグラスとかもそのうちの一つなんですけど、素人では作れないよね。
なので会社のビジョンとか、ビジネスモデルであるとか、ターゲットユーザーであるとか、そういったものを理解した上で、それに一番適したデザインシステムを作り込むっていうのは、プロのデザイナー及びデザイン会社、社内デザイナーもそうですけど、プロのお仕事にはなりますよね。
海外のデザインシステムのトレンド
ありがとうございます。今ブランドンさんから具体例のところを触れていただいたので、次のアジェンダとしてアメリカのデザインシステムのトレンド、具体例というところで、最近注目を浴びていたのが今おっしゃっていただいたアップルのリキッドグラスとマイアビーのデザインシステム。それぞれブランドンさん的に印象、すごいな、どういうとこがすごいなとか。
両方とも共通していることがあって、それは簡単に表現すると動いてるってことですね。動いてるじゃないですか。なんかその見たときに。多くの場合動画で表現されていることが多い。
デザインシステムとかブランドガイドラインって基本的には静止画が主なものであったのが主流だったんですけど、リキッドグラスの表現もエアビー&ビーの新しいデザインシステムの表現も結構世の中に発信しているものは動画表現をされている。
これはなぜかというと、静止した状態のデザインだけだと表現できないユーザー体験もデザインシステムに入っているからってことなんですよね。体験って言葉やビジュアルで表現するのって難しいけど、できるだけ伝わりやすい形にしようと思えば動画がわかりやすいだと思うんですよ。
なので動きを持たせてこういうような感覚とか雰囲気を表現するものですということで、最新のデザインシステムには静止画を中心としたドキュメントだけじゃなくて動くモーショングラフィックスみたいなものも求められるんだろうなと思いますね。
Apple に関しては実際に触ってみてどう感じるかがすごく重要なので、まだはっきりとしたことは僕は言えない。デザインコミュニティの中でも賛否両論なんだよね。インターフェースとしての可視性が下がっただとか、ネガティブもあればあれは実際先のことまで考えているので、Apple の新しいビジョンの表現だろうみたいな。
Airbnb に関しては今回アップデートされる一つ前のデザインシステムを作った会社のアメリカのトップが友人なのでその経緯とか聞いてたんですけど、あれも最初はAirbnb が提供したユーザー体験をビジュアルに落とし込むとどうなるだろうということでロゴをリデザインして、
このキービジュアルみたいなものも含んだデザインシステムを作ったっていうのは知ってて、それの進化版としてAirbnb が世の中に広げていきたい体験価値を動画を中心に表現してて、デザインシステムを見るだけでAirbnb って会社のビジョンが伝わるっていうとこまで作ってたのは本当に素晴らしいなと思いましたね。
僕も動画見たんですけどやっぱワクワクしますよね。
そうだよね。あれうちもやりたいなと思ったんですけど簡単にできないんで、デザインチーム結構頑張らないといけないなと思いました。
日本の取り組み
確かに文字ペースのガイドラインだと読むのがすごい苦痛っていうのが。
そうだよね。
いや、今リュウイチが言ったのは結構重要で、デザインシステムって作るのはデザイナーなんだけど、使うのは主に非デザイナーを前提とされてたりもするわけよ。
デザイナーはもちろん使うけどね。
デザイナーはもちろん使うけど、デザインを生業にしてない人ですら、ちゃんとそれに従えばその会社の表現したいものに沿った正しいものが表現されるっていうことになるべきなので、
デザイナーじゃない人がワクワクする、使いやすい、面白い、あとは生産性がこれを使っているとすごい生産性が上がるんだよとか、仕事がやりやすくなったって思えないとデザインシステムの意味がないですからね。
ありがとうございます。
では続いてなんですが、日本のトレンドのところもちょっと触れていきたいなと思っていて、日本にもあるのかなと調べてみたら、なんとデジタル庁がデザインシステムのベータ版っていうものを出していると。
これはさすがにまだ動画ベースでは公開されてないんですが、結構文字ベースで大きめなフォントとか使って分かりやすく説明されているような印象がありました。
例えば、ビグマとかデザインデータも公開されていたりとか、日本も少しずついいデザイン、いいUIっていうのを実現しようというのを取り組んでいるんだなっていうのをすごく感じます。
それは素晴らしいと思ったんですよ。それも行政レベルで始めちゃっているというのは本当に素晴らしくて。
政府とか行政機関とかって一番そういうのに遅れているイメージがあるじゃないですか。
例えば、役所での書類だとか、説明ブックレットとかが分かりにくいよとか、周りくどいよみたいな、読みにくいとか。
そういうのが、アメリカももちろんそうなんだけど、そんな中でデジタル庁が率先してそれをやっているというのは非常に素晴らしいですし、
何よりデジタル庁というのは国の機関だから、最終的には国民が使うためのものを生み出していく、デジタルを中心に生み出していくわけじゃない。
そんなときにデザインシステムがちゃんとあって、全体におけるデザインの統一性をキープして、
そこで働く人たちの生産性も上がったり、あとはものづくりしやすくなればみんなハッピーになるから、
そこから入り込んだというのはとても素晴らしいし、日本企業にありがちな、このままでいいんだよ、このやり方でやってきたんだから、
頑張ってこれでやってくださいとか、あとは文字とかグラフとかがごちゃごちゃ入っているパーポみたいなのを渡されて、
このフォーマットでみたいなものをちゃんと見直して、国単位でやっていこうという姿勢は本当に素晴らしいと思いますね。
日本のデザインシステムの現状
日本は避けられないトレンドとして少子高齢化というのがあると思うので、
いろんな方にわかりやすいデザイン、ユニバーサルデザインみたいな言葉もありますけど、
それを一生懸命やろうとしているのはすごく伝わりますね。
僕も実はデジタル庁の恩恵に預かっている一人でして、
日本に行くときに税関の申請をデジタルでできるんですよね。
オンラインでフォームで入力しておくと、QRコードが生成されて、それをかざすだけで税関を通れるみたいな。
それ数年前から始めている、コロナきっかけだったりするんですけど、
ビジットジャパンウェブ、それはデジタル庁管轄だったと思うんですけど、よくできているなと思いますね。
ありがとうございます。
日本のトレンドというところなんですが、ブランドさんから見て、
日本の企業ってデザインシステムをちゃんと取り入れられている企業って聞いたことがあるのかなとか。
スタートアップはやっていると思うんですけど、大企業になってくるとなかなかないんじゃないですか。
たぶん広告とかマーケティングの文脈だと広告代理店にある程度お願いしちゃっていると思うし、
うちも仕事で、そういえば日本の企業さんと仕事をすると、
会社のビジョンの冊子とか、歴史が書いたものとか、そういったものは新入社員の人とかが読むようなものはあって、
それでちょっとしたブランドガイドラインとかもあって、勉強させてもらうんですけど、
デザインシステムまで落とし込まれているケースって、ほとんど体験したことが今までだとない。
むしろそれを作る役割をしたことは何度かあります。
具体的に名前を言うと、以前にやったのは自動車のスバルさんの、
北米をメインターゲットとした上でのスバルが提供するべきユーザー体験をディファインして定義して、
ユーザーインタビューとかそういったものを通じて定義したんですけど、リサーチして、
それをもとにデザインシステム的なものに落とし込んでいき、最終的には本社、群馬県にあるんですけど、
本社に行かせていただいて、関係するスタッフの方々の前でプレゼンさせていただいて、
スバル体験ビジョンみたいなもののガイドラインを作らせていただいたんですよね。
それは非常に我ながら良い仕事だったなと思ってますし、
クライアントさんが作り出すプロダクト、自動車ですけどのユーザー体験の一つの柱に、
拠り所になっているって話をいただいたので、それは良かったですけど、
多くの場合はまだ社内にできないケースがあるので、それを作ってみるといいのではと。
デザインシステムの作成プロセス
どういう風に作るか説明しましょうか。
お願いします。
プロセスね。
デザインシステムって、ビジュアルデザインヘビーだったりとか言葉もあるけど、
アウトプットにフォーカス行きがちなんですけど、
スタート地点って会社のビジョンからやるべきなんですよね。
会社がどういう会社でありたいかとか、
これブランディングとほぼ共通のスタートラインがあって、
目指すビジョンがあって、
その次にユーザーに届けたい体験とか、感覚とか、結果、思いとか、
そういったものをユーザーを理解した上でデファインしていくことをするんですよね。
うちの会社のビジョンがこれで、それをお客さんとかユーザーに届けた場合に、
ユーザーとかお客さんに対してはこういう気持ちになってほしいとか、
こういう体験をしてほしいと。
それを元に今度、ブランドガイドライン、以前よりある、
対外的なブランド、ロゴとかを含めたブランドガイドラインとデザインガイドラインという2つの、
大きく分けるとガイドラインを作っていくわけよ。
そのデザインガイドラインの中には、こういうルックアンドフィールっていうか、
デザインの統一性はこういうふうにあるんですよっていうことだけじゃなくて、
そのままコピペで使えそうなコンポーネントみたいな具体的なもの、
これがブランドガイドラインと一番違うんですけど、
ブランドガイドラインはやっていいことやっちゃダメなことが主に書いているドキュメントで、
デザインシステムの場合はそのままコピペで使えるコンポーネント要素みたいなものを中に入れておくんですよね。
コンポーネントって言うと簡単に言うと、料理でいうお惣菜みたいなものですよね。
それはそのままお皿に入れればそのまま食べれますみたいな。
コンポーネントはある程度汎用性の高いものをデザイナーが作っておけば、
非デザイナーだったとしてもそれを持ってくれば、
プレゼント資料とかだったら分かりやすいと思うんですけど、
デザインシステムの中に入っているコンポーネントをガッと掴んでペーストしてスライドに載せたら、
一気に分かりやすく小切れなものになるし、ウェブサイトにも使えるしとか、
そういったものもコンポーネントも入れておくと。
それを出来上がったものがあれば、プロダクトにも活かせるし、
プレゼントにも活かせるし、広告にも活かせるし、
オフィスのインテリアとかデザインとか、壁に何を載せるかとか、
あとは採用する際の採用ページとか、
候補者に対しての面接の時に使ったりとかも出来るので、
様々なシーンで活用可能になると思いますね。
確かに今聞いた話で思ったのが、
日本の企業、日本の方ってすごく賢いというか、実力もあるし、
社内で経験豊富な方もいるけど、
例えばスライド作りがそんなに上手じゃない人とか、
もったいないなという場面って結構あるなと思っているので、
そういうコンポーネントが使えたりとかすると、
一気にその人の実力をしっかりと表現できることができるのかなってすごく感じます。
そうですね。
全て自分でやらないからこそ、
会社に与えられた武器を使えば、
どんなスタッフでも戦えるものになるという。
なので、ある意味あれですよね。
ドラクエでいうと、武器防具屋とか道具屋みたいな存在で、
そこでゲットした道具とか武器が装備すれば結構強くなれるみたいな。
現代における武器職人みたいな役割がデザイナーとして、
デザインシステムを作る仕事だったりする。
けど、社員が1000人とか1万人いたら全員使えるものにすれば、
超スケーラブルだからね。
間違いないですね。
1万人が1人ずつコツコツスライド作っていくよりは、
デザインシステムがパッとあって渡されて、
8割くらいはここから使ってもらえれば、
あとは案件とかプレゼン内容に合わせて、
自分でカスタマイズする場所は20%くらいは入れてもいいけど、
会社概要説明とか、それ以外の実績説明であるとか、
そういったものはコンポーネントに結構デファインされていれば、
誰でもかっこいいプレゼンがしやすくなるという、
そういうことを与えてくれるので、
業務効率化と、あとは実際の結果に、
営業とかする際にも結びつきやすくなるという、
こんなメリットがありますよね。
デザインシステムの浸透
ちょっとお伺いしたいんですけど、
今の話に関連して、
デザインシステムを作ったはいいものの、
浸透させるってすごく難しいことだなって、
何事もそうなんですけど、
ビートラックスは少人数なので、
まだやりやすい部分はあると思うんですが、
ブランドさんも何か新しいことをやって、
社内に浸透させる労力のいることだと思うんですけど、
デザインシステムを社内に浸透させるには、
何かご考えはありますか。
それ本当に難しいんですよね。
一言で言うと、そんな簡単ではないという結論は一つあって、
研修したりとかするじゃないですか、
それも入り口としてはいいんですけど、
一過性で終わってしまうというか、
そのタイミングだといいんですけど、
そこから先、本能的に直感的にナチュラルに、
デザインシステムを活用している状態を作り出さないと、
わざわざデザインシステムを見に行って、
そこからコンポーネントを選ぶみたいな、
作業になっちゃうと仕事増えちゃうんで、
直感的にやりやすくする必要があるので、
例えば、ドキュメントを作るときのファイルの中で、
それを取り込みやすいようなファイル形式にするとか、
構造にするとか、
うちの会社だったら主にフィグマを使うことが多いですけど、
フィグマファイルのファイルセットアップの仕方とかもあるし、
スライド作りのスライドテンプレートの作り方にもよります。
あとは意外と見落としがちで、
これはエアビがよくやってたのを昔見たのは、
オフラインって結構オフィスの中に貼ってたり置いてたりするんですよね。
デザインシステムの要素、写真とか、
ストーリーが伝わるようなポスターとかを
社内に貼ってたりとか、
あとは社内ノベルティグッズで、
エアビだとロゴってハートっぽいくるくるっとしてるやつよ。
あれのクリップがあるんだよね。
かわいくないですか?ペーパークリップ。
できそうじゃん、クリップ。
あれがエアビのオフィスに前に遊びに行ったときに、
ステーショナリーとして社員に配られて、超かわいいと思って。
デザインシステムの構築
直感的に伝わるじゃん。浸透しやすいじゃん。
なので、社内向けノベルティグッズ、文房具からポスターから、
オフィスに置いてある備品とかを含めて、
デザインシステムの一部を切り出していって、
プロダクト化されたものを置いておくみたいなものは、
意外といいんじゃないかなと思いますね。
あとはね、理想的にはそれを管轄する人がいて、
常にオーディットというか、数ヶ月に1回確認およびアップデートですかね。
デザインシステムで重要なのが、
1回作って終わらせないってことなんですよね。
さっきリュウチが少し言った、
作ってみたはいいものの、英語で言うと
Put it in a shelfっていう言い方があるんですけど、
作って棚に収めちゃって、
はい終了じゃ全然意味ないんで、
アクセスしやすい場所に常にあって、
それをすぐ引き出せる状態。
むしろそこからスタートするみたいな。
パソコンの壁紙がそれになってるとか、
そのぐらいの勢いで、
いつでも毎日手が届く場所にそれがある状態にしておく。
場合によっては、アップデートするたびに
ブックレット版の印刷版を作るとかでもいいですし、
何かしら手の届きやすいところに、
スラックの中にピン止めしとくでもいいですし、
テンプレーフォルダーを常にアクセスしやすいようにしてもいいですし、
で、バージョンの番号を書いておいて、
何ヶ月1回バージョンをアップデートすると。
生き物としての扱いかなーなんて思いますけどね。
僕もビトラックスで働き始めて、
例えばフレッシュドラックスが出しているメディアがありますが、
必ずトップの画像にはロゴを入れるっていうルールがあったりするんですけど、
あれでも作ったのは3年くらい前なんですよ。
あれもちゃんと入れる習慣になったのは、
ルールがあるのと、あとは気軽にフィグマニスに触れる機会があったりとか。
それで言うとあれだよね、
僕がびっくりしたのは、リュウチと主にマーケティング系の仕事をメインでやっているから、
デザインチームではないけど、
ブログの画像とか作るときにどうしているのかなと思って、
見たら普通にフィグマから出していたから、
非デザイナーでもフィグマをカジュアルに触れるプロセスになっているのはすごくいいと思いました。
それはすごく勉強させてもらっています。
すごいよかった。
一昔前だったらデザイナーに頼むみたいな、
これはデザイナーさんにお願いしなきゃみたいな世界観というのがどの会社もあって、
デザイナーさんにお願いするってめっちゃ面倒くさそうじゃん。
はい。
連絡して説明して、
作ってもらって受け取って、
で調整してもらうみたいな。
これがデザインシステムがあると、
自分たちでパッとできると、
気持ちが超楽だし、
普通に早く物事のスピードが上がるじゃん。
なので、そういう活用してくれるとデザイナーとしてはめっちゃ、
自分たちの仕事も増えないしね。
いちいち依頼されないっていう。
ご自由にできますよっていうのはとてもいいと思いますね。
やっぱり僕も前職日本企業でしたけど、
専門職に何かを頼むってすごく緊張するっていうか、
別世界にいるっていうイメージがすごいあって、
分かりやすく依頼できてるかなとか、
手応えがないけどとりあえず依頼してみるみたいなことも多かったですね。
それが自分たちの手が届く範囲にあれば、
そこを引き出してきて、
最終的にデザイナーさんに確認してもらうとかした方がいいと思うけど、
できるところまで自分で作ってみましたっていう世界観ができると、
みんなハッピーになると思いますけどね。
デザインシステムの重要性
ありがとうございます。
まとめに入っていきたいと思いますが、
今日はデザインシステムを構築することと、
それを公開することの重要性というところについて話してきました。
アメリカのトレンドだったり、日本のトレンドを話して、
改めてデザインシステムを作ることの大事なところ、
それを世に出して、
しっかりと分かりやすいデザインとか、
皆さんにとってアクセスしやすいデザインっていうのを実現するために、
行動していくことの大切だったところが分かったかなと思います。
デザイナーだけじゃなくて、
非デザイナーの方にもすごく重要なのが、
デザインシステムってところも、
今回のエピソードで理解できたかなと思います。
ではブランドさん、本日もありがとうございました。
ありがとうございました。
最後までお聞きいただきありがとうございました。
番組を気に入っていただけた方は、
ぜひ高評価とフォローをお願いします。
リトラックスとのお仕事にご興味のある方は、
概要欄のリンクよりお気軽にお問い合わせください。
ご意見やご感想も大歓迎です。
コメント欄または概要欄の質問フォームからお寄せください。
この番組は毎週更新しています。
次回のエピソードもどうぞお楽しみに。
