00:02
s-umemoto
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は株式会社ajike代表の梅本と、
その仲間たちがデザインについて、
雑談を交えながら話す番組です。
今日のお相手は原さんです。よろしくお願いします。
n-hara
よろしくお願いします。
s-umemoto
今日収録日、福岡は大雨でございます。
東京はいかがですか。
n-hara
東京は曇ってますね。天気悪いです。
s-umemoto
梅雨入りはした?
梅雨入りはまだですかね。微妙な感じでしたね。まだだと思いました。
ちょっと遅いのかな、一週間とか。
n-hara
そうですね。でも後からよく入ってたみたいなこと言いますよね。
s-umemoto
実は入ってました。入ってるんじゃないかなって感じするんですけど、天気的には。
こういうのも毎年のニュースなのに、一個も覚えてないよね。
確かに。去年覚えてるのは7月がめちゃくちゃ暑かったです。
去年はずっと暑かった気がするけど、7月も暑かった。
6月、7月がピークに暑くて、8月よりも7月の方が暑かったっていう、すごい強い記憶がありますね。
n-hara
やっぱそれぐらいしないと記憶に叩き込まれないんですね。記録と記憶に。
s-umemoto
いい記憶ではないですね。暑い。
そうね。痛めつけられた記憶みたいな感じだね。
でも食中毒には気をつけてお過ごしください。
さて、今日のテーマは何でしょうか。
デザインシステムの効果
n-hara
今日のテーマはデザインシステムって実際どんな効果があるのというテーマです。
s-umemoto
デザインシステム、いいですね。
n-hara
デザインシステムですね。
s-umemoto
なぜこのテーマにしたんですか。
n-hara
アジケでも結構今来てるテーマではあるんですけども、
ちょうどこのポトキャストの配信をされている、
前の週に多分デザインシステム構築支援メニューっていうのがリリースされているはずです。
s-umemoto
まだしてないってことだね。
n-hara
デザインシステムってよく多分最近聞かれる方も多いと思うんですけど、
どんな効果があるのかっていうところを具体的に事例とか交えて話してきたらいいかなと思ってます。
s-umemoto
いいですね。
じゃあまずはデザインシステム導入しようと思っている方に向けて、
こういう効果があるよというお話お願いできますか。
n-hara
そうですね。
デザインシステムっていう言葉だけだと聞いたことある方多いと思うんですけど、
一番多分イメージするのは見た目の統一みたいな、
ルールを統一していくみたいなことのイメージとしては強いんじゃないかなって思ってます。
実際デザインシステムってそれだけじゃなくて、
それをデザインに統一してくるからこそ、
あるこういうメリットというか効果みたいなところもあったり、
あとはコミュニケーションのところにうまく生きてきたりっていうものがあるっていうのが、
まずデザインシステムの前提としてお話できたらなと思ってます。
効果みたいなところでいうと、3つ今日はちょっとお話できたらなと思っていて、
まず1つがデザインシステムを作るっていうのは、
UIコンポーネントという画面の中にあるデザインのパーツを作ってリスト化していったりとか、
再利用できるような環境を作っていくっていうようなことをやっていくんですけども、
それをできるような環境を作ることによって、
似た画面が次新たに出てきたりとかしたときに、
毎回それをゼロからデザイナー組み上げる必要がなかったりっていうのが、
まず大きいコストの面で、コースがかなり削減されるっていう効果があります。
あと、再現性がある状態というか、再利用してるので、
もちろん元々あるデザインのやつをそのままデザインとして落とし込んでるので、
実際このパーツ不足してるよとか、
ここの画面とここの画面の挙動が違うよとか、
そういうブレっていうところの問題とかは起こりづらいっていうのが、
結構大きい効果のあるポイントかなと思いますね。
もう一つですね、二つ目が、
デザインとエンジニアのコミュニケーション
n-hara
実際そのデザインシステムを運用する人ってデザイナーとエンジニアになるんですけれども、
画面をデザインするときによくデザイナーとエンジニア間のコミュニケーションの
相互とか意思疎通って結構いろいろやってる中で出てくる課題だと思うんですけど、
デザインシステムっていう共通言語みたいなものですよね。
同じものを見て、同じ話をしているということができるようになると、
相互がなくなっていって、開発をするときにもデザインの手戻りみたいな、
これはちょっとできませんみたいなこととかもなくなっていったりとか、
開発したときにイメージが違うなっていうこととかもなくなるので、
デザイナーとエンジニアのコミュニケーションの共通言語みたいなところにすごく
効果があるものなんじゃないかなと思いますね。
三つ目。三つ目が再利用できるものなので、
そのコンポーネントをどんどん使っていってっていう形になるんですけれども、
まさにデザイナーもそうですし、エンジニアも同じような環境で、
同じコンポーネントを持って画面を作っていくってことができるので、
新しい画面を作るときに、それをすぐにエンジニアでもデザイナーでも
組み上げることができますし、プロトタイプとかをちょっとパッと作って
テストしたいなとかっていうときにも、基本的に今あるもののデザイン表現
っていうのをちゃんと実現して、レビューとかテストをすることができるので、
やっぱりその辺のスピード感だったりとか、効果性を持って検証ができるとか、
そういう使い方っていうのも結構効果としてはあるんじゃないかなと思います。
s-umemoto
お疲れ様です。
3つのポイントはなかなか話すの大変だと思うんですけど、
いいことづくめではありますが、
保守、運用コストっていうのはやっぱり上がる、それなりに必要というのも
セットで覚えておいてほしいことではありますよね。
n-hara
そうですね、よくあれば作ってそのままになってしまうとか、
デザインと開発のところの連動みたいなのがちょっと差分が出てきてしまって、
デザインのほうが古くなっちゃうとかっていうこともよくあるので、
その辺は気をつけないといけないところでありますね。
s-umemoto
そうですね。私この辺りの説明するときに、
そもそもデザインもよくわからないとか、エンジニアリングもよくわからない
っていう人に、道路の標識みたいなものですっていうふうに説明することがあるんですね。
道路の標識ってもう決まってるじゃないですか。
サイズも大きい場所もあるんですけど、だいたい同じじゃないですか。
だから例えば東北に行ったら標識が違いますってなるとみんな困るので、
やっぱり共通のものを、共通のもののデザインで作っておいて、
共通の理解があると混乱が少なくなったり、一致した状態、一貫性が保てるので、
道路標識みたいなものです、みたいなことを言ったりはしてますね。
n-hara
すごい良い例えですね。
s-umemoto
あれサイズがバラバラだったら大変だしね、型が、金型が違うというか。
確かに、なるほど。
でも道路標識のバージョンアップデート版はいつあるのか全くわからないけどね。
n-hara
確かに。地味に更新されてるんですよ。
s-umemoto
地味に更新されてると思うけどね。
n-hara
免許の更新に行くとよくありますね。更新されてる。
s-umemoto
そうだね。なんか新しい標識だーみたいなときあるよね。
でもそういうものを目指しているのがデザインシステムなんじゃないかなと思いますね。
ちなみに冒頭で最近デザインシステムのお仕事のご相談が増えているというお話だったと思うんですけども、
具体的なプロジェクト例
n-hara
最近の実績はどういうものがあったりとかしますか。
そうですね。今年とかに入ると、今まさに動いている金融系のサービスもあれば、
多分この下期ですかね、7月以降から動き出す案件とかもあるんですけども、
今自分のほうで関わっている金融系のサービスについてで、
そこに関しては3月ぐらいからスタートして、本格的に動いていたのは4月ぐらいからだと思うんですけど、
もともと既存のサービスがリリースされていて、お客さんもいるという状態なんですけど、
UIのところに課題があったりとか、あとはデザインのガイドライン自体がないとか、
ルール自体がちゃんと整備されていないとか、
あとはその辺をちゃんと社内でコントロールできるようにやっていきたいとか、
そういういろいろ組織的なところの課題みたいなのもありつつ、
相談いただいたっていう背景があるプロジェクトで、
でも本当にガッツリですね、この案件はガッツリデザインシステムを作るっていうステップを踏んでる案件になってまして、
最初に構築をしていくっていうところをまずやってるんですけど、
結構これ、進め方はうめもんさんとちょっと相談しながら悩んだところではあったと思うんですけど、
組織の状況によって、しっかりと原則のところから議論してっていうような、
土台からしっかり議論していくような案件もあれば、目の前の多分、
その制作のところですね、画面をまずは良くしていく、
ちっちゃいところからスタートしていくみたいなところで、
お客さんの状況とか、組織的な環境とかによってやっぱり進め方、
初動の進め方が違うんだろうなっていうのは今回やっていて感じたところで、
今回は画面を優先していくというか、デザインシステムの構築をがっつりやるというよりは、
ちゃんと制作のほうのリニューアルというか、改善をしながら、
それが結果的にデザインシステムが作られてる状態を目指していくっていう意味でのステップを踏んでってるっていうようなやり方を取ってるわけですね。
結構こういう進め方って他のお客さんでも多分、状況として多いんだろうなっていうのは感じますよね。
s-umemoto
これは本当、どの仕事もそうだと思うんですけども、短期目線と中期目線っていうのが必ず存在する中で、
どっちもクリアしなきゃいけないっていうのがこのお題ですから。
非常に難しいですね、これ。
n-hara
そうですね。なので、割とメンバーもいろいろ大規模、味気の中では規模大きめの案件として住んでるとは思うんですけれども、
最初に制作のチームみたいな、ちゃんと作ることを先にするメンバーとデザインシステムを動かしていくチームみたいな形で、
両軸で立ち上げのときから今動いてる状態で、今6月ですけど、結構今代表的なコンポーネントみたいなとこですね。
よく使われる便利なものっていうのは出揃ってきてる状態にはなってきてるので、
多分この後7月以降とか新しい画面とか出てくるときにはかなり効率上がってくるんじゃないかなっていうのを感じてるので、
s-umemoto
あの一区切りで6月につくんじゃないかなと思います。
n-hara
これいいよね、これね。いいよね、取り上げてもらう。誰だお前はみたいな。いいと思って見てます。
スピード的には思い返してみて、4月から本格的にスタートしてるって考えると結構スピード感ありますよね。
s-umemoto
めっちゃいい。
n-hara
多分さっきの短期の早くデザインをつくんなきゃいけないっていう状況がそうさせてるんだろうなって思いますけどね。
s-umemoto
早いスピードだね。早いスピードだと思います。
n-hara
もうガシガシどんどん動いてるっていうような感じで、この後結構新しいデザイナーとかも入って、もっとスピード上げてコンポーネントつくっていったりっていうフェーズに入っていくんですけども、
やっぱり今その結構代表的なところがちゃんと出揃ってきてたりとか、全体のロードマップみたいなのが見えてきてたりとかするので、
新しいメンバーが入っててもスムーズに画面の制作がスタートできてるというか、
デザインシステムの重要性
n-hara
品質の担保っていうのはデザインシステムってそういう側面あるんだなと思って、
そういうの無い状態でデザイン入ると、そこでインプットで最初なかなか時間かかっちゃって、
なんか作った時にルートみたいなこと起きたりすると思うんですけど、
もともとデザインシステムを合わせて作ってる案件なので、結構入れてる気がしますね。
新しいメンバーも。
s-umemoto
そうだね。だからこれからこういう大規模というか大きなシステム、
エンタープライズ企業が運営しているサービスって開発メンバーもすごく多くの人数が関わってらっしゃるじゃないですか。
そうですね。
その中で補修をしながらも新しいものを作っていくっていう、
割と2つのことをやっていかなきゃいけないんだけども、そこをやっぱり統合しているような方だったり、
仕事の進め方みたいなのがあると、品質を言って担保しながらお客様に便利なものっていうのを提供できるので、
そうやろうと思って、スピードは若干落ちるかもしれないけど、デザインシステムっていうものがあったほうがやっぱりいいよねと思う。
n-hara
そうですね。
あとやっぱり味気の実績だと、SMBCさんがいいですね。
s-umemoto
書籍にも掲載していただいて、ありがとうございますみたいな。
n-hara
めちゃめちゃ言っていただきますよね。読みましたっていう。
s-umemoto
そうね、それでご相談いただくケースが多いかもしれない。
あの時ももう3、4年前になるんじゃないかな。
n-hara
そうですね。
s-umemoto
デザインシステムね。そこから思うと、やっぱり各企業さんとか、デジタル庁もそうだと思うんですけども、
各会社さんがデザインシステムを、特に自社サービスを持っている会社さんとかは公開したりアップデートされているので、
それを参考にしながら、業界内で刺激を受けたり与えたりしながら、
みんなで解像度が上がってきてるような気がしますよね、デザインシステムっていうものに対して。
素晴らしいです。
デザインシステムの構築
n-hara
先週の話で、30代のキャリアで専門性のところの話をしてたときに、
s-umemoto
AIが専門性の代替をしてくるのかどうか、ちょっと脅威でもあるよねって話をしたんですけど、
デザインシステムとかは、もう少し息が長そうな話で、
個人のキャリアだとAIに置き換えられるのは1年、2年、3年とかそういうペースなのかもしれないけど、
大きなシステムとかだと、いきなりそれが3年とかで置き換えることはあまり考えられないので、
5年から10年ぐらいはまだ、AIは取り組むんだろうけども、
そういうシステムを安定的に運営していくっていうのはやっぱり、
どっしりと足を構えた人の力がまだまだ必要な領域のような気がするよなと思って。
n-hara
すごい人の力入りますね。
s-umemoto
なんか見てますね。
デザインシステムを入れると、ちなみにアジ系オリジナルのデザインシステムみたいなのを作ろうという話してて、
原さんそのあたり推進してくれてると思うんですけど、このあたりどうなんですか、進捗等は。
n-hara
そうですね。なのでちょうど来週ですかね、配信がされた前後とかリリースされてると思うんですけど、
出てるデザインシステム構築支援メニューっていうののベースというかは、
そのアジ系オリジナルのデザインシステム環境っていうのがあって、
お客さんの環境に合った状態でちょっとチューニングをしながら導入していくみたいな、
ちょっと導入のステップとかを比較的軽めにゼロから作るよりも軽くしていくみたいな思想で作ってるメニューではあるので、
今そこが内訳が済んでまして、実際それで試しに講座解説系の画面とかですね、
エンジニアの人に組んでもらったんですよね、アジ系のオリジナルのデザインシステム。
それやったら普通にやったら3画面とかなので1週間とか、何日かかるものだと思うんですけど、
1日で組み上げて、デザイン通りに組み上がってたので、やっぱコンポーネントがしっかり作られていて、
そこを構築できる状態になっているっていうのは、やっぱすごいスピード感が全然違うなっていうのを感じるし、
やっぱり再現性がすごく高い状態だったので、これをにして導入していったら、
s-umemoto
さらにこのデザインシステム構築っていうところが、よりスピーディーにいい品質のものを提供できるんじゃないかなっていう手応えを感じています。
デザインシステムの利点
s-umemoto
いいですね。
私が昨年読んだ本ですごい良かったのは、ちょっとタイトル忘れましたけど、標語としてはゆっくり急げって書いている。
プロジェクトマネジメントの本だったんですけど、
過去に1930年代ぐらいに目のすごいタワーを建てたみたいなのが、
最初しっかり計画したけどその後すぐ作ったら、プロジェクト失敗せずにきちんとしたビルが、タワーがあんなスピードで建ったみたいな話なんですけど、
そこの標語がゆっくり急げなので、最初にある程度ガッと作っておいたら後半がすごくスピーディーになるっていう。
n-hara
まさにそうですね。
s-umemoto
そんなやり方なんだろうなと思って見てますね。
デザインシステムはそれに考え方がマッチしやすいですよね。
n-hara
そうですね。
なるほど。
s-umemoto
最後に何かコメントがありますか。
n-hara
そうですね。リリースをしておりますので宣伝になるんですけれども、
デザインシステムって話したように見た目の統一っていうところだけではなくて、
開発者の工数削減したりとか、スピード感を上げていくみたいなところだったり、
コミュニケーションを上げていく、効率化していくみたいな、
交通言語としても使えるみたいな、いろいろメリットがあるようなソリューションだと思うので、
その辺をガンガン見たときに、うちのプロジェクトに入れた方がいいんじゃないかとか、
サービスに入れたいんじゃないかみたいなところを思っていただけそうであれば、
ぜひアジケサイトの方にページをご用意してますので、
その辺で見ていただいて、相談会も実施する予定ですので、お気軽にご相談ください。
s-umemoto
分かりました。分かりましたって。
ぜひお待ちしてます。ありがとうございます。
相談会も実施するんですね。お待ちしてます。
ということで、少し最後は若干宣伝も入ってしまいましたけども、
このテーマ自体はデザインシステム入れるとどういう効果があるのかについてお話をしました。
今日も聞いていただきましてありがとうございました。
n-hara
ありがとうございました。
s-umemoto
編集後期、ありがとうございました。
デザインシステムについて話すとちょっと営業っぽくなってしまう。
でもいいものだと思ってるんだよね。
n-hara
そうですね。
s-umemoto
社内メンバーも徐々にデザインシステムに対する解像度が高いメンバーが増えてきつつあるよね。
n-hara
そうですね。さっきのキャリアの話じゃないんですけど、専門性が上がってる感じがしますね。
やってるメンバーの解像度が上がってるので、
ひとつひとつの細やかなコンポーネントの設計のところの考え方が
普通に画面を作るときとは違うところに配慮するので、
s-umemoto
すごいことしてるなと思いながら見てます。
オートレイアウトは基礎中の基礎よ、みたいな感じかな。
n-hara
それどころじゃない感じですね。
s-umemoto
それどころじゃない。大変だ。意外と学習コストかかりそうだね。
そうですね。最初はちょっとしたけど。
オートレイアウトぐらいは多分HTMLとかやったら本当に基礎中の基礎なんだと思うんだけど、
絶対に必要だと思うんで、学ばれると時事からつくような考え方だと思いますけどね。
ということで、きょうも聞いていただきましてありがとうございました。
ありがとうございました。
