Design Systems with Figma: Tokyo

1:41:51

Design Systems with Figma: Tokyo

Figma 17.03.2026 4 739 просмотров 106 лайков

Machine-readable: Markdown · JSON API · Site index

Смотреть на YouTube

Поделиться Telegram VK Бот

Транскрипт Скачать .md

Анализ с AI

Описание видео

本イベントはデザインシステムを構築・運用し、組織に浸透させていくための知見を得られる場です。 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/

Оглавление (21 сегментов)

Segment 1 (00:00 - 05:00)

[音楽] 本日はお忙しい中、デザインシステムズ withFIG東京にご来場いただきまして誠にありがとうございます。私、本日の司会進行を務めますフィグマジャパンコミュニティサポートスペシャリストおじ子と申します。どうぞ最後までお付き合いください。初めに皆様にご案内です。本日はオンライン配信も同時に行います。各者の SNSやブログ、メディアに写真が掲載される場合がございます。会場に参加されてる皆様が映り込む場合がありますので、あらかじめご了承ください。なお今回はオンラインのご質問には回答できませんのでご了承ください。本日のアジェンダです。終了後ネットワーキングのお時間もございますので是非ご参加ください。それでは最初のセッションを始めてまいります。最初のセッションはフィグマジャパンデザイナーアドボケート谷弘樹よりキーノートです。ひ樹さんよろしくお願いします。はい、え、皆さん改めましてこんばんは。え、ひグマのデザインアドボケイトの谷と申します。え、皆さん今日ご来場ありがとうございます。え、今日のイベント最初にですね、僕の方からキーノートという形で、ま、色々なアップデートの話とか、え、あるいは私たちのデザインシステムの向き合い方で最後にですね、ま、簡単なデモなどを、え、この時間でお届けしたいと思っております。ま、今日はかなり豪華なセッションというか、いろんな企業の方々の事例なども見れる貴重な機会となりますので、最後までお楽しみください。では、え、始めにですね、え、ま、デザインシステムですね、デザインムっていうのは、ま、優れたプロダクトを支える、ま、基盤と言えると思います。ま、チームが物づりを進めていく上で一貫性や整合性、明確さというのをそこにもたらします。で、デザインシステムというのは例えばそこにクラフトであるとかあるスケールであるとかそういったものはどちらかを選ぶというものではないと考えています。システムはそのどちらも実現するものだと考えており、ま、それがサポートするチームだったり、ま、プロダクトだったり、あるいはそのプラットフォームの数に関わらず機能できるものだと、え、考えてます。で、こう皆さんの中にはですね、ま、デザインシステムに取り組んでる方々はですね、ま、組織やプロダクトを横断していろんなこうたくさんのライブラリを管理してる方もいらっしゃるんじゃないかなと思います。で、多くの方はその複雑性というのに日々、え、向き合ってるのはないかなと思ってます。で、僕ら自身もですね、お客様の中で、え、ま、大体 1万7000ぐらいのバリアントを持つその、え、コンポネントセットを見たりとか、あるいはこう100万を超えるレイヤーを抱えるライブラリーというのも目にしてきてます。皆さんの多くはですね、ま、デザインシステムの運用していく中でもうコンポネント多くリリースしてドキュメントを更新してバグを修正してでアクセシビリティの向上に向かってということに頑張ってるかなと思います。で、あとはそのデザインシステムをただ作るだけじゃなくて、それに対する貢献モデルというか、どういう風に運用するかとかですね、そういうことを考えて何回も見直しながら、え、頑張ってると。で、時には車内でデザインシステムの使うための勉強から開催したり、スラックで質問を受けたりとかですね、ま、色々遅くまで頑張ってる方もいらっしゃるんじゃないかなと思います。ま、ですがデザインシステムというのはこれからさらに大きな存在へと進化していくと考えています。で、今日のデザインシステムというものはですね、ま、エンジニアとデザイナーをつぐ、いえば共通言語というものとなっていて、え、より皆さんがプロダクションにフォーカスできるための基盤となっています。これからはさらに新しい形、新しい想像のあり方というのを支える存在になると私たちは考えています。ま、典型的な例はですね、変化が現れているのは、ま、プロトタイピングみたいなところです。ま、チームにおけるプロトタイピングの向き合い方というのも AIの進化によって、ま、これまでとは

Segment 2 (05:00 - 10:00)

AIの進化によって、ま、これまでとは違う形で早くプロトタイプを生み出すというようなことも可能になってます。そのスピードと引き換えにただそこになんかこう不整合みたいなものを生み出しているという可能性があるんじゃないかなと。ま、そういった不整合と呼ばれているものを防ぐためにはそのデザインシステムに関する全ての情報を一次元管理するいわゆるそのシングルソースオブtoと呼ばれるものが必要となってきます。ま、フィグマはそれになり得うる存在だと私たちは考えています。デザインシステムがそのフィグマ上に存在して、ま、色々なリポジトリと連携し、ま、さらにMCPによって翻訳可能になることによって、ま、単なる性的なライブラリーということ以上のものになりると、ま、それによって、え、プロダクトの見た目であったり、ま、使い心地だったり、ま、いろんなものを支える生きたシステムに、え、進化すると考えてます。ま、だからこそですね、私たちは、ま、コードやドキュメント、そして満をまたがる、いろんな分散した情報源というのを統合して、ま、デダシステムを構成するいろんなコンテキストといったものを形成することを、え、重要視しています。ま、それによって、え、チームの開発というのを的確に例え、え、支えてAIから、あ、より多くの価値というのを引き出せるようにしていくというけ合い方をしています。で、私たちの目標っていうの明確で、より多くのその作り手の皆さんが加わる中でもその品質というのを上げていくということです。デザインシステムの未来というのは単なる効率化だけではなく、ま、チーム全体がクラフト性能の高いプロダクトを作るというところに、え、迅速に、迅速に質の高いものを生み出せるというところにすることが目的となっています。で、その瞬間に答えるために私たちがデザインシステムをどのように進化させているか、今日はその3つの取り組みについてお話しします。 1つはしなやかな設計。まず最初にフィグマのゼダシェムっていうのは、ま、柔軟であるべきだと考えてます。ま、それによって多くのアイデアをより早く試すことができるようになります。まず話すことはバリアブルズについてです。このバリアブルズと呼ばれる機能は大体 2年前ぐらいにリリースされました。これはフィグマにとってはデザインシステムを管理する上での大きなマイルストーンとになりました。で、今やこうバリアブルズがない環境というのは考えられないという方ももしかしたらいらっしゃるかもしれません。ま、僕は少なくともそうです。ま、ですが、ま、マルチブランドのデザインシステムというのを作る上ではこのバリアブルズのコレクション、そのバリブルズの塊というのをメンテナンスする負債というところが決して小さくなかったかなと思います。例えば40ものモードを持つ、その上限までモードを使い切ったコレクションというの作成してる会社さんもいます。ま、そうするとこのバリアブルズのモダルというのはこのぐらい膨り上がってしまって、ま、ここまで行ってしまうとそのベースになるものを更新するアップデートしていくだけでも、ま、何百何千の更新が手導で発生すると、ま、そういった連鎖的な負荷というのが発生していたというのがこれまでの状況です。ま、その上でこれらを使う側の体験というのもさらに分かりづらくなってしまう。ま、なのでフィグマの中でどうバリアブルズを柔軟に扱えるようにするかということに、え、私たちは向き合ってきました。そこで去年リリースしたのがこのエクステンデッドコレクションズというものです。これは非常に多くの方からご要望をいただいてたものでして、いわゆるこのマルチブランドのデザインシステムを管理するための新しい方法と言えます。これによりデザインシステムの作成者はですね、ま、いわゆるホワイトラベルというか、ま、カスタマイズを前提したデザインシステムというのを作ることができて、ま、車内のデザイナー、各プロダクトの担当のデザイナーっていうのはそのベースのコレクションをもに独自のテーマ拡張というものがしやすくなりました。これはただ複製ではなく親からの拡張という形なので、え、各先々のプロダクトの方は親の方で何か更新があった時はそれを簡単に引き継ぐことができます。一方で各ブランド特有の値の更新があった場合はその上書きされた値っていうのはちゃんとキープされるというところで、え、かなりそのマルチブランドの展開や複数のテーマの展開というところでかなり効果的なものになってるんじゃないかなと。で、これは現在エンタープライズプランのお客様からご利用いただけるようになっています。で、このリリースに合わせて、え、バリアブルズのモード数というのを各プランでも見直しました。まえ、チームや、え、デダシステムがスケールしていくとですね、やっぱ4つのモードでは足りないという声も大変多くいいてましたので、え、現在では、あ、今後はですね、え、プロフェッショナルプランでは4だったのが自由モード、え、オーガイゼーションプラン、ビジネスプランでは20モードまで利用できるようになっています。そうした柔軟性というのが求められるのは、ま、バリアブル図だけではありません。で、コンポネントもよりしなやかに使えるようになる必要がありますと。その実現に向けて、え、これも体望の機能としてスロットというものを提供してます。で、こちらはまだ皆さんの手元ではご利用

