デザイントークの導入
スパイスファクトリーのスパイストーク
みなさん、こんにちは。スパイスファクトリーのスパイストーク。360度デジタルインテグレーターとしてDX支援を事業展開しているスパイスファクトリー株式会社がお送りいたします。
本日のパーソナリティは、パブリックリレーションズを担当している前田です。 この番組は、DXに関わるあなたにスパイスファクトリーの今とスパイスになるようなトピックを週替わりでお届け
日々のスパイスになるようなお話をテーマにした番組です。 毎週火曜朝10時にスポティファイとアップルポッドキャストで配信しています。
みなさんからの感想や質問も大募集! 概要欄のフォームやXでハッシュタグスパイストークとつけて投稿してください。
さて、第4週目はデザイントークと題して、通称IXD、インターフェイス&エクスペリエンスデザインディビジョンのメンバーと、デザインの側面からスパイスファクトリーの今やサービス・トレンドについてお話ししていきます。
今日一緒にお話しするのは、スパイスファクトリー株式会社でUIデザイナーを務めている島田さんとチェンさんをお呼びしています。よろしくお願いします。
よろしくお願いします。
今日はですね、実はオンライン収録という形で収録しているんですけれども、島田さんはどちらから参加してくれてるんですか?
はい、大阪の自宅からです。
えっ、大阪なんですね。実はスパイスファクトリー、京都に今拠点がありまして、2026年3月に大阪また新拠点という形で開設させていただく予定ですが、楽しみですね。
大阪はだったら家から近くなるんじゃないですか?
デザインシステムの特徴
そうですね。今向かっているのが京都なんですが、1時間40分ぐらいかかるんですが。
結構かかりますね。
そうですね。マイナス1時間ぐらいで40分以内には新しいオフィスは到着しそうですごく楽しみです。
楽しみですね。ありがとうございます。チェンさんはどちらから参加してくれてるんですか?
私は東京の自宅から収録しています。
ありがとうございます。それでは今日のテーマに行きたいと思います。
今日はお二人とAI時代のデザインシステムというテーマでお話ししていきたいと思います。
開発効率の向上とクライアント価値の両面から実際にクライアントの企業の皆様に伴奏してデザインシステムを構築していることに取り組んでいるお二人の経験をお聞かせいただきたいと思っております。
まずはその前に簡単にお二人の自己紹介をしてもらえればと思っておりますので、島田さんから簡単に自己紹介をお願いできますでしょうか。
はい。では改めまして島田あかりと申します。
前職はインハウスのウェブデザイナーとしてウェブサービスのデザインやその他反則物など幅広くデザインに携わってきました。
Spice Factoryでは主に中長期のプロジェクトでUIデザインを担当しています。お願いします。
ありがとうございます。じゃあチェンさん続いて自己紹介をお願いいたします。
はい、こんにちは。チェン優秀と申します。台湾出身です。
私はウェブセンサー会社で幅広いデザインを経験した後に自分会社でAPテストや広告の計測の仕組みをゴリゴリ立つたわでいたしました。
今は日本に来て社会に立つデザインを目指したいなと思ってSpice Factoryでアジャイル開発やアクセスピリティを力入れているのでそれを入社を決めました。
今は企業向けのサービスや業務システムのデザインを主に担当しております。
ありがとうございます。ちなみにこれちょっと余談なんですけど島田さん最近何かハマっていることとかありますか?
それを聞きますか。はい、編み物にハマっていて毎月3万円ぐらい使ってます。
いいですね、いい趣味ですね。ちなみに最近作った、完成した編み物でいくと何があるんですか?
カバンと、カバンですかね、あとは今作ってるもので言うとカーディガンとか作ってます。
すごい、編み物サークルっていう形でなんか社内のメンバー結構編み物してる人多いですよね。
はい、みなさん一緒に夜集まって編み物会とかしたりしていただいてて、チェンさんも一応手芸クラブのメンバーです。
そうなんですか。いやー、島田部長はさすが本当に手が早くて。
一つの、あれ前作ったのが何でしたっけ?
モチーフ編みっていう名前のものです。
本当に技を見せました。
匠の技だった。
そうそう、本当になんか喋ながらで、なんか本当になんだろうライブ配信みたいに編んでくれて。
手元見せてって言われて、ライブ配信しました。めっちゃ緊張しました。
楽しそう。チェンさんは何かハマってることあるんですか?最近。
私はもともとカメラが好きで、フィルムカメラよく撮ってます。
昔ながらの。最近というかもう2、3年前から。
もともと本当になんか使い捨ての写るんですって買った後に、やっぱり物足りないなと思って、
フィルムカメラを買って持ち歩いて、公園散歩をしたりとか、あと友達撮ったりとか、日常の風景をよく撮っています。
いいですね。なんか社内に結構カメラ好きも多いような印象でして、実は。
なんかいいですね。皆さんちゃんと趣味を持たれてて、ありがとうございます。
そんなね、お二人に早速話題を振っていければと思います。
今ですね、AIとデザインシステムってどちらもホットなワードになってますよねっていうところなんですけど、
この2つが組み合わさることでどんな可能性が見えてくるのかなっていうところを、まずちょっと島田さんからその本テーマに入る前にちょっと伺っていきたいんですがどうでしょうか。
そうですね。
まずはそのデザインシステムっていうところで言うと、サービスの一貫性とユーザビリティのために注目が集まっているという感じがあります。
ただこのデザインシステムっていうのは管理がまずとても大変で、放っておくと頑張って作ったけど、境外化してしまうっていう側面があります。
ただ現在そのAIがかなりみんな使ってると思うんですけど、このAIの力を借りることでこれまで時間がかかってたドキュメント作成とか品質チェックっていうのが劇的に効率化できるっていう可能性が出てきています。
実際私たちも実験的に取り組み始めてます。
だから今回のテーマに選んでいただいたのかなとちょっと思ったりもしました。ありがとうございます。
今回デザインシステムの話を伺っていくときに、スパイスファクトリーでの環境とか使っているツールについても最初に聞いておきたいなと思うんですが、スパイスファクトリーではどんなツールを使ってデザインシステムを作ってるんでしょうか。
そうですね。スパイスファクトリーではFigmaを利用しています。
理由としては、Figmaでは開発に近いデザイン制作ができるっていうところが特に強みとしてあって、業界的にも利用している企業も多いと思います。
最近ではFigma自体にもAI関連の機能もリリースされて、Figmaメイクというんですか、社内でも非常に盛り上がっています。
確かにFigmaメイクを使ったハッカソン、プロトタイプを爆速で作るみたいなイベントも社内で実施していたので、
皆さん気になる方はスパイスファクトリーの公式ノートで公開されてますので、ぜひご覧になってください。
それでは本テーマに入っていきたいと思いますのでよろしくお願いします。
はい、パチパチパチ。
じゃあ早速本テーマに入っていければと思います。
じゃあそもそもですね、デザインシステムって何?っていうこの基本的なところからお話1つ目のテーマとして入っていければと思っております。
デザインシステムって聞いたことはあるけれども、実際何なの?みたいな思っている方も結構多いと思うんですけれど、チェーンさんデザインシステムって何なんでしょうか。
そうですね、簡単で言うとデザインと開発の共通言語を作ることですね。
例えばボタンこういうデザインで、この色で、こういう動きで、どういうことを統一して誰が作っても同じ品質になるようにするシステムになります。
それって開発側のメリットってどういったところになってくるんですかね、島田さん。
一番大きいのはやっぱりその再利用性っていうところで、一度作ったコンポーネントをいろんなところに使いまわして、一貫性も出てくるんですけどそれによって。
で、その使いまわすからこそ開発効率が格段に上がります。それにそのデザイナーとエンジニアがこのボタンとかいつものボタンっていった時に同じものをお互いにイメージできるようになります。
なんか共通パーツを作るみたいな、そんなイメージなんですかね。
はい、そうですね。
なるほど。チェンさん、他に何かデザインシステムの特徴ありますか。
あとは大きいのは多分バックも減ります。
なんか毎回新しいものを作るよりはテスト済みのコンポーネントを使いまわした方が安全というところもあります。
ありがとうございます。
ではですね、まだデザインシステムを作っていない会社さんとかも多くあると思うんですけれども、もしクライアントの方とかこれからデザインシステムを作っていきたいなと思っている方の目線でいくとどういったメリットというか、こういうことがいいこととしてあるんじゃないかなっていうのは島田さんありますか。
はい、そうですね。一番分かりやすいのはやっぱり一貫性っていうところで、デザインシステムがあることによってサービス全体通してその一貫性のあるコンポーネントを全体的に利用できると。
これによっていつものボタンとエンジニアとデザイナーも認知できたと思うんですけど、ユーザーにとってもこのボタンを押せば次に行けるんだとか、
そういう一貫性があることによって認知負荷が下がります。少しの時間でサービスに慣れて簡単に操作できるっていうサービス提供ができますので、それによってクライアント目線とかで言うと顧客満足度の向上っていうのにつながっていくっていうところですね。
メリットと継続性の重要性
またデザインシステムにルールやガイドラインが載っているので、それによって続人化、開発チーム自体の続人化っていうのも結構なところで問題になっていたりすると思うんですけど、そこの続人化っていうところを防ぐことができるっていうところもメリットとしてあります。
ありがとうございます。続人化は確かに大きな問題ですよね。開発プロジェクトもずっと同じメンバーでやり続けられればいいですけど、そういうわけにもいかないっていうところもあると思います。チェーンさんいかがですか。
そうですね。私、もっと拡張で言うと、実際にそういう案件最近もありまして、例えば最初来た案件にデザインシステムと画面のデザインを作って、お客さん満足していただいて、その後はグループサービスの別依頼がいただいたときは、先に作ったのをそのデザインシステムをもとにグループサービスと一貫性を持たせたのをデザイン作成を使いました。
それによって長期的なコストも削減、コストダウンもできます。例えば、新しい機能を追加するときは、既存のコンバネと組み合わせるだけで済むことが多くなってきて、開発期間とコスト、両方とも抑えられるようになります。
デザインシステムはメサ機能というよりかは、中長期的に開発効率を上げていくということに対して結構有効な手段ということですかね、チェーンさん。
そうですね。まさにおっしゃる通りです。
ありがとうございます。ちなみにスパイスファクトリーでもデザインシステムを今作っているよという取り組みとして、さっき伺ってたんですけれども、デザインシステムをスパイスファクトリーで作る理由って何でしょうか、島田さん。
はい。私たちスパイスファクトリーが手掛けるプロジェクトっていうのは基本的に中長期で伴走する案件が多いので、1年、2年と続くプロジェクトだと途中で我々の中でもデザイナーとかエンジニアが変わることもよく出てきますよね。
その時に次誰が担当しても品質を保てるっていうところを叶えるためにデザインシステムの重要性とかニーズを感じているクライアントも多いので、うちでも作っていこうというところで頑張ってます。
私たちって結局クライアントワークが今主体になってるじゃないですか。その中で私たちのデザインシステムっていうとスパイスファクトリークオリティのものを標準化してデザインシステムに落としているみたいなそんな感じなんですかね。
そうです。おっしゃる通りで、うちの社内でデザインシステムテンプレートっていうものを今頑張ってチェーンさんと私で作っていってるんですけど、それは私とチェーンさんは特にそのデザインシステムに対して知識がある程度あるけど、
他のメンバーでいうとまだそのデザインシステムが作るような案件にアサインされてなかったりとかそういう中でもデザインシステムをちゃんと作っていけるようにするためにそのためのテンプレートだったりして、うちの中ではそういうものを作っていってます。
困りごとの共有
ありがとうございます。それでは2つ目のテーマに行っていきたいと思います。私たちもそのデザインシステムをようやく作り始めましたよねっていうところを取り組みとしてあると思うんですけれども、2つ目のテーマはデザインシステムの困りごとというところでちょっと聞いていきたいなというふうに思っております。
各社ですね、いろいろ困りごと抱えているデザインの事業部だったりお客様だったりいると思うんですけど、私たち目線でまずその実際に島田さん、チェーンさんやってみて、どんな困りごとがあったかなって率直に聞いてみたいんですけど、チェーンさんいかがですか?
いっぱいありますね。なんというか、やっぱりうちはクラウドワークなので、ビジネス効果を提供しないといけない。でもデザインシステム、どちらというと最初は構築がやっぱりちょっと時間かかるので、そこが実感してもらうまで時間かかることがもちろんあります。
確かにですよね。まずは構築してパーツ、共通言語と共通のものを作っていって、まずはそこを作る段階ですもんね。最初に取り組め始めた時は。まだ使ってないみたいな状態の時も多分あると思うので、ちょっと実感するまで時間差が出ちゃうなみたいなところが一つ困りごととしてあるところということだったんですけども、島田さんはいかがですか?困りごと。
チェンさんのおっしゃるものをめっちゃわかるっていう感じで、私自身もいっぱい困りごとはありすぎて選べないんですけれども、強いて言うなら、すでにサービスを開始しているもののデザインシステムを作ろうとなった時の最初の調査が本当に大変だと感じてます。
調査ってどんなことをするんですか?
まあそうですね、ルールがない状態で、もう何でもありな状態のものがいろんなところで散見されているものを、そうですね、どういうパターンがあるのかとか、今どういうふうにそのルールはないけれども、どういうふうにちょっとだけ統一されて作られてるとか、そういうなんかパターンをね、一生懸命調査して、そこからデザインシステムを作っていくみたいな感じで。
立ち上げっていうところですね。そこがめっちゃ大変です。
確かに、まず使用し始める、その共通言語、共通パーツを使用し始めるまでに様々なプロセスが、準備のプロセスがあるっていうことで、確かにこの皆さんデザインを作っている人たちとか開発チームのこの暗黙地を紐解いていくというか、みんなヨシナにやってるものを紐解いていくっていう感じなんですね。
そうですね。
ありがとうございます。ちなみに、チェーンさん、もし他にも課題とか困りごととかあったりしますか?
私は、さっき島田さんおっしゃったような、例えばグループサービスがあって、でもそれぞれのサービスが一見連携がありそうで、でも実際に別々の人、デザイナーも開発者も別々、あとたまにこっちでデザインするんですけど、開発は向こう側。
その時は、じゃあよし、今一つなろうという時は、本当にそれぞれのパーツ、どこから持ってきた方がいいのか。
例えば、月へ進むのパターンがサービスによってデザインが変わるとか、あと仕様も変わった時は、最初そのパターンはもう5つがあったりとか、もう困難しちゃう時もあるので、そこがやっぱり最初の調査と、あと開発との連携が大変と感じてますね。
構築のプロセスとコミュニケーション
けど、とはいえ、かなり序盤で効率化できるっていう話もあったと思うんですけど、島田さん、その後の効果というか、実際けど、まあ困り事はいろいろあるが、そこを乗り越えたらどうなるみたいなのあったりするんですか?
そうですね、この一番最初大変なこの山を乗り越えたら、品質はそのままにして、デザイナーの工数も大幅に削減できているっていう世界が広がっていきます。明るい未来。
明るい未来はね、来るまでがちょっとね。
そうです。これは何度も言ってる、一度作ったコンポーネントとかルールを使い回すので、画面設計で迷って何回も何回もミーティングするみたいなこともなくなっていくっていうところですね。
ありがとうございます。ちなみにデザインシステムの構築を開始するタイミングって、何かいつから始めればいいの?みたいな判断がちょっと難しそうだなって思ったんですけど、島田さん、何かいつから始めるっていう決断とかの基準になるものとかってあったりするんですかね?
結構、プロジェクトとかチームとか、それの規模、期間、構成とかによって全然違ってくるのかなっていうのがまずあります。基本的に私がデザインをする時っていうのは、最初からデザインシステムを作れるように、ベースを整えるようにしてます。
デザインシステムでは、ドキュメントをしっかり作るっていうところもあるんですけど、そこまではせずに基本的なルールとかそういったものをメモレベルで残していて、あとはFigmaでコンポーネントとバリアブルズをがっつり使ってっていうところの進め方で、そこである程度作っているので、後からデザインシステム作るとかってなった時にかなり活用できるようにはしています。
ちょまど チェンさんは普段どんな感じでタイミング見極めてますか? 普通に私も気になります。
チェン そうですね。ここは多分デザインシステム作るのタイミング、結構みんなそれぞれ自己流があると思うんですけど、私の場合は同じものを、例えばサービスカードみたいなものはUIが3回くらいに出てきそうと思ったら、もうコンポーネント化しちゃうことが多い。
ちょまど でもどちらで言うと、今の案件は機構向けの業務システムの案件が多くて、そういった案件はすごい精緻なデザインよりは、本当に使いやすい、見やすいというところが大事にされているので、ちょっと順番が若干変わるんですけど、デザインが始まる前にその企業さんのプラントカラーに沿って、最小限のカラーパレット、あとタイプグラフィーなどある程度を決めて、
決めることが多くて、もちろんデザイン作りながら少しずつ調整いくパターンも多いですね。
ちなみにデザインシステムとか、何かを決めていく、整えていくときって非常にコミュニケーションが重要になってくるなという印象があるんですけど、そこの先ほどの島田さんも暗黙地とか、みんなが吉田にやっているものを紐解きながら、どうやって使っているんだろうというのをコミュニケーションとりながら、どんどん情報を整理していって、最終的にデザインシステムを作っていくということになります。
そういった部分に落とし込んでいくって話を聞いたんですけども、そこの紐解くコミュニケーションの部分で大変なことってありますか、島田さん。
そうですね。例えばですが、これ実際にあることですが、コミュニケーションを取ろうと思ったときに、案件が人によっては部署をまたいで担当者がそれぞれいて、それぞれ現状の把握のために担当者の方ごとにリサーチを行うっていう必要が出てきてしまいます。
クライアント、私たちに依頼をされてきたクライアントの方はデザインをまとめていきたいと考えているので、別々の担当者に現状のデザイン分析とかデザインシステムを使ってもらうための現状の業務フローのリサーチなどなど、色々現状を把握するっていうところにコミュニケーションをかなり時間を使ってやっていくので、
その分、やっぱりチームが複数あればあるほど、ここのコミュニケーションに結構時間がかかっていくなという感じです。
デザインシステムを構築したいという側、もちろんお客さんでもあり、社内でもあるのかもしれないですけど、そういった方たちのみんなの協力が必要不可欠ってことですね。
そうですそうです。
うまくいかせるポイントみたいなのもあるんですか?
そうですね。やっぱり工夫としては、私の中の工夫としては、皆さん一緒にミーティングにも入ってもらって、それぞれのチームの現状も全体で共有してもらって、そこのミーティングの中で方針の合意形成も取るようにしています。
なるほど。デザインシステムのルールとかガイドラインとか、作り出したら切れないのかなみたいな、ちょっと思ったりもしたんです。聞きながらね、ちょっと思ったりしたんですけど、どの程度細かく作っていくものなんですか?チェーンさん。
ここはまた悩ましいポイントになりますね。例えば複数名が関わる案件でしたら、パーツやステ出すことにルールをまとめることがすごく大事ですね。
デザインシステムの基礎
細かく言うと、ボタンはいくつのパターンがあって、それぞれのパターンにデフォルトはこの感じで、ほばしたらこういう感じで、ディステーブルの状態はどういうデザインになるとか、あとフォーカスとなりますかというステ出すもちゃんと書いて、余裕があればUIフローもちゃんと書くようになる。
そういう、単純にデザインシステムでまとめるだけじゃなくて、開発者を画面のデザインを見るときはちゃんと認識できるようにするようになりますね。日本語難しいわ。島田さん、法則ありますか?
そうですね。なんで今、チェーンさんが説明していただいたようなことをするかっていうと、私たちはまとめたとしても、開発チームの方がそれをあんまり認識できないとか、確認しにいけないってなっちゃうと、結局それが伝わらずに開発しちゃうっていうことになって、後からデザイナーが確認したときに、え、これ違うよってなると、開発の方もすごい、え、そんなの。
後から言われてもってなっちゃうし、こちらもちゃんと伝えておけばよかったなと思うので、そのルールを明確にしてまとめて、開発の皆さんもそれを参照できるようにするっていうところもかなり大事になってくるのかなっていう。
ってなると、デザインシステムはどのぐらい細かく作るものなんですかっていう問いに対しては、開発チームとかの規模とか、皆さんのサービスデザインとか含めて、その運用によるんだけれども、基本は開発チームが効率的に皆さん迷わずに開発できるようにすぐ情報にたどり着ける。
このデザイン使ったらいいんだ、このルール使ったらいいんだっていうのがわかる程度にしていくっていうところなんですね。
そうです、素晴らしい。
ありがとうございます。
ちなみに結構情報が多くなってくるのかなっていう印象も得ていて、命名ルールとかめっちゃ大変そうだなと思うんですけど、その辺島田さんどうなんですか。
そうですね、命名ルールちゃんとしてないとたどり着けなくなっちゃうので、本当にそうって感じなんですけど、Ixd、うちのデザイン部署の中では品質管理のためにデザインシステムのテンプレートのお話を先ほど少しご紹介させていただきましたが、そこで命名規則っていうところでルールをある程度まとめています。
このテンプレートではバリアブルズというフィグマの機能があるんですが、そこにカラーとか余白何ピクセルとか細かい値を残していくんですけど、そこの値を残していくのにそれぞれその値の名前をつけないといけないんですが、そこの命名規則を細かく決めるようにしています。
例えばセマンティックカラーというものでは特定の使う場所や状態で利用する色を決めるものなんですが、例えば背景だったらBG、バックグラウンドの略、スラッシュ使う場所、スラッシュ状態、あとは頻度とかバリエーションとかで名前をつけていくっていうところで、
これでそれを使おうと思ったときに、選択肢のところにその色がどういう意味なのか、色名で分かるようになるので、デザイナー同士でも別のデザイナーが入ったときも色の意味をすぐに分かるようになりますし、開発の方もそれを見て分かるようになるっていうところで設計するように頑張ってます。
ジューンスはもう一個ごとですか?
そうですね。もし大規模案件でしたら、コンポネントごとにフィグマのページという機能があるんですけど、そのページで分けて管理することが効率感もいいし、探しやすいというところもあって。
そうすることで、誰から見てもちゃんとこのページはある程度目地みたいなやつで、この案件はどういうコンポネントが含まれているのか見れば分かるという感じで、さらにそのファイルも軽くなります。
全部のコンポネントを一つの画面に集約するよりは、分けてカテゴリー化にして整理した方がきれいなと思います。
フィグマ、私たち当社でめちゃくちゃ使っているって話だったんですけど、そういったツールをしっかり使いこなして整理もしていくっていうところですね。ありがとうございます。
それでは次のテーマに行って参りたいと思います。
ちなみに次のテーマは、社会的に結構話題のAIのお話に入っていければと思います。
AIを使うことによって効率化できる部分だったりとか、そもそもどうやって使っていくとよりデザインシステムだったりデザイン面で効率化できるのかというちょっとしたお話にしていければと思うんですが、
ちなみにAIを使っている部分だったりとか、使い方のポイントについて聞きたいんですけれども、島田さんどんなふうな場面で使ってらっしゃるんですか?
そうですね。今は仕様とかの管理とかで使っていこうと思っていて、ドキュメント管理っていうやつですね。
デザインシステムっていうのはここまで話した中で、もうお気づきの方というか、実際デザインシステムがやってるよっていう方はもう分かっていると思うんですけど、ガイドラインとかデータが膨大になりがちなんですね。
なので、新しく参加したメンバーとか自分自身でも、このボタンってなんだっけとか、この色ってなんだっけってなっちゃったりすることもどうしても起こってしまいます。
なので、ドキュメント管理とかで質問したらAIチャットボットが答えてくれるようになるとか、そういったものを目指して研究を進めているという段階です。
ありがとうございます。ちなみに品質管理の面でAIを活用するってなったらどういったことが想定されますか?
そうですね。私が入っている案件では、もう既にリリースしてから3年ほど経っているサービスがあるんですが、かなり仕様が複雑になってきてしまっていて、それをAIに流し込んで、その中でこういう制約があるとか、そういうルールも入ってくるので、
AIに今検討している新しい機能の検討漏れしているエラーパターンの壁打ちとか、エラーパターン出しっていうのを一緒にやってもらっています。人間だけだと、例えば特定の状態でエラーするパターンっていうのを網羅することがなかなか難しかったりします。
そこでAIに現在の仕様や検討している機能の仕様、画面遷移図などを読み取ってもらって、エラーパターン出しをザーッと表にして出してもらっていて、これによって以前よりかなり精度が高く仕様検討ができているなと感じています。これからはもっと人間の目だとどうしても見落としがちなところっていうのがあるので、AIがチェックしてくれると助かるなと思っています。
すでに使い始めている研究段階だというところだったので、これからが楽しみだなというふうに思っております。チェンさんはAIの活用についていかがですか?
私はプロタイプの実装生成のところは結構期待していますね。実際に最近の案件ではクラウドヒアリングしてから要望や要求を整理して、した後にすぐにフィギュアメイクを使って、こういうことですか?でプロタイプで見せる。
従来の方法だとワイヤーを引いたりとか、あと静的な画面で一つずつ写って、こういうことですか?って聞くよりはやっぱりポチポチで自分で操作できるようになったら、クライアントもこうなるんだとか、このボタンを押したら、このチェックボックスを押したらこういうことになりますか?って。
そういう何というかね、より具体的に使用の検討ができるようになりました。あと、今はちょっと限られた案件で活用してるんですけど、これからもっと多くの案件を使えるようになったらいいなと思ってます。
ありがとうございます。ちなみに分析なんかにも活用できそうだなって思うんですけれども、開発に関わるような場面で分析に使ったりもするんですか?島田さん。
そうですね。最近も本当実際にCursorっていうコード分析、コード向けのAIツールでフロントエンドのコードを分析して、コンポーネントとかカラーなど今使っているものですね。どこでどのように使っているかっていうのをリストアップしてもらいました。
結構先に話してた後からデザインシステムを作るぞとなった時に大変だっていう話を先ほどしたんですけど、そこでかなり使えるなっていうのが今のところ私の中で研究成果として上がってきてます。
これはよく利用されているカラーだからちゃんとカラーパレットに入れようとか、逆にあまり使ってないな、でもこの他のカラーに似てるなっていう色が出てきたりしますと。それを統合できないかっていうのを検討しやすくなりましたね。
前は一個一個コード検索して何件あるかどこで使っているのか人間の目で見て頑張って洗い出しして目をシパシパしながら頑張ってたんですけど、大まかにAIで調査できるようになって本当にいい時代になったなと思ってます。
それはつらいですね。それは調査つらいってなりますよね。
そうです。
本当にドキュメントとかその調査の面とか分析の面でAIがそんだけ入れるってなるとかなり非常にデザインシステムを作るっていうハードル自体も非常にそんなに高いものじゃなくなってくるっていうその潮流は今来てるのかなってちょっと思いました。ありがとうございます。
実践的なアドバイス
それではデザインシステムをこれから作っていく方、今作り途中の方、今運用している方含めて実践的なアドバイス、今すぐできることということで最後に伺っていければなというふうに思っております。
まずですね、そんな皆さんに第一歩として今日からできることをちょっと伺っていきたいんですが、島田さん何か今日からリスナーの皆さんができることはありますか?デザインシステムについて。
はい、僭越ながらっていう感じなんですけど。
そうですね。
これどこでも言われてるかなと思いつつ言わせていただきますと、小さなコンポーネントライブラリーから始めるっていうことをお勧めします。
いきなり大きなシステムを作ろうとするとやっぱり挫折しがちなので、まずはボタンとかフォーム、カードなど基本的な要素から始めてみるっていうのがいいと思います。
チェーンさんはいかがですか?
まさにそのことだと思います。同時に開発チームとの共通言語を作ることは意識することもとても大事だと思います。
続いてですね、今すぐできること実践的なアドバイスのところでAI活用についても聞いていければなと思いますが、デザインシステムにAIをもし活用するならっていうところでいくと島田さんいかがですか?
そうですね、あんまり最初から難しいことやってみようっていうところじゃなくて、まずは今使っているツールにAI機能があれば試してみるっていうところから始めるのがいいかなと思います。
FigmaにもAI機能が搭載されてますし、デザイン業務で活用できるシーンがたくさんあると思います。
だんだん使っていく中で、このAIはこれが強いっていうのがわかると思うので、それらを複数のAIの知見をまとめて使い分けて応用していって、これをやりたいからこのAIを使おうっていうので、どんどん応用していくっていうところを目指していくのがいいと思います。
ありがとうございます。チェーンさんはいかがですか?
AIツールの活用
小さいな自動化から始めるのがコツかもしれないですね。例えばよく使うモンコーンをAIを生成してもらったり、あとカラーパレットの提案をしてもらったりとかしてます。
いきなり大きなことをやろうとしないで、日々の業務でこれAIに任せられるかもしれないという、そういう考えの習慣をつけることが大事だと思います。
ありがとうございます。いろんなAIツールも新しいものがどんどん出てきているなっていう形だと思うので、最新情報のキャッチアップと、あとはまずは使ってみるみたいなところが大事なのかなっていうふうに聞いてて思いました。
皆さん、お勧めのAIなどがありましたら、ぜひSNSとかで私たちにも教えていただきたいですし、私たちもぜひ発信していければと思っておりますので、皆さんこれからもよろしくお願いします。
ということで、あっという間にお時間が来てしまいました。本日は島田さん、チェーンさんとAI時代のデザインシステムについてお話ししていきました。
最後にまとめということで聞いているリスナーさんに何かスパイスになるような一言をお伝えして締めていきたいと思います。ご準備よろしいでしょうか。今日のスパイスな一言は。
デザインシステムはより良いものを届けるためのエンジンです。
ありがとうございます。
デザインシステムはより良いものを届けるためのエンジンですということでしたが、なぜこの言葉を選んでいただいたんでしょうか。島田さんいかがですか。
UI デザイナーでもエンジニアでも結局は良いものを作りたいっていう思いが同じだと思うんですね。
なのでデザインシステムはその思いを形にするための道具なので、難しく考えずにまずは小さなところから始めてみるのがいいかなと思っています。
ありがとうございます。じゃあチェーンさん。
そうですね。AI も同じで、新しい技術が出てきたときは見構えることはないかなと思っていて、私たちのクレディブ幅を広げてくれるパートナーを考えて楽しみながらで飛んでいければいいと思います。
なんかやっぱりこう今世の中にAIは私の仕事を取られたらどうしようという、そういう声もあると思うんですけど、でもそこはうまくやっぱりこう人間を作ったものは人間のため存在するので、そこは AI はお友達パートナーと考えて一緒に作ればいいなというパートを考えています。
ありがとうございます。いいサービス、顧客体験を作るためにですね、俗人化を防いで、さらに開発チームとの共通言語を作っていくデザインシステム、素晴らしいものだなというふうに思いました。
ぜひですね、リスナーの皆さん、デザイン事業部の方含めてですね、デザインシステム作れるかなって思ったら、ぜひチーム内とか事業部内でぜひ話題にしてちょっと話してみていただくことから始めていただけるといいのかなというふうに思いました。ありがとうございます。
次回の予告
島田さんちんさん、今日は貴重なお話をありがとうございます。皆さん、今日のお話はどう感じましたでしょうか。概要欄のフォームやX、SNS でハッシュタグスパイストークとつけてぜひ投稿してください。
はい、最後までお聞きいただきありがとうございます。この番組は360度デジタルインテグレーターとしてDXCMを事業展開しているスパイスファクトリー株式会社がお送りいたしました。来週は第1週目になりますので、テクトークということで技術系のお話をCTOのタイさんとともにお話ししていきたいと思います。
それではまた次回、お楽しみに。
