# Design Systems with Figma: Tokyo ## Метаданные - **Канал:** Figma - **YouTube:** https://www.youtube.com/watch?v=B8hyvF0aBTw - **Дата:** 17.03.2026 - **Длительность:** 1:41:51 - **Просмотры:** 4,739 ## Описание 本イベントはデザインシステムを構築・運用し、組織に浸透させていくための知見を得られる場です。 Figmaの最新機能のアップデートとデモ、各企業のデザインシステム実践事例を紹介します。 ____________________________________________________ Find us on ⬇️ X (formerly Twitter): https://x.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma TikTok: https://tiktok.com/@figma Figma forum: https://forum.figma.com/ ## Содержание ### [0:00](https://www.youtube.com/watch?v=B8hyvF0aBTw) Segment 1 (00:00 - 05:00) [音楽] 本日はお忙しい中、デザインシステムズ withFIG東京にご来場いただきまし て誠にありがとうございます。私、本日の 司会進行を務めますフィグマジャパン コミュニティサポートスペシャリストお じ子と申します。どうぞ最後までお 付き合いください。 初めに皆様にご案内です。本日はオン ライン配信も同時に行います。各者の SNSやブログ、メディアに写真が掲載さ れる場合がございます。会場に参加され てる皆様が映り込む場合がありますので、 あらかじめご了承ください。なお今回は オンラインのご質問には回答できませんの でご了承ください。 本日のアジェンダです。 終了後ネットワーキングのお時間もござい ますので是非ご参加ください。 それでは最初のセッションを始めてまいり ます。最初のセッションは フィグマジャパンデザイナー アドボケート谷弘樹よりキーノートです。 ひ樹さんよろしくお願いします。 はい、え、皆さん改めましてこんばんは。 え、ひグマのデザインアドボケイトの谷と 申します。え、皆さん今日ご来場 ありがとうございます。え、今日の イベント最初にですね、僕の方から キーノートという形で、ま、色々な アップデートの話とか、え、あるいは 私たちのデザインシステムの向き合い方で 最後にですね、ま、簡単なデモなどを、え 、この時間でお届けしたいと思っており ます。ま、今日はかなり豪華なセッション というか、いろんな企業の方々の事例など も見れる貴重な機会となりますので、最後 までお楽しみください。では、え、始めに ですね、 え、ま、デザインシステムですね、 デザインムっていうのは、ま、優れた プロダクトを支える、ま、基盤と言えると 思います。ま、チームが物づりを進めて いく上で一貫性や整合性、明確さというの をそこにもたらします。 で、デザインシステムというのは例えば そこにクラフトであるとかあるスケールで あるとかそういったものはどちらかを選ぶ というものではないと考えています。 システムはそのどちらも実現するものだと 考えており、ま、それがサポートする チームだったり、ま、プロダクトだったり 、あるいはそのプラットフォームの数に 関わらず機能できるものだと、え、考えて ます。 で、こう皆さんの中にはですね、ま、 デザインシステムに取り組んでる方々は ですね、ま、組織やプロダクトを横断して いろんなこうたくさんのライブラリを管理 してる方もいらっしゃるんじゃないかなと 思います。で、多くの方はその複雑性と いうのに日々、え、向き合ってるのはない かなと思ってます。で、僕ら自身もですね 、お客様の中で、え、ま、大体 1万7000ぐらいのバリアントを持つ その、え、コンポネントセットを見たりと か、あるいはこう100万を超える レイヤーを抱えるライブラリーというのも 目にしてきてます。 皆さんの多くはですね、ま、デザイン システムの運用していく中でもう コンポネント多くリリースして ドキュメントを更新してバグを修正してで アクセシビリティの向上に向かってという ことに頑張ってるかなと思います。で、 あとはそのデザインシステムをただ作る だけじゃなくて、それに対する貢献モデル というか、どういう風に運用するかとか ですね、そういうことを考えて何回も 見直しながら、え、頑張ってると。で、時 には車内でデザインシステムの使うための 勉強から開催したり、スラックで質問を 受けたりとかですね、ま、色々遅くまで 頑張ってる方もいらっしゃるんじゃないか なと思います。 ま、ですがデザインシステムというのは これからさらに大きな存在へと進化して いくと考えています。 で、今日のデザインシステムというものは ですね、ま、エンジニアとデザイナーを つぐ、いえば共通言語というものとなって いて、え、より皆さんがプロダクションに フォーカスできるための基盤となってい ます。 これからはさらに新しい形、新しい想像の あり方というのを支える存在になると 私たちは考えています。 ま、典型的な例はですね、変化が現れて いるのは、ま、プロトタイピングみたいな ところです。ま、チームにおける プロトタイピングの向き合い方というのも AIの進化によって、ま、これまでとは ### [5:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=300s) Segment 2 (05:00 - 10:00) AIの進化によって、ま、これまでとは 違う形で早くプロトタイプを生み出すと いうようなことも可能になってます。その スピードと引き換えにただそこになんか こう不整合みたいなものを生み出している という可能性があるんじゃないかなと。 ま、そういった不整合と呼ばれているもの を防ぐためにはそのデザインシステムに 関する全ての情報を一次元管理する いわゆるそのシングルソースオブtoと 呼ばれるものが必要となってきます。ま、 フィグマはそれになり得うる存在だと 私たちは考えています。 デザインシステムがそのフィグマ上に存在 して、ま、色々なリポジトリと連携し、ま 、さらにMCPによって翻訳可能になる ことによって、ま、単なる性的な ライブラリーということ以上のものに なりると、ま、それによって、え、 プロダクトの見た目であったり、ま、 使い心地だったり、ま、いろんなものを 支える生きたシステムに、え、進化すると 考えてます。 ま、だからこそですね、私たちは、ま、 コードやドキュメント、そして満を またがる、いろんな分散した情報源という のを統合して、ま、デダシステムを構成 するいろんなコンテキストといったものを 形成することを、え、重要視しています。 ま、それによって、え、チームの開発と いうのを的確に例え、え、支えてAIから 、あ、より多くの価値というのを 引き出せるようにしていくというけ合い方 をしています。 で、私たちの目標っていうの明確で、より 多くのその作り手の皆さんが加わる中でも その品質というのを上げていくということ です。デザインシステムの未来というのは 単なる効率化だけではなく、ま、チーム 全体がクラフト性能の高いプロダクトを 作るというところに、え、迅速に、迅速に 質の高いものを生み出せるというところに することが目的となっています。で、その 瞬間に答えるために私たちがデザイン システムをどのように進化させているか、 今日はその3つの取り組みについてお話し します。 1つはしなやかな設計。まず最初に フィグマのゼダシェムっていうのは、ま、 柔軟であるべきだと考えてます。ま、それ によって多くのアイデアをより早く試す ことができるようになります。 まず話すことはバリアブルズについてです 。このバリアブルズと呼ばれる機能は大体 2年前ぐらいにリリースされました。これ はフィグマにとってはデザインシステムを 管理する上での大きなマイルストーンとに なりました。で、今やこうバリアブルズが ない環境というのは考えられないという方 ももしかしたらいらっしゃるかもしれませ ん。ま、僕は少なくともそうです。ま、 ですが、ま、マルチブランドのデザイン システムというのを作る上ではこの バリアブルズのコレクション、その バリブルズの塊というのをメンテナンス する負債というところが決して小さく なかったかなと思います。 例えば40ものモードを持つ、その上限 までモードを使い切ったコレクションと いうの作成してる会社さんもいます。ま、 そうするとこのバリアブルズのモダルと いうのはこのぐらい膨り上がってしまって 、ま、ここまで行ってしまうとそのベース になるものを更新するアップデートして いくだけでも、ま、何百何千の更新が手導 で発生すると、ま、そういった連鎖的な 負荷というのが発生していたというのが これまでの状況です。 ま、その上でこれらを使う側の体験という のもさらに分かりづらくなってしまう。ま 、なのでフィグマの中でどうバリアブルズ を柔軟に扱えるようにするかということに 、え、私たちは向き合ってきました。 そこで去年リリースしたのが このエクステンデッドコレクションズと いうものです。これは非常に多くの方から ご要望をいただいてたものでして、 いわゆるこのマルチブランドのデザイン システムを管理するための新しい方法と 言えます。 これによりデザインシステムの作成者は ですね、ま、いわゆるホワイトラベルと いうか、ま、カスタマイズを前提した デザインシステムというのを作ることが できて、ま、車内のデザイナー、各 プロダクトの担当のデザイナーっていうの はそのベースのコレクションをもに独自の テーマ拡張というものがしやすくなりまし た。これはただ複製ではなく親からの拡張 という形なので、え、各先々のプロダクト の方は親の方で何か更新があった時はそれ を簡単に引き継ぐことができます。一方で 各ブランド特有の値の更新があった場合は その上書きされた値っていうのはちゃんと キープされるというところで、え、かなり そのマルチブランドの展開や複数のテーマ の展開というところでかなり効果的なもの になってるんじゃないかなと。で、これは 現在エンタープライズプランのお客様から ご利用いただけるようになっています。 で、このリリースに合わせて、え、 バリアブルズのモード数というのを各 プランでも見直しました。まえ、チームや 、え、デダシステムがスケールしていくと ですね、やっぱ4つのモードでは足りない という声も大変多くいいてましたので、え 、現在では、あ、今後はですね、え、 プロフェッショナルプランでは4だったの が自由モード、え、オーガイゼーション プラン、ビジネスプランでは20モード まで利用できるようになっています。 そうした柔軟性というのが求められるのは 、ま、バリアブル図だけではありません。 で、コンポネントもよりしなやかに使える ようになる必要がありますと。その実現に 向けて、え、これも体望の機能として スロットというものを提供してます。で、 こちらはまだ皆さんの手元ではご利用 ### [10:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=600s) Segment 3 (10:00 - 15:00) こちらはまだ皆さんの手元ではご利用 いただけないんですけども、もうすぐあの 利用できるのかなと思います。で、フィマ のコンポーネントが最初にリリースされて からですね、やっぱりそこに制約があり ました。ま、例えばドロップダウンリスト みたいなコンポーネントを作った時に、ま 、その中で多くのリストを格納するわけな んですけども、ま、そうするとその数を こう柔軟にするっていうことはかなり 難しいという状況がありました。あかじめ 多めに作って使う時にはいくつかを非表示 にしたりとか場合によっては残念ながら デタッチをして、え、切り離してしまう。 ま、そうしてしまうとデザインシステムの 本体親のライブラリーとのコネクトが なくなってしまうのであまり意味がない ことになってしまう。ま、スロットを使え ばですね、そのインスタンス内にある独自 のレイヤーというのを追加できるように なりまして、え、その中に簡単に他の インスタン、インスタンスだったり、え、 他の要素を受け入れるということができる ようになります。で、これはかなり使い やすさを高めるというところで、え、 デタンシステムの良さと、え、その使い やすさを両立したものになります。ま、 こちらについては後ほど、あの、最後に デモをしたいと簡単なデモをしたいと思い ます。 で、最後にですね、ま、常にこういろんな 変化、変更が起きている中で、ま、どの ようにしてそのルックアフィールの立性と いうのを保つことができるかと。で、 デザインシステムというのはブランドの 一貫性や品質というのを維持するために 構築するというのが1つの目的です。ま、 だからこそいろんな検討だったり思考錯誤 っていうのが、え、常にこう行われている わけなんですけども、その裏ではちゃんと システムに準しているという状態を保てる 、保たれているということが大事で、え、 潜在的なギャップというのを、え、簡単に 特定できるようにするべきだと。で、この ようにここに、え、今映してある通り、 若干ちょっと色味が違うとか、ちょっと角 の丸みのサイズが違うみたいなところが いろんなところで起きるんじゃないかなと 。 で、この実現に向けてリリースする予定の ものがチェックというものです。で、これ はまだ、え、現代から早期アクセスという ことで、ええ、数名の方々に提供している ものとなります。ま、これはいわゆる、ま 、リンターと呼ばれる類いのもので、え、 例えばそのバリアブルズの中でバリアブ、 え、バリアブルズが適用されてて欲しい ところがバリアブルズではなく直接ハード コード、ま、16進数の値とかが、ま、 指定されてたりする箇所を検知して、え、 ここにはこういったバリアブルと使う方が いいという推奨をしたりとか、そういった ことができるようになります。ま、これも 後ほどデモでお見せします。ま、デザイン を開発者に渡す前、ま、いる、え、私たち のデブモードで言えば、ま、レディデブと いうステータスに変えるタイミングとかで 事前にチェックをして、え、どこにバリア 物が適用されていないかとか、何か違っ てるものがないかっていうのを検知して、 ちゃんと安全にハンドオフできる状態を 保つというガードレルのような機能になり ます。内部的にはそのレコメレコメーショ ンっていうのは、え、私たちの内部で持っ てるカスタムモデルがその文脈に適した バリアブルを提案すると、そういったこと をできるようにしています。 では次のトピックですね。え、次はコード ベースの文脈いわゆるコードベースの コンテキストの話です。で、皆さんご存知 の通り、ま、デザインシステムというのは このビジュアル、ま、デザイン的な要素と 、ま、コード、この両方で構成されている 必要があります。 で、コ動のオーサリングというのはですね 、ま、現在におけるAIの最も魅力的な 活用例の1つです。LL、LLMは、え、 膨大なテキストデータを学習しているため 、ま、非常に高い制度で、しかも多様な アプローチで、え、行動を書くことができ ます。 しかしチームにとってはですね、ま、ただ 書いてもらうだけではなく、自分たちの 書き方に沿った行動を書いてくれるという ことが重要です。そしてそれを実現するに はツール側で皆さんが持っているその コーディングスタイルというのを理解し てる必要があるので、いわゆる エージェント型のコーディングツールと いうのはそのコードベースへのアクセスと いうのを受け入れることによってLLMが コードベースに沿ったコードをかけるよう にします。ま、とはいえ、ま、それらは 存在している、ま、行動の上での話という ところで、新しいアイデア、新しい デザインに対してはどうかということです 。 で、私たちはみんなその新しいアイデアと いうのをこう、え、フィグマ上の プラットフォーム上でこそ、え、探求でき てそこで磨き上げて、ま、具体化できると いう風に信じています。ま、なので フィグマはそうした検討内容というのは 正しく実装される、検討内容っていうのは 、つまりデザインされたものを正しく実装 させるためにAI通路が必要とする関連 するデザインに関するコンテキストという のを提供できます。 MCPはそのコンテキを提供することを 可能にする、ま、標準仕様ということで、 え、私たちは公式のフィグマMCP サーバーというのを構築しました。で、 これにより関連するフィグマの コンテキストというのを全て吸収取得し、 ま、アイデアを実際にデザインシステムを 活用したコードへと迅速に変換することが できるようになります。 で、フィグマはですね、ま、どのようにし て存在しているデザインシステムのコード というのを把握するのか。で、この課題に ### [15:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=900s) Segment 4 (15:00 - 20:00) というのを把握するのか。で、この課題に ついては昨年こちらもリリースしたコード コネクトというものによって解決に近づき ました。コードコネクトはすにそのCLI 、コアンドラインのバージョンというのは 、え、数千のお客様に導入されておりまし て、ま、コードベースのコンテキストと いうのを、え、フィグマに提供するための 、ま、1つの方法で、え、活用されており ます。で、これまでそのコマンドラインの バージョンだったんですけども、ま、より UIで作業したいという方向けに、え、 コードコネクトUIというものを新しく 導入し始めました。で、これらの機能の コードコネクトUNと、え、コード コネクトに関しては、え、全ての オーガナイゼーションプラン、ビジネス プラン以上のお客様に提供されております ので、ま、この中でも既でにご利用され てる方などいればですね、是非 フィードバックをいただければ幸いです。 加えてですね、え、一方でコードから アイデアを始めてデザインを磨きたいと いうケースも増えてきています。これは かなり本当につい最近、え、昨日昨い ぐらいの話なんですけども、AI コーディングツールとヒグマの間でですね 、そのシームレスなフローというのを作る ための第1歩、ま、CODtoトゥンバス という機能を実は発表しました。ま、 コードtoキャンバスというこれを使うと ですね、ま、コードで実装されて、 レンダリングされたUIをヒマの キャンバスに、え、再現する、編集可能な フレームとして、え、再現するということ ができます。で、私たちの考え方としては ですね、いろんなそのクラフトと呼びる ような、え、磨き上げていくものっていう のは、ま、キャンバス上でこそ発揮される ものだと思ってます。そこの中で色々 バリエーションを展開して、そこで直接的 な操作で、え、探り合って探求していって 、ま、その上で出来上がったものをまた さらにコードに戻すというようなサイクル というのを今目指しており、え、これから いろんなアップデートを皆さんに提供して いきたいと考えています。いわばヒオ MCPサーバーというのはコードとその デザインのキャンバスをつぐ、ま、接着剤 のような、え、存在として考えています。 そして3つ目の最後ですね。ま、デザイン システムを、ま、どのようにしてチーム 全体に、え、開いていけるかどうか、PM やリサーチャーとか、ま、プロダクト作り にかかるわかる全てのメンバーが、ま、 すでに使ってるツールの中でデザイン システムをどう活用できるかということに も向き合っています。 で、冒頭でですね、ま、デザインシステム というのは、ま、デザインと エンジニアリングを、ま、統合するもの、 ま、共通言語という話をしました。ま、 そこでAIの登場によって、ま、チームが より、え、このこれらのデザインといった ものを活用できる接点というものが変化し てきています。 なのでデザインシステムというのはチーム の全てのメンバーを支えるものである必要 があるということです。 去年のコンフィグで私たちはフィグマ メイクという製品を発表しました。え、 そして多くの反響をいただいて実際多くの 方々にご利用いただいてます。で、多くの チームがですね、ま、プランプトから好 品質なプロトタイプを生み出していますが 、とても多い質問というところはメイクに いかにして自分たちのデザインシステムを 取り組むのか、活用するのかという声です 。 で、私たちは、え、昨年、ま、その 取り組みというのを開始しました。まず 始めたことは、ま、カラーやタイプ グラフィー、ま、スペーシングといった いわゆるこうビジュアル的な要素というの を取り込めるようにしました。ま、これに よって生成されるアウトプットがよりこの 皆さんの、ま、ブランドを踏まえたもの、 ま、デダンシステムに投集されたものに、 ま、見えるようにはなってきました。で、 そこから私たちはさらに一歩進んで、え、 これからメイクキットというものを皆さん にお届けできればと進めています。で、 メイクキットは、ま、これまでと同様に、 ま、スタイル、え、スタイルであるとか、 ま、バリアブルといった情報を、ま、活用 しながらですね、ま、フィマの コンポーネントをもに新しいコード コンポーネントをメイクの中で作れる機能 です。ま、これによって、ま、バリアント やプロポティスタイル情報っていうのが 新しい行動としてメイクの中で表現されて 、え、ま、かなり本番のアプリケーション に近いルック&フィールで、え、高品質な プロトタイプというのをメイクの中で 作れるようになります。で、こちらもです ね、かなり早く使いたいっていう声は頂い てるんですけども、現在はちょっとまだ あのRSという形で提供してまして、ま、 近術中に、え、またアップデートをお届け できるという見込みになっております。 そしてですね、もう1つますに多くの皆 さんがですね、え、実際絶対システムの中 でいわゆるこの権िなコードの コンポーネントというのを持っている、え 、会社の方もいらっしゃるかと思います。 であればそれらをメイクで使えないかと いう声も多かったんですけども、これは今 実現できるようになっています。メイクは NPNパッケージをインポートできるよう になりました。ま、これによりオープン ソースの、ま、ギッタムプライマーとか、 ま、そういったデザインシステムの ライブラリーをも取り組んで、え、 プロタイプを作ることもできますし、え、 もちろん自社で使っているデザイン システムをNPMセアなプライベート レジストリーに、え、公開してもらって、 それを組織全体で活用するということも 可能になっています。 ### [20:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=1200s) Segment 5 (20:00 - 25:00) 可能になっています。 というような形でですね、私たちは デザインシステムの向き合として3つのお 話をさせていただきました。で、この デザインシステムの未来というものがです ね、ま、どこに向かうのか、え、そして皆 さんがそこの最前線にいるというところに 僕ら、え、非常に大きな期待を寄せてい ます。で、皆さんが今日紹介したよう新 機能などを使ってですね、ま、柔軟に対応 しながらそのデザインとコードの、ま、 距離というのを縮めていって、よりその スケールするチーム全体にとって価値の ある値段システムを生み出していくという ところに、え、支えられればと思いますし 、是非そういった取り組みをしている、 こういうこと考えているという方がいれば ですね、え、是非あのお聞き、え、できれ ばなと思っております。ま、今日は、え、 この後いろんなたくさんの事例などもある んですけども、そこでもいろんなヒントを 得て持ち帰っていただければと思いますし 、ま、最後のネットワーキングでも是非お 話ができればと思います。ということで ですね、残り時間はまだ少しありますので 、せっかくで一部昨日のデモを行いたいと 思います。 はい。あの、皆さんよければこうデモが こういい感じに見えた時、あの、拍手とか してもらっても全然オッケーなので、あの 、まだ大丈夫ですよ。うまくいったらして ください。お、まだ、まだです。[笑い] まだです。でもそういうのは好きです。 はい。ではですね、初めにチェックについ てお見せします。え、ま、この中にも いらっしゃると思うんですけど、ま、 例えば自分がデザインシステムのオーナー で、ま、なんかこうコンポーネントを作っ たりというとこでいろんなアイデアを探求 したりすることがあると思います。ま、 そうして、ま、いろんなオプション作って 、ま、大体いい感じになったので、じゃ、 これを実装してもらいたいなと進めていき ます。え、ここでフィグマのデブモードに おいてはデリー4デブというステータスを 切り替える機能があるんですけど、これを 使うタイミングで、ま、要はここの デザインをチェックしますかという、え、 ものが増えるようになります。で、ここで デザインを確認するとすると、今選んで いるこのオプション1とフレームに対する 不整合をサストしています。で、何が起き てるかと言うと、ここのラベルのボタン ところですね。ここが実は、え、選択して みると いわゆるバリアブルとかではなく直接 重力士のコードが入れられてる状態です。 で、それに対して、え、チェックデザイン としてはこのバリア物を使ってはどうかと いうサジストをしてくれてる状態。ただ、 ま、あくまでサジストなので、ま、違う 場合はクリックすれば他の候補が出てくる ので、そこでテキスたものを選び、ま、 チェックをすれば反映されるみたいなこと が可能になっています。で、カラーだけで はなく、え、ここでいううところのこの ギャップですね、このオートレアウトの ギャップの値もいわゆる16ピクセル みたいな、あ、16ピクセルみたいな直接 的な値があれば、それはもしかしたら バリアブルズのサイズギャップラージじゃ ないですかみたいなサストをしてくれてる というのが今お見せしているものです。で 、これらを全部適用してクリアすれば全て 完了ということによって、で、これによっ て、え、より安心して開発に反フすること ができるということです。 一旦拍手もらってもいいです。大丈夫です 。はい。[拍手] というのはいわゆる臨のような機能です。 で、他のシナリオとしてはですね、え、ま 、既存のいろんなこう画面を作っていくっ ていう時に例えばなんか画面作る時に他の ところから持ってきて、とりあえず 取り寄せて組み合わせて作 るっていうことは結構よくあるかなと思い ます。で、走行してると1個1個の細かい ディテールというところが抜け落ちて しまうところはあると思うんですけども、 ま、今回はあの下のアクションのところ から、え、チェックデザインというのを 実行するということやっています。そう すると今度はこの左にあるこのタイマー みたいな、あのこれ、ま、動画のアプリ みたいなイメージなんですけど、そこの タイムスパン、え、タイムスタンプの フレームの色が、あ、バリエブないとか、 あるいはこの角のところ、4ピクセルの 角丸のところが、ま、本来であれば バリアブルであるべきだろうという サジストをしてくれてるので、ま、これも 適用したりとかっていうことをやっていく ことができます。 で、ま、これらを一気に全て適用して 終わらせるということもできます。で、 これだけではなくてですね、ま、ちょっと 別の観点でこれも実行してみると 同じように、え、例えばこのフォントの スタイルに関しても、え、抜け漏れてる ところがないかというチェックも入って ますし、え、変数の適用もありますし、で 、ここはコントラストのチェックというの をしてくれてます。要は今この右の方で 作られているのは実際作ったデザインなん ですけど、この部分の背景色との コントラストが甘いということで、え、W Aを満たすためのものであればこれを使う のはどうかという提案をしてくれてると いうことです。で、変わりました。あとは ですね、え、よくそのいろんなファイル から引っ張ってきたりすると、え、自分が 想定していないこのファイルでは使う予定 じゃないライブラリーから似たものを 引っ張ってくるっていうケースがあります 。で、ここに今出てるものっていうのは ### [25:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=1500s) Segment 6 (25:00 - 30:00) 。で、ここに今出てるものっていうのは この左上にあるこの矢印的なアイコンと いうのが、ま、本来は、え、この、え、 アストラボードというライブラに関する ものであって欲しいんですけど、ま、似た ような全然違う。この場合だとアストラで もデモって、ま、別のファイルとか、あと は、え、全然コラボライブラリって別の ファイルから引っ張ってきたバリア、 バリアブルズだったりみたいなところが 情報が出てます。なので、こういったもの に関してもし違うのであれば、ま、これに 関しては現在ちょっとここであの右の画面 側で置き換える必要あるんですけど、そう いったところのチェックもできるように なるというものです。これが、え、今回 ちょっと時間も短いところなので、ま、 チェックインズの大まかな概要というもの になります。ま、この後お客様の事例の中 でも自社のリンタープラグインの紹介など もあるんですけども、ま、フィグマの ネイティブとしてもこういった機能も提供 していくところですので、え、皆さんお 持ちいただければと思います。そして、え 、残りの時間で、え、スロット、スロット も結構待ちびてる方も多いと思うので、え 、こちらも改めて、え、デモでご紹介 しようと思います。 で、今ですね、作っているこの画面ですね 、この左側のペインなんですけども、ここ は、え、チャットペインっていう コンポーネントを今入ってます。ま、なの で、え、この部分が例えば、 ま、何かこう塗りが変わるとですね、ま、 インスタンス側である反対側の方にも反映 されます。 で、え、この中にですね、デザイン的には このカンバセーションというこのいるこの 吹き出しっぽいものを入れたいんですね。 で、今これを入れようとしても もちろん入らないです。なぜなら インスタンスだから。で、これを実現する ためには、うん、ま、例えばこれを ちょっと複製して、え、でえ、デタッチし てこれをよいしょ。ま、詰め込んだものを 用意してうん。例えばこう フィルドとかさっきのはデフォルトとか 名前つけてコンポーネントにして、え、 バリアントにして で、ま、こっち側ではさっき作った フィールドにして、まあ多いんで減らすか とか、ま、そういうことはやれるっちゃ やれるんです。ただ増やすことはできませ んみたいなところを解消するのがスロット です。 具体的には 今これメインコンポーネントがあります。 で、スロットというこのいわゆるこの いろんなものを受け入れるエリアにしたい ところを選択した状態で右にスロットに 変換というものが使えるようになります。 そうするとこのスロットのエリアに対する 名前とか説明とか入れられるんですけど、 ま、合わせてえっと優先される インスタンスというものがありまして、 ここに、ま、このUIのパターンの場合は もう基本的にこのカンバセーションって いうのを入れて欲しいので、 え、 カンバセーション、カンバセーションと いうのが入るように、ま、これは、ま、 優先されるなので実際何でも入れられるん ですけど、これが優先されて表示されます 。で、作成するとここ今ピンク色に変わっ たのか分かりピンクに変わりましたと。で 、このインスタンス側に行くとここに プラスボタンがあり、ここを押すと ここにインスタンスが入れられるように なるということです。で、これはもうこの 場で よいしょ 増やすことができます。ま、ただそれだけ じゃなくて、え、今僕らはこうAIを使っ てコンテンツの置き換えということが できるので、このマジックハンドルという ものを使って伸ばせば ここの内容が、あ、これですね。で、 置き換えをすると ここのダミーテキストというのもAIで リプレイするというようなこともできる ようになります。 1回もらってもないですよ。すごい皆さん こう頷いてはいただいてるんですけど。 はい。で、それ以外のケースとしては、え 、今まで、ま、機能としては提供されて なかったテンプレートみたいな考え方も、 え、利用は可能です。 例えば、え、このよくある画面使用画面の 枠組みたいなところも 例えば、え、これかな? エリターテンプレートみたいなも大きなも ものを用意して、ま、この中に入れる みたいなこともできます。ま、なので、ま 、ユスケースによってはこういった テンプレート単位でコンポネントを管理し てただ中は柔軟に置き換えられるように するみたいなことも可能になってるので、 え、皆さんの中ではこういったユスケース を想定して、え、スロットが使える時には 、ま、色々と試していただければと思い ます。で、え、残り2分か。そうですね。 ### [30:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=1800s) Segment 7 (30:00 - 35:00) ます。で、え、残り2分か。そうですね。 もう1個だけ一瞬だけおまけのでもさせて もらってもいいですか? と、最近発表した ばかりの、え、キャンバスコードっていう ものの本当に触りだけ一瞬お見せします。 ま、何が起きるかっていうものをお見せ する程度なのでリアクションが難しいかも しれないですけど、 具体的にはクロードコードとの連携になり ます。 あ、あざす。[笑い]で、え、まずですね 、あの、何するかと言うと、ま、すでに コードがもう色々組んであって、ローカル で起動するものがあるとある状態だとし ます。 で、サーバーを起動すると ブラウの方に 出てくるかな。 起動しましたね。これはシンプルデータ ムって僕らがオープンソースで公開して いるものです。 で、今からやりたいことはこのフィグマの キャンバスにここのこのコードで組まれた 内容を持ってくるということです。ま、 色々とこうすにあのMCBサーブの セットアップはしてる状態ということで色 はせてもらうんですけど、え、ここで、え 、クラウドコード、クラウドコードに、え 、 ま、インデックスページを取ってきて くれるみたいなことを、ま、簡単に一旦 言ってみます。 そうす。そうすると中で、え、クロドが 動いてですね、ま、仕組み的にベーシック な仕組みとしては、え、ローカルの今 サーバーで動かしてるものなので、その中 のコードにそのキャプチャーをするための javascriript差し込んでい ます。で、今なんかこうぐるぐる動いてい て、センディングtoに動いてます。そう するとここに 編集可能なものが生まれるということです 。ただそれだけではなく、あ、ありがとう ございます。[拍手] それだけではまらず、ま、例えば特定の 良さ取ってきたいっていう場合にはこの セレクトエレメントをしてクリックすると このキャンバスに現れるということです。 ありがとうございます。 ま、これは僕らにとってはまだ第一歩と いうところであるんですけども、ま、ただ これだけでもですね、いわゆるコードの中 で作ったものを色々並べてここで色々 ガチャガチャ動かして、そこで決まった アイデアをさらにMCBサーバーでコード に実装してもらうというような イテレーションが、え、に近づいていると いうことになります。で、こちらについて はもう利用できる状態にありますので、 是非皆さん、ま、今日のデザインシステム の話も含めてですね、え、色々と試して いただけるいい機会になればなと思って おります。 はい。ということで、え、この後も、え、 非常に、え、素晴らしいセッション続き ますので、最後までお楽しみいただければ と思います。え、皆さん引き続きよろしく お願いします。ありがとうございました。 [拍手] ひ樹さん、ありがとうございました。 [笑い] はい、素晴らしいデモで。 はい、ということでね、僕のイベント名物というかね、喋ったらすごい MC になるっていうものがたまにあるんですけど、どうでしたか? [笑い] えっと、そうですね、でもはあ、あんな風になるんだっていう、 [笑い] まだね、出たばっかりだね。 そうですね。初めて見たかもしれない。実際の ももしかしたらライブでもは世界初かもしれないね。あの、オンラインの公開してるもの以外は。 そうです。なんと世界初でも皆さんいかがでしたでしょうか? ありがとうございます。 是非ね、色々、ま、紹介したいろんなスロットとかもう少ししたら皆さんがに提供できたらなという感じではありますので、楽しみにしていただければと思っております。 はい。 かな、もうちょっとかな。 うん。うん。 はい。 それでは続きまして、三菱電気株式会社 統合デザイン研究所ライフクリエーション デザイン部山内孝志様。DX イノベーションセンターシステム連携企画 部柴田博吉様よりセレンリーデザイン システムの拡張戦略。独自ンターによる 品質担保とMCPサーバーの実装について お話しいただきます。 山内さん、柴田さん、よろしくお願いします。 [音楽] はい、こんにちは。 こんにちは。 あ、ありがとうございます。いや、こんなに大きい会場だと思ってなくてかなり緊張してます。あの、皆さん、あの、生温かい目で是非見てください。 はい、では、えっと、本日はあの セレンディデザインシステムの拡張戦略と いう名前で弊社のデザインシステムについ てお伝えしようと思ってます。はい。あの 、本当に非常に緊張してます。え、多分、 あの、私割とフィグマさんのイベントには 色々とこう顔出させていただいてるので、 もしかしたらこう私すでにこうおしぶりし ### [35:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=2100s) Segment 8 (35:00 - 40:00) もしかしたらこう私すでにこうおしぶりし たことがある人がいるかもしれないんです が、そういった方は、あの、是非拍手内と かそういった、あの、助けていただけると 非常にありがたいです。あ、ありがとう ございます。 え、まず自己紹介から始めさせてください。えっと、本日、え、先ほど紹介だきましたが柴田と山内 2 人で来ております。三菱電キです。で、まず、 はい、では、えっと、私、柴田博吉と申します。三菱電気の DX イノベーションセンターというところに所属してます。 で、私ですね、三菱延、え、新卒で入っ てるんですけど、最初の10年ぐらいは 自動車関係のエンジニアをしてまして、 カーナビのソフト作ったりですとか、え、 自動運転のソフトを作ったりしてました。 で、そこから、ま、研究開発部門を減って 、え、昨年からですね、原職DX イノベーションセンターというところに 所属しております。で、このDX イノベンションセンターというところが、 ま、三菱電気内でいう、え、ま、DXを 推進してくところなんですけど、ま、そこ がセレンディというのを、ま、相言葉に 実施しておりまして、ま、セレンディで何 だろうっておっしゃると思う方も いらっしゃると思うんですけど、これは あのセレディティっていう、え、偶然の 出会いがもたらす幸運っていうところと ディジタルエンジニアリングの増語となっ てます。で、ま、私のミッションとしては 、ま、本職的なところで言うと、ま、DX 関連の社内外のパートナーとの競争って いうところにはなるんですけれども、ま、 その傍原で、え、デザインシステムの、え 、開発運用っていうところにも携わって おりまして、ま、私自身あまりデザイナー ではないので、エンジニアの方でも使って いただけるような、え、デザインシステム の民主化っていうところを、え、推進して いってるっていうのがミッションになって ます。 はい。あの、今LINEを渡しにくれた、 あの、私の知り合の皆さん、ありがとう ございます。あの、ずっとポケットの中が 震えてました。[笑い] はい。で、えっと、私、はい、山内孝志と 申します。私は、あの、統合デザイン研究 所というデザイン部門ですね、そちらの ライフクリエーションデザイン部という ところに、え、所属しております。えっと 、元々は別の会社で働いていたんですが、 2014年から三菱電気のデザイン研究所 に入っております。で、ま、ちょっと ライフクリエーションデザイン部って何し てるんだって思われるかもしれないのです が、ま、コンシーマ向けのデザインですね 。あの、この部の中にはハードウェアです ね、え、切り紙だったり冷蔵庫だった りっていうそういったあのコンシマ向けの 三菱電気の家電のデザインをしてる部隊と 我々私のいる舞台ですね。そちらは、え、 今週向けのUI、UXのデザインをして おります。で、そういった中で、ま、今 マネージャーを2024年からやってます 。で、ミッションとしてはこちらの セレンディデザインシステムの ブラッシュアップであったり運営っていう ところと、ま、コンシマ向けの ソフトウェアのデザインとあとは、ま、 チーフマネジメント、ま、そういった ところをやっております。で、え、前半 今日は私の方からセンDデザインシステム の基本的なところていうのを紹介させて いただいて、後半は柴田の方にバトン タッチして話していきたいと思ってます。 はい。で、セレンディデザインシステムと いえば、ま、こちらの、え、フィグマ コミュニティの方に上がっている セレンディUIキットというのが、あの、 ていう印象を持たれる方が多いんじゃない かなと思ってます。ま、あの、知らなかっ た方は是非、あの、フィグマコミュニティ に行って7DUIキット調べて是非使って ください。で、こちら、あの、ちょっと あれな、ちょっと自慢なんですけど、あの 、Gマークのベスト100を去年いただき ました。あ、ありがとうございます。 ありがとうございます。で、ただ実はこの セレンディザーシステムというものはこの UIキットだけの存在ではなくて、もう 少し広い範囲をカバーしておるものになっ ております。え、ま、その辺りの話を ちょっとから始めたいかなと思っています が、その辺りの話っていうのはそもそも なんで我々がデザインシステムを作ろうと 思ったかみたいなところにすごくあの関連 するところなので、ま、23年少し時間を 遡って、ま、なぜ我々がデザインシステム を落としたかという背景から説明したいと 思います。 はい。で、ちょっとここに書いてあるこの 内容っていうのは少しあの、ま、マジかよ と思うような内容が少し並んでるところも あるんですが、まだあの3年ぐらい前の話 なので、あの、今はこんなことないので、 あの、大丈夫です。で、まず1つ必要され た理由の1つ目ですね。リソースの課題 ですね。その我々三菱電気実はあの モーターの会社でしてあのハードウェアの 会社なんですね、ま、ご存知と思いますが なのでどうしてもUIXデザイナーであっ たりあとフロントエンドエンジニアですね 人々が不足しているよと足りないよとあと どうしてもこのソフトウェアに対してま 理解がまだこうあのえあれですねんでい ないところがあって使いやすさとかそう いったところにお金を使うみたいなところ がなかなかこう難しいっていう時期もあり ました。あとその細かい調整ですね。その 最後のフィニッシュのところすごい デザイナーがこだわりたいところなんです が、なかなかそこに時間をかけるみたいな ことが、ま、人も足りないしお金も足り ないしみたいなのでなかなかできなかった ### [40:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=2400s) Segment 9 (40:00 - 45:00) ないしみたいなのでなかなかできなかった みたいな過去があります。で、そこと 繋がるような話なのですが2つ目が開発 スピードの課題ですね。こちらあの我々、 ま、ハードウェアのメーカーなのでどうし てもこうウォーターホールの開発っていう のが、ま、板についてると言いますか、ま 、そちらの方が責任の所材とかあとは品質 管理とかですね。ま、そういった、あの、 全体のワークフローを含めてウォーター ホールの方が都合が良かったりっていうま 、ところもあって、で、あとはどうしても この外中が多くなってしまう、あの、内省 、完全内とかなかなか難しいていう時代が あって、で、どうしてもこう外に頼まない と、頼まないといけないと、ま、そういっ た時にどうしてもこう、あの、早い、早い スピード、回復スピードっていうのはどう してもネックになってくるよと。で、 ちょっとあの、1番下これ、あの、もし、 あの、あれですね、日経の会社もしかし たらこううんうんと頷付いてくれる方 いらっしゃるかもしれないんですが、こう 使用書がWordとかExelとか、ま、 そういったあの、あの、もので作っている とで、ま、そういった課題が過去にあり ました。で、最後3つ目、統一性の課題 ですね。ま、こちらあの事業の書き値が 非常に高くて、ま、あのビジネスエリアが 違うと製品のサイクルも、ま、早いものだ と半年で新しいものが出る家電なんだった りっていうものから、ま、10年20年1 個作ってそれを永遠に使い続け るっていうま、発電所とかそういったあの プロダクトまでかなりあのバリエーション が豊かであのどうしてもあの横の横同士 みたいなのがしづらくてで似たようなこと をやってるけど別々で作ってるとか割と そういったことがああの、ありました。で 、ま、そういったものを解決するものとし て、ま、セレンディシステムは、ま、こう いったようなものでないといけないよって いうのがここに書いてあります。1つは、 あの、ちゃんとこうフィグマファイル、 デザイナー向けのものっていうのと エンジア向けのリアクトコードみたいな ものがしっかりセットになって提供されて いる必要があるなと。で、開発スピードの 課題に関しては車内外の誰でもクイックに 使えるっていうものになっていないといけ ない。最後の統一性の課題ですね。こちら 1番難しいところで、あの、ま、色々な リソースを提供することで、あの、解決 できるような話っていうと側面もあるん ですが、ま、大きいのはコミュニティって いうものをしっかり作っていくっていう ところかなと思ってます。で、そういった あの3つの課題を解決するためにセレディ デザインシステムとしてはこういった様子 を提供しています。 あれかな? ま、皆さんここあれですね、フィグマ ライブラリーとこちらがUIキットと呼ん でいるものなので、こちらが、ま、皆さん のイメージされるセレンディデザイン システムかもしれませんが、ま、もう少し 色々な要素が入ってます。ま、問いつつ、 ま、1番初めはUIキットから説明するん ですが、UIキットっていうものにはこう いったカラートークンであったり、ボタン とかこういった、え、ですね、プルダウン リスト、プルダウンのものだったりとか そういったようなコンポーネントだったり 、あとはこの下にちょこっと映っている アイコン、こっちですね。えっと、はい。 はい。ちょこっと映っているアイコンとか 、あとはこのですね、トークン、デザイン トークン系のこちらはフォントサイズとか を規定してるものなのですが、こういった フォントのサイズだったり、あとは ギャップですね、この見えないところ、 隙間の大きさみたいなものもちゃんとこう やって言葉で定義をして、大体これ同じ ものを使ってくと同じような密度感ででき ちゃうよみたいな、ま、そういったものが 、え、提供されているので、それをこう パチパチパチッと組み合わせていくとUI 画面っていうのが簡単にできますと。で、 こちら、あの、簡単な ログイン画面を作っているあのデモですね 。これ、あの、2分15秒ぐらいでこう パパっと作れちゃうんですが、今これ2分 ダラダラと流すとちょっとあのさすがにな のでかなり圧縮はしてるんですが、ま、 スピード感としては初めにライブラリーを 見込んでいろんなコンポネントを並べて いってで、オートレイアウトの設定をして で、あとあの色替えなんかの機能もカラー セットもいくつかバリエーションがあって 、それをこう変えていくことによって色々 な事業で同じ、ま、こういったあのログ イン画面なんで、何でも大体何でもいい みたいなところもちょっとちょっとあれ ですね、ちょっと口が悪かったですね。ま 、そういったあの使い回しをどんどんして いった方がいいような画面なんかは誰かが 作ったものっていうのを利用してね、 カラーを組み換えてそのブランドだったり プロダクトに合うような形であ、利用して いくと、ま、そういったことが簡単に できるというのがおですか? 大丈夫ですか? 時間大丈夫ですか? はい。で、はいっていうのが、ま、え、 デザイナー向けのUIキットみたいなもの ですね。で、もう1つギithubの方に 、え、コードも入ってまして、そちら見て いくと、ま、え、セレンディデザイン システムのリアクトコードっていうのが、 え、リアコンポネトっていうのが適用され ています。こちらも、え、キットと同じ ように完全に社外公開してますので、皆 ### [45:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=2700s) Segment 10 (45:00 - 50:00) ように完全に社外公開してますので、皆 さん、あの、今すぐ今から使っていただけ ます。で、ま、ま、ずっと使える状態なん ですがはい。で、そういったあの 、え、リソースだけではどうしてもあの 使い方だったり分かりにくいところがある ので、そういったことをドキュメンですね 、そういったもののドキュメントとして ガイドラインっていうあのウェブサイトも 公開しております。ま、その中には デザインの話であったり、あと コンポーネントの個別の話であったりとか 、あとは活用事例みたいなものとか、ま、 ニュースみたいなもの、ま、そういったも のっていうのでしっかりと使い方の説明で あったり、あの、理念の説明であったり、 ま、そういったことを、え、頑張ってやっ てます。 で、それに加えてこれはあの、今までの、 え、リソースの部分は社外に完全に公開し ていまして、ま、こちらの皆さんも使って いただけますし、我々が何かこう新しい プロジェクトを始める時に社外の新しい パートナーと何かをしますよっていう時も もう色々なあのNDAとか色々結ぶ前に もうこちら見てくださいねとこちら使って やりますっていうことを言えば、ま、 かなり早く開発が始められるので、ま、 そういった意味も込めて社外公開しており ます。その社外公開してない部分に関して 、ま、横同士のためにこの コミュニケーションのチャネルですね、 あの、Webブ、え、情報サイトであっ たり、あとは、ま、スラックのような チャットのベースの、ま、ま、チームです ね、ま、そういったものを使いながら横同 をしてなるべくこう無駄のないように、え 、デザインシステムを使っていけるような 体制っていうのを、ま、作って運営して いけるていう状態になります。で、ここ までが大体概要ですね。え、時間的には、 あ、いいですね。10 分ぐらいで終わろうと思ってたんで、ちょうどいいですね。で、ここからこ、ここからは柴田の方にバトンタッチをして、え、引き続き紹介していきたいと思います。 はい。 あ、ありがとうございます。ありがとうございます。 はい。ではここから柴田の方で引き継ぎます。 ま、今日私の方から大きく説明する内容2 つありまして、MCPサーバー独自の セレンディデザインシステムのMCP サーバーを作りましたという話と、もう1 つが、え、フィガのプライグインですね、 リンターを作りましたっていうこの2つを 主に説明していきます。1つ目、ちょっと もう動画が動いてしまってたんですけれど も、こちらがMCPサーバーを独自で作り まして、ま、MCPサーバー詳しい方も いらっしゃるかと思うんですけども、ま、 まず動くものを見ていただいて何ができる かっていうところですね。ちょっと下の方 切れてますけど、あのチャットで指示して 自然言語でUIを作っているところです。 ま、先ほどあの山さんの説明でもありまし たけれども、ログイン画面アプリのログ イン画面を作ってくださいとチャットに 指示して作ったところです。これ実速で 動いてるので、ま、1分ぐらいでできたか なと思います。で、えっと、テキストボ メールアドレスですとかパスワードって いうところのテキストボックスですとか ボタンの辺りがセリンデザインシステムの UIコンポーネントが使われています。ま 、あの、優先して使うっていうだけで、え 、全部のUIコンポネントがセレディ デザインシステムに入っているわけでは ないので、ま、足りないものは世の中に あるものを取ってきて組み合わせて作ると いうものですね。ま、こういうのがあると デザイナーでない方も簡単に自分でUIが 作れるっていうところがいいところかなと 思います。あとフィグマさんのフィマ MCPとも組み合わせて使うこともできる のでFIGで作ってたデザインをですね、 例えばリンクを貼り付けてこれを セレンリーデザインシステムの コンポネントに置き換えてくださいみたい な組み合わせの使い方も可能です。あと ですね、ちょっと動画は用意しなかったん ですけども、最近はコンポーネント作りに もMCPサーバー活用してまして、ま、 ここで言うテキストボックスですとか ボタン、ま、アコーディオンとか ステップスとか色々あると思うんですけど 、そういうコンポーネント作りをですね、 ま、デザイン自体はフィグマ上で作るん ですけども、そのフィグマのリンクを 貼り付けてAIに読み込ませて、MCP サーバーを活用して、え、ノ、ノー コードって言いますか、あの、自然言語 だけで手でプログラムを書かなくても デザインシステムのガイドラインに乗った ものをプログラミングリアクトコードを作 るっていうとこを実施してたりしてます。 で、次がですね、プラグイン独自プラグ インの話ですね。リンターと言ってた ところですね。ここ先ほど貴重講演で ほとんど同じようなものをちょっと見て しまったので、あの驚きが薄いかとは思う んですけども、我々も作ってます。で、 えっと、大きく分けまして2つ機能を持っ てまして、検証機能と相談機能っていう とこですね。今もうちょっと動画動かして しまってるんですけど、こちらは検証機能 というものでして、セレンデザイン システムに準拠してるかどうかっていう 観点で見てます。ま、色や文字や面規則 などですね。で、今動かしているところは とある作ってるUIをクリックして、え、 ちょっと戻しますね。 ま、クリックしますと駐のようなリンダー が出てきまして、ま、そこでチェックをし てもらいましたとするとこのUIには ボタンがセレDデザインシステムのボタン が使ってませんというような警告が出て ### [50:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=3000s) Segment 11 (50:00 - 55:00) が使ってませんというような警告が出て まして、ま、それを今直しましたという とこですね。 で、ちょっと飛ばしますけれども、で、 直し終わって改めてチェックすると、ま、 治ってます。あの、違反ありませんみたい なことになりました。 はい。で、こちらが、え、検証機能でして 、もう1つ相談機能ですね。こちらは、ま 、名前の通り相談が、あの、セレジ デザインシステムのガイドラインを熟地し たエキスパートに相談ができるというもの ですね。で、こちらもUIをクリックして 、今相談内容がですね、ま、バリアントと か色がどうですかっていうような相談内容 をしてまして、ここちょっとAIが動くん で時間かかるので少し飛ばしますが、 ま、ちょっと文字が早く出てるんですけど 、ま、名名キツちょっと待ってくださいね 。少し飛みますね。 ま、名前についてのアドバイス、現状の 名名で気になるポイントはこんなところ ですとか、えっと、おすめの名前はこんな 感じですっていうところを教えてくれたり ですとか、面名規則のガイドラインはこの ページには書いてますよですとか、ま、 こういう参考リンクから根拠を引っ張って きましたっていうようなところを出して くれてます。ま、単に相談してこうこうで すっていうだけではなくて、どうせばいい ですよっていうところまで教えてくれ るっていうところが良いところかなと思っ てます。で、こちらのプラグインの機能は ですね、え、今ネ戸中には3月中には社外 公開したいなと思い、今開発を進めていっ てるところです。そう、先ほど言い忘れた んですけど、MCPサーバーはちょうど 今日、ま、このイベントに合わして今日の 朝社外公開をしました。 で、最後ですねのトピックとしまして、え 、コンテンツは充実、それでも見ずに質問 が来る現実っていうところですね。小人数 運営vs無限の問い合わせま、我々三菱 天気、ま、グループ、グローバルで言うと 15万人社員がいます。ただ運営メンバー 、デザインシステムの運営メンバーは8人 ぐらいで回してます。で、実際コアナシ デザインシステムユーザーは車内で400 人ぐらいなんですけども、ま、徐々に増え ていってまして、ま、それが増え続けると 、ま、問い合わせなんかも増えてきて8人 で回せなくなってくるんですけれども、ま 、とはいえリソースに増やせるわけでは ないので、今のメンバーでなんとかできる ようにっていう工夫について話します。 で、まず車内ポータルを作ってまして、 そこでブートキャンプ、車内教育の動画 置いてたりですとか、最新の情報や活用 事例なんかを置いてたりしますが、ま、 あまりブートキャンプ動画も見ずに質問し てくる方なんかも結構いらっしゃったりは しまして、ま、右側がGギットで ディスカッション質問とか投げかけられる 場所を用意してるんですけども、ここに来 てる質問意見の例です。これ596番目 って書いているんで、ま、あの、かなりの 数がここに来たりします。で、これを1個 1個問い合わせ対しているのは、ま、現実 的じゃないので、ま、スケールできるよう なスケラブルな運営をしまして、こちらで もMCPサーバーを活用してまして、あの 、セレディデザインシステムのMCP サーバーですね。で、問い合わせツール 質疑応答ツールですね。こちら今質問内容 としては、え、セレンデザインシステムの コンポーネント一覧を教えてくださいって いうのを聞いてまして、ま、かなり早い 速度で返ってきてます。こういう コンボネントがありますよっていうとかで 、ま、他の使い方として、え、ま、 サンプルコードを作ってくださいというの を今打ってるところですね。 ま、とあるコンポネント使ったサンプル コードをくださいと。ま、するとこれ ぐらいの速度でサンプルコードを提供して くれたりします。 ま、今映したのは一例なんですけども、ま 、このような感じで、あの、よく来る質問 の大半がこのツールを使うことで回答 できることになって、皆、あの、エンド ユーザーの方からすると、え、自己解決 できるものが増えるので、ま、本当に人間 が回答しないといけないものだけを運営と しては回答できるということになり、ま、 かなり効率化できたんではない? できる ことがもう見込んでます。ちょっとこれも 最近リリースしたばっかなんで、ちょ定量 的な評価とかはできてないんですけども、 ま、そういうのを期待してます。 はい。えっと、こ、そうですね、以上で はい、三菱の発表を終わらせていただき ます。ありがとうございました。 [拍手] ありがとうございました。ありがとう ございました 。いや、なんかもう盛沢さんで ですね。結構皆さんこうセンディンシステムって結構ね、知ってる方はするんですけども、なかなか中の話を聞く機会ってあんまないのかなと思うので、素晴らしい機会だったなというのと、ま、かなりなんだろう、あの、現凶ですけど、 ### [55:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=3300s) Segment 12 (55:00 - 60:00) MCP サーバーとかいろんな取り組みが多くて素晴らしいなと思います。 はい。そうですね。なんか、あの、1 回聞いただけではもう1 回聞いてみたいななんていう方もいらっしゃると思うんですけれども、今回のこのイベント録画も、あの、後ほど公開する予定ですので、えっと、ピグマの、 そうですね、ピグマの公式の YouTube チャンネルがあるので、ま、そこで公開されるのと、で、公開されたタイミングでフィグマジャパンのあの X のアカウントとか、ま、僕のアカウントとかでも共有するので、え、是非チェックしていただければと思います。 はい。是非動画もチェックしてみてください。 さて、次のセッションです。続きまして、 株式会社メルカリバイスプレジデントオブ プロダクトエンジニアリングマーケット プレイス成田元様。デザインシステム デザインリードアブドラ アルカティブ様より、Next evolutionメルカリズデザイン システムについてお話いただきます。元き さん、あきさん、よろしくお願いします。 ヘイ。はい。え、株式会社メルカリで VP オブロダクトエンジニアリングマーケットプレスを務めておりますと申します。よろしくお願いします。え、本日は、え、ザネションオメルカリデザインシステムというタイトルで発表させていただきます。 え、メルカリのAIとデザインシステムの 取り組み、そしてあのフィグマさんの プロダクトがそこでどのような役割を担っ ているかについてあのご紹介させて いただきます。え、この発表2つのパート に分かれていて、最初の私のパートでは メルカニのデザインシステムを活用した あのAIの取り組みのオーバービューを 紹介いたします。で、後半のパートでは、 え、デザインシステムのリードデザイナー である秋より、え、メルカリのAI活用の 現時点での成果について、え、ディテール をご紹介させていただきます。 え、メルカリグループはあらゆる価値を 循環させ、あらゆる人の可能性を広げる ミッションと掲げています。え、 マーケットプレス事業のメルカリ及び finンテック事業のメルペメルコンを サービスとして運営しています。え、 メルカリ昨年よりAIネイティブ カンパニーへの組織変革に取り組んでい ます。え、プロダクト、仕事のやり方、 組織全てをAI中心に再構築し、AIの 進化を最大限に活用することでこのまでに ない成果を目指す。こちらを ダイラクションとして掲げ、え、AIの ツールの導入にとまらず働き方をゼロ ベースで見直し業務そのものをAIを前提 とした形へ抜本的に進化させていくことに 取り組んでいます。え、車内ではたくさん のAIプロジェクトが進行していますが、 え、本日の、え、イベントでですね、最も 関わりが深いのがプロジェクトオーロラ です。え、このプロジェクトはアイデアを 持つ全ての人がUXを生み出し最適機会を 導ける。え、こちらをミッションとして 掲げています。え、プロジェクトオーロラ では、え、ワークフローをこのように定義 していて、え、プロンプトからデザインを 生成し、それを検証し、コードへと変換し ていきます。え、AIの時代ではもうなん か普通のフローにはなってるかなと思うん ですけど、え、メルカリでは プロトタイピングの息を超えて我々がこう お客様にこう提供するプロダクション開発 で使えるレベルに高めていくということに チャレンジしています。 え、デザインシステムのAIの活用は ホットなトピックの1つだと思いますが、 え、メルカリでもこの1年弱、え、 デザインシステムをAIに活用するための チャレンジを続けています。 ま、この1年で本当にたくさんのツールが 市場に出てきたかなと思うんですけど、ま 、このプロジェクトの中でもたくさんの ツールを検証してきました。で、色々試し てみて分かったんですが、ま、やっぱり クオリティに課題があること、これが課題 かなと。プロトからUIは作れるんです けど、ま、一貫性や再現性に課題があり、 え、しかしメルカリで必要なものは やっぱりこう日々のプロダクション開発で 使えるクオリティなので、ここを目指せ ないかということに取り組んでいます。で 、一通りこうツールを、え、検証した後、 ま、メルカリが考えるAIネイティブな フローの実現には、え、フィグマさんの エコシステムを軸に添えて、え、これを 構築していくのがベストであるという判断 をしました。え、フィグマもうメルカリの 中ではこうプロダクト開発でみんながこう 触るツールであって、ま、他のツールと 比較しても、え、本当に優意性が高く、え 、またフィグマさんの改善スピードが とても早かったっていうこともこの決断に 至った要因です。 え、こちらのダイヤグラムが、え、 プロジェクトオーラで目指すワークフロー を分解したものになっていて、ま、各作業 工程で、え、紫のボックスがフィグマの フィグマさんのツール、赤いボックスが メルカリの内性ツールという風に分けて 書いてるんですが、え、そのいずれも デザインシステムを、え、コンテキストと して、え、参照しているところがポイント かなと思っています。え、つまりデザイン システムをエコシステムの中心として UIX開発のAIて部下を進めていこうと しています。 このようにデザインシステムは今非常に ### [1:00:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=3600s) Segment 13 (60:00 - 65:00) このようにデザインシステムは今非常に 重要な役割になっていて、え、ただし メルカリのデザインシステムはAIのため に始めたわけではなく、昔から運用をして いるものです。え、AIの時代において デザインシステムがあることでレバレッジ できるものがかなり増えだと思いますし、 組織として投資する価値もあるかなと思っ ています。一方デザインシステムにつあの 取り組みという点については、え、 メンテナンスし続ける覚悟も伴いますし、 組織にとって難しい問になるのではないか なと思っています。え、参考マテにこれ までメルカリがどのように、え、デザイン システムに取り組んできたかを紹介させて いただきます。え、メルカリは、え、4年 ほどですね、第3世代であるデザイン システム3の運用を続けてきたんですが、 生産性を上げるはずのデザインシステムが 逆に、え、開発のボトルネックとなるなど 課題を抱えていました。これを解決する ために2024年にデザインシステム4と いう次世代、え、デザインシステムの殺信 プロジェクトを始めました。え、ただ 2024年当時はデザインシステムのAI 活用は、ま、今ほどホットなトピックでは なく、え、なぜ今やるのか、なぜやらない といけないのかという、え、議論に たくさんの時間を用しました。一貫性、 裁量性、耐久性上げるという、え、方向性 は正しいのですが、時間と人をあのかける 必要もあるため、え、説明コストの高い テーマとなっていました。え、今ではAI を振る活用するために不可欠な位置づけと なっているかなと思っていて、ま、より 簡単に、え、説明責任を果たせるのでは ないかなと考えています。え、なかなか 始める前の説明が難しかったんですが、え 、このデザインシステム4を使ってくれる 、え、最初の車内のあの顧客ですねが車内 で見つかり、え、推進がしやすくなりまし た。え、昨年メルカリは、え、グローバル 版アプリをリスしているんですが、この アプリが、え、デザインシステム4の最初 のユーザーとなってくれました。この アプリのリリースに向けて、え、デザイン システムチームとしても全力コミットし ました。え、このように車内 プラットフォームで、え、は正しいこと やるだけではなく、え、車内の中であの 顧客を見つけて一緒に課題を解決し創して いくことも大事かなと思っています。この ように、え、進めてきたデザインシステム プロジェクトですが、え、AIの機体が 高まるにつれてデザインシステムへの車内 の期待も高まっていきました。え、ただ デザインシステムを、え、うまくAIに 活用できるエコシステムは、え、これから 、まあ、今から半年ぐらい前ですね、まだ 成熟しておらずプロダクションで、え、 使うというレベルには、え、まだまだ たくさんの課題がありました。で、そう いった課題を感じ始めた頃、え、昨年 スキーマ2025でフィグマさんから、え 、デザインシステム周辺機能の強化が発表 されて、え、あの、先ほどもお見せした このワークフローで、え、かけている ピースがたくさんあったんですが、え、 そのピースがいくつも埋まっていきました 。 え、フィグマさんのエコシステムを軸に 据えるという発言は、え、判断は間違って いなかったと思っていますし、え、今後も さらに磨き上げていただけることを期待し ています。え、メルカレはまさに今ですね 、このフローを実務で使える状態にして さらにプロダクト開発で、え、信頼される レベルまで制度を上げていくことに 取り組んでいます。 え、コードコネクトの導入などAIと デザインシステムの書き合わせの基盤が 整ってきたため、え、このクォーターから ですね、1月から実案件での運用を開始し ており、え、ちょうど昨日、レポートが 上がってきたんですが、え、シンプルに、 ま、クロードコードとかをですね、使って 、え、だけを使った場合と比較しても、ま 、このデザインシステムを組み込んだ上で AIを活用すると、え、2倍以上の速度を 、あ、出せるということが、ま、え、 取り組んでるプロジェクトの半分の4 プロジェクト中2プロジェクトですね、え 、結果として上がってきより、あ、非常に 良い取り組みができているのではないかな と思っています。まだまだ始まったばかり で、え、これから課題も出てくると思うん ですが、え、さらに改善を続けていけば より、え、開発の効率を上げていけるので はないかなと思っています。 え、ただ、え、組織としての浸透は まだまだこれからだと思っており、え、 メルカリの、え、日本のアプリにはですね 、まだまだ、え、古いデザインシステムで 構築された画面が残っています。え、 デザインシステムが本当の意味で、え、 使われるという状態にするためには、え、 デザインシステムの新しい世代である デザインシステム4が開発のベースライン になっていることが必要ですし、ここは デザイナーだけ、え、エンジニアリング だけで取り組んでも実現できないと思って いますし、え、リーダーシップの コミットメントやサポートも非常に重要だ と思っております。え、業務そのものを AIを前提とした形へ進化させていくため には、え、プロダクト開発に携わる人たち が仕事のやり方を変えていくことに、え、 他方面からコミットする必要があると思い ますし、え、ここはこれからのメルカリの 、え、宿題かなという風に思っております 。はい。え、私から以上となります。ここ からは、え、リードデザイナーの秋に バトンタッチし、え、具体的な成果につい てご紹介させていただこうと思います。 [拍手] はい。えっと、今日はメルカリDSの次の 進化についてちょっと話します。えっと、 これはボタンや色の話ではありません。 えっと、AIによって作るスピードは 大きく変わりましたが、えっと、それを いることはまだ人間と仕組みの問題です。 ### [1:05:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=3900s) Segment 14 (65:00 - 70:00) いることはまだ人間と仕組みの問題です。 えっと、私はあの、アルカブワブドラと 申しますが、ちょっと名前が長すぎるから みんな秋で呼んでます。えっと、デザイン チームであの、デザインをリードしてます 。えっとこの発表では、えっと、デザイン ライブリーからプロダクトを支える基盤を に変わっていくという話します。 えっと、これまで1番ボトルネックは作る ことでした。えっと、UI作れるのは デザイナーだけ。プロダクトにプロダクト できるのはエンジニアだけ。作ることは 限られた人に、えっと、限られた人にしか できない特別なスキルでした。でもそれは もう違います。今AIありますから。えっ と、誰でもUI作れるし、コピーもかける しコードだって生成できます。 えっと、作ることはそのものはもう驚く ほど簡単になりました。じゃあ全てうまく いくようなったのか? 実はそうじゃない。 えっと、むしろ今は難しくな、なってるの は揃えることは、えっと、難しくなってる のは、えっと、揃えるのことです。あ、 共通のルールがないままみんな自由に作り 始まると、えっと、プロダクトを良くなる ところか、えっと、どんどんバラついて いくところです。やり直し増えてなんか 違うが積み重ねて気づかない時にあの品質 が少しずつずれている。だからこそ今 改めてDSが重要になります。 えっと3それは参考終了やガイドライン州 ではありません。やる時は迷わないために 、えっと、判断をそのまま実行に変える 仕組みです。 作る誰か作ってもどんなスピードにでも ちゃんと同じ方向に進めるようにする。 作ることが周民化されて今プロダクトを強 さを何をどう揃えるかその収支 にあるのはデザインシステムです。 えっと、メルカリのDSはいくつかの段階 に減ってきました。最初は、えっと、最初 はデザインはファイルの浮き渡しです。 デザインは性的なファイルで、エンジニア がそれっぽく 実装をしてきました。次の次は共通の システムになりました。デザインと エンジニアリングが同じルール、同じ言語 を話せるようになりました。それは デザインシステムの影です。そして今AI のフェーズに入っています。ここで大事な のはAIがシステムに置き換えるわけでは ないです。 AIはすでにあるシステムがより早くより 広くに使えるようにします。 これは多分この発表で1番大事なポイント です。AIはスタート視点ではありません 。AIは今ある仕組みをそのまま強くし ます。ルールが弱いと問題は広くひげ開ぎ ます。でもルールが明確で判断をシステム の中に入っていればAIが良い進ま します。だからまず必要なのはAIでは ありません。 しっかりした動体です。 では私たちにとってしっかりした動体と いったなんだったのか。 まずは1つ目構造を持ったコンポーネント です。いか限りではなく状態にや バリエーションをはっきり定義されてる ものです。次にあのシマンティック トークンです。色はそのままではなく意味 を表せるトークンです。そして プロパーティーを持つコンポーネントです 。 10なんだけど壊れないそんな設計です。 最後にルールを説明するドキュメント 見た目ではなくいつなぜ使うのかを ちゃんと説明します。これがあることで人 もAIも正しい判断ができる。それが 私たちのしっかりした動体です。 で、メルカリはあの1つのプロダクトでは ありません。メルカリJP、メルペ、 メルカリグローバル。そしてこれから 新しい生まれる新しいサービスがあります 。それぞれにデザインシステムを作るのは ### [1:10:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=4200s) Segment 15 (70:00 - 75:00) 。それぞれにデザインシステムを作るのは コストも高く管理も大変です。だから 私たちは1つのシステムで全ての プロダクトを支える必要がありました。 ここで使ってるのはフィグマの機能 のエクテンデッドコレクションです。1つ のシステムで複数のサービスを管理します 。これはただ色の変るだけではありません 。例えば角丸を大きくして柔らかい印象に したりシャープにして硬い印象にすること もできます。中の構造は同じ。変れるのは 表現だけです。これが1番、これは1つの システムの多くのプロダクトを支える方法 があり方法です。 でもそれでもまだ問題がありました。 フィグマのデザインがどれよくて良くして も行動で同じ真実になる限りません。 引き渡したびに解釈が入ります。少し なずれが少しずつ積み重ねていく。そして 気づかないうちにデザインと実装が離れて います。 そこはコードコネクトは大きな転換点でし た。ポイントはコード出ることだけじゃ なくて毎回同じコードが出るということ です。フィグマのコンポーネントが実際に 使ってるコンポーネントに直接繋ってい ます。iOS、Android、Web 全てをサポートしてます。 デザインの判断がそのままプロダクション に反映されるようになりました。 じゃ、これからちょっとコード コネクトフィマMCPを使ってデモを見せ たいと思ってます。 えっと、これはあのフィグマであ、完成し たの画面です。このページのIDをコピー して クロードに作ってドプロンプトをあのし ます。最初はコード側のページはですね。 でもコードコネクトの助けでクラウドが 私たちのデザインシステムの コンポーネントを使って画面のあの 組み立ててます。 今作ってますね。で、これ、これ見たら ちゃんとDSのコンポーネント引っ張って あの画面を作りました。で、右の方に今と 多分バグを直してるからちょっと時間経っ たら右の方にあの画面作りました。これ 大事なのはAIが判断してるではなく システムが判断してるということですね。 えっとここ左はあのフィグマでオリジナル デザインです。で、真ん中はAIが最初に 作ったの画面です。見た目はとっても抜い てると思いますが、少しあのず類があり ます。例えばロゴがありません。あの プレースホルダーのもありません。そして フタのところにあるリンクが横にデザイン はない矢印があの追加されてます。 で、右はあの1回だけ修正お願いした後の 結果です。 今回は、あの、今はデザインと全く同じ あの、ものになりました。すごいポイント はただ1回だけのプロンプトでほぼ同じ デザイン とあのなりました。 えっと、じゃあ、えっと、これ、これが 私たち目指してるのあの未来です。DSは 目立たなくなります。でもそれは重要じゃ なくなるという意味ではありません。 正しい判断が自動で提供されるようになり ます。デザイナーだけでなく他の人も プロダクトを作れるようになります。 ただしこれVIPコーディングということ ではありません。ルールと制約画の上で 想像性が発揮できます。 で、今はまだやっぱりデザイナーが デザインしてるし、エンジニアが コーディングを書いております。で、これ からプロンプから正しい有愛と行動が出て きます。私たちたちはまさに今その仕組み を今作っています。 役割をなくすではありません。全体の レベルを引き上げがあげるということ。 私たちはあの目的です。 えっとこのスライドはちょっとさっきの 三菱さん紹介したのもらったのプラゲント をちょっと被ぶってるんですけどもここの ポイントはえっとこのプラゲン実際に僕 ### [1:15:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=4500s) Segment 16 (75:00 - 80:00) ポイントはえっとこのプラゲン実際に僕 自身が作ってるんですねあんまり コーディングのあの歴史あんま長くないん ですけどAIの助けでこういうプラギンも あの誰でも作るようになりました。あ、 すいません。 で、あの、 で、以前はエンジニアリングサポートが 必要でしたんですけど、でも今は デザイナー自身がプロトタイピングして テストしてそのままリリースできます。私 は作ったのプラギンをあのフレームを選ん でそこがあの自動レビューをできます。 そのフレーム選んだらそのデータがあの シャチビティに起こります。そして あらあ、そしてあのルールに基づいて チャchGBTがあの分成します。 はい。で最後にまとめんですけどAIに よってデザインシステムがいらなくなる わけではありません。むしろなくっては ならないものにななります。 で、スピードと品質を両立するために システムが必要です。以上です。 ありがとうございます。[拍手] ありがとうございました。なんか非常に 説得力のあるプレゼンテーションで、あの 、早速いろんなツールを使いこなしていて とてもありがとうございます。では、はい 。 はい。続きまして、アクセンENンチュア 株式会社オペレーションズエスペリエンス グループマーケティング コミュニケーション中園は樹様、 アクセンチュア株式会社アクセンチュア 夢みプロダクトデダライナー近藤よえ様 よりフィグマメイクを探求する アクセンチュア夢みチーム明治安田につい てお話いただきます。 中園さん、よしえさん、よろしくお願いします。 [音楽] はい、こんばんは。こんばんは。えっと、最後の枠となりますが、えっと、 [笑い] 20 分ぐらいですかね、よろしくお願いできればと思います。 え、フィグマメイクを探求する アクセンチャーゆみ、そしてチーム明治 安田といったところで、えっと、ちょっと 今明治安田様と、えっと、ご一緒させて いただいてる中でも、えっと、今フィグマ メイクっていったところの活用余地って いったところを、えっと、検討しており まして、そちらの内容をご紹介できればと 思っております。え、まず簡単に イントロダクションとしまして私たちの、 えっと、自己紹介、そして、えっと、明治 安様との取り組みについて簡単に背景をご 紹介できればと思っております。え、まず 改めまして私、中園のは樹と申します。え 、好きなフィグマプロはもちろんメイクと いったところになっておりますが、え、今 ある機能の中で1番なくなって欲しくない ものは、えっとカーソルチャットといった ところで、あの夜ちょっと ひそひそやるところが個人的にそして近藤 さんといったとこで何かすいません。 ちょっとマイクをすいません。でこで こぼコビでやらせていただいております。 はい。えっと本日はよろしくお願いします 。セ株式会社、え、 イみプロダクトデザイナーの近藤義えです 。えっと、本日はよろしくお願いいたし ます。 はい、すいません。ちょっとデコボコビで やらせていただいております。えっとです ね、簡単にですね、えっと、ちょっと 取り組みの内容ご紹介できればと思って おります。ま、えっと、弊社と、えっと、 明治様といったところで言うと、えっと、 パートナーシップ契約っていったところを 結ばせていただいておりまして、そちら 内容に関しましては、えっと、生成AIと いったところを活用した上で、ま、いかに 人の価値を最大化していくかっていった ところですね、えっと、検討しているさ中 でございます。ま、そこでですね、えっと 、実際に今ちょっと三菱電気様だったり メルカリ様っていったところで言うと デザインシステム通じたより開発を効率化 していくっていったところの文脈のお話が あったかなと思っておりますが、ちょっと 今回のお枠の中では主に結構ビジネスネ スっていったところの部署とのお話てあっ たり、そこでえっとコラボレーション クリエイティブっていったところをいかに 発揮するかっていったところでちょっと メイクの活用の方をお話しできればと思っ ております。で、明治安さっていった ところに関しましては、えっと、弊社の方 から、えっと、約4年ほど前ぐらいから、 えっと、関わりをもたらせていただいて おりまして、えっと、デザインムっていっ たところで、えっと、昨年ですかね、 グッドデザインシーといったところ、 えっと、受賞することができましたと。 ありがとう、ありがとうございます。すい ません。えっとこちらにはですね、えっと UI、いわゆるUIキットだけではなくて 、えっと、プロセスだったりかバランスっ ていったところを、えっと、規定したよう な内容も含んでおりますと。で、実際、 えっと、デザインムっていったところ、 ### [1:20:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=4800s) Segment 17 (80:00 - 85:00) えっと、デザインムっていったところ、 環境を構築していったところではあります が、先ほど申し上げた通りAIと、ま、 どう芸合していくかっていったところ、 えっと、ちょっと悩んでおりましたといっ たところで、えっと、こちらですね、夢み が、えっと、経営統合といったところで 実際、えっと、AIとの統合って言った ところのお話で言うと、実際にデザイナー だけではなくエンジニアリングっていった ところ力が、えっと、引きつ不可欠になっ てきますといったところで、えっと、実際 に、えっと、直近ですね、本当に12月 から別会社だったのがまさか合流する形と なりまして、えっと、実際に今夢みの メンバーと競争しているところでござい ます。で、実際夢みっていったところに 関しましては、えっと、フィギマの、えっ と、オフィシャルのサービスパートナーと いったところで実際に、えっと、こちらの 内容に関しましては、えっと、アクセとの 合流後も、えっと、継承させていただいて おりまして、パートナーとして、えっと、 引き続きフィグマさんと、えっと、色々な フィグマの使い方っていったところを模索 しているところでございます。前置きは これぐらいにしまして、えっと、AIの 対当と活用値っていったところをお話しさ せていただきます。えっと、従来の、えっ と、デザインムっていったところに関し ましては、えっと、環境の構築、えっと、 環境の整備及びプロセスていったところの 基盤の面が非常に強いところだったのかな と思っております。一貫したUIUXの、 えっと、品質の担保であったり、えっと、 制作スピードの向上、そして、えっと、 コラボレーション機会の喪失っていった ところになってきたかなと思っております 。では実際にAIの対当によって、じゃあ さらなる、ま、プロセスの効率化を目指し た時に、ま、どういったところに導入する のが、えっと、1番活用、ま、余地がある のかっていったところのお話にちょっと つげていきたいと思うんですが、えっと、 こちら、ま、えっとダブルダイヤモンド いわゆるフレームワークの1つではござい ますが、えっとdiscover、デフ、 デベロop、デリバーといったところで 発散収束をしていくようなフレームワーク でございますが、AIの得意な領域と デザインシステムが得意な領域っていった ところを考えた時に従来のデザイン システムが大きく強さを発揮するところて いったところに関しては実際に一貫した ものを作るっていったところのデリバーに 強く作用するものなんじゃないかなという 風に感じております。一方でじゃあAIが 得意なところってどこだろうっていった ところに関しましてはやはり大量の情報 多変数的な情報からえっとまを模索するで あったり量産するっていったところが非常 に強みがあるんじゃないかなと思っており ます。例えばで言いますと、ま、キャッチ コピーを10作ってであったりだとか、 そういったことが、えっと、プロンプトに よって可能かなと思っております。なので 、えっと、今回のお話で言いますと、特に ここのデベロップっていったところに強く 、えっと、フィグマメイクっていった ところが活用余地があるんじゃないかなと 思っておりますと。で、実際どういった形 で使っていくのがいいのかっていった ところについて次お話しさせていただき ます。こちらについてはやはりちょっと 先ほど谷さんからも、えっと、触れて いただいた部分はあるかと思いますが、 特にやはりプロトタイピングっていった ところが非常に、えっと、強みなんじゃ ないかなという風に思っております。実際 のワークフローに沿うと、ま、ビジネス 部門の方が企画構想しているところから デザイナーが入ったりするところもあり ますが、従来だと、ま、実際のイメージが 出来上がるまでちょっと数ヶ月を用したり 、ま、早くても数週間程度用するところが あったかと思いますと。で、またイメージ をそこまで、えっと、時間をかけた後に 共有してしまうとそがあったりだとかって いったところがあるかと思いますが、実際 にここでフィグマメイクを使うっていった ところに関しては、ま、もう即自その場で 生成してしまって、早ければもう1時間 以内に終わってしまうというようなところ が実現できるんではないかと思っており ます。で、これらの、えっと、プロセスを 通じてですね、ま、議論しながら作 るっていったところですね、従来だと議論 してから作るっていったところが、えっと 、プロセスとして大きな変革点になるん じゃないかなという風に思っております。 実際にビジネス部門の方とも、えっと、 特にですね、やり取りを通じて探索、 そして意思決定っていったところが、えっ と、今後もプロセス自体の変革っていった ところを生む箇所になるんじゃないかなと いう風に思っております。 で、ちょっとツらツらとお課いことを話していてもと思いますので、実際にちょっとどういった活用をしているのかっていったところを吉えさんの方からお話させていただければと思います。 はい。ではここからは夢みの方から、えっ と、実際にメイクを使っ、あ、フィギグマ メイクを使って、え、どのような形で、え 、こう探索を前進させるプロトタイピン グっていうところで進めているかっていう ところをご説明させていただければと思い ます。と、夢見ではAIを活用してこう アイディアを数時間から数日数日でこう 動か動く形にするポロトタイピング手法を 顧客に提供する価値としてえっとま進 していますとこう正解がこう見えにくい形 見えにくい状況で仮説をこう触れる形にし ### [1:25:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=5100s) Segment 18 (85:00 - 90:00) 見えにくい状況で仮説をこう触れる形にし て確かめてこう次の判断につげる速さだけ が目的ではなくてこう検討する議論するっ ていうところの価値を、え、上げることを 目的としています。で、今回のトークでは こうフィグマメイクを使って構想からこう 試作して議論して、そして学びを得 るっていうとこのループを回しやすくする こう夢みのケーパビリティだったりとか ユースケースをちょっとこれからご紹介さ せていただければと思います。 はい。ちょっと従来のデザイン プロトタイプとの比較なんですけれども、 ま、すでにヒ業メイクを使用されてる方も いらっしゃると思うので、ま、軽くなん ですけども、え、ヒグマメイクにより実質 プロトタイプのメリットとしてこう 立ち上げが早くて多くの人が作れるように なって、こう構想段階から動く検討がこう 触れるような形で、えっと、作れるところ があるのかなと思っております。 はい。では実際のこうフィギュアメイクの 活用ケースをちょっと3つちょっとあげた のでえっとそれぞれ説明させていただき ます。 で、1つ目ですね、こう高想段階の認識 すり合わせを想定して、ちょっとデモも 交えてはい。お話をさせていただきます。 と、これはちょっとその構想段階なので、 こう前提として、え、ま、具体的な要件 だったりとか決まってなくて、こう ターゲットだったりとか、ま、こういう風 に使いたいっていうケースだったり、 シナリオだったり、こう、こういう機能を 使いたいっていうイメージだけがある状況 ですね。なので、こうヒアリングだったり 、そのビジネスメンバーへのヒアリング だったり、企画書からプロンプを作成して 、え、ま、そのガイドラインとプロンプト の作成についてちょっとこれからご説明さ せていただければと思います。 はい。で、実際にこうメイクに関して、あ 、フィマメイクに関してはこう ガイドラインンっていうものと、ま、 プロンプドっていうものをこう 投化して、えっと、生成しているんです けども、まずガイドラインの方ですね。 ガイドラインに関してはこう検討違いの 方向にならないように生成なルールを記述 しています。ま、業種とかそのどのように 使うかっていうところにもよるので一概に どうっていうのはないんですけども、一例 として、ま、ちょっと今スライドに移って いる内容を記載しています。ま、ちょっと そのフィギュマさんの方からこう コンテキストが、ま、多ければ多いほど いいというわけじゃなくて、過剰だと ちょっとそのAIを混乱させるっていう風 にヒントが出されているので、結構特に 重要なものだけを追加するように推奨され ています。ま、ガイドラインの方ではこう 共通ルール憲法みたいなものを固定できる のでプロンプトとして今回やることだけに 集中できるので、ま、繰り返しやったり する時、ま、いくつもちょっと検討 プロダクトを作って比較したいよという時 に便利だったりします。 これと、ま、重要なそのプルンプドの方 ですね。で、最初のプルンプの構成につい ては、そのサイドの左側の方ですねのよう にそのフィギュマさんからその頻度が提示 されています。で、Eスケースにもよるん ですけども、今回のデモではこうビジネス メンバーも含めて、え、一緒に作りながら 議論できるっていうところをちょっと想定 しているので、その、ま、今回ちょっと仮 のプロジェクトではい、考えていきたん ですけれども、その想定でこのプロンプの 枠組を作りました。なので、こうUIの 例えばこのここにはカードコンポーネント を使ってくださいとか、ここにはボタンを 使ってくださいみたいな細かいUIの指定 は極力せずに、ま、議論の土台となるよう なプロトタイプを作成していくっていう ところをこう想定しています。で、こう 右側、えっと、スライドの右側が今回の プロトの枠組になります。UI要素はその レスポンシブにしてくださいとかモバイル ファーストにしてくださいといった最低限 の記述にしています。で、プロンプ枠組を もにそのチャATGPTとかそういった ところの他のAIをと対話しながらこう フィグマメイクに適した形にこう整形する と良いのかなと思っています。 はい。で、ここから実際にフィグマメイク 、あ、これはあのスライドに貼った、作っ たものになるんですけども、えっと、時間 の関係でその実際にプロト流して ガイドライン流していうことができないの で、え、 すい[笑い]ません。ありがとうござい ます。すいません。えっと、これちょっと 動画じゃなくてリアルタイムのデモなので ちょっと失敗したらすいません。 あれ? あ、ちょっと入っちゃった ということがはい。あれで、えっと、こちら左側がプロンプトになります。で、こちらの方は、えっと、ま、ちょっと見ていただくと分かるんですが ### [1:30:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=5400s) Segment 19 (90:00 - 95:00) 6、えっと、60 行程度になっています。で、こうしたこのさ、えっと枠組としてはさっきのものですね、はい。になるんですけども、こういった簡単な プロンプドでもこうス ケースとかシナリオに沿っ成することができます。 こちらは、えっと、こう、ま、見て分かる と思うんですけど、えっと、生命保険とか がこうライフイベントでこう変わ るっていう時にこう提案してくれるような ものを考えました。なので、こうだったら こうこうするといいよみたいな 提案をしてくれる 魔物に なりますね。で、これがこうち の内容に合わせて、えっと、これもその メイクの方に退職だったらこれを出して くださいとか、えっと、結婚だったらこれ を出してくださいとかっていうところは、 あの、投げてはいなくて、えっと、AIの 方で 考えてくれたもの、内容になります。 えっとこれは、えっと、 ジェミニの方で作成をしているんです けれども、ま、最近ご存知の方も多いと 思うんですけども、えっと、クロードの ソネットとオーパスの方が実装されたので 、こう全く同じプンブ太布を、えっと、 投げて 作って、あ、 見ております。ちょっとローディングが 入っちゃったんですけれども、えっと、 結構その同じ内容でも違ったアウトプット が出てくるので、結構面白いのか、面白い なと思っております。 あ、出た。これはソネットですね。 どちらかというとクロード2つの方がこう ロジックとかをよく考えてくれてるなと いう印象でして、えっと、より、ま、その 分より思考時間とクレジット、あの、AI クレジットを使うので、ま、そのユース ケースとかどういった状況で使うのかって いうところに合わせてこうモデルを こうどれにしようか。あ、これがオパス ですね。 結構見た目として大パスの方がちょっと 真面目な感じちょっとあの伝えづらいん ですがはい。なのかなと思っております。 はい。えっと、すいません。 はい。あれ? はい。 あれ? これってど、あ、なんか はい。え、すいません。[笑い] えっと、ま、今回はだいぶ抽象的な プロンプトなので、こう、オパスとかより もこう正地に、えっと、ま、オパスとかだ と結構正位置に考えてくれちゃったりする ので、ミニの方が向いていたりとか、えっ と、そういったところを考えてモデルを 選ぶといいのかなと思います。 はい。えっと、こ、その、えっと、 すり合わせの段階の活用ケースとしては、 こうビジネスメンバーの企画の枠組に沿っ て、こうプロムと化してフィギュアメイク で画面を生成しています。こう触れる、 こう具体イメージとして、えっと、こう 共有できるので 認識のずれが減って線や操作が見える化さ れて、こう足りないところが気づきやすく なります。結果として、こう短いサイクル で具体イメージをブラッシアップでする ことができるので、後程てのこう開発側 からの手戻りとかが減るなどといったこと にもつがってくるのかなと思っています。 ま、評価としてはこう見た目がいいとか、 あのかっこいいとかっていうところでは なくて、こう論点が出るか議論が進む かっていうところを、えっと、重視して 意思決定を前に進めています。はい。え、 ここからは提案の具体化のところですね。 えっと、ま、 こちらに関しては結構その想定しやすいの かなと思うんですけども、提案に加えて その動くプロダクトとして見せることが できるので、こうフィギュマデザインだっ たり、フィギュマメイク、ま、要件に応じ てオクロードコードだったりとかも使用し ながら動くプロダクト短い期間で 作り上げることができます。 で、こちら仮説検証のケースでは ヒアリングで分かったことをこうチームで 整理してまずは試せる形に落とし込んだ ケースがあります。ま、メイクとMCPを で、ま、そのデザイナーとエンジニアが チームになって、えっと、メイクとMCP ### [1:35:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=5700s) Segment 20 (95:00 - 100:00) チームになって、えっと、メイクとMCP で動くものを作って1週間で試してこう 見直して送り返す。で、大事なのはこの何 を確かめたいかとどう確かめるかをセット にして決めること。 で、成果は完成度ではなくて、こうどどう くらい学びを得たかっていうところを見て います。 ま、一方でちょっと武器踏むきがあるので 、えっと、あ、ま、現状のメイク、フィグ メイクだとですね、あるので、用途に 合わせてツールやプロセスを使い分けてい ます。 で、フィギュマメイクを使うと環境構築 だったりとか、こう共有方法だったりと かっていうちょっと式が高い部分をこう気 にせずにこう同じフィールドであの アイデアや要件を触れる形にして素早く 落とし込むことができますのでその結果と して議論が具体化して認識のずれが 見つかりやすくなって意思決定を前に進み やすくなります。はい。ま、こういった メリットがあるのかなと思っております。 こうデザイナーの役割はこうデザイン中心 だけにとまらずに検討マイル前に進める ための土台作りだったり構造作りだったり を担う方向にも広がってくるのかなという 風に思っています。ま、今回のものについ てはビジネスメンバーからも前向きな反応 をいただいているので、ま、こうした 取り組みを通してコラボレーションが活発 になってこうみんなで考える、みんなで 議論するっていうところが広がっていくっ ていうところを期待しています。ま、今後 もフィグマはどんどん進化していくと思っ ているので、ま、そういったところを捉え ながらはい、デザイナーも進化していく 必要があるなと思っています。 ま、ま、あと別の効果としてジュニア デザイナーの育成教材としての過事側面が あるかと思っていて、ま、従来デザイナー の育成においてはこう当人の、ま、センス だったりとかメンターだったに依存すると 思うんですけども、その あとメンター側のそのレビューも高等で 行われるものが多かったりとかして思考 回数がちょっと限られてたりもするんです けども、フィギュアメイクに関してはこう 考えたことをこう言語化して指示を行うな ので、ま、どのように手を動かすかって いうところよりもど、どう考えるかって いうところにフォーカスがあったので、 こうこれまでこう手を動かすっていう ところだけではなくて、こうデザインを 考える思考を早くあの身につけることが できると思っています。こう実際にメ治 安田さんの中でもメイクの研修を行ったん ですけども、結構交換色を得ています。 はい。 ま、フィギュアメイクに関しては、こう ジュニアデザイナーだったりとか非 デザイナーの言語化思考化のトレーニング としてこれからもこれからの人材に必要 不可欠なスキルを身につけるのにと感じて います。 はい、ここから告知になります。えっと、 2月26日にMCPについての書籍が発売 されます。 えっと、夢みのメンバーが執筆を参加していますので、よかったらネットワーキングで声をかけてください。執筆メンバー教 はい、いますね。はい、声かけてください。またアクセンチャーソングではのデザイナーを募集しています。業セミナーも開催予定なので、ご興味あれば是非。 [笑い] はい、ということでお聞きいただきありがとうございました。 [拍手] ありがとうございました。 ありがとうございました。どうでしたか? いや、こうフィゴメイクのね、いろんなモデル今選べる実は右上の設定画面から選べるんですけど、意外と僕もなかなか検証できたりってなかなかできてないので、ああいう結果とか、ま、オーバスはちょっと真面目だなとか聞けるのはね、ちょっと面白かったなと思います。 はい。うん。 そうですね。はい。以上でデザインシステムズ with FIGMA。東京の全てのセッションは終了です。 最後にクロージングとしてフィグマジャパンカントリーマネージャー川延弘明よりご挨拶させていただきます。ひろさんよろしくお願いします。 ありがとう。ありがとうございます。聞こえますかね? 大丈夫そうですね。はい。改めまして皆さんこんばんは。こんばんは。 え、先ほどあのご紹介いただきましたが フィグマジャパンのカントリー マネージャーをしております川と申します 。え、本日この会場、え、すごく、え、 満員で超満員の皆さんにお越しいただいた んですけど、ここにあのご来場いただい てる方以外にもオンラインで1000名を 、え、超える方に今、え、ご視聴いただい てるという風に聞いています。え、本当に ### [1:40:00](https://www.youtube.com/watch?v=B8hyvF0aBTw&t=6000s) Segment 21 (100:00 - 101:00) てるという風に聞いています。え、本当に お忙しい中ご参加並びにご視聴いただいて 本当にありがとうございます。え、また、 あの、本日素晴らしいセッションをお送り いただいたスピーカーの皆さん、え、また も、え、この、え、場をですね、お借りし て、え、感謝を申し上げたいと思いますし 、え、今一度、え、スピーカーの皆様に皆 様から、え、拍手をいただければと思い ます。 [拍手] はい、ありがとうございます。 え、今日、ま、AIのお話がたくさんあっ たんですが、AIによってより素早く プロダクトが、え、作られる、え、ことが 可能になった。 え、プロダクトを差別化するにはデザイン や皆さんの大胆な視点がより一層重要に なっています。我々フィグマとしては皆 さんと共により良い未来を一緒に形づくっ ていくためにやるべきことがたくさんある と、え、考えています。26年に入って、 ま、今回ご案内したものだけでなく、 すでに多くのフィグマメイクの アップデートであったり、今日もあのデモ も、え、してもらいましたが、クラウド コードと、え、フィグマの連携も、え、 強化して、え、すごくいい反響をいただい ています。ま、フィグマとしてはさらに 拡大、え、発展し、え、皆さんにより一層 価値のあるものを提供してまいりたいと 思います。 え、そして今年も、え、6月に、え、 フィグマの年ジカンファレンスコンフィグ をサンフランシスコで開催することが決定 しています。え、昨年には、え、フィグマ メイクを始めとした多くのプロダクトの リリースをしましたが、え、今年も、え、 是非、え、今からですね、期待をして いただきたいと思います。え、今後とも フィグマはAIを中心に進化しながら一方 で皆さんのデザイン、え、そしてクラフト を押し上げるために、え、たくさんの機能 であったり体験を提供してまいりたいと 思いますので、え、是非、え、ご期待を いただけたいと思います。え、本日は、え 、繰り返しになりますが皆さんお忙しい ところご参加いただきましてありがとう ございました。 --- *Источник: https://ekstraktznaniy.ru/video/17764*