Segment 3 (10:00 - 15:00)

こちらはまだ皆さんの手元ではご利用いただけないんですけども、もうすぐあの利用できるのかなと思います。で、フィマのコンポーネントが最初にリリースされてからですね、やっぱりそこに制約がありました。ま、例えばドロップダウンリストみたいなコンポーネントを作った時に、ま、その中で多くのリストを格納するわけなんですけども、ま、そうするとその数をこう柔軟にするっていうことはかなり難しいという状況がありました。あかじめ多めに作って使う時にはいくつかを非表示にしたりとか場合によっては残念ながらデタッチをして、え、切り離してしまう。ま、そうしてしまうとデザインシステムの本体親のライブラリーとのコネクトがなくなってしまうのであまり意味がないことになってしまう。ま、スロットを使えばですね、そのインスタンス内にある独自のレイヤーというのを追加できるようになりまして、え、その中に簡単に他のインスタン、インスタンスだったり、え、他の要素を受け入れるということができるようになります。で、これはかなり使いやすさを高めるというところで、え、デタンシステムの良さと、え、その使いやすさを両立したものになります。ま、こちらについては後ほど、あの、最後にデモをしたいと簡単なデモをしたいと思います。で、最後にですね、ま、常にこういろんな変化、変更が起きている中で、ま、どのようにしてそのルックアフィールの立性というのを保つことができるかと。で、デザインシステムというのはブランドの一貫性や品質というのを維持するために構築するというのが1つの目的です。ま、だからこそいろんな検討だったり思考錯誤っていうのが、え、常にこう行われているわけなんですけども、その裏ではちゃんとシステムに準しているという状態を保てる、保たれているということが大事で、え、潜在的なギャップというのを、え、簡単に特定できるようにするべきだと。で、このようにここに、え、今映してある通り、若干ちょっと色味が違うとか、ちょっと角の丸みのサイズが違うみたいなところがいろんなところで起きるんじゃないかなと。で、この実現に向けてリリースする予定のものがチェックというものです。で、これはまだ、え、現代から早期アクセスということで、ええ、数名の方々に提供しているものとなります。ま、これはいわゆる、ま、リンターと呼ばれる類いのもので、え、例えばそのバリアブルズの中でバリアブ、え、バリアブルズが適用されてて欲しいところがバリアブルズではなく直接ハードコード、ま、16進数の値とかが、ま、指定されてたりする箇所を検知して、え、ここにはこういったバリアブルと使う方がいいという推奨をしたりとか、そういったことができるようになります。ま、これも後ほどデモでお見せします。ま、デザインを開発者に渡す前、ま、いる、え、私たちのデブモードで言えば、ま、レディデブというステータスに変えるタイミングとかで事前にチェックをして、え、どこにバリア物が適用されていないかとか、何か違ってるものがないかっていうのを検知して、ちゃんと安全にハンドオフできる状態を保つというガードレルのような機能になります。内部的にはそのレコメレコメーションっていうのは、え、私たちの内部で持ってるカスタムモデルがその文脈に適したバリアブルを提案すると、そういったことをできるようにしています。では次のトピックですね。え、次はコードベースの文脈いわゆるコードベースのコンテキストの話です。で、皆さんご存知の通り、ま、デザインシステムというのはこのビジュアル、ま、デザイン的な要素と、ま、コード、この両方で構成されている必要があります。で、コ動のオーサリングというのはですね、ま、現在におけるAIの最も魅力的な活用例の1つです。LL、LLMは、え、膨大なテキストデータを学習しているため、ま、非常に高い制度で、しかも多様なアプローチで、え、行動を書くことができます。しかしチームにとってはですね、ま、ただ書いてもらうだけではなく、自分たちの書き方に沿った行動を書いてくれるということが重要です。そしてそれを実現するにはツール側で皆さんが持っているそのコーディングスタイルというのを理解してる必要があるので、いわゆるエージェント型のコーディングツールというのはそのコードベースへのアクセスというのを受け入れることによってLLMがコードベースに沿ったコードをかけるようにします。ま、とはいえ、ま、それらは存在している、ま、行動の上での話というところで、新しいアイデア、新しいデザインに対してはどうかということです。で、私たちはみんなその新しいアイデアというのをこう、え、フィグマ上のプラットフォーム上でこそ、え、探求できてそこで磨き上げて、ま、具体化できるという風に信じています。ま、なのでフィグマはそうした検討内容というのは正しく実装される、検討内容っていうのは、つまりデザインされたものを正しく実装させるためにAI通路が必要とする関連するデザインに関するコンテキストというのを提供できます。 MCPはそのコンテキを提供することを可能にする、ま、標準仕様ということで、え、私たちは公式のフィグマMCP サーバーというのを構築しました。で、これにより関連するフィグマのコンテキストというのを全て吸収取得し、ま、アイデアを実際にデザインシステムを活用したコードへと迅速に変換することができるようになります。で、フィグマはですね、ま、どのようにして存在しているデザインシステムのコードというのを把握するのか。で、この課題に

Segment 4 (15:00 - 20:00)

というのを把握するのか。で、この課題については昨年こちらもリリースしたコードコネクトというものによって解決に近づきました。コードコネクトはすにそのCLI 、コアンドラインのバージョンというのは、え、数千のお客様に導入されておりまして、ま、コードベースのコンテキストというのを、え、フィグマに提供するための、ま、1つの方法で、え、活用されております。で、これまでそのコマンドラインのバージョンだったんですけども、ま、より UIで作業したいという方向けに、え、コードコネクトUIというものを新しく導入し始めました。で、これらの機能のコードコネクトUNと、え、コードコネクトに関しては、え、全てのオーガナイゼーションプラン、ビジネスプラン以上のお客様に提供されておりますので、ま、この中でも既でにご利用されてる方などいればですね、是非フィードバックをいただければ幸いです。加えてですね、え、一方でコードからアイデアを始めてデザインを磨きたいというケースも増えてきています。これはかなり本当につい最近、え、昨日昨いぐらいの話なんですけども、AI コーディングツールとヒグマの間でですね、そのシームレスなフローというのを作るための第1歩、ま、CODtoトゥンバスという機能を実は発表しました。ま、コードtoキャンバスというこれを使うとですね、ま、コードで実装されて、レンダリングされたUIをヒマのキャンバスに、え、再現する、編集可能なフレームとして、え、再現するということができます。で、私たちの考え方としてはですね、いろんなそのクラフトと呼びるような、え、磨き上げていくものっていうのは、ま、キャンバス上でこそ発揮されるものだと思ってます。そこの中で色々バリエーションを展開して、そこで直接的な操作で、え、探り合って探求していって、ま、その上で出来上がったものをまたさらにコードに戻すというようなサイクルというのを今目指しており、え、これからいろんなアップデートを皆さんに提供していきたいと考えています。いわばヒオ MCPサーバーというのはコードとそのデザインのキャンバスをつぐ、ま、接着剤のような、え、存在として考えています。そして3つ目の最後ですね。ま、デザインシステムを、ま、どのようにしてチーム全体に、え、開いていけるかどうか、PM やリサーチャーとか、ま、プロダクト作りにかかるわかる全てのメンバーが、ま、すでに使ってるツールの中でデザインシステムをどう活用できるかということにも向き合っています。で、冒頭でですね、ま、デザインシステムというのは、ま、デザインとエンジニアリングを、ま、統合するもの、ま、共通言語という話をしました。ま、そこでAIの登場によって、ま、チームがより、え、このこれらのデザインといったものを活用できる接点というものが変化してきています。なのでデザインシステムというのはチームの全てのメンバーを支えるものである必要があるということです。去年のコンフィグで私たちはフィグマメイクという製品を発表しました。え、そして多くの反響をいただいて実際多くの方々にご利用いただいてます。で、多くのチームがですね、ま、プランプトから好品質なプロトタイプを生み出していますが、とても多い質問というところはメイクにいかにして自分たちのデザインシステムを取り組むのか、活用するのかという声です。で、私たちは、え、昨年、ま、その取り組みというのを開始しました。まず始めたことは、ま、カラーやタイプグラフィー、ま、スペーシングといったいわゆるこうビジュアル的な要素というのを取り込めるようにしました。ま、これによって生成されるアウトプットがよりこの皆さんの、ま、ブランドを踏まえたもの、ま、デダンシステムに投集されたものに、ま、見えるようにはなってきました。で、そこから私たちはさらに一歩進んで、え、これからメイクキットというものを皆さんにお届けできればと進めています。で、メイクキットは、ま、これまでと同様に、ま、スタイル、え、スタイルであるとか、ま、バリアブルといった情報を、ま、活用しながらですね、ま、フィマのコンポーネントをもに新しいコードコンポーネントをメイクの中で作れる機能です。ま、これによって、ま、バリアントやプロポティスタイル情報っていうのが新しい行動としてメイクの中で表現されて、え、ま、かなり本番のアプリケーションに近いルック&フィールで、え、高品質なプロトタイプというのをメイクの中で作れるようになります。で、こちらもですね、かなり早く使いたいっていう声は頂いてるんですけども、現在はちょっとまだあのRSという形で提供してまして、ま、近術中に、え、またアップデートをお届けできるという見込みになっております。そしてですね、もう1つますに多くの皆さんがですね、え、実際絶対システムの中でいわゆるこの権िなコードのコンポーネントというのを持っている、え、会社の方もいらっしゃるかと思います。であればそれらをメイクで使えないかという声も多かったんですけども、これは今実現できるようになっています。メイクは NPNパッケージをインポートできるようになりました。ま、これによりオープンソースの、ま、ギッタムプライマーとか、ま、そういったデザインシステムのライブラリーをも取り組んで、え、プロタイプを作ることもできますし、え、もちろん自社で使っているデザインシステムをNPMセアなプライベートレジストリーに、え、公開してもらって、それを組織全体で活用するということも可能になっています。

Segment 5 (20:00 - 25:00)

可能になっています。というような形でですね、私たちはデザインシステムの向き合として3つのお話をさせていただきました。で、このデザインシステムの未来というものがですね、ま、どこに向かうのか、え、そして皆さんがそこの最前線にいるというところに僕ら、え、非常に大きな期待を寄せています。で、皆さんが今日紹介したよう新機能などを使ってですね、ま、柔軟に対応しながらそのデザインとコードの、ま、距離というのを縮めていって、よりそのスケールするチーム全体にとって価値のある値段システムを生み出していくというところに、え、支えられればと思いますし、是非そういった取り組みをしている、こういうこと考えているという方がいればですね、え、是非あのお聞き、え、できればなと思っております。ま、今日は、え、この後いろんなたくさんの事例などもあるんですけども、そこでもいろんなヒントを得て持ち帰っていただければと思いますし、ま、最後のネットワーキングでも是非お話ができればと思います。ということでですね、残り時間はまだ少しありますので、せっかくで一部昨日のデモを行いたいと思います。はい。あの、皆さんよければこうデモがこういい感じに見えた時、あの、拍手とかしてもらっても全然オッケーなので、あの、まだ大丈夫ですよ。うまくいったらしてください。お、まだ、まだです。[笑い] まだです。でもそういうのは好きです。はい。ではですね、初めにチェックについてお見せします。え、ま、この中にもいらっしゃると思うんですけど、ま、例えば自分がデザインシステムのオーナーで、ま、なんかこうコンポーネントを作ったりというとこでいろんなアイデアを探求したりすることがあると思います。ま、そうして、ま、いろんなオプション作って、ま、大体いい感じになったので、じゃ、これを実装してもらいたいなと進めていきます。え、ここでフィグマのデブモードにおいてはデリー4デブというステータスを切り替える機能があるんですけど、これを使うタイミングで、ま、要はここのデザインをチェックしますかという、え、ものが増えるようになります。で、ここでデザインを確認するとすると、今選んでいるこのオプション1とフレームに対する不整合をサストしています。で、何が起きてるかと言うと、ここのラベルのボタンところですね。ここが実は、え、選択してみるといわゆるバリアブルとかではなく直接重力士のコードが入れられてる状態です。で、それに対して、え、チェックデザインとしてはこのバリア物を使ってはどうかというサジストをしてくれてる状態。ただ、ま、あくまでサジストなので、ま、違う場合はクリックすれば他の候補が出てくるので、そこでテキスたものを選び、ま、チェックをすれば反映されるみたいなことが可能になっています。で、カラーだけではなく、え、ここでいううところのこのギャップですね、このオートレアウトのギャップの値もいわゆる16ピクセルみたいな、あ、16ピクセルみたいな直接的な値があれば、それはもしかしたらバリアブルズのサイズギャップラージじゃないですかみたいなサストをしてくれてるというのが今お見せしているものです。で、これらを全部適用してクリアすれば全て完了ということによって、で、これによって、え、より安心して開発に反フすることができるということです。一旦拍手もらってもいいです。大丈夫です。はい。[拍手] というのはいわゆる臨のような機能です。で、他のシナリオとしてはですね、え、ま、既存のいろんなこう画面を作っていくっていう時に例えばなんか画面作る時に他のところから持ってきて、とりあえず取り寄せて組み合わせて作るっていうことは結構よくあるかなと思います。で、走行してると1個1個の細かいディテールというところが抜け落ちてしまうところはあると思うんですけども、ま、今回はあの下のアクションのところから、え、チェックデザインというのを実行するということやっています。そうすると今度はこの左にあるこのタイマーみたいな、あのこれ、ま、動画のアプリみたいなイメージなんですけど、そこのタイムスパン、え、タイムスタンプのフレームの色が、あ、バリエブないとか、あるいはこの角のところ、4ピクセルの角丸のところが、ま、本来であればバリアブルであるべきだろうというサジストをしてくれてるので、ま、これも適用したりとかっていうことをやっていくことができます。で、ま、これらを一気に全て適用して終わらせるということもできます。で、これだけではなくてですね、ま、ちょっと別の観点でこれも実行してみると同じように、え、例えばこのフォントのスタイルに関しても、え、抜け漏れてるところがないかというチェックも入ってますし、え、変数の適用もありますし、で、ここはコントラストのチェックというのをしてくれてます。要は今この右の方で作られているのは実際作ったデザインなんですけど、この部分の背景色とのコントラストが甘いということで、え、W Aを満たすためのものであればこれを使うのはどうかという提案をしてくれてるということです。で、変わりました。あとはですね、え、よくそのいろんなファイルから引っ張ってきたりすると、え、自分が想定していないこのファイルでは使う予定じゃないライブラリーから似たものを引っ張ってくるっていうケースがあります。で、ここに今出てるものっていうのは

Segment 6 (25:00 - 30:00)

。で、ここに今出てるものっていうのはこの左上にあるこの矢印的なアイコンというのが、ま、本来は、え、この、え、アストラボードというライブラに関するものであって欲しいんですけど、ま、似たような全然違う。この場合だとアストラでもデモって、ま、別のファイルとか、あとは、え、全然コラボライブラリって別のファイルから引っ張ってきたバリア、バリアブルズだったりみたいなところが情報が出てます。なので、こういったものに関してもし違うのであれば、ま、これに関しては現在ちょっとここであの右の画面側で置き換える必要あるんですけど、そういったところのチェックもできるようになるというものです。これが、え、今回ちょっと時間も短いところなので、ま、チェックインズの大まかな概要というものになります。ま、この後お客様の事例の中でも自社のリンタープラグインの紹介などもあるんですけども、ま、フィグマのネイティブとしてもこういった機能も提供していくところですので、え、皆さんお持ちいただければと思います。そして、え、残りの時間で、え、スロット、スロットも結構待ちびてる方も多いと思うので、え、こちらも改めて、え、デモでご紹介しようと思います。で、今ですね、作っているこの画面ですね、この左側のペインなんですけども、ここは、え、チャットペインっていうコンポーネントを今入ってます。ま、なので、え、この部分が例えば、ま、何かこう塗りが変わるとですね、ま、インスタンス側である反対側の方にも反映されます。で、え、この中にですね、デザイン的にはこのカンバセーションというこのいるこの吹き出しっぽいものを入れたいんですね。で、今これを入れようとしてももちろん入らないです。なぜならインスタンスだから。で、これを実現するためには、うん、ま、例えばこれをちょっと複製して、え、でえ、デタッチしてこれをよいしょ。ま、詰め込んだものを用意してうん。例えばこうフィルドとかさっきのはデフォルトとか名前つけてコンポーネントにして、え、バリアントにしてで、ま、こっち側ではさっき作ったフィールドにして、まあ多いんで減らすかとか、ま、そういうことはやれるっちゃやれるんです。ただ増やすことはできませんみたいなところを解消するのがスロットです。具体的には今これメインコンポーネントがあります。で、スロットというこのいわゆるこのいろんなものを受け入れるエリアにしたいところを選択した状態で右にスロットに変換というものが使えるようになります。そうするとこのスロットのエリアに対する名前とか説明とか入れられるんですけど、ま、合わせてえっと優先されるインスタンスというものがありまして、ここに、ま、このUIのパターンの場合はもう基本的にこのカンバセーションっていうのを入れて欲しいので、え、カンバセーション、カンバセーションというのが入るように、ま、これは、ま、優先されるなので実際何でも入れられるんですけど、これが優先されて表示されます。で、作成するとここ今ピンク色に変わったのか分かりピンクに変わりましたと。で、このインスタンス側に行くとここにプラスボタンがあり、ここを押すとここにインスタンスが入れられるようになるということです。で、これはもうこの場でよいしょ増やすことができます。ま、ただそれだけじゃなくて、え、今僕らはこうAIを使ってコンテンツの置き換えということができるので、このマジックハンドルというものを使って伸ばせばここの内容が、あ、これですね。で、置き換えをするとここのダミーテキストというのもAIでリプレイするというようなこともできるようになります。 1回もらってもないですよ。すごい皆さんこう頷いてはいただいてるんですけど。はい。で、それ以外のケースとしては、え、今まで、ま、機能としては提供されてなかったテンプレートみたいな考え方も、え、利用は可能です。例えば、え、このよくある画面使用画面の枠組みたいなところも例えば、え、これかな? エリターテンプレートみたいなも大きなもものを用意して、ま、この中に入れるみたいなこともできます。ま、なので、ま、ユスケースによってはこういったテンプレート単位でコンポネントを管理してただ中は柔軟に置き換えられるようにするみたいなことも可能になってるので、え、皆さんの中ではこういったユスケースを想定して、え、スロットが使える時には、ま、色々と試していただければと思います。で、え、残り2分か。そうですね。

Segment 7 (30:00 - 35:00)

ます。で、え、残り2分か。そうですね。もう1個だけ一瞬だけおまけのでもさせてもらってもいいですか? と、最近発表したばかりの、え、キャンバスコードっていうものの本当に触りだけ一瞬お見せします。ま、何が起きるかっていうものをお見せする程度なのでリアクションが難しいかもしれないですけど、具体的にはクロードコードとの連携になります。あ、あざす。[笑い]で、え、まずですね、あの、何するかと言うと、ま、すでにコードがもう色々組んであって、ローカルで起動するものがあるとある状態だとします。で、サーバーを起動するとブラウの方に出てくるかな。起動しましたね。これはシンプルデータムって僕らがオープンソースで公開しているものです。で、今からやりたいことはこのフィグマのキャンバスにここのこのコードで組まれた内容を持ってくるということです。ま、色々とこうすにあのMCBサーブのセットアップはしてる状態ということで色はせてもらうんですけど、え、ここで、え、クラウドコード、クラウドコードに、え、ま、インデックスページを取ってきてくれるみたいなことを、ま、簡単に一旦言ってみます。そうす。そうすると中で、え、クロドが動いてですね、ま、仕組み的にベーシックな仕組みとしては、え、ローカルの今サーバーで動かしてるものなので、その中のコードにそのキャプチャーをするための javascriript差し込んでいます。で、今なんかこうぐるぐる動いていて、センディングtoに動いてます。そうするとここに編集可能なものが生まれるということです。ただそれだけではなく、あ、ありがとうございます。[拍手] それだけではまらず、ま、例えば特定の良さ取ってきたいっていう場合にはこのセレクトエレメントをしてクリックするとこのキャンバスに現れるということです。ありがとうございます。ま、これは僕らにとってはまだ第一歩というところであるんですけども、ま、ただこれだけでもですね、いわゆるコードの中で作ったものを色々並べてここで色々ガチャガチャ動かして、そこで決まったアイデアをさらにMCBサーバーでコードに実装してもらうというようなイテレーションが、え、に近づいているということになります。で、こちらについてはもう利用できる状態にありますので、是非皆さん、ま、今日のデザインシステムの話も含めてですね、え、色々と試していただけるいい機会になればなと思っております。はい。ということで、え、この後も、え、非常に、え、素晴らしいセッション続きますので、最後までお楽しみいただければと思います。え、皆さん引き続きよろしくお願いします。ありがとうございました。 [拍手] ひ樹さん、ありがとうございました。 [笑い] はい、素晴らしいデモで。はい、ということでね、僕のイベント名物というかね、喋ったらすごい MC になるっていうものがたまにあるんですけど、どうでしたか? [笑い] えっと、そうですね、でもはあ、あんな風になるんだっていう、 [笑い] まだね、出たばっかりだね。そうですね。初めて見たかもしれない。実際のももしかしたらライブでもは世界初かもしれないね。あの、オンラインの公開してるもの以外は。そうです。なんと世界初でも皆さんいかがでしたでしょうか? ありがとうございます。是非ね、色々、ま、紹介したいろんなスロットとかもう少ししたら皆さんがに提供できたらなという感じではありますので、楽しみにしていただければと思っております。はい。かな、もうちょっとかな。うん。うん。はい。それでは続きまして、三菱電気株式会社統合デザイン研究所ライフクリエーションデザイン部山内孝志様。DX イノベーションセンターシステム連携企画部柴田博吉様よりセレンリーデザインシステムの拡張戦略。独自ンターによる品質担保とMCPサーバーの実装についてお話しいただきます。山内さん、柴田さん、よろしくお願いします。 [音楽] はい、こんにちは。こんにちは。あ、ありがとうございます。いや、こんなに大きい会場だと思ってなくてかなり緊張してます。あの、皆さん、あの、生温かい目で是非見てください。はい、では、えっと、本日はあのセレンディデザインシステムの拡張戦略という名前で弊社のデザインシステムについてお伝えしようと思ってます。はい。あの、本当に非常に緊張してます。え、多分、あの、私割とフィグマさんのイベントには色々とこう顔出させていただいてるので、もしかしたらこう私すでにこうおしぶりし

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デザイナーであったりあとフロントエンドエンジニアですね人々が不足しているよと足りないよとあとどうしてもこのソフトウェアに対してま理解がまだこうあのえあれですねんでいないところがあって使いやすさとかそういったところにお金を使うみたいなところがなかなかこう難しいっていう時期もありました。あとその細かい調整ですね。その最後のフィニッシュのところすごいデザイナーがこだわりたいところなんですが、なかなかそこに時間をかけるみたいなことが、ま、人も足りないしお金も足りないしみたいなのでなかなかできなかった

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の方に、え、コードも入ってまして、そちら見ていくと、ま、え、セレンディデザインシステムのリアクトコードっていうのが、え、リアコンポネトっていうのが適用されています。こちらも、え、キットと同じように完全に社外公開してますので、皆

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デザインシステムのボタンが使ってませんというような警告が出て

Segment 11 (50:00 - 55:00)

が使ってませんというような警告が出てまして、ま、それを今直しましたというとこですね。で、ちょっと飛ばしますけれども、で、直し終わって改めてチェックすると、ま、治ってます。あの、違反ありませんみたいなことになりました。はい。で、こちらが、え、検証機能でして、もう1つ相談機能ですね。こちらは、ま、名前の通り相談が、あの、セレジデザインシステムのガイドラインを熟地したエキスパートに相談ができるというものですね。で、こちらもUIをクリックして、今相談内容がですね、ま、バリアントとか色がどうですかっていうような相談内容をしてまして、ここちょっとAIが動くんで時間かかるので少し飛ばしますが、ま、ちょっと文字が早く出てるんですけど、ま、名名キツちょっと待ってくださいね。少し飛みますね。ま、名前についてのアドバイス、現状の名名で気になるポイントはこんなところですとか、えっと、おすめの名前はこんな感じですっていうところを教えてくれたりですとか、面名規則のガイドラインはこのページには書いてますよですとか、ま、こういう参考リンクから根拠を引っ張ってきましたっていうようなところを出してくれてます。ま、単に相談してこうこうですっていうだけではなくて、どうせばいいですよっていうところまで教えてくれるっていうところが良いところかなと思ってます。で、こちらのプラグインの機能はですね、え、今ネ戸中には3月中には社外公開したいなと思い、今開発を進めていってるところです。そう、先ほど言い忘れたんですけど、MCPサーバーはちょうど今日、ま、このイベントに合わして今日の朝社外公開をしました。で、最後ですねのトピックとしまして、え、コンテンツは充実、それでも見ずに質問が来る現実っていうところですね。小人数運営vs無限の問い合わせま、我々三菱天気、ま、グループ、グローバルで言うと 15万人社員がいます。ただ運営メンバー、デザインシステムの運営メンバーは8人ぐらいで回してます。で、実際コアナシデザインシステムユーザーは車内で400 人ぐらいなんですけども、ま、徐々に増えていってまして、ま、それが増え続けると、ま、問い合わせなんかも増えてきて8人で回せなくなってくるんですけれども、ま、とはいえリソースに増やせるわけではないので、今のメンバーでなんとかできるようにっていう工夫について話します。で、まず車内ポータルを作ってまして、そこでブートキャンプ、車内教育の動画置いてたりですとか、最新の情報や活用事例なんかを置いてたりしますが、ま、あまりブートキャンプ動画も見ずに質問してくる方なんかも結構いらっしゃったりはしまして、ま、右側がGギットでディスカッション質問とか投げかけられる場所を用意してるんですけども、ここに来てる質問意見の例です。これ596番目って書いているんで、ま、あの、かなりの数がここに来たりします。で、これを1個 1個問い合わせ対しているのは、ま、現実的じゃないので、ま、スケールできるようなスケラブルな運営をしまして、こちらでもMCPサーバーを活用してまして、あの、セレディデザインシステムのMCP サーバーですね。で、問い合わせツール質疑応答ツールですね。こちら今質問内容としては、え、セレンデザインシステムのコンポーネント一覧を教えてくださいっていうのを聞いてまして、ま、かなり早い速度で返ってきてます。こういうコンボネントがありますよっていうとかで、ま、他の使い方として、え、ま、サンプルコードを作ってくださいというのを今打ってるところですね。ま、とあるコンポネント使ったサンプルコードをくださいと。ま、するとこれぐらいの速度でサンプルコードを提供してくれたりします。ま、今映したのは一例なんですけども、ま、このような感じで、あの、よく来る質問の大半がこのツールを使うことで回答できることになって、皆、あの、エンドユーザーの方からすると、え、自己解決できるものが増えるので、ま、本当に人間が回答しないといけないものだけを運営としては回答できるということになり、ま、かなり効率化できたんではない? できることがもう見込んでます。ちょっとこれも最近リリースしたばっかなんで、ちょ定量的な評価とかはできてないんですけども、ま、そういうのを期待してます。はい。えっと、こ、そうですね、以上ではい、三菱の発表を終わらせていただきます。ありがとうございました。 [拍手] ありがとうございました。ありがとうございました。いや、なんかもう盛沢さんでですね。結構皆さんこうセンディンシステムって結構ね、知ってる方はするんですけども、なかなか中の話を聞く機会ってあんまないのかなと思うので、素晴らしい機会だったなというのと、ま、かなりなんだろう、あの、現凶ですけど、

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て部下を進めていこうとしています。このようにデザインシステムは今非常に

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によって作るスピードは大きく変わりましたが、えっと、それをいることはまだ人間と仕組みの問題です。

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、メルペ、メルカリグローバル。そしてこれから新しい生まれる新しいサービスがあります。それぞれにデザインシステムを作るのは

Segment 15 (70:00 - 75:00)

。それぞれにデザインシステムを作るのはコストも高く管理も大変です。だから私たちは1つのシステムで全てのプロダクトを支える必要がありました。ここで使ってるのはフィグマの機能のエクテンデッドコレクションです。1つのシステムで複数のサービスを管理します。これはただ色の変るだけではありません。例えば角丸を大きくして柔らかい印象にしたりシャープにして硬い印象にすることもできます。中の構造は同じ。変れるのは表現だけです。これが1番、これは1つのシステムの多くのプロダクトを支える方法があり方法です。でもそれでもまだ問題がありました。フィグマのデザインがどれよくて良くしても行動で同じ真実になる限りません。引き渡したびに解釈が入ります。少しなずれが少しずつ積み重ねていく。そして気づかないうちにデザインと実装が離れています。そこはコードコネクトは大きな転換点でした。ポイントはコード出ることだけじゃなくて毎回同じコードが出るということです。フィグマのコンポーネントが実際に使ってるコンポーネントに直接繋っています。iOS、Android、Web 全てをサポートしてます。デザインの判断がそのままプロダクションに反映されるようになりました。じゃ、これからちょっとコードコネクトフィマMCPを使ってデモを見せたいと思ってます。えっと、これはあのフィグマであ、完成したの画面です。このページのIDをコピーしてクロードに作ってドプロンプトをあのします。最初はコード側のページはですね。でもコードコネクトの助けでクラウドが私たちのデザインシステムのコンポーネントを使って画面のあの組み立ててます。今作ってますね。で、これ、これ見たらちゃんとDSのコンポーネント引っ張ってあの画面を作りました。で、右の方に今と多分バグを直してるからちょっと時間経ったら右の方にあの画面作りました。これ大事なのはAIが判断してるではなくシステムが判断してるということですね。えっとここ左はあのフィグマでオリジナルデザインです。で、真ん中はAIが最初に作ったの画面です。見た目はとっても抜いてると思いますが、少しあのず類があります。例えばロゴがありません。あのプレースホルダーのもありません。そしてフタのところにあるリンクが横にデザインはない矢印があの追加されてます。で、右はあの1回だけ修正お願いした後の結果です。今回は、あの、今はデザインと全く同じあの、ものになりました。すごいポイントはただ1回だけのプロンプトでほぼ同じデザインとあのなりました。えっと、じゃあ、えっと、これ、これが私たち目指してるのあの未来です。DSは目立たなくなります。でもそれは重要じゃなくなるという意味ではありません。正しい判断が自動で提供されるようになります。デザイナーだけでなく他の人もプロダクトを作れるようになります。ただしこれVIPコーディングということではありません。ルールと制約画の上で想像性が発揮できます。で、今はまだやっぱりデザイナーがデザインしてるし、エンジニアがコーディングを書いております。で、これからプロンプから正しい有愛と行動が出てきます。私たちたちはまさに今その仕組みを今作っています。役割をなくすではありません。全体のレベルを引き上げがあげるということ。私たちはあの目的です。えっとこのスライドはちょっとさっきの三菱さん紹介したのもらったのプラゲントをちょっと被ぶってるんですけどもここのポイントはえっとこのプラゲン実際に僕

Segment 16 (75:00 - 80:00)

ポイントはえっとこのプラゲン実際に僕自身が作ってるんですねあんまりコーディングのあの歴史あんま長くないんですけどAIの助けでこういうプラギンもあの誰でも作るようになりました。あ、すいません。で、あの、で、以前はエンジニアリングサポートが必要でしたんですけど、でも今はデザイナー自身がプロトタイピングしてテストしてそのままリリースできます。私は作ったのプラギンをあのフレームを選んでそこがあの自動レビューをできます。そのフレーム選んだらそのデータがあのシャチビティに起こります。そしてあらあ、そしてあのルールに基づいてチャchGBTがあの分成します。はい。で最後にまとめんですけどAIによってデザインシステムがいらなくなるわけではありません。むしろなくってはならないものにななります。で、スピードと品質を両立するためにシステムが必要です。以上です。ありがとうございます。[拍手] ありがとうございました。なんか非常に説得力のあるプレゼンテーションで、あの、早速いろんなツールを使いこなしていてとてもありがとうございます。では、はい。はい。続きまして、アクセンENンチュア株式会社オペレーションズエスペリエンスグループマーケティングコミュニケーション中園は樹様、アクセンチュア株式会社アクセンチュア夢みプロダクトデダライナー近藤よえ様よりフィグマメイクを探求するアクセンチュア夢みチーム明治安田についてお話いただきます。中園さん、よしえさん、よろしくお願いします。 [音楽] はい、こんばんは。こんばんは。えっと、最後の枠となりますが、えっと、 [笑い] 20 分ぐらいですかね、よろしくお願いできればと思います。え、フィグマメイクを探求するアクセンチャーゆみ、そしてチーム明治安田といったところで、えっと、ちょっと今明治安田様と、えっと、ご一緒させていただいてる中でも、えっと、今フィグマメイクっていったところの活用余地っていったところを、えっと、検討しておりまして、そちらの内容をご紹介できればと思っております。え、まず簡単にイントロダクションとしまして私たちの、えっと、自己紹介、そして、えっと、明治安様との取り組みについて簡単に背景をご紹介できればと思っております。え、まず改めまして私、中園のは樹と申します。え、好きなフィグマプロはもちろんメイクといったところになっておりますが、え、今ある機能の中で1番なくなって欲しくないものは、えっとカーソルチャットといったところで、あの夜ちょっとひそひそやるところが個人的にそして近藤さんといったとこで何かすいません。ちょっとマイクをすいません。でこでこぼコビでやらせていただいております。はい。えっと本日はよろしくお願いします。セ株式会社、え、イみプロダクトデザイナーの近藤義えです。えっと、本日はよろしくお願いいたします。はい、すいません。ちょっとデコボコビでやらせていただいております。えっとですね、簡単にですね、えっと、ちょっと取り組みの内容ご紹介できればと思っております。ま、えっと、弊社と、えっと、明治様といったところで言うと、えっと、パートナーシップ契約っていったところを結ばせていただいておりまして、そちら内容に関しましては、えっと、生成AIといったところを活用した上で、ま、いかに人の価値を最大化していくかっていったところですね、えっと、検討しているさ中でございます。ま、そこでですね、えっと、実際に今ちょっと三菱電気様だったりメルカリ様っていったところで言うとデザインシステム通じたより開発を効率化していくっていったところの文脈のお話があったかなと思っておりますが、ちょっと今回のお枠の中では主に結構ビジネスネスっていったところの部署とのお話てあったり、そこでえっとコラボレーションクリエイティブっていったところをいかに発揮するかっていったところでちょっとメイクの活用の方をお話しできればと思っております。で、明治安さっていったところに関しましては、えっと、弊社の方から、えっと、約4年ほど前ぐらいから、えっと、関わりをもたらせていただいておりまして、えっと、デザインムっていったところで、えっと、昨年ですかね、グッドデザインシーといったところ、えっと、受賞することができましたと。ありがとう、ありがとうございます。すいません。えっとこちらにはですね、えっと UI、いわゆるUIキットだけではなくて、えっと、プロセスだったりかバランスっていったところを、えっと、規定したような内容も含んでおりますと。で、実際、えっと、デザインムっていったところ、

Segment 17 (80:00 - 85:00)

えっと、デザインムっていったところ、環境を構築していったところではありますが、先ほど申し上げた通りAIと、ま、どう芸合していくかっていったところ、えっと、ちょっと悩んでおりましたといったところで、えっと、こちらですね、夢みが、えっと、経営統合といったところで実際、えっと、AIとの統合って言ったところのお話で言うと、実際にデザイナーだけではなくエンジニアリングっていったところ力が、えっと、引きつ不可欠になってきますといったところで、えっと、実際に、えっと、直近ですね、本当に12月から別会社だったのがまさか合流する形となりまして、えっと、実際に今夢みのメンバーと競争しているところでございます。で、実際夢みっていったところに関しましては、えっと、フィギマの、えっと、オフィシャルのサービスパートナーといったところで実際に、えっと、こちらの内容に関しましては、えっと、アクセとの合流後も、えっと、継承させていただいておりまして、パートナーとして、えっと、引き続きフィグマさんと、えっと、色々なフィグマの使い方っていったところを模索しているところでございます。前置きはこれぐらいにしまして、えっと、AIの対当と活用値っていったところをお話しさせていただきます。えっと、従来の、えっと、デザインムっていったところに関しましては、えっと、環境の構築、えっと、環境の整備及びプロセスていったところの基盤の面が非常に強いところだったのかなと思っております。一貫したUIUXの、えっと、品質の担保であったり、えっと、制作スピードの向上、そして、えっと、コラボレーション機会の喪失っていったところになってきたかなと思っております。では実際にAIの対当によって、じゃあさらなる、ま、プロセスの効率化を目指した時に、ま、どういったところに導入するのが、えっと、1番活用、ま、余地があるのかっていったところのお話にちょっとつげていきたいと思うんですが、えっと、こちら、ま、えっとダブルダイヤモンドいわゆるフレームワークの1つではございますが、えっとdiscover、デフ、デベロop、デリバーといったところで発散収束をしていくようなフレームワークでございますが、AIの得意な領域とデザインシステムが得意な領域っていったところを考えた時に従来のデザインシステムが大きく強さを発揮するところていったところに関しては実際に一貫したものを作るっていったところのデリバーに強く作用するものなんじゃないかなという風に感じております。一方でじゃあAIが得意なところってどこだろうっていったところに関しましてはやはり大量の情報多変数的な情報からえっとまを模索するであったり量産するっていったところが非常に強みがあるんじゃないかなと思っております。例えばで言いますと、ま、キャッチコピーを10作ってであったりだとか、そういったことが、えっと、プロンプトによって可能かなと思っております。なので、えっと、今回のお話で言いますと、特にここのデベロップっていったところに強く、えっと、フィグマメイクっていったところが活用余地があるんじゃないかなと思っておりますと。で、実際どういった形で使っていくのがいいのかっていったところについて次お話しさせていただきます。こちらについてはやはりちょっと先ほど谷さんからも、えっと、触れていただいた部分はあるかと思いますが、特にやはりプロトタイピングっていったところが非常に、えっと、強みなんじゃないかなという風に思っております。実際のワークフローに沿うと、ま、ビジネス部門の方が企画構想しているところからデザイナーが入ったりするところもありますが、従来だと、ま、実際のイメージが出来上がるまでちょっと数ヶ月を用したり、ま、早くても数週間程度用するところがあったかと思いますと。で、またイメージをそこまで、えっと、時間をかけた後に共有してしまうとそがあったりだとかっていったところがあるかと思いますが、実際にここでフィグマメイクを使うっていったところに関しては、ま、もう即自その場で生成してしまって、早ければもう1時間以内に終わってしまうというようなところが実現できるんではないかと思っております。で、これらの、えっと、プロセスを通じてですね、ま、議論しながら作るっていったところですね、従来だと議論してから作るっていったところが、えっと、プロセスとして大きな変革点になるんじゃないかなという風に思っております。実際にビジネス部門の方とも、えっと、特にですね、やり取りを通じて探索、そして意思決定っていったところが、えっと、今後もプロセス自体の変革っていったところを生む箇所になるんじゃないかなという風に思っております。で、ちょっとツらツらとお課いことを話していてもと思いますので、実際にちょっとどういった活用をしているのかっていったところを吉えさんの方からお話させていただければと思います。はい。ではここからは夢みの方から、えっと、実際にメイクを使っ、あ、フィギグマメイクを使って、え、どのような形で、え、こう探索を前進させるプロトタイピングっていうところで進めているかっていうところをご説明させていただければと思います。と、夢見ではAIを活用してこうアイディアを数時間から数日数日でこう動か動く形にするポロトタイピング手法を顧客に提供する価値としてえっとま進していますとこう正解がこう見えにくい形見えにくい状況で仮説をこう触れる形にし

Segment 18 (85:00 - 90:00)

見えにくい状況で仮説をこう触れる形にして確かめてこう次の判断につげる速さだけが目的ではなくてこう検討する議論するっていうところの価値を、え、上げることを目的としています。で、今回のトークではこうフィグマメイクを使って構想からこう試作して議論して、そして学びを得るっていうとこのループを回しやすくするこう夢みのケーパビリティだったりとかユースケースをちょっとこれからご紹介させていただければと思います。はい。ちょっと従来のデザインプロトタイプとの比較なんですけれども、ま、すでにヒ業メイクを使用されてる方もいらっしゃると思うので、ま、軽くなんですけども、え、ヒグマメイクにより実質プロトタイプのメリットとしてこう立ち上げが早くて多くの人が作れるようになって、こう構想段階から動く検討がこう触れるような形で、えっと、作れるところがあるのかなと思っております。はい。では実際のこうフィギュアメイクの活用ケースをちょっと3つちょっとあげたのでえっとそれぞれ説明させていただきます。で、1つ目ですね、こう高想段階の認識すり合わせを想定して、ちょっとデモも交えてはい。お話をさせていただきます。と、これはちょっとその構想段階なので、こう前提として、え、ま、具体的な要件だったりとか決まってなくて、こうターゲットだったりとか、ま、こういう風に使いたいっていうケースだったり、シナリオだったり、こう、こういう機能を使いたいっていうイメージだけがある状況ですね。なので、こうヒアリングだったり、そのビジネスメンバーへのヒアリングだったり、企画書からプロンプを作成して、え、ま、そのガイドラインとプロンプトの作成についてちょっとこれからご説明させていただければと思います。はい。で、実際にこうメイクに関して、あ、フィマメイクに関してはこうガイドラインンっていうものと、ま、プロンプドっていうものをこう投化して、えっと、生成しているんですけども、まずガイドラインの方ですね。ガイドラインに関してはこう検討違いの方向にならないように生成なルールを記述しています。ま、業種とかそのどのように使うかっていうところにもよるので一概にどうっていうのはないんですけども、一例として、ま、ちょっと今スライドに移っている内容を記載しています。ま、ちょっとそのフィギュマさんの方からこうコンテキストが、ま、多ければ多いほどいいというわけじゃなくて、過剰だとちょっとそのAIを混乱させるっていう風にヒントが出されているので、結構特に重要なものだけを追加するように推奨されています。ま、ガイドラインの方ではこう共通ルール憲法みたいなものを固定できるのでプロンプトとして今回やることだけに集中できるので、ま、繰り返しやったりする時、ま、いくつもちょっと検討プロダクトを作って比較したいよという時に便利だったりします。これと、ま、重要なそのプルンプドの方ですね。で、最初のプルンプの構成については、そのサイドの左側の方ですねのようにそのフィギュマさんからその頻度が提示されています。で、Eスケースにもよるんですけども、今回のデモではこうビジネスメンバーも含めて、え、一緒に作りながら議論できるっていうところをちょっと想定しているので、その、ま、今回ちょっと仮のプロジェクトではい、考えていきたんですけれども、その想定でこのプロンプの枠組を作りました。なので、こうUIの例えばこのここにはカードコンポーネントを使ってくださいとか、ここにはボタンを使ってくださいみたいな細かいUIの指定は極力せずに、ま、議論の土台となるようなプロトタイプを作成していくっていうところをこう想定しています。で、こう右側、えっと、スライドの右側が今回のプロトの枠組になります。UI要素はそのレスポンシブにしてくださいとかモバイルファーストにしてくださいといった最低限の記述にしています。で、プロンプ枠組をもにそのチャATGPTとかそういったところの他のAIをと対話しながらこうフィグマメイクに適した形にこう整形すると良いのかなと思っています。はい。で、ここから実際にフィグマメイク、あ、これはあのスライドに貼った、作ったものになるんですけども、えっと、時間の関係でその実際にプロト流してガイドライン流していうことができないので、え、すい[笑い]ません。ありがとうございます。すいません。えっと、これちょっと動画じゃなくてリアルタイムのデモなのでちょっと失敗したらすいません。あれ? あ、ちょっと入っちゃったということがはい。あれで、えっと、こちら左側がプロンプトになります。で、こちらの方は、えっと、ま、ちょっと見ていただくと分かるんですが

Segment 19 (90:00 - 95:00)

6、えっと、60 行程度になっています。で、こうしたこのさ、えっと枠組としてはさっきのものですね、はい。になるんですけども、こういった簡単なプロンプドでもこうスケースとかシナリオに沿っ成することができます。こちらは、えっと、こう、ま、見て分かると思うんですけど、えっと、生命保険とかがこうライフイベントでこう変わるっていう時にこう提案してくれるようなものを考えました。なので、こうだったらこうこうするといいよみたいな提案をしてくれる魔物になりますね。で、これがこうちの内容に合わせて、えっと、これもそのメイクの方に退職だったらこれを出してくださいとか、えっと、結婚だったらこれを出してくださいとかっていうところは、あの、投げてはいなくて、えっと、AIの方で考えてくれたもの、内容になります。えっとこれは、えっと、ジェミニの方で作成をしているんですけれども、ま、最近ご存知の方も多いと思うんですけども、えっと、クロードのソネットとオーパスの方が実装されたので、こう全く同じプンブ太布を、えっと、投げて作って、あ、見ております。ちょっとローディングが入っちゃったんですけれども、えっと、結構その同じ内容でも違ったアウトプットが出てくるので、結構面白いのか、面白いなと思っております。あ、出た。これはソネットですね。どちらかというとクロード2つの方がこうロジックとかをよく考えてくれてるなという印象でして、えっと、より、ま、その分より思考時間とクレジット、あの、AI クレジットを使うので、ま、そのユースケースとかどういった状況で使うのかっていうところに合わせてこうモデルをこうどれにしようか。あ、これがオパスですね。結構見た目として大パスの方がちょっと真面目な感じちょっとあの伝えづらいんですがはい。なのかなと思っております。はい。えっと、すいません。はい。あれ? はい。あれ? これってど、あ、なんかはい。え、すいません。[笑い] えっと、ま、今回はだいぶ抽象的なプロンプトなので、こう、オパスとかよりもこう正地に、えっと、ま、オパスとかだと結構正位置に考えてくれちゃったりするので、ミニの方が向いていたりとか、えっと、そういったところを考えてモデルを選ぶといいのかなと思います。はい。えっと、こ、その、えっと、すり合わせの段階の活用ケースとしては、こうビジネスメンバーの企画の枠組に沿って、こうプロムと化してフィギュアメイクで画面を生成しています。こう触れる、こう具体イメージとして、えっと、こう共有できるので認識のずれが減って線や操作が見える化されて、こう足りないところが気づきやすくなります。結果として、こう短いサイクルで具体イメージをブラッシアップですることができるので、後程てのこう開発側からの手戻りとかが減るなどといったことにもつがってくるのかなと思っています。ま、評価としてはこう見た目がいいとか、あのかっこいいとかっていうところではなくて、こう論点が出るか議論が進むかっていうところを、えっと、重視して意思決定を前に進めています。はい。え、ここからは提案の具体化のところですね。えっと、ま、こちらに関しては結構その想定しやすいのかなと思うんですけども、提案に加えてその動くプロダクトとして見せることができるので、こうフィギュマデザインだったり、フィギュマメイク、ま、要件に応じてオクロードコードだったりとかも使用しながら動くプロダクト短い期間で作り上げることができます。で、こちら仮説検証のケースではヒアリングで分かったことをこうチームで整理してまずは試せる形に落とし込んだケースがあります。ま、メイクとMCPをで、ま、そのデザイナーとエンジニアがチームになって、えっと、メイクとMCP

Segment 20 (95:00 - 100:00)

チームになって、えっと、メイクとMCP で動くものを作って1週間で試してこう見直して送り返す。で、大事なのはこの何を確かめたいかとどう確かめるかをセットにして決めること。で、成果は完成度ではなくて、こうどどうくらい学びを得たかっていうところを見ています。ま、一方でちょっと武器踏むきがあるので、えっと、あ、ま、現状のメイク、フィグメイクだとですね、あるので、用途に合わせてツールやプロセスを使い分けています。で、フィギュマメイクを使うと環境構築だったりとか、こう共有方法だったりとかっていうちょっと式が高い部分をこう気にせずにこう同じフィールドであのアイデアや要件を触れる形にして素早く落とし込むことができますのでその結果として議論が具体化して認識のずれが見つかりやすくなって意思決定を前に進みやすくなります。はい。ま、こういったメリットがあるのかなと思っております。こうデザイナーの役割はこうデザイン中心だけにとまらずに検討マイル前に進めるための土台作りだったり構造作りだったりを担う方向にも広がってくるのかなという風に思っています。ま、今回のものについてはビジネスメンバーからも前向きな反応をいただいているので、ま、こうした取り組みを通してコラボレーションが活発になってこうみんなで考える、みんなで議論するっていうところが広がっていくっていうところを期待しています。ま、今後もフィグマはどんどん進化していくと思っているので、ま、そういったところを捉えながらはい、デザイナーも進化していく必要があるなと思っています。ま、ま、あと別の効果としてジュニアデザイナーの育成教材としての過事側面があるかと思っていて、ま、従来デザイナーの育成においてはこう当人の、ま、センスだったりとかメンターだったに依存すると思うんですけども、そのあとメンター側のそのレビューも高等で行われるものが多かったりとかして思考回数がちょっと限られてたりもするんですけども、フィギュアメイクに関してはこう考えたことをこう言語化して指示を行うなので、ま、どのように手を動かすかっていうところよりもど、どう考えるかっていうところにフォーカスがあったので、こうこれまでこう手を動かすっていうところだけではなくて、こうデザインを考える思考を早くあの身につけることができると思っています。こう実際にメ治安田さんの中でもメイクの研修を行ったんですけども、結構交換色を得ています。はい。ま、フィギュアメイクに関しては、こうジュニアデザイナーだったりとか非デザイナーの言語化思考化のトレーニングとしてこれからもこれからの人材に必要不可欠なスキルを身につけるのにと感じています。はい、ここから告知になります。えっと、 2月26日にMCPについての書籍が発売されます。えっと、夢みのメンバーが執筆を参加していますので、よかったらネットワーキングで声をかけてください。執筆メンバー教はい、いますね。はい、声かけてください。またアクセンチャーソングではのデザイナーを募集しています。業セミナーも開催予定なので、ご興味あれば是非。 [笑い] はい、ということでお聞きいただきありがとうございました。 [拍手] ありがとうございました。ありがとうございました。どうでしたか? いや、こうフィゴメイクのね、いろんなモデル今選べる実は右上の設定画面から選べるんですけど、意外と僕もなかなか検証できたりってなかなかできてないので、ああいう結果とか、ま、オーバスはちょっと真面目だなとか聞けるのはね、ちょっと面白かったなと思います。はい。うん。そうですね。はい。以上でデザインシステムズ with FIGMA。東京の全てのセッションは終了です。最後にクロージングとしてフィグマジャパンカントリーマネージャー川延弘明よりご挨拶させていただきます。ひろさんよろしくお願いします。ありがとう。ありがとうございます。聞こえますかね? 大丈夫そうですね。はい。改めまして皆さんこんばんは。こんばんは。え、先ほどあのご紹介いただきましたがフィグマジャパンのカントリーマネージャーをしております川と申します。え、本日この会場、え、すごく、え、満員で超満員の皆さんにお越しいただいたんですけど、ここにあのご来場いただいてる方以外にもオンラインで1000名を、え、超える方に今、え、ご視聴いただいてるという風に聞いています。え、本当に

Segment 21 (100:00 - 101:00)

てるという風に聞いています。え、本当にお忙しい中ご参加並びにご視聴いただいて本当にありがとうございます。え、また、あの、本日素晴らしいセッションをお送りいただいたスピーカーの皆さん、え、またも、え、この、え、場をですね、お借りして、え、感謝を申し上げたいと思いますし、え、今一度、え、スピーカーの皆様に皆様から、え、拍手をいただければと思います。 [拍手] はい、ありがとうございます。え、今日、ま、AIのお話がたくさんあったんですが、AIによってより素早くプロダクトが、え、作られる、え、ことが可能になった。え、プロダクトを差別化するにはデザインや皆さんの大胆な視点がより一層重要になっています。我々フィグマとしては皆さんと共により良い未来を一緒に形づくっていくためにやるべきことがたくさんあると、え、考えています。26年に入って、ま、今回ご案内したものだけでなく、すでに多くのフィグマメイクのアップデートであったり、今日もあのデモも、え、してもらいましたが、クラウドコードと、え、フィグマの連携も、え、強化して、え、すごくいい反響をいただいています。ま、フィグマとしてはさらに拡大、え、発展し、え、皆さんにより一層価値のあるものを提供してまいりたいと思います。え、そして今年も、え、6月に、え、フィグマの年ジカンファレンスコンフィグをサンフランシスコで開催することが決定しています。え、昨年には、え、フィグマメイクを始めとした多くのプロダクトのリリースをしましたが、え、今年も、え、是非、え、今からですね、期待をしていただきたいと思います。え、今後ともフィグマはAIを中心に進化しながら一方で皆さんのデザイン、え、そしてクラフトを押し上げるために、え、たくさんの機能であったり体験を提供してまいりたいと思いますので、え、是非、え、ご期待をいただけたいと思います。え、本日は、え、繰り返しになりますが皆さんお忙しいところご参加いただきましてありがとうございました。

Другие видео автора — Figma

Ctrl+V

Экстракт Знаний в Telegram

Экстракты и дистилляты из лучших YouTube-каналов — сразу после публикации.

Подписаться

Лучшие методички за неделю — каждый понедельник